Downloaded from www.biorust.com on Sat Nov 21, 2009 21:39:39


	A Simple Flash Gallery Tutorial Author - Airguitar (http://forums.biorust.com/member.php?userid=26331)

Flash has many uses, but perhaps its most common application over the years has been for interfaces in websites, galleries, and web comics. This tutorial describes how to make a basic gallery, yet the principal behind it is very useful for many other things. What you will learn to do in this tutorial is make an action on one symbol that affects the appearance of another. You will find this very useful when creating websites, and when you need to have a navigation element affecting other content. Here's what you'll be creating:

Step 1: Create a new document in flash. I made canvas dimensions 330x300 pixels to suitably accommodate my images, but it doesn't really matter what size you use, as long as you can fit your images in it and have them clearly viewable.

Step 2: Import your images to the library (File > Import to Library) and leave them there for now. If you want to use large images, this is OK, but they will resize in your browser (which may be messy), and involve greater download lag for the end user.

Step 3: Create a white rectangle with a border, the same size as your images (or desired viewing size, if you are using larger images). Convert the shape to a Movie Clip (highlight it all and hit F8 on the keyboard). Place some text behind the movie clip object saying 'please select an image' or something similar to give the user an idea of what to do.

Step 4: Give your movie clip the instance name: viewer. This is very important, as we will be using actionscript to refer to this symbol later by name.

Step 5: Double click your Movie Clip to edit it. Create as many new keyframes as you need and place all your into separate keyframes, and then drag your images from the library and place one on each keyframe, but now in the first keyframe - this should remain blank! On your first frame place the following scripting:

stop();

Do this by selecting the frame in the timeline, opening the action script panel and typing stop(); It is only really necessary to do this on the first frame.

Step 6: Click Scene 1 to get back to the main stage. Now, drag your images onto the stage and resize them - these will be your thumbnails. Once you've resized them all and placed them where you want, convert each one to a button (Highlight, hit F8, & select 'button') you can call these whatever you want.

Step 7: OK, now comes the scripting, so pay attention! Select your first image (which should now be a button), and add the following action script to the button:

on (release) {
viewer .gotoAndStop ( x );
}

Where there is a pink x replace it with the frame number of the movie clip (instance name: viewer) that the corresponding larger image is on.

So for example, I'm going to add text to the first thumbnail on the left. I will replace the x with the number 2 because I placed the image of a skater about to jump some stairs on the second frame of the movie clip.

Step 8: Repeat this process for the rest of your thumbnails. Then File > Export Movie and you should have a nice functioning gallery and some useful knowledge of Flash! If you have any trouble, you can download the source file here.

Alternative Version
The code in step 7 above creates a gallery where pictures are displayed with clicks. If, however, you want the pictures to show when the house is rolled over them, replace the code in each picture keyframe with this instead:

on (rollOver) {
viewer .gotoAndStop ( x );
}

on (rollOut) {
viewer .gotoAndStop (1);
}

This basically just makes the images show when you roll over them and when you roll off the image changes back to the first frame, which should be your "Please Select an Image" screen.