Categories

How to create an Image Gallery in Flash (AS2)

Ray Taylor March 31, 2011
Rating: 5.0/5. From 3 votes.
Please wait...

Note, that you can use .swf files, .jpeg files, .png files and .gif

1. We will need 3 pictures with dimensions 180×180 pixels and 3 thumbnails for those pictures with dimensions 60×60 pixels. Give them names as image-1.jpg, image-2.jpg, image-3.jpg and thumb-1.jpg, thumb-2.jpg, thumb-3.jpg.

2. Now create a new Flash file. Go to the Properties panel or to Modify >> Document (Ctrl+J) and set dimensions to width: 280 px, height: 200 px. Then save it as loadMovie.fla on your computer. For example, “new folder”. Place all your images and thumbnails into the “gallery” folder, where your “gallery” folder should be in the “new folder”:

Flash. Create gallery 1(click to enlarge)

3. Insert 2 new layers and rename the layers from top to bottom: actions, images, buttons.

4. Go to the first frame of the buttons layer and insert your first thumbnail. Chose File >> Import >> Import to Stage (Ctrl+R) and select thumb-1.jpg from your computer, then press the Open button. While the thumbnail is still selected, go to Modify >> Convert to Symbol (F8). In the Convert to Symbol window that appears select MovieClip as Type and type thumb1MC in the Name textfield, then press OK button. While the movieclip is still selected go to the Properties panel and in the <Instance Name> text field type thumb1_mc as in the picture below.

Flash. Create gallery 2(click to enlarge)

Flash. Create gallery 3(click to enlarge)

5. Repeat the step 4 for the others two thumbnails . Give them the correspondent names for movieclip and instance. You may range the thumbnails on the left, right, top or bottom part of the stage. Here is an example:

Flash. Create gallery 4

6. On the first frame of the images layer. Using the Rectangle tool (R) draw a 180×180 rectangle on the stage (select no stroke and any color for fill color). Arrage the rectangle in the place where you want the images to appear.

7. While the rectangle is still selected convert it to movieclip (Modify >> Convert to Symbol >> choose MovieClip as type and give it the name imagesMC >> then press OK button). While the movieclip is still selected go to the Properties panel and give it an instance name of images_mc.

8. Now we should add ActionScript code.

Go to the first frame of the actions layer and open the Actions panel (F9). Put here the following ActionScript code that uses the loadMovie() method:


  this.onLoad=function(){
  loadMovie("gallery/image-1.jpg", images_mc); 
  images_mc._alpha=0;
  }
this.onEnterFrame=function(){
  images_mc._alpha+=10;
  }
thumb1_mc.onRelease=function(){
  images_mc.loadMovie("gallery/image-1.jpg"); 
  images_mc._alpha=0;
  }
thumb2_mc.onRelease=function(){
  images_mc.loadMovie("gallery/image-2.jpg");
  images_mc._alpha=0;
  }
thumb3_mc.onRelease=function(){
  images_mc.loadMovie("gallery/image-3.jpg");
  images_mc._alpha=0;
  }

Flash. Create gallery 5(click to enlarge)

9. Publish your .FLA file using File >>Publish Preview>>Flash or (CTRL+ENTER). This will show you the preview of your gallery and create .SWF file in the “new folder”:

Flash. Create gallery 6(click to enlarge)


Feel free to check the detailed video tutorial on how to create an Image Gallery in Flash (AS2): how to create an Image Gallery in Flash (AS2)
This entry was posted in General tutorials, Working with Flash and tagged AS2.0, flash, gallery, image. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket