Create an Advanced Image Gallery in Flash CS5

Posted on September 18, 2011 by Dan Doicaru in Flash Category with Medium Difficulty

In this tutorial we will learn how to make an Flash Image Gallery using Action Script 2.0 with Smooth Transitions and Description for your images. This will be an Advanced Flash Gallery, but very easy to create it. Video Tutorial is also available.

Step 1 - Adjust Settings

First of all we need to create an Action Script 2.0 File. step1

From the Properties Panel (CTRL + F3) you need to adjust the following settings:

  • FPS (Frames per Second): 30
  • Width: 600 px
  • Height: 300px

step1b

Step 2 - Adding Images to Library

Now you need to resize 3 images to 600x300 to fit perfectly on your gallery and to load faster. Go to File - Import - Import to Library and import your images.

step2

Rename "Layer 1" to "images" and create another frame named "text". (From Menu: Insert - Timeline - Layer)

step2b

Drag and drop "image1.jpg" from Library to Scene and from the Properties Panel set the X,Y Axis to 0 (zero). Be sure to have selected the "images" Layer to place all images on that layer.

Ok good, now we have the image on our scene. Press F8 (Modify - Symbol) to Convert the image to a Movie Clip. (Symbol name doesn't matter.)

step2c

Now select Frame 15 and Press F6 (Insert - Timeline - Keyframe) to create a new Keyframe to make the Image Transition Effectsn(Motion Tween). In the middle of these frames do a Right Mouse Click and select Create Classic Tween.

step2d

Select Frame 85 then 100 and Press Again F6 to create a new keyframe (One Keyframe to Frame 85 and one to Frame 100) and between them Right Mouse Click and select Create Classic Tween.

step2e

Now we need to set the Opacity to 0 (Zero) on Frame 1 and Frame 100. Click on the image symbol and from the Properties Panel - Color Effect Tab select Style: Alpha and set it to 0.

step2f

You should have something like the animation below:

Now we will do the same thing to the other 2 images. Create a Keyframe to Frame 110 and Right Mouse Click on the Image Symbol and select Duplicate Symbol. Double click the image, select it again and from the Properties Panel select "Swap" to swap to "image2.jpg".

step2g

Now you can return to the main scene.

step2h

Below are the things that you will need to do, because now is the same process, so what you will need to do next:

  • Keyframe to Frame 125, Symbol Opacity = 100, Between the Frame 110 and 125 Create a Classic Tween.
  • Keyframe to Frame 185, Symbol Opacity = 100.
  • Keyframe to Frame 200, Symbol Opacity = 0, Between the Frame 185 and 200 Create a Classic Tween.
  • Keyframe to Frame 210,  Symbol Opacity = 0, Duplicate Symbol, Swap with "image3.jpg", Return to Main Scene
  • Keyframe to Frame 225, Symbol Opacity = 100, Between the Frame 210 and 225 Create a Classic Tween.
  • Keyframe to Frame 295, Symbol Opacity = 100
  • Keyframe to Frame 310, Symbol Opacity = 0, Between the Frame 310 and 295 Create a Classic Tween.

Step 3 - Adding Image Text Description

  • Block the "images" Layer step3
  • create a Black Rectangle without Line step3b using the Rectangle Tool (R) step3c
  • with the Width 600, Height 40, X/Y Axis to 0 (Zero)
  • Right Mouse Clip and Convert it to Movie Clip and set his Opacity to 80.

step3d

Add a New Text step3a in the Layer "text" and by holding SHIFT, click the Rectangle Symbol and Press F8 to convert them to Movie Clip.

Now we will need to make the transitions for our text:

  • Frame 1, Select Description Symbol, Set Y Axis to -50, Opacity = 0, Ease = 100 Out step3e (Tweening Tab).
  • Keyframe to Frame 15, Symbol Opacity = 100, Y Axis = 0, Between Frame 1 and 15 Create a Classic Tween.
  • Keyframe to Frame 85, Ease = -100 In, Y Axis = 0
  • Keyframe to Frame 100, Symbol Opacity = 0, Set Y Axis to -50, Between Frame 85 and 100 Create a Classic Tween.
  • Keyframe to Frame 110, Symbol Opacity = 0, Duplicate Symbol, Double Click Symbol to Edit Text, Return to Main Scene
  • Same keyframes like the images to synchronize them together. You get the idea.

Final Results

Download Source Files

Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


9 + 6 =

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.