Creating an Image Gallery in Flash

By Blue Chi (Riyadh Al Balushi) | Intermediate | Flash CS3 | Page 1, 2, 3, 4

This tutorial will teach you how to create an animated interactive Flash gallery. The gallery items could be scrolled through horizontally and a larger image is displayed when a thumbnail is clicked. We are going to create this gallery using ActionScript only. We will be using ActionScript loops, conditionals, and the Tween class. You can follow this tutorial without necessarily knowing much about all of these, but you will benefit more if you do read each of the tutorials we have previously written on each of these topics.

You can examine an example of our gallery we will be creating below.

Photography By Riyadh Al Balushi ©

Our tutorial will be divided into three sections:

  1. Preparing and importing all the images needed in our gallery.
  2. Scrolling the image thumbnails using ActionScript.
  3. Showing up the larger image using ActionScript when a thumbnail is clicked.
  4. Optional extra touches to enhance the gallery.

Setting Up the Images

It is possible to use images of any size for following this tutorial as the code that we will write will layout the images depending on their actual width and height as long as all the thumbs are of the same width, however, for the gallery to fit the stage that we will use, I recommend that you use the same sizes I specify when following this tutorial.

You will have to create thumbnails for each of your images, the size that I used here is 150x150 pixels, while the actual images of the gallery are 400x400 pixels each. The naming convention for images and thumbnails is as follows:

It is important to take note of this naming convention as we will use it when setting the linkage names of our library items in the tutorial.

You can create your own 10 thumbs and images, or you can alternatively download my set of images to use to save time when following the tutorial. Here is a zip file containing my images.

Starting off

Start up a new Flash movie, use ActionScript 2.0. Set the stage dimensions to 450x450 pixels and the frame rate to 30. We are going to use the default white for the background.

Movie Properties - Properties Inspector

We will now import the images into our library, go through File>Import>Import to Library, browse to find the images you extracted from the zip file you downloaded earlier (both the large images and their thumbs), select all the images and import them in one go.

Import All Your Images to the Library

All your images should now be in the Library which you can view by press Ctrl+L on your keyboard. We need to create movie clip symbols for each of our images so that we can call these images at runtime using ActionScript. This is a relatively lengthy manual process. Start off by dragging the very first image from your library (image1) and onto the stage, and then press F8 to convert it to a symbol. Name in accordance with its actual image name, image1, set the symbol type to Movie Clip, and set the registration point to top left corner. This last point is very important as it is easier to align objects on the stage when their location is in reference to their top left corner. When you are done with this, click on Advanced to configure some more options.

Convert the Image to Symbol

When you click on Advanced you should get an expanded set of options for Linkage and Source settings. We are going to use the Linkage settings to be able to use create an instance of this object at runtime using ActionScript. So click on the option to Export for ActionScript, that should automatically generate an Identifier for your instance that is identical to its name, if it is not, make sure that says image1, we are going to use this identifier to refer to this object later. The option for Export in first frame should also be checked by default. When you finish click on OK.

Advanced Symbol Options

You should now have a copy of this movie clip symbol on stage and in your library as well. Our next step is going to sound weird, but you now have to delete this instance from the stage because we are going to call it from the library directly using ActionScript and we don't need to have it on stage. To do this select it on stage and press delete.

You cannot call an image from the library directly using ActionScript without first converting it to a movie clip symbol. That is why we have to convert all of our images to move clips.

We are done working on the first image, you have to repeat this process for each of the images in your library, it is not really a lengthy process, all you have to do is drag you image onto stage, press F8 to convert it to a symbol, assign an instance name to it in accordance with the name of the image (ie image2, image3, thumb2, thumb3), and check the option to Export it for ActionScript, and then delete this copy from the stage. All settings such as the movie clip type and registration point should be set in accordance with the previous symbol automatically. When you're done, you should have nothing on stage, but your library should have a set of movie clip symbols for each of the images and thumbs. To verify that you have completed this stage properly, you can check that all the names of the new movie clips and their linkage properties are identical to the image names by inspecting the library panel.

Flash Library Items

This completes the first section of the tutorial. In the next section, we will start coding the thumbnail images to create the scrolling gallery.

Summary of this section:

  1. Created images and thumbnails that are named in accordance with the naming convention.
  2. Imported all images into the library.
  3. Created movie clip symbols to contain the images and assigned Linkage Identifiers for them to use these movie clips using ActionScript.

We will create make our thumbnails scroll across the stage in the next using using ActionScript. Read on to learn how to do that.

Next page.