Toxiclab.org

Attractive contour animation

19.9.2007, 23:59
Submited in: Flash | Total Views: 48340

Reading this tutorial you will learn:

1. How to create contour of any object using the Line Tool
2. How to animate that countour using the mask effect and rectangle.

You don't have to use action script code to make this tutorial. You can apply this animation on any objects, and you can use it for some header animation, banner...



Step 1

First of all, downalod my picture to make this tutorial quickly.





Step 2


Open a new flash document.

Step 3

Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 404 pixels and the height to 355 pixels. Select any color as background color.Set your Flash movie's frame rate to 26 and click ok.



Step 4

Choose File > Import > Import to Stage (Shortcut key: Ctrl+R) and Import my picture into a flash stage.

Step 5

While the picture 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.



Now you have aligned a photo with the background.

Step 6

Double click on layer 1 to rename its name in picture. After that, click on frame 70 and press F5 key.

Step 7

Create a new layer above the layer picture and name it contour.

Step 8

After that, take the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Enter #C4E7FB for the stroke color
2. Select Solid as the type of outline, with the line thickness set to 1.
3. Turn on the Stroke hinting option to get rid of any blurry edges while drawing.



Step 9

Then, draw a contour around the human shape like it is shown on the picture below.



Step 10

While the contour that you just created is still selected, go again to the Properties Panel (Ctrl+F3) and choose the following options. See the picture below.



Now, you have this:



Step 11

Click on frame 70 of layer contour and press F5 key.

Step 12

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

Step 13

Take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose any color and draw a “rectangle” below the picture about 350 × 30px. See the picture below.



Step 14

Click on frame 25 and 40 of layer mask and press F6 key.

Step 15

While you're still on frame 40, place the rectangle above the picture using the Selection Tool, or by mouse. See the picture below.



Step 16

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



Step 17

Click on frame 55 and press again F6 key, Then, while you're still on frame 55, place the rectangle again below the picture. See the picture below.



Step 18

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



Step 19

After that, click on frame 70 and press F5 key.

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.



Now you have this:



Test your Movie (Ctrl+Enter).

We're done!

Have a nice day!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials