This tutorial will show you how to make a simple, yet effective, slideshow-type image gallery using Flash with minimal scripting.
This is great for displaying your portfolio online, sharing personal photos, or for anywhere else you may need an image gallery or slideshow. What is important for you to take away from this tutorial is the theory and script behind making this slideshow work so you can apply it in your own situations. My example will be a pretty simple layout but the techniques can be applied to something much more involved.
STEP 1: Prepare Flash Document
As usual, the first thing to do is set up the .FLA document. My settings for this one are 530 x 540 at 30 frames per second. It’s not very important that you adhear to these settings as they should reflect your specific needs.
STEP 2: Create Background.
Rename layer 1 to “background”. In the first frame of this background layer create a background or "container" for the slideshow. You can either make something in Flash or import a background if you already have one made in Photoshop. After you are done creating your background or "container", lock the layer so you can’t select it by accident.
STEP 3: Import Assets
Assuming you have already prepared all of your images that are to be in this gallery, it is time to import them. Go to File > Import to Library, find the files you will be using in this project (images and graphical assets alike) and click Open. The assets you selected should now appear in your Library window (PC: Ctl+L, Apple: Command+L).
STEP 4: Laying Out Gallery
Create a new layer and name it “content”. This will hold our images. Drag the first image you want displayed in your gallery to the stage and position it. Select it, hit F8 to Convert to Symbol, name it “mc_content”, hit OK. In the Properties Inspector window give it the instance name “mc_content” as well.
Double-click your new mc_content movie clip to enter editing mode. Rename layer 1, the layer currently holding your image, to "images". This will hold all your images that are to be displayed in the slideshow. Also, I’m going to add a small content area to explain the images. Create a new layer, name it “textbg”. In the first frame of this new layer, I am going to drag out a pre-made text background from my library. I tend to separate my elements as much as possible before bringing them into Flash which allows me the flexibility to animate each element separately if I want to.
Now, create a layer, name it "text". This will hold our descriptions of each image. On the first frame of this new layer, take the Text tool and type out a description of your image and any other information you want displayed with that image.
STEP 5: Adding Content
Now we will put the rest of our images and descriptions in place. Since we have the layout set up, all we are going to do is swap images and text in each frame. To save some time, instead of doing each new image from scratch, I am going to select all 3 frames on all 3 layers by shift-clicking. Then I will hold ALT and click-and-drag copies of the keyframes on to frame 2. Now you should have the same 3 keyframes in frame 1 and 2.
Now, on frame 2 select your image that is displayed (currently the same image as in frame 1), right-click on it and go down to "Swap Bitmap.." (or in Properties Inspector click the "Swap.." button). A dialog will open allowing you to select an image to swap out the current one with. This allows you to keep the exact same positioning (granted your images are the same size) and easily swap out each image with just a few clicks. Select the image you want to be next in your portfolio and hit OK. You should see that your image has swapped. Now select the text on this 2nd keyframe and change it to match your new image. That’s all you have to do for each new image. Duplicate the 3 previous frames, swap the image for the next one in line, replace the text to match and that’s it. Do this until you have all the images with their descriptions in place.
Finally, create a new layer, name it “actions”, select the first frame, and hit F9 to open the scripting window. Add a stop(); to the window (Shortcut: Escape key then S then T).
STEP 6: Add Controls
Go back to the root timeline by clicking the back arrow located up where the file name is displayed. Create a new layer on the root timeline, name it "controls". In frame 1 on the controls layer, drag out pre-made Next and Back buttons from your library that you have made in Photoshop, or create them from scratch using the drawing tools inside of Flash.
Position them and then select the button that will act as your Back button. Hit F8 to Convert to Symbol, select button, then name it “last_btn”. Also, give it an instance name of “last_btn” in the Properties Inspector window.
Double-click the new button to enter editing mode. If you would like, you can give it a simple rollover effect like you would any button. This is also the place where you would add sound effects for rollover or click, however both are optional. What is most important is to give it a decent sized hit area. Do this by dragging a duplicate of the key frame in the UP position to the HIT position by Alt + clicking-and-dragging. Now, with the Hit key frame selected, draw a hit area over the arrow with the rectangle drawing tool.
Follow the same process for the next button. Name the movie clip “next_btn” and give it an instance name of the same in the Properties Inspector window.
STEP 7: Scripting
Now it’s time to add the script that will make this slideshow work. On the root timeline create a new layer, name it "actions". Select the first keyframe of this layer and hit F9 to open the scripting window. Insert this code:
stop();
//next button
next_btn.onPress=function(){
if(mc_content._currentframe==mc_content._totalframes){
mc_content.gotoAndStop(1)
}else{
mc_content.nextFrame()
}
}//last button
last_btn.onPress=function(){
if(mc_content._currentframe==1){
mc_content.gotoAndStop(mc_content._totalframes)
}else{
mc_content.prevFrame()
}
}
The script is saying that when the Next button is pressed, if the current frame that the play head is on equals the total number of frames present in mc_content, then return the play head to frame 1 of mc_content. This will make it appear to loop. Else, if the play head is not on the total number of frames, then it will go on to the next. The Last button is essentially the same, but in reverse. It says if the current frame is frame 1 then go back to the last frame. If it’s not (else) on frame 1, go back 1 frame.
STEP 8: Finishing Touches
One thing you will definitely need is the ability to launch a bigger version of your image or a link to a website if it’s a gallery of web work. Double-click your content_mc movie clip to enter editing mode. I’m going to create a new layer underneath the Actions layer and name it "launch". I am going to use the Text tool to create what will be a button for launching a higher res image. When finished with the type, select it, hit F8 to Convert to Symbol, select button, name it launch_btn and give it an instance name of the same in the Properties Inspector window. As with the arrows, you can give this button a simple rollover, sounds, and most importantly, a hit area if you wish.
Go to your Actions layer and insert this code underneath the stop that that is already there:
launch_btn.onRelease=function(){
getURL("http://www.yourwebsite.com/images/image.jpg","_blank");
};
The path should be to where your larger version of the image lives on the internet. You can repeat this process for each image that needs to be able to launch in a new window.
That should do it. Now export your movie and check it out. The Next and Back buttons should scroll through the images seemlessly and your Launch button should launch your higher res version in a new browser window, depending of course, on the fact that you put the correct path in the getURL function.
Click the Next or Back button below to see the gallery slideshow in action!
