Advanced Image Gallery in Flash CS5

Download Source Files

 

Step 1 - Adjust Settings

First of all we need to create an Action Script 2.0 File.
From the Properties Panel (CTRL + F3) you need to adjust the following settings:

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

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.

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

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.)

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.

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.

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.

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".

Now you can return to the main scene.

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 
• create a Black Rectangle without Line  using the Rectangle Tool (R)
• 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.

Add a New Text 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 (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.