Flash Analog Clock with ActionScript

In this tutorial it will be shown how to create a awesome flash analog clock using ActionScript. For attempting this tutorial is required for you to have basic knowledge of Flash and ActionScript . The result should be the following flash analog clock:

Prepare a good-looking background for your clock (in Flash, Photoshop, Corel, Fireworks or what do you want) with 300x300 dimensions. If you don't have a background take the picture below:

Let's begin!

1. Create a new Flash 8 document. Resize it, Choose Modify >> Document (Ctrl+J) or go to the Properties panel and change dimensions to 300 px by 300 px. Save it on your computer as flashclock.fla.

2. Add 4 new layers in your Timeline and rename them from top to bottom: actions, seconds, minutes, hours, clock.

3. Go to the first frame of the clock layer and insert the picture you desire for background. Choose File >> Import >> Import to Stage (Ctrl+R). Select the picture, go to the Properties panel and assure the properties are set as it follows: W:300, H:300, X:0, Y:0. Lock the clock layer we will not edit it anymore.

4. In the first frame of the hours layer draw a vertical line using the Line Tool (N) from the Tools panel. Select it and in the Properties panel set H:60, Stroke color: #333333, Alpha: 70 %, Cap: Square. While the line is still selected choose Modify >> Convert to Symbol (F8). In the Convert to Symbol window that appears choose MovieClip as type, give it hoursMC name and assure the Registration point is set to center-bottom like in the following picture, the press Ok button.

5. While the MovieClip is still selected go to the Properties panel and give it an instance name of hours_mc. Also align it to center both horizontal and vertical. Double-click hours_mc, or right-click >> Edit in Place. You are in the Edit Mode for hoursMC now. Select the line here, go to the Properties panel and add 20 to the Y property (if old Y:-35, then the new Y is -15).

6. In the minutes layer draw a vertical line with H:90 and the rest of the propeties like in the step 4. While the line is still selected choose Modify >> Convert to Symbol (F8). In the Convert to Symbol window that appears choose MovieClip as type, give it minutesMC name and assure the Registration point is set to center-bottom.

7. Give it an instance name of minutes_mc and repeat step 5 for minutes_mc.

8. Finally fo to seconds layer and draw a vertical line with H:115 and Stroke color:#99FF00. All the rest of the Properties are like in the step 4. Convert it to a MovieClip with secondsMC name and center-bottom Registration point.

9. Give it an instance name of seconds_mc and repeat step 5 for seconds_mc.

10. Now go to the first frame of the actions layer and put te following ActionScript code in:

this.onEnterFrame=function() {
var time = new Date(); /* we create a new Date() object*/
var hours = time.getHours(); /* currents hour represent like an integer between 0 and 23*/
var minutes = time.getMinutes(); /* currents minute represent like an integer between 0 and 59*/
var seconds = time.getSeconds(); /* currents second represent like an integer between 0 and 59*/
hours_mc._rotation = (hours*30) + (minutes/2); /* There are 12 hours on the clock, so if a circle has 360 degrees, 360 divide by 12, means that the angle correspondig for each hour is hours*30. The angle between every two consecutive hours is 30. We will add to the rotation the angle correspondig for the minutes passed from current hour that is (minutes*30)/60, that means minutes/2*/
minutes_mc._rotation = 6 * minutes; /* There are 60 minutes on the clock, so if a circle has 360 degrees, 360 divide by 60, means that the angle correspondig for each minute is minutes*6.*/
seconds_mc._rotation = 6 * seconds; /* There are 60 seconds on the clock, so if a circle has 360 degrees, 360 divide by 60, means that the angle correspondig for each second is seconds*6.*/
}

11. Great test your flash analog clock and put it on your website.

You need to Register in order to download the FLA file.

Subscribe now via RSS feed and get all the new tutorials

written by wesley , September 14, 2007

My lines are not in the middle of my clock. What did i do wrong ?

written by AnaSt , September 14, 2007

Maybe you didn't align them properly to both hotizontal and vertical. See the second picture from step 5.

written by Millin Panwar , September 15, 2007

could you pls provide me a tutorial for creating a speedometer through an external database file

written by wesley , September 15, 2007

i did exactly the same as the pictures shows but still they are not in the center.

written by hiypo , September 15, 2007

too many errors when played ??

written by Tieskeman , September 16, 2007

