ANALOG CLOCK as3 |
In this tutorial I will show you how to build your own, fully customizable analog clock with all three ( hours, minutes, seconds ) clock hands. All we are going to need for this project
is actionscript (3.0). At the end we should get something similar to this :
We start by creating new flash file (actionscript 3.0). Draw empty, or if you want background of some specific color creat full circle. If you hold down shift while drawing it, you will get a perfect round circle.
Insert new layer, and draw your clock hands, the look of them is entirely on your decision. Convert those hands into movieclips and set their instace names to hourHand_ ,minuteHand_ and secondHand_.
Make sure you set the middle bottom point of your hands to 0,0 (X:0,Y:0). This point is represented by little cross symbol in your movieclip, simply move your drawing to that point.
It is important because actionscript is rotating movieclips around this (X:0,Y:0) point,unless told otherwise. At the end you should get something like this:
![]() The small cross marked with red ellipse is the 0,0 point you have been looking for. Thats the point this hand is going to be rotating around. Now move all three movieclips so their 0,0 points are exactly in the center of the circle you draw earlier. I recommend to put each hand into its own layer so its easier to manipulate with them. Now insert new layer, select first frame of this layer ,press F9 to open up actions window and paste the following actrionscript code into the actions - frame . this.addEventListener("enterFrame",clockHandler); function clockHandler(e:Event) { // set hour var time = new Date(); var hourHand = time.getHours(); var minuteHand = time.getMinutes(); var secondHand = time.getSeconds(); // rotate clock hands hourHand_.rotation = 30 * hourHand + minuteHand / 2; minuteHand_.rotation = 6 * minuteHand; secondHand_.rotation = 6 * secondHand; }
First line is event listener which is calling the clockHandler function every time you enter this frame. Default fps is 60, meaning it refreshes the variables called by this function 60 time per second.
2nd lane is definition of the function. Next we get hours, minutes and seconds stored in their variables which are used later on line 10,11,12 to set the angle of each hand based on the current time.
|