Flash Game Design  
 
   
 
Tutorials Articles
   
       
 
 
Gallery Flash Tutorial  
Part 4) Defining the Actionscript Variables
Step 10.
Next we're going to start writing the actionscript to actually create the gallery. First of all we're going to define some variables. This is done at the top so that they can be changed easily, without having to look through the entire code to change something.

Line 1 - 2: The main images height and width are stored in these two variables.

Line 3: This variable will hold how many rows (and columns) of mask there will be.

Line 4 - 5: The rectangular masks will be referred to as box, so with these two variables the box's width and height are defined by dividing them with the rows.

 
Step 11

Line 6: A variable to hold the total number of main images that'll be in the gallery

Line 7 - 8: The thumbnail image's height and width are held in these two variables.

Line 9: This variable will be used to hold a spacing value. One use of it will be when we want each main image wo have a 20 pixel gap from the thumbnails.

Line 10: Each MC (movieclip symbol) we attach to the stage needs to be placed on it's own level, so this value will be incremented each time a new MC is attached, so that the next one will be placed on a comepletely new level.

Line 11: This variable we hold the position of the next image to be shown, when a thumbnail is pressed.

Line 12: The box masks will need a speed at which to shrink.

 
Step 12.

Line 13: An empty MC is created and named boxes which, as the name suggests, will holds all the box masks.

Line 14: Another empty MC is created which will hold the top layer of images

Line 15: The boxes MC is then set to mask the top MC

Line 16: Another instance of the box MC is created, and named as mask. Since we're going to be lining up all the images horizontally, they need to be masked so that only 1 is showing at a time. So this mask will be used to mask the bottom layer of images.

Line 17 - 18: The mask is set to have the same width and height as each image.

Line 19 - 20: The X & Y position of the mask is set so that it is covering the space where we want the image to appear.

Line 21: Another empty MC is created to hold the bottom layer of images

Line 22: The large mask MC is set to mask the bottom MC

Line 22: A boolean variable will stored whether or not to shrink the box MCs

Now that the main website is made, go to Flash Gallery - Part 5) Creating the Image Masks
Part: 1 | 2 | 3 | 4 | 5 | 6
 
   
 
   
 
Site Copyright © 2006 - 2009 Nick DS. All rights reserved.