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)

Advanced flash banner

20.5.2009, 14:0    Total views: 16388

Using this thoroughly explained, detailed flash lesson, you will see how to create advanced blur flash banner using the mask. You don't have to use action script code to make this lesson. You can use this flash banner for some presentation or animation, or just for some banner on any web site. Using this lesson, you will also learn how to draw a lot shapes, how to convert any image into a Movie Clip Symbol, how to apply blur filter on any image, how to create mask layer and much much more! Let's start!

Example:



Step 1

First, find any image 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 image. Select white color as background color. Set your Flash movie's frame rate to 32 and click ok.

Step 3

Call the current layer image. 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 image into a flash stage. 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 5

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



Step 6

Click now on frame 20, 35 and 40 and hit F6 key.

Step 7

Go back now on the first frame and place the image on the position like it is shown on the picture below!



Step 8

After that, while you're still on frame 1, 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! After that, select Filters tab from the left side. Click on the plus icon and select the Blur filter. Make the adjustments as follows:



Step 9

Select now frame 35 and repeat the previous step.

Step 10

Right-click anywhere on the gray area between frame 1 and 20, frame 20 and 35 and frame 35 and 40 on the timeline and choose Create Motion Tween from the menu that appears.

Step 11

Create a new layer above the layer image and name it mask.

Step 12

Select mask layer and using the flash tools for drawing, draw a shapes like it is shown on the picture below!



Step 13

Click now on frame 20 and hit F6 key.

Step 14

While you're still on frame 20, select the Selection Tool (V) and select just once shape on the stage and hit Ctrl+X key (Cut).

Step 15

Click now on frame 21 and hit F7 key (Blank keyframe). While you're still on frame 21, hit Ctrl+Shift+V key (Paste in Place). Now, you get just once shape.



Step 16

Click now on frame 35 and hit F6 key. After that, using the Free Transform Tool (Q), enlarge the shape like it is shown on the picture below!



Step 17

After that, click on frame 40 and hit F6 key. Then, select again the Free Transform Tool (Q) and enlarge shape again like it is shown on the picture below!



Step 18

Click now on frame 50 and hit F6 key. While you're still on frame 50, enlarge the shape so much to fill the entire flash stage. See the picture below!



Step 19

Go back now on frame 21 and go to the Properties Panel (Ctrl+F3) below the stage. On the left side, you will see Tween drop down menu. Select shape on it.



Repeat this process also for frame 35 and 40.

Step 20

Select mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask. See the picture below.



That's it!

Test your movie and enjoy!

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: 221536

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