Toxiclab.org

Appearance picture animation

6.6.2007, 19:33
Submited in: Flash | Total Views: 75382

In this tutorial, you will learn how to create appearance picture animation using the shape transformation and mask. This is so attractive animation, and you can use it for flash banner, presentation.... To create this tutorial, you don't have to use action script code.



Step 1

First of all , find somewhere any picture that you will use for this example.



Step 2


Start Flash. Press Ctrl+J key on the keyboard (Document Properties) and set the dimension as the dimensions of your picture (In my example 350x267px). Set the background colour as whatever you like. Set your Flash movie's frame rate to 24 and click ok.



Step 3

Choose File > Import > Import to Stage, and import any picture that you find.

Step 4

While you have imported the picture, and while the picture is still selected, go to the Align Panel (Shortcut key: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 the picture with the background.

Step 5

Double click on layer 1 to rename its name in picture. Click on frame 40 and press F5 key.

Step 6

After that, create a new layer above the picture layer and name it mask area.

Step 7

Lock picture layer, select the mask area layer and take the Rectangle Tool (R). Then block the Stroke Color, for fill color choose any color and draw a rectangle about 8x50px and place it above the picture. See the picture below.





Step 8

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



step 9

Click on frame 15 and press F6 key. Then, take the Free Transform Tool (Q), press and hold down Alt key, and lenghten the rectangle like it is shown on the picture below.



Step 10

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.



Step 11

Click on frame 20 and press F6 key. Then, take the Free Transform Tool (Q) again, press and hold down Shift key and do the following:



Step 12

Go back on frame 15 and open the Properties Panel (Ctrl+F3). On the left side for Tween choose Motion and for Rotate set CW. Ease set to 100. See the picture below.



Step 13

Right-click anywhere on the gray area between the frame 15 and frame 20 on the timeline and choose Create Motion Tween from the menu that appears.



Step 14

Click on frame 25 and press F6 key. Then, take the Free Transform Tool (Q) again and Place the rectangle on the position like it is shown on the picture below.



Step 15

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

Step 16

Click on frame 40 and press F6 key. Then, take again the Free Transform Tool (Q), press and hold down Shift key and do the following:



Step 17

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.

Step 18

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

We're done!

Have a nice day!

Download source file (.fla)

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

Browse by category




Most popular tutorials


Resources Worth visiting


Friends