In this thoroughly explained, detailed lesson, I will show you how to create a really cool bouncing photo effect. This effect you can use for any photo presentation, flash animation, banner, header... Using this lesson, you will also learn how to use Align Panel, how to import any photos into a flash library and after that into a flash stage using the Selection Tool and drag and drop technique, how to convert any photo into a Movie Clip Symbol, how to create Motion Tween, how to use free Transform Tool (Q) and much much more! You don't have to use action script code to make this lesson! For this lesson, I will use a photos of dr. house! :)
Step 1
First, download photos for this lesson!
Step 2
Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 450 pixels and the height to 400 pixels. Select #590000 as background color. Set your Flash movie's frame rate to 45 and click ok.
Step 3
Call the current layer photo 1. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!
Step 4
Choose File > Import > Import to Library. In the file explorer window that appears, find a three photos (photo 1, photo 2...) and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see three images that you just imported. See the picture below.
Step 5
Select the Selection Tool (V) and using the drag and drop technique, move the first photo from the Library on the stage.
Step 6
While the photo 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 7
After that, while the photo is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
Step 8
Click now on frame 10 and press F6 key. After that, go back on the first frame and place the photo (new made Movie Clip) on the position like it is shown on the picture below!
Step 9
After that, Select the Selection Tool (V) and click once on the photo 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 now a new layer above the layer photo 1 and name it photo 2. After that, click on frame 8 of layer photo 2 and press F6 key.
Step 12
While you're still on frame 8, select the Selection Tool (V) and move the second photo from the Library on the stage. After that, while the photo is still selected, press F8 key (Convert to Symbol), to convert it into a Movie Clip Symbol.
Step 13
Click now on frame 18 and press F6 key. While you're still on frame 18, repeat step 6!
Step 14
Go back now on frame 8 and place the new made Movie Clip, (photo), on the position like it is shown on the picture below!
Step 15
While you're still on frame 8, repeat step 9!
Step 16
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 17
Click now on frame 18 of layer photo 1 and press F5 key.
Step 18
Go back now on frame 18 of layer photo 2 and place photo on the position like it is shown on the picture below!
Step 19
Click now on frame 40 and 50 of layer photo 2 and press F6 key.
Step 20
While you're still on frame 50, place the photo position like it is shown on the picture below!
Step 21
After that, select the Free Transform Tool (Q) and enlarge the photo like it is shown on the picture below!
Step 22
Select now the Selection Tool (V) and click once on the photo to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.
Step 23
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 24
Click now on frame 46 and 56 of layer photo 2 and press F6 key. While you're still on frame 56, place the photo on the position like it is shown on the picture below!
Step 25
Select now the Free Transform Tool (Q) and enlarge the photo like it is shown on the picture below!
Step 26
While you're still on frame 56, repeat step 21!
Step 27
Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appear.
We're done!
Test your Movie (ctrl+Enter) and enjoy!
Download source file (.fla)
