Flash Analog Clock with ActionScript |
| Written by AnaS | |
|
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:
You should have installed Flash 8 on your computer and Flash Player 8 or later.
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:
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.
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() { 11. Great test your flash analog clock and put it on your website. You need to Register in order to download the FLA file.
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 Dnyaneshwar Imde , September 28, 2007
your web is wonderful but add some free content of 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
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 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?
written by Duane Covington , June 08, 2008
How do you make the clocks second hand move like a Rolex flow?
written by R.Sudhakar , July 18, 2008
Have a Peace Ful Day
written by eugenecheeyj1 , July 25, 2008
Wat is this ?
written by asim , August 04, 2008
i want to learn flash but i do't know , from where i can get flash enviroment plz tell me it's full name . is it flash player or any thing else?
written by nabil , August 31, 2008
Hi, still we need to know how to make 5 or 6 clocks shows different timing acuratley no matter the location of the pc viewing it tnx
written by diva42 , October 02, 2008
It doesnt line up I spent quite a long time redoing and checking its not me but the tutorials got to be wrong. Also Im logged in and still it says I need to register to download fla. I am registered and logged in!
written by Dungaa , October 02, 2008
thanks. goy bolomjiin hicheel bnaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa surmaar yum bna
written by diva42 , October 02, 2008
Thanks for the tutorial but I cannot get it to line up Im not to good with x,y coordinates. I will have to find a tutorial that is a little bit more my speed.
written by krt , November 25, 2008
Hey I use your code, but my clock dos not update, so it keep shjowing the time it is when i load the page..
written by Jamie Tucker , November 27, 2008
"written by Duane Covington , June 08, 2008 How do you make the clocks second hand move like a Rolex flow?" 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 milseconds = time.getMilliseconds(); /* currents second represent like an integer between 0 and 59*/ var seconds = time.getSeconds(); 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) (0.1 * seconds); /* 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 = (0.006 * milseconds) (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.*/ }
written by Jamie Tucker , November 27, 2008
"written by nabil , August 31, 2008 Hi, still we need to know how to make 5 or 6 clocks shows different timing acuratley no matter the location of the pc viewing it tnx" make another clock with minute second hour hands on seperate layers again. Change the name of the instances on the new clock to minutes2_mc, seconds2_mc, hours2_mc. there are two new variables my_timezone and your_timezone just set them to whatever offset of UTC you want to be showing. New York is -5, Paris is 1 etc.. you want six clocks? you do this six times. You'll have 18 layers for all the clock hands. Easiest thing would be to put each set of clock hand layers in a Layer Folder. All the clock faces could probably be on the same bottom Layer. this.onEnterFrame=function() { var time = new Date(); var my_timezone = -7; /* UTC -7 Mountain Time*/ var your_timezone = 9; /* UTC 9 Japan Standard Time */ var hours = time.getUTCHours(); /* All time is set according to UTC */ var minutes = time.getUTCMinutes(); var milseconds = time.getUTCMilliseconds(); var seconds = time.getUTCSeconds(); hours_mc._rotation = (hours*30) (minutes/2) (my_timezone * 30); /* time is offset from UTC to the timezone you entered */ minutes_mc._rotation = (6 * minutes); seconds_mc._rotation = (6 * seconds); hours2_mc._rotation = (hours * 30) (minutes/2) (your_timezone * 30); /* time is offset from UTC to the timezone you entered */ minutes2_mc._rotation = (6 * minutes); seconds2_mc._rotation = (6 * seconds); }
written by Jamie Tucker , November 28, 2008
Oh I just noticed it stripped all the plus signs from my text... If you copy and paste it, it won't work. replace /*plus*/ with the adding sign. hours_mc._rotation = (hours*30) /*plus*/ (minutes/2) /*plus*/ (my_timezone * 30); /* time is offset from UTC to the timezone you entered */ minutes_mc._rotation = (6 * minutes); seconds_mc._rotation = (6 * seconds); hours2_mc._rotation = (hours * 30) /*plus*/ (minutes/2) /*plus*/ (your_timezone * 30); /* time is offset from UTC to the timezone you entered */ minutes2_mc._rotation = (6 * minutes); seconds2_mc._rotation = (6 * seconds);
written by ines , December 10, 2008
Oh great! Thank you - you have fasten my time for ages!
written by mcs1176 , December 24, 2008
this is very great script. But still one problem. How we can put fractional time zone lime 5.5 or 4.5. When we are putting that correct time is not coming....can anybody help!
written by veeranarasiman.V , April 17, 2009
Respected Sir, I have learned some scripts from your website. And i want to know that how to create webpage so please give me a details of that. I will be more thankfull to you. Thanks Veernarasiman.
written by Flash Clocks , May 08, 2009
Great tutorial, i found some interesting actionscript code which i can use to build my own flash clocks, thanks for that.
written by kaherne , June 17, 2009
This is the code in ActionScript 3.0: addEventListener('enterFrame',time) function time(event:Event) { 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.*/ }
written by Kedar Dange , June 24, 2009
this isn't working so anybody with the free time and knowlege to makea custom clock for me, e-mail me and i will send you when i want for the hands and the actual clock body, the scriptigng is up to you
written by ThinkSynchs , June 28, 2009
Kedar, email me at This e-mail address is being protected from spam bots, you need JavaScript enabled to view it Also, does anyone know how I would add hourly chimes to a clock?
written by Sandip waghmare , July 17, 2009
Add more ActionScript.....Thanks
written by Flash Clock , July 28, 2009
Thanks for your actionscript, i actually used it to create an analog clock for my blog, it is a lot more simple then the code i used to use on my flash clocks, though the result is the same as a matter of fact.
written by eye , September 03, 2009
time=new Date(); // time object seconds = time.getSeconds() minutes = time.getMinutes() hours = time.getHours() hours = hours (minutes/60); seconds = seconds*6; minutes = minutes*6; hours = hours*30; sec._rotation=seconds;
written by albi , September 17, 2009
good work :)
written by Jeffrey , September 18, 2009
I am trying to do this and I am very exited!
written by Mark Jardine , September 29, 2009
This was great it helped a long with an assignment I have in actionscript
written by lena , October 05, 2009
How to fletch server time not user time. The flash is on a server and I want the user that connect to it see the time of the server not the time of the user computer. Any clue Thanks
written by lena , October 05, 2009
Ok I have try the Jamie Tucker solution and it's work ok now. How to manage daylight saving changes?
written by Edwin_blessy , October 29, 2009
Excellent.... Then I want Script in Other Country.. Ex. (New York and Europe Country) How to chance in Action Script...
written by Jeffrey Li , October 31, 2009
I am have not made this clock yet, but I am sure I will like it. Maybe, you can send us some other things you have made. My phone number is 905-501-9845. This phone number usually does not work, so you could call 647-801-8566
written by Zakir Hussain , January 09, 2010
Thanks buddy very much for uploading this tutorial. MAY GOD GIVE YOU EVERYTHING THAT YOU DESIRES IN YOUR LIFE.
written by jbeau , February 02, 2010
GREAT tutorial!!! i used about 5 others before and none of them worked properly! just make sure to use action script 2 instead of 3! it comes out amazing!
written by faithoski , September 09, 2011
great work. Pls can anyone help me? I want to create an analoge clock nd in the background, it will also have a signal receptor and battery indicator (i.e imitate ma phones battery nd network status) ave tried but wen i export it in flash8, the battery nd signal receptor will not work nd wen i export it in fl1.1, d clock will not work. Plz i need ur help as soon as possible. This e-mail address is being protected from spam bots, you need JavaScript enabled to view it
written by Attanayakwe , January 23, 2013
Thank u and please add more ACTIONSCRIPT
written by elloi , February 03, 2013
how can i make the clock hands go faster? thanks! :))) Do you need more help? Ask now!
|
|
| Last Updated ( Friday, 28 March 2008 ) |
