This project describes how to make a basic gallery 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 with standard dimensions of 550x400 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: Click on each title below to open an image and import each to the library (File > Import to Library) and leave them there for now.
Yosemite National ParkStep 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 the 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 the 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 the 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!
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.
