Flash tutorials
Home 3D (2) Actionscripting (65) Animation (100) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (52) Text Effects (38)

Attractive photo banner in flash

2.6.2009, 16:54    Total views: 19706

In this thoroughly explained, detailed flash lesson, I will show you how to create attractive and very modern photo banner in flash using some special flash tricks and mask. This photo banner, You can use for any presentation, flash animation or for flash banner. You don't have to use action script code to make this lesson. Using this lesson, you will also learn how to import any photo into a flash stage, how to animate it, convert it into a movie clip symbol and much more!

Example:



Step 1

First, find any photos which you like to use for this lesson.



Step 2


Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your doucment as the dimensions of photo. Select white color as background color. Set your Flash movie's frame rate to 44 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 now File > Import > Import to stage (Ctrl+R) and import any photo into a flash stage. 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 5

While the photo is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 6

Click now on frame 30 and hit F6 key.

Step 7

Go back on the first frame, 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 8

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 9

Click now on frame 100 and hit F5 key.

Step 10

Create a new layer above the layer photo 1 and name it mask.

Step 11

Select mask layer, take the Rectangle Tool (R) and draw a rectangle shape about 15x400 px and place it on the position like it is shown on the picture below!



Step 12

Click now on frame 30, select the Selection Tool (V) and do like it is shown on the picture below!



Step 13

Click now on frame 45, select again the Rectangle Tool (R) and draw a rectangle shape as the dimensions of flash stage. See the picture below!



Step 14

Right-click anywhere on the gray area between frame 1 and 30 and frame 30 and 45 on the timeline and choose Create Shape Tween from the menu that appears.



Step 15

Click now on frame 100 and hit F5 key.

We're done now with the first photo. Repeat this process also for every other photos.

Have a nice day!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 221534

2. Water effect
Total views: 166040

3. Photo slide show
Total views: 153641

4. High-tech city animation
Total views: 151459

5. Special Picture Effect
Total views: 146246

Related links