Create a Gallery Flash Tutorial ~ Graffititools

A Flash tutorial to create a gallery with a jagged transition.

Step 1. First of all you'll need to download the FLA containing some images images for you to work with and the gallery background. Once you've done that, open it up and go into the gallery MC, where you'll see the background on it's own layer and MC (Movieclip)

Step 2. I the library you'll see the image and thumbnails in their own folder.

Step 3. To initiate the image transition, we're going to use some thumbnails. Drag over the thumb-0 image from the library to a new layer called "thumbs", and Convert it to an MC called thumb0.

Step 4.

Add the rest of the thumbnails and convert them to MC's thumb1, thumb2 etc

Step 5.

This is part 2 of the tutorial to create a gallery with a jagged transition effect. Next, click on the 1st thumbnail MC and, from the properties panel, give it the instance name thumb0. We'll be using this instance name to refer to the thumbnail with Actionscript.

Step 6.

Drag the larger version of the image onto the stage, and convert it to an MC called image0, making sure to check the box "Export for Actionscript". This will give the MC the identifier "thumb0", which will be used later to reference the MC when the Actionscript is written. ONce you've done that delete the MC from the stage.

Step 7.

Add each other large image, convert them to MCs and give them identifiers.

Step 8.

This is part 3 of the tutorial, where we'll be creating the jagged shaped masks. Next, create a rectangle the same size as the large images (320 x 230)

Step 9.

Convert the rectangle into an MC called mask0, with an identifier of the same name.

Step 10.

Go into the MC.

Step 11.

Choose the Lasso Tool (image a) and, under the Tools options, choose "Polygon Mode" (image b).

a)		b)

Step 12.

We're going to use the lasso tool to cut the red rectanle into 2 jagged shapes. Start by clicking from the top left, just outside of the rectangle, and then click again below the rectangle, to create a steep diagonal line. Click for the 3rd time at the top, above the rectangle, and continue to creating diagonal line across the rectangle.

Step 13.

ONce you get to the end to the right, join the last diagonal line with the 1st point that was clicked. This should create a selection, as shown below.

Step 14.

Convert the selection to an MC called "mask1", giving it an identifier with the same name.

Step 15.

Delete the mask1 MC, leaving you with the bottom jagged shape in mask0.

Step 16.

In the gallery MC create a new layer called script, open up the Actions panel and enter the code shown below

Line 1 - 2: Create an array called order. When we attach the images, two masks & copies of each image will be attached. A 2D array (Arrays within an array) is used to hold the order of each image segment. The numbers have been rearranged so that none of the images will be alligned properly, when the gallery is first dispalyed.

Step 17.

Line 3: A for loop is created to create two groups of images, consisting of an empty MC and a mask (mask0 & mask1). The "j" in the loop will start off at 0 and increment by 1 (j++), while j is below 2 (i

Line 4 : Variable "i" will temporarily hold the path of images.

Line 5 : Variable "m" will temporarily hold the path of the masks.

Line 6 : The mask's X position and image target's are set.

Line 7 - 8 : The mask's and image's Y position are set.

Line 9 : The mask (m) is set to mask the images (i)

Step 18.

Line 10: Another loop is used to attach a version of each image to each images MC (image0 -image2). Using "j" from the previous loop and "k" from this loop, the "order" array is looped through to attach the image number from the library.

Line 11: We use the temp variable "i", holding the path of the images0 - image2, to attach them images. We store the new path in the img variable.

Line 12: Each image is placed on an X position, using the images width multiplied by the increment K number.

Line 13: We use a temporary "thumb" variable to hold the name of each thumb associated with the image position.

Line 14: The thumbnail is given propertes (2 in total) for each position images0 - images1 must move to in order to display an alligned image.

Step 19.

Line 19 - 24: 2 functions are created to increase and decrease the opacity of the thumbnails, as they are rolled over and rolled out.

Step 20.

Line 27 - 28: The targets are set to equal the positions to display image4, which is stored in thumb4.pos0 & thub4.pos1

Line 29 : A speed variable is set for how fast the images scroll.

Step 21.

Line 30: An onEnterFrame function is created which will execute any code inbetween the braces {} repeatedly, at the frame rate (30) of the movie.

Line 31 - 33: This is the code used to move "images0" & "images1" MC to the "target" value minus the images current X position divided by the speed, whenever a thumb is pressed.

Step 22. Entire Code