Using this thoroughly explained, detailed Adobe flash CS3 professional lesson, you will see how to create very modern and advanced image gallery with sound. You don't have to use action script code to make this lesson. Using this lesson, you will also learn how to import many images into a flash library, how to move them from the flash library into a flash stage, how to convert any image into a Movie Clip Symbol, how to aligned it with the background, how to place sound file into a flash stage and much more! You can use this image gallery for any presentation, as flash banner... Let's start!
Step 1
Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 300 pixels and the height to 200 pixels. Select white color as background color. Set your Flash movie's frame rate to 32 and click ok.
Step 2
Download now three images that we will use for this lesson!
Step 3
Choose File > Import > Import to Library. In the file explorer window that appears, find a three images (1,2 and 3) and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see a three images that you just imported. See the picture below!
Step 4
After that, using the Selection Tool (V) and drag and drop technique, move the first photo from the Library on the stage.
Step 5
While the image is still selected, go to the Align Panel (Ctrl+K) and do the following:
1. Make sure that the Align/Distribute to Stage button is turned on, 2. Click on the Align horizontal center button and 3. Click the Align vertical center button.
Step 6
While the image is still, still selected, press again F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
Step 7
Call the current layer image 1. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!
Step 8
Click now on frame 20 and press F6 key.
Step 9
Go back now on the first frame, select the Selection Tool (V) and click once on the image to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced in it, click on Settings button and make the adjustments as follow:
Step 10
Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appear.
Step 11
Create a new layer above the layer image 1 and name it image 2. After that, click on frame 20 and press F6 key on the keyboard.
Step 12
While you're still on frame 20, move the second image from the library on the stage!
Step 13
While the image is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
Step 14
Select now Free Transfrom Tool (Q) and reduce the image size to 180x120px.
Step 15
After that, place the image in the lower right-hand angle of the main picture as shown below
Step 16
Click no on frame 40 and press F6 key. While you're still on frame 40, repeat step 5.
Step 17
Go back now on frame 20 and repeat step 9.
Step 18
Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appear.
Step 19
Create now a new layer above the layer image 2 and name it again image 2 again.
Step 20
Click now on frame 20 and press F6 key. After that, go back on frame 20 of layer image 2 and press Ctrl+C key (Copy). Then, select frame 20 of layer image 2 again and press Ctrl+Shift+V key (Paste in Place).
Step 21
Now, set the copied image in the upper left angle of the main picture as shown below!
Step 22
Click now on frame 40 and press F6 key. After that, repeat step 5!
Step 23
While you're still on frame 40, select the Selection Tool (V) and click once on the image to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select None in it!
Step 24
Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appear.
Step 25
Create now a new layer above the layer image 2 again and name it mask. Afte that, select mask layer, click on frame 20 and press F6 key.
Step 26
While you're still on frame 20, Select the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose any color and draw a rectangle shape dimensions 180x120px.
Step 27
While the rectangle shape is still selected, repeat step 5. Now, you have this:
Step 28
Select now mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask. See the picture below.
Step 29
Select now the Selection Tool (V) and using the drag and drop technique, move layer image 2 above the layer image 2 again. See the picture below!
Step 30
Click now on frame 55 of layer image 2 and press F6 key.
Step 31
While you're still on frame 55, select the Free Transform Tool (Q) and enlarge the image on the dimensions of 300x200, such as the dimensions of the background!
Step 32
After that, aligned it with the background as we have created in step 5!
Step 33
Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appear.
Step 34
Click now on framme 70 and 90 and press F6 key.
Step 35
While you're still on frame 90, repeat step 9!
Step 36
Right-click anywhere on the gray area between frame 70 and 90 on the timeline and choose Create Motion Tween from the menu that appears.
Step 37
It's time for sound, so create a new layer above the layer mask and name it sound. After that, download my source file (.fla) at the end of tutorial and open it into a flash. After that, open my flash library (Ctrl+L), find my sound file, select it and press Ctrl+C key (Copy). After that, go back on the flash stage of lesson, select sound layer and press Ctrl+V key (Paste).
Step 38
Click now on frame 70 of layer image 1 and press F5 key.
