Interactive Gallery Tutorial

This tutorial will demonstrate how to create a image gallery like the one bellow. All that is required is a basic working knowledge of Adobe Flash and Action Script 3.

NOTE: all following images were taken from Flash CS4, however the same will work in CS3

STEP 1:

Start by creating a new AS3 flash document. Pick whatever size will fit best with your photos. With the flash file created you now need to begin adding content. You want to do this in an organize manner. The more planning you put in at the beginning the easier the code will be to write. I usually begin by importing all of my outside information. In this case that meant importing all of my photographs (cropped to be the same size) into the library. You can do so by going to File/Import/Import to Library.

STEP 2:

Now we need to organize your information. First pull all of your photographs onto the stage and convert them to movie clips. DO NOT FORGET to give each photograph its own layer and INSTANCE NAME. To make things simpler I used instance names like room1_mc, room2_mc, room3_mc... This allowed my to have a unique instance but also be able to edit my code quickly.

Position all photo movie clips where you would like them to be in their "closed" state.

Next we need to create your buttons and directional text. Start by creating a black shape that covers your desired hit area for your buttons. Then you will need to convert the shape to a button symbol. With in the button put nothing in the UP state, a key frame in OVER state, a frame in the DOWN state, and another key frame in the HIT state. The same shape should appear on the last three states. Now go into the OVER state key frame. Select the shape and convert it too a movie clip. This will allow you to change the alpha of the clip and make it 50% transparent.

Once your button is created pull a new instance of the button onto the stage for every photo movie clip. Put each button in the correct position, on its own layer above the corresponding photo layer. Again, remember to give each a instance name. I used "open1_btn, open2_btn..." for mine.

Lastly we need to create the text that appears to tell you where to click to close. Simply create a movie clip containing the text "X CLOSE". Then pull one onto each button layer and give it its own instance name. I used "close1_mc, close2_mc..."

STEP 3

Now all that is left is the action script code. Begin by creating a new layer on top of everything in your scene, lock it and call it actions. All the code will be placed in frame one of the scene. An easy way to write the code is to write it once and then copy and past it and then just change the defining characteristic. If you have used the instance names I did, all you will have to change is the number 1, 2, or 3.

First we need to import the tween class to control our movement. Do so by typing this:

Next we need to define the start position of each photo movie clip by using a variable that can be refreered to later. The state position is defined by the cross-hair of the movie clip. When we converted our photos to movie clips it put it on the upper left hand side of the clip. If you activate your guide you will be able to see exactly where it is located. Also we need to set the "visible" quality of our close movie clips to be false.

Next we need to add an event listener for our buttons. Do so by typing this:

Now all you have to do is write the function sidePanel... You do so by first creating a var to define the movement of the movie clip and will allow you to create a new tween for each movement. Next we use an if statement that is checking to see if our close_mc is visible or not. If it is (visible == false) then we want it to change the visible state to true and to slide the room_mc out. You slide the room_mc out by using the tween class. With in the tween the begin and finish numbers refer to the ptPanelHome variable we crated at the beginning, and the number 665 is the distance moved. ELSE make close_mc.visible false and slide the room_mc back in. The tween class is only different in the begin and finish numbers, which have flipped. The code looks like this.

Simply duplicate the code twice and change the numbers of the close_mc, room_mc, and ptPanelHome.

STEP 4

The last thing I did was create a mask that covered the entire area of buttons and open panel space. To do so simple create a shape on its own layer. Then right click on the layer and select Mask. It will automatically effect the layer directly beneath. Simply pull the rest of the layers into the mask.

Press command (control)+return to export the SWF file. The result should look something like the example at the beginning.