Flash Gallery Tutorial

Flash Game Design

Tutorials

Articles

A Flash tutorial showing you how to create a gallery, with a shrinking square transition, using advanced actionscript.

[ View Gallery ]

Flash website	Shooting Bullets	Jagged Transition	Circular Slideshow


Falling Star Text	Basic Flash Site	Rotatin Gallery	Drop Down Menu

This tutorial is divided into the following parts.

	1) How the Gallery Will be Created
	2) Creating a Mask
	3) Adding the Gallery Images
	4) Defining the Actionscript Variables
	5 ) Adding & Animating the Masks
	6) Adding the Images

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.

Next we're going to start creating the gallery, so go to Flash Gallery - Part 2) Creating a Mask

Part: 1 | 2 | 3 | 4 | 5 | 6