Next time please tell us you used actionscript 2,0!!!
It took me several hours to discover that.
(hiypo, this is the solution for you're problem to I think)

written by Yasir Yagami , September 19, 2007

This tutorial does not works properly plzzz give the right one.

written by manav , September 25, 2007

hi your is wonderfull. Add more codings for action script

written by manav , September 25, 2007

no thanks

written by manav , September 25, 2007

your site is wonderful

written by manav , September 25, 2007

add more action scripts

written by Dnyaneshwar Imde , September 28, 2007

your web is wonderful but add some free content of tutorial

written by Dnyaneshwar Imde , September 28, 2007

i want some free tutorial

written by vandee , September 29, 2007

how do i make the 6 analog clock showing 6 different timezones instead of fetching server/system time.......pls help

written by njk , October 03, 2007

good example of clock , faced problems in alignment but could manage with trial & error method to bring them in center

written by PANNALAL , October 09, 2007

panna lal Graphics Designer AND Web Designer And 2D Animation From Faridabad. (HR)

written by josh , October 12, 2007

your tutorial is great i had the same problem as that wesly guy then i realized that the cross hairs are the center of rotation i learned alot thx

written by daniel , October 25, 2007

I want to put 4 clocks into the same *.fla file.
I create the secind clockbut it does not move:(
Have you any idea how to do this?
Thanx

written by Hany Hanna , October 29, 2007

I want the clock to get time from specific url, not from my local computer, do you have a script for that task... please send it to me on This e-mail address is being protected from spam bots, you need JavaScript enabled to view it

written by s.shivesh , November 24, 2007

The movie is not running properly.It is not even starting.

written by s.shivesh , November 24, 2007

The movie is not running properly.It is not even starting.

written by GPlus , November 26, 2007

I get the error:
Warning: 1090: Migration issue: The onEnterFrame is not triggered automatically by Flash Player at run time in ActionScript 3.0. You must first register this handler for the event using addEventListener ( 'enterFrame', callback_handler).

What is that and how do I correct the code to make it work.

Thanks...

written by RonBurgundy , December 04, 2007

GPlus,

If you are using Flash CS3, start the project over and under create select Actionscript 2.0

Thats the only way I knew of to fix it. Soon as I did that everything worked great.

NICE TUTORIAL.

written by pooja , December 08, 2007

this tutorial help me a lot.....
thanks

written by Guang Liang , January 08, 2008

hi how come the time show is like mirror image, opp. anyone can help?

written by emad , January 08, 2008

I want to add 4 clocks with differant timing, how can we do this pls ?

written by pam , January 08, 2008

how ro send e mail in flash and for database in flash what we use

written by pam , January 08, 2008

faced problems in alignment but could manage with trial & error method to bring them in center

written by Vandee , January 23, 2008

I'm using Actionscript 2.0 but still getting this error msg?

Warning: 1090: Migration issue:

Please help!
Thanks

written by Jon Hansen , March 08, 2008

How can I place a date window at the 3'oclock position and make it work.

written by Lyon , March 26, 2008

I consider your tutorial to be very good, thanks for showing us your way of doing free flash clocks.

written by sid , April 01, 2008

thanks a ton buddy u made my day have to show this proj to my teacher i hope shes happy .

written by jackoofgy , April 19, 2008

hay mate ty for the tutorial it worked great

written by Tom , April 25, 2008

Thanks for this great tutorial. How would you adjust the script to display a second hand that moves smoothly vs. once a second?

written by Jim , May 02, 2008

This is exactly what I needed. Thanks!

written by RAJ MALHOTRA , May 02, 2008

IWANT TO BE A TUTOREAL OF Flash Analog Clock with ActionScript

written by c3p0 , May 07, 2008

i am currently working on a clock similarly , but instead of moving a hand, my clock is in abstract and the time is told by a movie clip :
for example with the minutes i have bken it up into 60 segments and it has code to tell it to go play the corrisponding animated frame so 14 minutes would be frame 14 of an animation.
However this rule dosen't apply to hours, although hrs currently does have 60 seconds in its mc, any attempts to lessen this amount result in it not moving at all.

IF this is my minute code:
var myMin = myDate.getMinutes();
mc_minute.gotoAndStop(myMin); //dictating where the mc plays at

if (myMin =13){
myHour = myHour -12;
}
although i can get this dummed down into 12 frames insides, any number below 12 will place the hour marker at the 12 point, like 4, 3 and 6.
if the frames inside of the hour mc are 60, meaning that divisionals of 5 (5x12=60 etc) are required to generate the exact movement between the hours.
strangely the 60 frame mc seems to sit fine on 3 o'clock when it is actually 3 o;clock, but moves one frame at the tick of an hr. how do i get it to tick in frames of five, granted what i am using about is my code?

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (37)