Creating an Image Gallery in Flash - Page 2

In this section we will use ActionScript to create the scrolling images of our gallery, we are going to do this by creating an empty movie clip container using actionscript and then attaching instances of the thumbs in the gallery to it. Here is an outline of what we will do now:

1. - Create a container for our images.
2. - Attach the thumbs to this container.
3. - Make the thumbs move according to the mouse location

Creating the Container

Start off by right-clicking the only frame on stage and type the following code to create your container. The code is really simply, a new empty movie clip is created with the instance name container and at the depth 1. The depth is the the level or layer number at which the movie clip is located.

Attaching the Images and Aligning Them on Stage

We will use the movie clip method attachMovie to attach instances of our movie clips to this container, we will use a loop to repeat the code for the number of images that we have. We will save the number of images in a variable because it will be used multiple times.

The attachMovie method requires three parameters, the identifier to locate the symbol in the library, a new instance name to refer to the item later in ActionScript, and the depth at which the item is to be located. The loop below generates the values for each of these on the fly, our first thumb is called as thumb1, it is given the instance name thumb1_mc, and it saved on level 1. Please refer to the loops tutorial to learn how this works.

The code above should be enough to load all your thumbnails from the library and put them on stage, but the problem here is that they all will be placed over each other, so you will only be able to see the one you loaded last. To fix this problem we will have to assign new _x values for each of the clips as they are assigned. We will have to create a temporary variable to hold the name of the clip and then we will position the images next to each other by calculating the width of the thumbnails aligned before. The position of any thumb will be calculating by adding up the width of all preceding thumbs. The diagram below demonstrates an example.

Here is our code, the bold part is what we have added in this stage.

To make our scrolling gallery look nicer we should align the container vertically to the center of the stage, to do this we have to change the _y property of each of the image. To align the images to the center of the stage we will recall the height of the actual stage and calculate the distance at which the object has to be positioned at using the following simple formula:

We can find the values of x (the height of the stage) and y (the height of the thumbnail), so we can just use these to calculate z (the distance at which the object needs to be positioned to be at the center). Here is our updated code:

Creating the Scrolling Effect

If you test your movie now, you should be able to see some of the thumbnails aligned next to each other, the rest will not be seen because they go beyond the visible part of the stage. The moving part of our gallery will solve this. The movement of the gallery in the sample that I showed you earlier reacts to the position of the mouse on the stage. We are going to use a math formulate that uses the width of the stage and position of the mouse on it to determine whether the _x position of the container movie clips should be increased or decreased (in other words making it move left or right) and by how much.

It is possible to use a much simpler command to increase the _x position if the mouse has reached a certain place on stage and then decrease the value of _x if the mouse bypasses that point, but that will not create a smooth animation similar to the one that you will create. Our code makes use of the Cosine graph which creates a wave that has a positive value in the first half a negative value in the second half, if you consider the location of the mouse as the _x axis of the graphic and the _y axis as the amount by which the _x property of the container should increase or decrease, you will realise that this is perfect for our gallery.

I apologise if this sounds too complicated for some, but you can easily use it without necessarily understanding the math behind it anyway. The code has been attached to an onEnterFrame handler property assigned to the container movie clip so that this code is executed repeatedly throughout. The number 15 at the end is a variable which could be changed to speed up or down the movement of the gallery. The code below is to be pasted below what we have written before.

Oman3D recommends the book Foundation ActionScript 3.0 - Making Things Move by Keith Peters for anyone wishing to learn ActionScript animation. This book explains in detail all techniques and method for creating complex animations in simple terms for mathematician and non-mathematicians alike. Check it out at Amazon.com.

A problem that we have now is that our gallery will scroll in any of the two directions without stopping at the end, we will fix this by using a conditional to check if the movie exceeds any of the two limits, on the left or the right, and position it at the maximum or minimum position it is allowed to be in if that happens. The code we added a minute ago is changed this way.

You can test your movie now to get a result similar to the one below.

Summary of this section:

1. Created a container clip using the createEmptyMovieClip method.
2. Attached images using the attachMovie method and aligned these movie clips on stage.
3. Made the container scroll using the Math class and the cosine graph.
4. Stopped it from going beyond the limit of the stage using conditionals.

Our next section we will make our gallery clickable to show the larger image.

Next page.

Home | Tutorials | Features | Competitions | Forum | About Us | Contact Us | Legal | Privacy | Show Us Some Love, Donate! | Subscribe
© 2004-2009 Republic of Code - All Rights Reserved