[cheech74]

I want to create a photo gallery in flash, where the pics can be modified using xml.
i want the user to click on a thumbnail & a new window to open with the larger image. but I want the thumbnails to look like they are photos just scattered on a table - not just placed in a line or scrolling.
any help much appreciated

[Roberto]

Hello

The attachment shows a way to load pictures with xml and have a window open containing the larger version of the thumbnail, when the thumbnails is clicked with the mouse. This is the xml :

<?xml version="1.0" encoding="utf-8"?>

<picture>
   <photo pname="pics/pic1.jpg" tname="pics/thumb1.jpg" />
    <photo pname="pics/pic2.jpg" tname="pics/thumb2.jpg" />
    <photo pname="pics/pic3.jpg" tname="pics/thumb3.jpg" />
    <photo pname="pics/pic4.jpg" tname="pics/thumb4.jpg" />
    <photo pname="pics/pic5.jpg" tname="pics/thumb5.jpg" />
    <photo pname="pics/pic6.jpg" tname="pics/thumb6.jpg" />
    <photo pname="pics/pic7.jpg" tname="pics/thumb7.jpg" />
    <photo pname="pics/pic8.jpg" tname="pics/thumb8.jpg" />
    <photo pname="pics/pic9.jpg" tname="pics/thumb9.jpg" />
    <photo pname="pics/pic10.jpg" tname="pics/thumb10.jpg" />
</picture>

You would put in the names of your pictures. To add more pictures to the xml just copy/paste a line and change the name of the jpg's - <photo pname="pics/pic11.jpg" tname="pics/thumb11.jpg" /> making sure its between the <picture></picture> tags. Each <photo /> tag must contain a pname and tname attribute that link to the relevant jpg.

To achieve the random scattered effect - I could have used a random function to randomly place each thumbnail, but I thought you would have more artist control of the placement of the thumbnails using this method :

1. I created a movieClip that contains a movieClip of a rectangle. The movieclip that contains the rectangle has had its alpha value set to 0 - so it is not visible on the screen. If you open up the fla in the attachment and look in the library - its the movieclip called Holder4daThumbs which contains the clearHolder movieclip.

2. On the Holder for thumbnails layer, I dragged a copy of the Holder4daThumbs and in the properties panel gave it the name of random0_mc. I then control/dragged a copy of random0_mc and named that one random1_mc. I did this several times increasing the number of the name each time. I got upto random13_mc - so I have 14 named movieclips on the stage. You could put on as many as you want, it will not effect the size of the movie.

3. Using the free transform tool I randomly rotated these movieclips and positioned them using the selection tool. You can achieve the exact effect you want - the movieclips will resize to the size of the thumbnail, if the thumbnail is bigger.

4. The code will attach the thumbnails to these movieclips in the order they appear in the xml, so random0_mc will get thumb1.jpg attached to it + random1_mc will get thumb2_mc ect....

5. It does not matter if you have less thumbnail pictures than there are holder movieclips, because they are not visible on the screen. Ive got 14 holders and 10 pictures in this example.

6. In the case of having more thumbnails in your xml, than there are holder movieclips on the stage - a check is made in the action script which compares the number of holders on the stage to the number of thumbnails in the xml. If there are more thumbnails, the actionscript will only load enough pictures to use up all the holders + ignore the extra thumbnails.

7. You enter the number of holders on the stage on line 4 of the actionscript. Click on frame one of the action layer and open up the actions panel. The line is - var maxHolders:Number = 14; If youve got 32 holders on the stage, change this line to var maxHolders:Number = 32;

You can resize the stage + change background color - it will have no effect on the code. If you need anything explained, let me know.

Rob

Attached File(s)

•  RandomPics.zip (41.69K)
  Number of downloads: 26

[cheech74]

Many thanks - will start to work my way through it all & let you know how i get on. Have been looking on the net for something like this for a while now - you are a life saver.

[cheech74]

Sorry - I cant open the flash file. I only have access to flash 8. If possible can you copy & paste the actionscripting code, and give brief description where to put it?
thanks once again.
Rob

