Simple Image Gallery for the Flash Beginners

There are a lot of cool and advanced tutorials on Flash out there. However, there are too few basic stuffs available for the beginners. It is difficult to find some basic tutorials for only a simple banner rotator, or a carousel, or a flash gallery. So here is a little piece of help for absolute beginners in Flash, a dead simple tutorial on creating a photo gallery with minimal ActionScript.

Preview of Final Result

We are going to use ActionScript 2.0 here, so lets start with a New AS 2.0 Document in Flash CS3.

Next thing we need to do is define the size of the Scene, which is the size of our flash gallery. I want my pictures to be 300*300 pixels in size and 60*60 sized thumbs, so my gallety size should be 300*360 pixels.

Now we’ll need to use the Rectangle Tool to create a white rectangle with white border. Once rectangle is in place, rightclick on it and “Convert into symbol…” – we need to convert it into movie, and the name of it does not really matter.

If the movie clip that you resulted with is not precisely 300*300 pixels, you can easily fix that in the Properties menu below. To have it sit at the very top of the Scene assign 0 values to X and Y cordinates of it.

IMPORTANT: You should fill in the <instance name> setting with a word Viewer just like it is shown below.

Double click on the movie to get into it, and lets start adding pictures and frames. To import pictures, you just need to drag’n'drop them into the library to the right.

Leave the first keyframe untouched and add 5 more Keyframes (1 per picture). This is done by rightclicking the empty frame and choosing “Insert Blank Keyframe”.

I have 6 keyframes in total now. And now we’ll need to insert pictures there. The first keyframe will only contain a phrase like “please pick an image”. To add it, you need nothing but a Text Tool.

We also need to add a little bit of an action script to this frame. Rightclick on it, and choose “Actions” in the drop down menu. In the actions frame add the following code:

stop();

Then highlight the second frame and drag there a picture from your library. Position the picture at 0 for X and Y. Fill in all the frames with their own pictures.

Double click twice out of the movie regions to go back, or click the “Scene 1″ Link. Now let’s make a tiny thumbnails out of our pictures. Drag them from the library, resize to 60*60 pixels and position right below the movie clip.

We need to make buttons of those thumbnails to make our flash file work. To do that, highlight them one by one and press F8 to convert them into Buttons. The names you assign do not matter. As a result you should have 5 tiny buttons right below the Movie clip.

Now select the first button, and rightclick on it to insert some Actionsript inside. “Actions” is what you looking for. And the script you need to add goes like this:

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

Where you need to change X to the number of the frame this button refers to. My first button refers to a picture of a cute girl, which I have placed in the second frame, so I will type 2 instead of X. The next button will refer to 3rd frame, so I wil insert the same code to the second button, but will change X to 3. So in my last button I have replaced X to 6 and everything is ready now.

You can press Ctrl + Enter to check if our flash gallery is working fine. And I am sure it is!

Moreover you can change the buttons to respond whenever you hang your mouse cursor over them instead of clicking. The code for each button will be:

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

And don’t forget to change X to a proper frame! Hope you have enjoyed this very basic tutorial on creating a simple flash gallery.