Flash Tutorial 1

RohailStarred Page By Rohail, 5th Aug 2010 | Follow this author | RSS Feed
Posted in Wikinut>Guides>Web>Flash

Quick and easy tutorial to create an animated analogue clock in Flash.

Step 1

1. Open a new flash document and select the oval tool. Hold down the shift key and draw a circle in the work area. Now, create a new layer and create a static textbox. In this write "1". Make 11 other such textboxes and give them numbers "2 to 12". (These will be the numbers of your clock). Arrange these numbers on the circle you made previously so that it looks like an analogue clock.

Step 2

2. Create a new layer and make a small straight line. Press F8 and select the option "Movie Clip" in the dialog box. Make sure the Registration Point is set to bottom center. Give it any name you want and select "okay". Now give this movieclip the Instance Name "minutes".

Create another such movieclip, except in this one make the line a bit smaller. Give this movieclip the Instance Name "hours".

Create the last movieclip same as the previous two ones, except make this line the longest. Give this the Instance Name of "seconds".

Step 3

3. Put all three hands of the clock together in the center of the circle. The hands should all be facing upwards towards "12" and they should be overlapping each other.

Step 4

4. Now, the main designing phase of this project is finished. All that's left is the Actionscripting. Select the first frame of any layer and right-click and select Actions.

Make sure you're in expert mode. Then copy and paste the following code:

this.onEnterFrame = function() {
myDate = new Date()
s = myDate.getSeconds()
m = myDate.getMinutes()
h = myDate.getHours()
hours._rotation = (h/24) * 360
minutes._rotation = (m/60) * 360
seconds._rotation = (s/60) * 360 }

Step 5

5. And that's about it. Press Control + Enter to test your movie and you should see a fully operating analogue clock!


Analog, Analogue, Clock, Create, Flash, Tutorial, Tutorials

Meet the author

author avatar Rohail
I have been regularly publishing articles mostly concerning technological news and tips for well over a year.

Share this page

moderator RSyed moderated this page.
If you have any complaints about this content, please let us know


Add a comment
Can't login?