Simple shape animation

Basic   Date: 18 May 2007 10:03 pm Add comments

In this tutorial you will see how to transform image in many shapes. To create this tutorial, you don’t have to use action script. Only one thing that you need is flash. You will also learn how to use Selection Tool (V), to make many shapes and more.

Example
:



Step 1

Open a new flash document.

Step 2

Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 350 pixels and the height to 250 pixels. Select white as background color and click ok. Set your Flash movie’s frame rate to 38 and click ok.

img120.gif

Step 3

Download my picture to quickly create this tutorial.

img210.gif

Step 4

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

Step 5

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.

img39.gif

Step 6

After that, while the picture is still selected, choose Modify > Break Apart (Shortcut key: Ctrl+B) to break apart this picture.

img411.gif

Step 7

Click on frame 20 and press F6 key. After that, take the Selection Tool (V) and do the following:

img57.gif

After that, click on frame 40 and press F6 key. Then, do this:

img68.gif

Step 8

Than, click on frame 50, press F6 key and do this:

img77.gif

Step 9

Click on frame 60, press F6 key and do the following:

img87.gif

Step 10

Click on frame 70 and press F6 again. Then, Select the picture and go again to the Align Panel (Shortcut key:Ctrl+K). Then, repeat step 5.

Step 11

Select layer 1 and go to the Properties Panel (Ctrl+F3) below the stage. Then, for Tween choose Motion.

img97.gif

img106.gif

Step 12

Click on frame 71 and press F6 key. After that, while the picture is still selected, press F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol.

img1110.gif

Step 13

Click on frame 80 and press F6 key.

Step 14

Go back on frame 71 and go again to the Properties Panel (Ctrl+F3) below the stage. Then, for Tween choose Motion and for Rotate Cw. See the picture below.

img125.gif

We’re done!

Enjoy!

Download source file (.fla)

One Response to “Simple shape animation”

  1. Fabricio Says:

    Very nice sample!!! Tks very much. I am starting learning flash at this moment.

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Login
eXTReMe Tracker