After seeing a recent application, for some reason recently created and built in AS2!!?? I thought it would be great to create a similar application in AS3 to show how simple, effective and great this would be.
As you can see from the code, I have created an instance of the Date class to ascertain the current date for the date display at the bottom of the swf , this is also called upon on completion of the timer event, which is called every second and updates the state of the clock face.
To get the days and months of the date display, as flash assigns numbers to these elements, 0-6 for the days and 0-11 for the months etc, this runs in well with the Array elements so an array is created and then referenced to in the call to this on creating the text.
-
private function init(e:Event)
-
{
-
var currentTime:Date = new Date();
-
var month:Array = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
-
var dayOfWeek:Array = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
-
-
date_text.text = dayOfWeek[currentTime.getDay()] + " " + currentTime.getDate() + " " + month[currentTime.getMonth()] + " " + currentTime.getFullYear();
Note that I have chosen the Timer calss to use for keeping the time updated rather that an Enter_Frame event, the reason for this is that the timer class runs at the specified time (every second in this case) rather than at the frame rate of the swf which can slow down depending on the users cpu, which could slow the time on the clock down, this would also run at a certain times per second (the frame rate of the swf) resulting in too many checks, when really, only one a second would suffice, so this method would result in a more accurate looking and better running clock.
The date class has to be called upon each second to update the time, as if this is created before the function as called the time stays the same. This seems to be the best method I could find as the Date class doesn't seem to have an update() method, if somebody else finds a better work around please do feel free to let me know.
-
private function timeListener(e:Event):void
-
{
-
-
var currentTime:Date = new Date();
-
var minutes = currentTime.getMinutes();
-
var seconds = currentTime.getSeconds();
-
var hours = currentTime.getHours() * 30 + currentTime.getMinutes() / 2;
-
seconds_hand.rotation = seconds * 6;
-
minutes_hand.rotation = minutes * 6;
-
hours_hand.rotation = hours;
-
}
Just to add a bit of fun to the clock I have made the colour changeable and the clock draggable through the centre of the face.
Have fun!
Get the source here.
![[Valid RSS]](http://www.ultravisual.co.uk/blog/images/valid-rss.png "Validate my RSS feed")
simple and fun tutorial, just as I like them
Wow, a lot simpler than it looks!
currentTime.setTime( currentTime.getTime()+1000 );
OK Great, I’ll give that a go….thanks!
Im not sure about version of the downloaded FLA file. Is it CS3 or CS4?
It is flash CS3…….now
Great site.
I think your clock is great.
However when I downloaded the source code and Try to use it….the clock doesn’t work.
I have Flash 9 and AS3.
Plz help me.
Dominic
Hi, The Clock_src has been updated, there was an import statement missing, which CS4 didn’t mind but for some reason CS3 does…..?!
I have just started to learn AS and intended to attempt a clock to go onto my site so finding this tutorial was perfect. I have added my attempt to my site using basically the same method as you have described along with a animated second hand but the hand occasionally jumps, something seems to be un synchronised… ?
Did currentTime.setTime( currentTime.getTime()+1000 ); work? and if so how is it used?
U say there’s an import statement missing for the CS3 version, what is it? Because i download the source files and it doesn’t seem it work? Thanks!
Do you have the caurina.transitions.Tweener library included in your library path as the initial tween of the hands relies on this? If so, and you are still getting errors let me know your error message and I’ll be able to help more…..
Very cool flash analog clock, good use of colors, smooth contrast, perhaps is better to use it in a dark background color like you did, though without the shadow around the clock it can also be used on a transparent background (white).
Say web did a video on this one: http://say-web.com/?p=1676
Just a question:
Each second your timer creates a new Date object in the timeListener function..
private function timeListener(e:Event):void
{
var currentTime:Date = new Date();
…
}
It reserves a new space in the memory each second for a new object. If I use, for example, this clock in a website and if the user stays with its browser open during a long time, the users memory ram is gonna “blow”. The question is: how can I change this code in a way I can have a better control of this problem of memory inflation???
By the way, it’s a nice clock
Hi Gepeto,
The best way, which is also mentioned in the comments above is to set currentTime like so:
currentTime.setTime( currentTime.getTime()+1000 );
this would basically set currentTime to itself plus one second!
I had used the currentTime.setTime(currentTime.getTime()+1000 ); when I wrote here (I forgot to mention that) but using the De Monsters Debugger I could see the memory size increases the same way… well, I think we cannot avoid that, can we?
Thanks for the answer
hi, excuse me , i’ve downloaded the code and the Tweener library wasn’t in your zip file, so i downloaded it from http://code.google.com/p/tweener/downloads/list the swc file, but i still have a problem with a variable , could you tell me please what i’m doing wrong??? thanks in advance
ReferenceError: Error #1065: Variable caurina.transitions::Tweener is not defined.
at Clock/init()
at flash.display::Sprite/constructChildren()
at flash.display::Sprite()
at flash.display::MovieClip()
Hi Yes, when you say you downloaded the swc, how are you adding it to your project are you adding it as a linked library in flash via preferences / actionscript 3.0/ libraries or just dropping it in your project folder?
Shane
just dropped it in my project folder thanks
Well there is your problem. Swc’s cannot just be dropped into a project, flash needs to be told where they are. Now you can either go to publish settings in your fla, edit the actionscript properties and go to library path and click the ‘browse to swc’ button and select your swc …… or you can go to here here to download the tweener library, go to the src folder in this package and drop the cuarina folder into your project.
Shane
Hi, thanks for your tutorial, I learned a lot. However the second hand of your clock and my clock at (www.honestandfair.com.au) all jumps randomly. If you stare at my clock for a while you will see what I mean. It looks as if the getSeconds() gives you something like this: 2,3,4,5,7,8,9 and no 6. This is very frustrating.
If you know why and how to fix it, please let me know.
Hugh
Hi
I haven’t really tested this in any detail, will do when I get the time, but I can only assume that the 1000ms that is being passed to the timer is losing time over a number of seconds and so the getSeconds() call is making the second hand catch up every now and then. I know that the timer class over the web browser is not 100 accurate. The only way at the mo I can think of for rectifying this is to make the call every 500ms and do a getSeconds() then say if(seconds%1){move second hand} – (this would make sure that the seconds returned are a whole second).
Shane
I tried to apply your as3 code to a couple of flash clocks i created and i can say that it works but, needs to resolve a situation or two referenced by 2 visitors here, despite that, which always happens in my opinion, at least sometimes, it is a very impressive flash clock.
Tweener library should be inserted into a project using adobe flash actionscript 3 configuration options, but the other method provided by ultravisual works i suppose, never tried it like that though.
The var hours code should not be like that if one plans to use timezones, unless you use a complicated “version” with () and [], i say that because flash beginners always need to start slow, i had those kind of problems to bypass and it always stopped me for hours, but i guess it is where flash beginners go to professionals, with little problems here and there in the actionscript code, and i learned with your tutorial.
By the way, i love your flash clock even more with the drag and drop function or functions in flash, i did not open the fla file yet, but i would not mind to see and to learn from a tutorial fom you showing how to make a flash clock with drag and drop feature, if you could explain it quickly, thanks.
Anyone know how to make the seconds hand smoother like a real analog clock instead of a chronograph?
Original……
seconds_hand.rotation = seconds * 6;
After…….?
second_hand.rotation = Seconds()*6 + (Milliseconds()/(1000/6));
Hi Bob?
No that wouldn’t really do it as the timer is running every second in this case, to make the timer more accurate you would run it at a more regular interval say every 25 milliseconds which would equal 40 frames a second and then do :- seconds_hand.rotation = (seconds * 6) / 40; which would give you a much smoother second hand movement.
In case anybody else wound up here searching for an update function in the Date class, here is my generalized solution:
1. create a timer with infinite repeat count (0)
2. add a TimerEvent.TIMER, someFunction listener to the timer
3. start the timer
4. create someFunction which takes a TimerEvent as its first argument
5. in someFunction write
myDateObjectHandle.setTime(myDateObjectHandle.getTime() + myTimerDelay);
where myDateObjectHandle is the name of your Date class object and myTimerDelay is the delay in milliseconds you assigned your timer. This should update the handle on the system clock time at almost any interval you want (can’t go below 20 ms delay)