[Roberto]

Hello

I will try and do an as2 flash8 version this week. I've made a small change to the cs3 version, as I forgot to check that all the full size pictures were loaded. I changed line 97 -

if(thumbCount == numPics){
to
if(thumbCount == numPics && picCount == numPics){

Clicking on the thumbnails before the full size picture has loaded, no longer causes an error. I uploaded the new attachment to my previous post above.

Rob

[Roberto]

Hello

The attachment has the as2/Flash8 version of the photo gallery. The behaviour of the movie remains the same, but the code has been changed + a couple of new layers have been added to the stage. The bottom layer added contains a simple movieclip that is used to load the large pictures into. The layer above this is a simple black rectangle, whose only job is to hide the previous layer.

I forgot to mention in the previous post, that to make it easier to arrange/rotate the thumbnail holders on the Holders for thumbnails layer -

1. Double click the Holder4daThumbs in the Library - This enters into this movieClips editing mode.
2. On the stage, using the selection tool, click on rectangle.
3. In the properties panel - move the alpha slider up till a grey rectangle is visible.
4. Click on Scene 1 in the timeline to exit editing mode - The stage should now contain 14 grey rectangles.

When you've finished arranging the rectangles - repeat 1 to 4, but moving the alpha slider to zero in step 3.

Rob

Attached File(s)

•  Random_AS2.zip (47.47K)
  Number of downloads: 15

[cheech74]

many thanks for taking time out to help me with this. Will send you a link to the finished site so you can see what has been created.

cheers
Rob

[macuache]

Will you please help with this one.
http://www.euro2008....otos/index.html

I like this gallery. Do you know how to make this one.

[Roberto]

Hello

To make a gallery similar to this one, with all its different functionality, would take hours to complete. I wont have the time to do a complete version. Which parts of the interface are you wanting to recreate? It would be rude to do a straight copy of someone else's work - I could give you some pointers to help you create a slideshow of your own design.

Rob

[cheech74]

Sorry to hassle you again. I have mangaed to get the gallery working fine.
I have saved it out as a swf movie. I am now trying to pull it into another flash movie as an external swf - The problem is the pics don't load. I can see the movie loads into the movie clip because the background appears, but then it seems to stop.

my code for the load movie is:

loadMovie("picsgallery.swf", image_mc);

I have tried '_root.image_mc' but still no luck. I am guessing it is an issue with not finding the right path.

[Roberto]

Hello

I haven't had a chance to test this, but try

image_mc._lockroot = true;
image_mc.loadMovie("picsgallery.swf");

Lets us know how you get on. I will have a proper look in the morning.

Rob

[cheech74]

GENIUS - that works a treat.

Thanks again
Rob

[macuache]

Roberto

I have figured out with photo gallery. I want to ask you about video flash gallery.

I don't know how to make xml dynamic playlist so that I could watch dailymotion or revver videos right on my web site. I know that I can embed the video. but you see I want to habe previews of other videos on the right. I have spend lots of hours to find out how to do that but failed. Would you please help me with this one.

[Roberto]

Hello

I thought that with loading times, that it might be a good idea to have a preloader. Instead of having a preloader attached to each picture + thumbnail, you could use a low weight movieclip that plays untill all the content is loaded - which is then is removed from the stage. In the attachment is an example of this. The only change to the actionscript is adding

//make the fake preloader disappear
fake_mc._visible = false;

This is added to the checkLoad function just before the for loop. The movieclip is given the instance name of fake_mc in the properties panel - when the movieclip is selected - its on the Holders for Thumbnails layer. If you wanted to create your own animated fake preloader, make sure you give it an instance name and set that movieclips _visible value to false in the checkLoad function. To use the fake preloader in the attachment in your movie - open up both fla's - from within your fla, click on the drop down menu in the Library and select RandomAs2. You can then drag the FakeLoader symbol onto the Holders for Thumbnails layer , name it and add the code above to the checkLoad function.

Rob

Attached File(s)

•  Random_AS2.zip (47.26K)
  Number of downloads: 14

[krillin]

Wow, i've been looking for something like this all day, thanks so much!

Just looking at the actionscript and i must say i'm a little overwhelmed, i'm pretty new to Flash still and am wondering if this level of coding ability is required to get a job in web design or is this considered really advanced? i'm a designer first and foremost, making things look pretty comes easy, but to get something to work like this might be a bit beyond me, i doubt i'd be able to ever write something as complex as your code.

[nana]

thx alot rob thats gr8

[Roberto]

Hello

Actionscript is not difficult, if you start out with the basics and ease into the harder stuff. You don't need to be good at maths to code. You can do lots of stuff with Flash without using any actionscript at all, but with some basic actionscript you can get even more creative. I will be doing some actionscript 3.0 tutorials in the coming weeks + there's plenty of useful tutorial sites out there and the Flash helpfile can be a very useful learning tool. The code for this gallery isn't advanced, its just using the basics in an interesting way. I wont take you long to learn to do this sort of thing, once you get a hang of the basics, it all falls into place - just like driving a car.

You don't have to know any actionscript to be a web designer, its just one of the tools you could be using - I'd rather be able to create pretty things.

Rob

Sorry macuache, I didn't see your post until now - we must have posted at the same time - did you get it sorted?

[krillin]

Ok, i've been able to create a nice gallery with this that exports to a .swf and works just fine, however, the way i'd like to use this is that this .swf is being dynamically loaded into another .swf page, but when i load it up the thumbnails no longer appear, the large photos appear in the "picStore_mc", just the thumbnails aren't cooperating with me.

I was able to get a dynamically loaded shell to work in my site by using code for the navigation buttons like this:

button_home.onPress = function() {
	_parent.my_mc2.loadClip("home2.swf", "_parent.container");
};

I thought something like "_parent." that might be what i needed to add to some point of the code, but i can't find anywhere that looks appropriate to place it, so i'm a little stuck, does anyone know what do i need to do?

Cheers.

[Roberto]

Hello

You could try :

my_mc2._lockroot = true;

button_home.onPress = function() {

my_mc2.loadMovie("home2.swf");

};

This would load the movie home2.swf into the movieclip my_mc2, when the button_home is clicked on.

Rob

[krillin]

Ah, sorry, i wasn't clear enough with my question, what i get for staying up all night trying to work on Flash!

That code i mentioned works for the navigation buttons just fine, the problem i have is with the Dynamic Flash Picture Gallery, the thumbnails are not appearing when i load it into another .swf, i thought the solution would be similar to what i did with the navigation buttons for the shell, but i when i tried to change the picture gallery code it just breaks the entire gallery

How do i get the gallery to work if i'm loading it dynamically into another swf?

[Roberto]

[Hello

You need to add ._lockroot = true; to the movieclip that your loading the swf into, before you load the .swf.
eg

myContainer_mc._lockroot = true;
myContainer_mc.loadMovie("myGallery.swf");

The _lockroot makes any reference to _root in the contained movieclilp, refer to its own _root - not the _root of the containing swf.

Also make sure that the folder structure is the same - so that the xml / pictures /swf are still in the same relative positions.

Rob

[krillin]

Hey thanks for the quick reply, it didn't work exactly as you said, but i googled _lockroot and found you can put it into the the .swf thats being loaded by the main swf file

this._lockroot = true;

Now it's working perfectly, thanks so much!!

[Roberto]

Hello

Glad you got it working - not sure why it didn't work, it did when I tested it? Its not like a computer program to be awkward -will give your way a try later.

Cheers

Rob

EDIT : Had a look at Adobe doc's - both ways work + achieve the same result.

[Joff]

I'm a bit late to this party but PostcardViewer might be suitable.

[Roberto]

Joff, on Jul 31 2008, 20:06, said:

I'm a bit late to this party but PostcardViewer might be suitable.

Hello

I like the zooming in and out + good instructions on how to use it.

Rob