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

Boom Boom effect

30.4.2008, 1:4    Total views: 55128

Using this thoroughly explained, detailed flash lesson, I will explain to you how to create very trendy boom boom picture effect using some special flash tips and tricks. You can use this lesson for some flash banner, some presentation, animation... You don't have to use action script code to make this lesson. Using this lesson, you will also learn how to import any picture into a flash stage, how to convert it into a Movie Clip Symbol, how to create mask layer and much much more!



Step 1

First of all, find any picture which you like to use for this tutorial. You can also if you like, save my picture.





Step 2


Open a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the dimensions of your document as the dimension of picture. Select white as background color and set your Flash movie's frame rate to 45 fps. Then, click ok.



Step 3

Choose file > Import > Import to stage (Shortcut key: Ctrl+R) and import any picture into a flash stage.

Step 4

While the picture is still selected, press F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol.



Step 5

While the new made movie clip 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

Double click on layer 1 to rename its name into a picture1. Afte that, click on frame 10 and press F6 key.

Step 7

Go back on the first frame. take the Selection Tool (V) and click once on the picture (movie clip) to select it. fter that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced on it, click on Settings button set the following options and click ok.



Step 8

Right-click anywhere on the gray area between frame 1 and frame 10 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 9

Create a new layer above the layer picture1 and name it mask1

Step 10

After that, take the Oval Tool (O) and draw a little circle like it is shown on the picture below.



While the circle is still selected, repeat step 5 to aligned it with the background.

Step 11

After that, while the circle is still selected, press Ctrl+G key (Group) to group a circle.

Step 12

Click on frame 10 of layer mask1 and press F6 key. After that, take the Free Transform Tool (Q) and enlarge the circle a little. See the picture below.



Step 13

Repeat step 8.

Step 14

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



Step 15

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

Step 16

After that, go on the first frame of layer picture 1 and press Ctrl+C key on the keyboard (Copy). Then, select frame 5 of layer picture2, press F6 key and after that Ctrl+Shift+V key (Paste in place).

Step 17

Select frame 15 of layer picture 2 and press again F6 key. Then, take the Selection Tool (V) and click once on the picture to select it. After that, go to the Properties Panel, and for Color menu choose None. See the picture below.



Step 18

Choose again right-click anywhere on the gray area between frame 5 and frame 15 on the timeline and choose Create Motion Tween from the menu that appears.

Step 19

Create a new layer above the layer picture2 and name it mask2.

Step 20

Go back on the first frame of layer mask1 and press F6 key. Then, select frame 5 of layer mask2, press F6 key and after that Ctrl+Shift+V key (Paste in place).

Step 21

Select now frame 15 of layer mask and press F6 key. Then, while the circle is still selected, take the Free Transform Tool (Q) and enlarge it a little more, if we compare it with the step 12.



Step 22

Repeat step 18.

Step 23

Now, repeat step 14.

We're done with the first two example. Repeat this steps until you don't fill with circle the all picture. After that, go back, decrease the circle until you don't came to the end.

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

2. High-tech city animation
Total views: 240818

3. Water effect
Total views: 224855

4. Photo slide show
Total views: 207570

5. Special Picture Effect
Total views: 183341



Related links