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.

Source File.fla

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.

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.

Now change the stage dimensions as 600500 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.

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.

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 libraryon to the stage.

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.

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 onto the stage and place the chr image in the center.

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.

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.

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.

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

Select the image and fill with any solid color.

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

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.

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 thechr_ouline layer and name it as mask shape. Then press ctrl + shift + V to paste on the same place.

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

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.

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.

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

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.

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

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

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.

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

Step 7: Setting frames or Animation Period Insert a new frame on frame 100 by pressing F5 on all layers.

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

Step 8: Applying masking to outline of the character On mask outline layer, insert a new key frame on frame 50 by pressing F6.

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

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

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

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.

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

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.

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.

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

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

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.

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

Please Like, Tweet, Share or Comment on this page if you found this tutorial or resource useful!
9

Posted on March 26, 2012 in Tutorials, Flash tagged Animation, Flash, masking effect, tutorial by EntheosWeb