In this tutorial we will show you how to create a simple image gallery with thumbnails in Flash CS4. We will apply a couple of simple, yet nice transitions to the images and thumbnails. This will require you to get the hands a bit dirty in animation and action scripting. However, this is going to be easy and fun! So here we go.

Step 1.

Create a new file with ActionScript 3.0 and modify the document like it’s shown on the screenshot below. You can enter the document properties via the admin panel (follow the highlights in red) or pressing Ctrl+J.

Step 2.

Add four images from your computer to your library. To do this press File => Imort => Import to library. You can also import the images directly to the stage, by pressing Ctrl+R.

Next, create three new layers and give them the names Buttons, Images and Actions. To rename a layer, double click on it and type the text.  See the shot below.

Notice that the first frame of each layer has a small circle on it. This is a blank keyframe. Once you put anything on the stage, the circle transforms into black dot which corresponds to the filled keyframe.

Go to the Buttons layer and select the first frame on the timeline. Drag the images from your library to the stage (in case you haven’t imported them right to the stage already) and modify their size to 114×85 px. Be sure to drag the images to our document area which we’ve made black earlier.

Now you have your thumbnails on the stage. Set image alignment selecting Align in Window menu, or just press Ctrl+K. Align pics to the bottom and distribute horizontal center like it’s shown below.

Step 3.

Our thumbnails are going to be buttons, so now we need to convert the images into the Button symbols. Using the Selection Tool, right click on the first thumbnail image and choose “Convert to Symbol”, or simply hit F8. In the opened window set the type Button and name the symbol btn1. Click “OK” to save the changes. Do this for the other three images and give them the names btn2, btn3 and btn4, respectively.

Now we have to give each of these the same Instance Name which is a name to refer to your symbol or object in ActionScript. Instance Name can be set in the Properties panel which you can enter by selecting the necessary object on the stage. Instance Name of the btn1 button will be btn1 and so forth.

Right click on the first frame of the Buttons layer, select Copy Frames, go to the fourth frame and Paste Frames the same way. Or you can just drag the first frame up to the fourth cell to copy it. You timeline should have the following look by now.

Step 4.

OK, let’s put the images that we will be exactly viewing in our gallery. Switch to the Images layer and select the first frame on the timeline. Drag the image that corresponds to the first thumbnail from your library to the stage. Size it down to the 358×268 px and set its position to the 93×18. Of course, you may set your own dimensions and place the pictures whatever you like; this is just what we use for this tutorial.

Insert three more blank keyframes (F6) and do the same operation with the rest of the images.

Now go back to the timeline, select the first frame and go to the Properties panel. Here we will set the Frame Label. It’s important to remember about this because we’re going to reference frame labels in the ActionScript later. We’ve got four frame labels: model, dreamy, dancing and teacher, respectively.

Step 5.

So far we’ve got a thumbnail gallery where each of the thumbs is a button. Our next step is to add some action script so we could click on the button to play the right frame. Go to the Actions layer and drag the first frame up to the fourth cell. Your timeline should have the following look by this moment:

Go back to the first frame in the Actions layer and hit F9 to open the Actions window. Copy and paste the following code into your Actions window. Don’t worry, we will explain in great detail what happens shortly.

After you have copied and pasted the above code, go to Control => Test Movie or press Ctrl + Enter to see the result gallery. Here is what you should get:

Let’s look closer at what you’ve just done and learn more about AS functions.  The first thing you see in your code window is Stop action.

Any effect you create in Flash repeats continuously when you test or publish your movie. Stop action is used to actually stop it from looping. You can apply the Stop action to any keyframe and the movie will stop playing at that exact point.

The next code line is

This script means that btn1, our instance name, referring to the first button in our thumbnail gallery, is responding to a mouse click and calls for the function play1.

And here goes the definition of that function

In this line:

• function play1 tells us the name of the function;
• (event:MouseEvent) defines the type of the event , which is interaction with the mouse here,
• void is a special type used to specify that the function doesn’t return any data;
• gotoAndStop (“model”) causes the playhead to jump to the frame model and stops from progressing further.

All right, this is the initial script that allows our image gallery to work properly. As you see, this piece of code repeats for the rest of the buttons, we change only instance names and frame labels.

Step 6.

To add some spice to our images when they come in, let’s learn how to animate them in Flash CS4.

So, go up to your Images layer and select the first frame. To be able to add some animation to our images, we need to convert them to movie clip symbols. To do this hit F8 and select Movie Clip in the Type menu. Repeat this operation for each of the four images. Let the names be movie1, movie2, movie3 and movie4.

Choose the Selection tool from your toolbar and double click on the first movie clip we’ve just created. Now we can animate it.

Right click on the movie clip on the stage and select Create Motion Tween.

You can see that it automatically inserts some frames; the number of frames inserted depends on your frame rate. By default Flash CS4 has a frame rate of 24 frames per second. So basically you have the number of frames that would equal one second. Let’s cut it down to 15 frames per second – just drag the border of the 24th frame down to the one we need.

Now let’s create a sleek fade-in effect by means of some color effects and motion tween. Select the image on the stage while the playhead is on the last frame. Go to the object properties, choose Alpha in the Style menu and put it 0%.

Move the playhead back and forth and you will see that we’ve created a fade-out effect for our image – it’s completely transparent on the last keyframe. Right click anywhere on the motion tween area and select Reverse Keyframes. Now we have the fade-in effect applied to the picture.

Click Ctrl+Enter to test your movie. You should see something like this:

Movie plays over and over again and we don’t want this loop happen. Stop action comes in handy here. Return to your movie clip window, right click on the motion tween area and select Convert to Frame by Frame Animation. Then go to the last frame and hit F9. Type stop() in the Actions window and that should fix the problem.

Here is the result:

Step 7.

Another cute effect we’re going to apply is rollover. Wouldn’t it be nice to have the thumbnails change a bit when the mouse hovers over? And that’s pretty easy to do, here we go!

Double click on the first button in the thumbnail line, which is btn1. You can see four frames on your timeline – Up, Over, Down and Hit. These are the states of our button.

• The Up frame is the inactive stage when nothing is happening, the button is displayed as it is.
• The Over is the stage when the mouse hovers over the button.
• The Down frame is the stage when the button is clicked on.
• The purpose of the Hit frame is to define the clickable area or the coordinates of the button.

So, insert blank keyframes (F6) into each of the frames.

Go to the Over and select the button on the stage. In order to modify the way it is rendered, we need to convert it into a graphic symbol. Press F8 and select Graphic in the Type menu. Now go to the object properties and do some changes to the color effect. You may do whatever you want, we changed the RGB parameters, for example (see the screenshot below).

Switch to the Down frame and apply some effects if you want the button to change its state when you click on it. In this case, we’ve added more red to it.

Move on to the Hit area and using the Rectangular Tool draw an area you want to be clickable on your button.

Repeat this step for the other three buttons and press Ctrl+Enter to see the result. It should be similar to this:

This is it, folks. Now you know how to create a simple image gallery with thumbnails and spice it with some nice effects. If you have any questions, please leave them in comments.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.