Create a Gallery Flash Tutorial

This tutorial is divided into the following parts.   Part 1) How the Gallery Will be Created Before we open Flash, the way that the images are going to be handled will be explained. First of all 5 large images and thumbnail images will be imported to the library. They will then be attached to an empty MC (movie clip symbol), and positioned sequentially on the stage, as shown in the diagram below. A mask, the size of each large image, will then be placed on a level above the images. This will allow us to display which ever image we want by moving the empty MC horizontally. A 2nd sequence of images will then be attached to an empty MC above the mask and bottom layer of images. These images will be used for the shrinking effect. To create the shrinking effect, a 4th mask layer needs to be attached above the top layer of images. This layer will contain a number of smaller boxes, which we will shrink., when a new image needs to be displayed. a) below shows the position of each image layer while image '2' is being displayed. b) When thumbnail '4' is pressed, the mask over the top layer of images will shrink and the bottom layer of images will move to display image '4'. C) once the top layer of images has shrunk, It will then move to display image '4', so that it's ready to shrink for the next image. Part 2) Creating a Mask Step 1. Now that we know how the images are going to be handled, it's time to open up flash and start.   Step 2. First of all a rectangle needs to be made which will be added dynamically multiple times, and used to mask the image. Use the rectangle tool to create the rectangle of any size and color.   Step 3. Convert the rectangle into an MC (movieclip symbol) called box, making sure to check 'Eport for Actionscript'. As you can see the identifier will be made to 'box' also. This will allow the adding of the MC dynamically with Actionscript, by refering to it as 'box', which we'll be doing later on. Checking 'Export for Actionscript' will automatically check 'Export in first frame'. Part 3) Adding the Images Step 4. Now it's time to add some images, which I've made 360x280 in size. I'll be adding 5 in total for this tutorial. Drag one of the images anywhere onto the stage.   Step 5. Convert the first image into an MC called image_0, giving it the same Identifier. Each image will be given a number, so that we can easily reference it with Actionscript later on.   Step 6. Delete the image_ MC from the stage, add another image and conver it to an MC called image_1, also giving it the same Identifier as it's name. As you can see, from the image below of the library, I've added 4 images and converted them to MC's, and then placed them in a folder called 'images' . You'll need a minimum of 2 images for this tutorial.   Step 7. Next, add a thumbnail image for each larger image. As you can see I've made the thumbnail have a width of 72, so that 5 thumbnails will line up, and equal the width (360) of the main image Step 8. Convert the thumbnail to a symbol called 'thumb_0', giving it the same Identifier. Step 9. As you can see again, Ive added 5 thumbnails and converted them to MC's. Delete all the MC's that are on the stage, becuase they'll all be added dymically within Actionscript in the next part. 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 Part 5) Creating the Image Masks Step 13. Line 24: An addBox function is created which will contain all the code involved in adding the individual box MCs to the empty boxes MC, which will be used to mask the top image. Line 25 - 26: To position the box masks, two FOR loops are needed. One loop is need to position the rows the another is needed to position the columns. Line 27: With each iteration of the two loops an instance of the box MC is attached to the boxes empty MC we created at the start. Each instance is given the name box plus whatever value depth is. Remember each time an MC is attached we'll be increasing the value of depth by 1. The instance of box is temporaily assigned to a variabled called 'b'. This is so that we can reference is more easily. Line 28 - 29: Using the temporary variable b, the instance of the box MC has it's dimensions set to the values that were defined earlier. Line 30 - 31: The box is then is then positioned. Line 32: The depth is increased for the next MC to be attached on a new level.   Step 14. Line 36: A reset boxes function is created which will be called once the boxes have finished shrinking. Line 37: Each box mc is looped thorugh Line 38 - 39: and resized to equal the original box height and width.   Step 15. Line 42: Next the shrink boxes function is created. Line 43: The shrink variable is checked to see if it's true. Line 44: If it is a loop is created Line 45: And the boxes are assigned to 'b' Line 46: Each box is checked to see if their width is higher then 0. Line 47 - 48: If it is then it's height and width is reduced by the boxSpeed variable. Line 50 - 51: The width of the box is also checked to see if it is below 1, in which case we'll no longer need to shrink it, so 'shrink' is set back to false. Line 52: The boxes are reset Line 53: The top MC's X position is set to equal newPos, whihc is in turn set when each thumbnail is pressed Line 54: A break is used to stop the for loop.