In this tutorial, you will learn how to create an outline animation effect for an image and then the image filling the outline using advance masking effects.

Tutorial Details

Program: Flash CS5

Difficulty: All

Estimated Completion Time: 40 hr

Tutorial Assets

The following assets were used during the production of this tutorial.

Outline Animation Effect in Flash


In this tutorial, you will learn how to create an advance masking effect of an images.

Here we are taking new flash document with action script 2.0.

Outline Animation Effect in Flash

Step 1: Setting Up Document Properties

Now Select Modify from the menu bar and select Document or You directly can press ctrl + J to open the document properties.

Outline Animation Effect in Flash

Now change the stage dimensions as 600×500 and the FPS is 30, as shown in the Figure below. To start with the tutorials download the source.zip file that will provide you with the necessary files to be used in the tutorial.

Outline Animation Effect in Flash

Step 2: Importing necessary images

First import the downloaded used images from the source. To do that, Go to the File menu > Select Import > Select Import to Library.

Outline Animation Effect in Flash

Step 3: Positioning images on to the stage

Before starting we already have layer 1, now name the layer as bg. Drag the bg image from the library on to the stage.

Outline Animation Effect in Flash

Align the image to the center of the stage using the align panel. Keep in mind that to align any item to the center of the stage, check on the “Align to stage” check box.

COutline Animation Effect in Flash

Step 4: Creating Character Outline

Now insert a new layer above the bg layer, and name it as chr. Drag the chr1 image from the library on to the stage and place the chr image in the center.

Outline Animation Effect in Flash

Now insert a new layer above the chr layer, and name it as chr_outline. Copy the chr image and paste on chr_outline layer.

Outline Animation Effect in Flash

Break apart the image on the chr_outline layer. To do that, select the image and press ctrl + B.

Now Select the lasso tool and then select its sub tool which is magic wand tool.

Outline Animation Effect in Flash

Select the transparent area of the image using magic wand tool. It will select the transparent single color background and press delete to remove it.

Outline Animation Effect in Flash

Reselect the image, in case of any remaining unnecessary part of the image; remove the image using erase tool from the toolbox.

Outline Animation Effect in Flash

Select the image and fill with any solid color.

Outline Animation Effect in Flash

Now select the Ink Bottle Tool from the toolbox to create outline of the shape.

Outline Animation Effect in Flash

Click on the edge in the shape using Ink Bottle tool. It will create an outline around the shape. Now open the properties panel, to open the properties panel, Go to the Window menu > Select the properties. Go to the FILL AND STROKE > Stroke and set value to 3.

Outline Animation Effect in Flash

Step 5: Arranging layers to create the animation

Select the solid fill shape except of the outline and press ctrl + x and insert a new layer above the chr_ouline layer and name it as mask shape. Then press ctrl + shift + V to paste on the same place.

Outline Animation Effect in Flash

Select the outline view icon to see the shape in as outline. By doing this you can see the other objects behind it.

Outline Animation Effect in Flash

Now insert two new layer above the chr layer, and name them as fade bar and mask chr. Again insert a new layer above the chr_outline layer and name it as mask outline.

Outline Animation Effect in Flash

Step 6: Creating masking shapes

Create a rectangle on mask outline layer as given in the reference image below. Then copy this rectangle by pressing ctrl + C and paste on the mask chr layer by pressing ctrl + shift + V.

Outline Animation Effect in Flash

Again create a rectangle on fade bar layer and fill with the gradient color of black and white.

Outline Animation Effect in Flash

Now go to the color panel and insert a new color bucket by pressing any when on the red highlighted bar and color all three to white.

Outline Animation Effect in Flash

Set color alpha to 0% for two buckets except of middle bucket.

Outline Animation Effect in Flash

Now go to the Tools panel and select Gradient Transform Tool.

Outline Animation Effect in Flash

You will see two lines as given in the images. Currently these blue lines will be horizontally placed. Click on the white small circle and rotate it to vertical.

Outline Animation Effect in Flash

Now move it to hide the green rectangle top edge. So that when the masking will play, the edge will not be visible.

Outline Animation Effect in Flash

Step 7: Setting frames or Animation Period

Insert a new frame on frame 100 by pressing F5 on all layers.

Outline Animation Effect in Flash

Now select frame 50 of four top layers (mask shape, fade bar, mask chr, and chr) and press F6 to insert new key frames. After doing this, again select four top layers frames before frame 50 and press delete to remove the frames.

Outline Animation Effect in Flash

Step 8: Applying masking to outline of the character

On mask outline layer, insert a new key frame on frame 50 by pressing F6.

Outline Animation Effect in Flash

Select the rectangle of mask outline layer and increase the height to cover the character outline.

Outline Animation Effect in Flash

Select any frame between the frame 1 and frame 50. Then right click and select Create Shape Tween.

Outline Animation Effect in Flash

Select the mask outline layer and right click, then select Mask.

Outline Animation Effect in Flash

Step 9: Applying masking to the character

Now select the frame 100 of fade bar and mask chr layer, then insert new key by pressing F6 on the selected frame.

Outline Animation Effect in Flash

On frame 100, select the rectangle of mask chr layer and increase the height to cover the character.

Outline Animation Effect in Flash

On frame 100, select the fade bar rectangle and move it to the top as given in the reference image below. Keep in mind; hide the green rectangle top edge.

Outline Animation Effect in Flash

Select any frame between the frame 50 and frame 100 of fade bar and mask chr layer. Then right click and select Create Shape Tween.

Outline Animation Effect in Flash

Now select the mask chr layer and right click, then select Mask.

Outline Animation Effect in Flash

Now select the mask shape layer and right click, then select Mask.

Outline Animation Effect in Flash

In the end, to give some breathing period in when the animation lasts. Insert a new frame on frame 100 by pressing F5 on all layers.

Outline Animation Effect in Flash

Now press Ctrl + Enter to see you the effect similar to the below.

Flash Tutorials & Resources

Animation Tutorials and Resources


Pinterest