Using this thoroughly explained, detailed flash lesson, I will explain to you how to create image shape animation using some special flash tips and tricks and mask. You can use this shape mask animation for any web banner or for some image presentation. You don't have to use action script code to make this lesson. Let's start!

Example:



Step 1

First, save the image below that we will use 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 420 pixels and the height to 280 pixels. Select #332D29 color as background color. Set your Flash movie's frame rate to 42 and click ok.

Step 3

Call the current layer background. 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 (Shortcut key: Ctrl+R) and import the image that you just saved in step 1 into a flash stage.

Step 5

While the photo is image 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 selected, hit F8 key (Convert to Symbol) to convert it into a movie clip symbol.



Step 7

Click now on frame 10,45 and 55 and hit F6 key.

Step 8

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



Repeat the previouse step also for frame 1.

Step 9

Right-click anywhere on the gray area between frame 1 and 10, frame 45 and 55 on the timeline and choose Create Motion Tween from the menu that appears.



Step 10

Create a new layer above the layer background and name it shape.

Step 11

Select shape layer and draw a shape like it is shown on the picture below!



Step 12

Select now frame 3, hit F6 key and make this shape using the Free Transform Tool (Q) and Selection Tool (V).



Step 13

Select now frame 6 hit F6 key and draw this shape:



Step 14

Select now frame 10 and hit again F6 key. Then, make this shape:



Step 15

Select now frame 15 and hit again F6 key. Then, make this shape:



Step 16

Select now frame 25 and hit F6 key. Then, make this shape:



Step 17

Select now frame 34 and 36 and hit F6 key.

Step 18

While you're still on frame 36, make this shape:



Step 19

Select now frame 39 and hit F6 key. Then, make this shape:



Step 20

Select now frame 42 and hit F6 key. Then, make this shape:

Step 21

Select now frame 48 and hit F6 key. Then, make this shape:



Step 22

Select now frame 55 and hit F6 key. Then, make this shape:



Step 23

Select layer shape and go to the Properties Panel (Ctrl+F3) below the stage. Make the adjustments as follows:



Step 24

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

We're done!

Please Enjoy!

Download source file (.fla)