Flash Game Design  
 
   
 
Tutorials Articles
   
       
 
 
Step 11.
This is the final part of this Flash tutorial, where you'll be shown how to make the gallery functional with Actionscript. Create a new layer above all the others called "script", click on it and open up the actions panel. Enter the first few lines of code shown below.
Code Explanation:

Line 1: An empty MC is created called "images", which we'll attach all the large images to. This will allow us to scroll all the images by just moving "images". 100 is for the level it's placed on.

Line 2: The "mask" MC is attached and given the same instance name. The mask is placed level 101, which will make it above "images" on the stage.

Line 3: The mask and images MC's X position are set to 305, which is the center of the large rounded rectangle that we created earlier. This can also be wrtten as:

Line 4: The mask's Y position is set to 96, which will center it along the Y axis. A variable called "target" is set to 96 instead "images". We can use this to make the images scroll down as soon as it loads, making it more interesting.

Line 5: "Images" Y position is set to start at -1000.

Line 6: The "mask" MC is set as the mask over "images".

Line 7: A sped is set, for how many pixels the images shall move each frame.

 
Step 12.
Code Explanation:

Line 8: A for loop is created to loop through and attach each large image. The "i" in the loop will start off at 0 and increment by 1 (i++), while i is below 8 (i<8). If we had 10 images we would set this to i<11.

Line 9: Using the loop, each image is attached, by referencing the identifier that we gave each image MC earlier. Each image is assigned to a temporary variable called "img", that we can use as short hand to set the properties of the image.

Line 10: The image's Y position is set using it's height and multiplying it by the incrementing "i" in the loop. So since the each image is 320 in height, image0 will be placed at 0 (0x320) Y position in the "images" empty MC. Image1 will be placed 320 (1X320), Image2 will be placed at 640 (2x320) and so on, until "i" has reached 7.

Line 11: Each thumbnail is refered to using this["thumb"+i]. The For loop increments "i", so each button will be referenced.

Line 12: The temporary variable "thumb" is used to set each thumbnail to have an opacity of 60%.

Line 13: Each thumbnail is then assigned a pos (position) property which will be the position that the "images" MC will move to when the thumbnail is pressed.

Line 14: Each thumbnail is then given an onPress function.

Line 15: When the any of the thumbnails is pressed the target variable is to the position of the pos property that was set earlier. This value can then be used to move the "images" MC to it.

Step 13.
Code Explanation:

Line 17 & 18; Next we apply an onRollOver function to each thumbnail, so that it's opacity change to 100%, when it's rolled over.

Line 20 & 21; An onRollOut function is created to make the thumbnail's opacity return to 60% when the mouse isn't over it.

Step 14.
Code Explanation:

Line 24 - An onEnterFrame function is created which will execute any code inbetween the braces {} repedly, at the frame rate of the movie.

Line 25 - This is the code used to move the "images" MC to the "target" value minus the images current Y position divided by the speed, whenever a thumb is pressed.

Step 15.
And here is the whole Actionscript.
 
Step 16.

And that brings us to end of this Flash tutorial to create a gallery.

Download FLA (25-01-08)

Preloaded Gallery FLA (25-01-08)

Part: 1 | 2 | 3
   
 
 
 
Site Copyright © 2006 - 2009 Nick DS. All rights reserved.