Advanced image gallery with sound

Date: 19.1.2009, 18:45    Total views: 23635
Page:  1  2

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.

Next:  Part 2
  Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!
Share
ShareSidebar