Toxiclab.org

Countdown

30.4.2006, 11:30
Submited in: Flash | Total Views: 73133

In this detailed tutorial made for Flash, you will see how to create a cool countdown animation using the shape effect with no Action Script. You will also learn how to design countdown animation and after that how to animate it. Let's go!

Example:



Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J). Set the width of your document to 150 pixels and the height to 150 pixels. For frame rate set 24 fps (Frames per Second) and click ok. See the picture below.





Step 2


Take the Rectangle Tool (R), for Stroke color choose black color, for Fill color choose No color, and in Properties Panel (Ctrl+F3) below the scene, choose Solid and set it to 7px. See the picture below.



Step 3

Draw a rectangle! Note! While you're drawing a rectangle, hold down shift key to get a symetrical rectangle! When you have drawn a rectangle, go to the Align panel. If it isn't opened already, just select Window > Align or press Ctrl+K to open it. While the rectangle is still selected do the following in the Align panel:

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.





Step 4

Create a new layer (layer2).



Step 5

Select layer2, take the Text Tool (T), click on the stage, and In Properties Panel (Ctrl+F3) below the scene choose the options like it is shown on the picture below.



Step 6

After that type "number 10", take the Selection Tool (V), select that "number", go to the Align panel. If it isn't opened already, just select Window > Align or press Ctrl+K to open it. While the "number" is still selected do the following in the Align panel:

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.



Step 7

While the number is still selected, press twice Ctrl+B key (Breake Apart) to break apart that number.



Step 8

Click on frame 15 of layer2 and press F7 (Blank keyframe). Then click on frame 15 of layer1 and press F5. After that go back on frame 15 of layer2 and type "number 9 " and repeat steps 6 and 7 in an equivalent way like we have done!





Step 9

Click on first frame of layer2, open the Properties Panel (Ctrl+F3) and for Tween choose Shape.





Step 10

We're done for the first two numbers! Repeat steps 6,7,8 and 9 for every other number in an equivalent way like we have done the previous number!

Enjoy!

Have a nice day!

Download example (98 KB)

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

Browse by category


Most popular tutorials