August 28, 2009
Tips & Tricks 11: Customizable Flash Analogue Clock AS3
In this tutorial I’ll create a customizable analogue clock in ActionScript 3.0. What is a must know is that the time displayed depends on the users computer time. The code beyond is intuitive so the focus here is on the design. Follow this three simple steps to create your one clock.
Take a look at the example below for the final result.
1. For the first step I created the clock face. I drew 3 circles, and center align them. I used blue and grey colors with gradients for the background clock to look nice. I also made here the lines for the minutes and hours.
2. Create three new movie clips (Insert->New Symbol->Movie Clip) for seconds, minutes and hours clock hands. Inside each of them drew a coresponding shape. After that drag them on the Stage and center align to the clock. Give each Movie Clip an instance name (secondHand_, minuteHand_, hourHand_).
3. Final step paste this code in the Actions tab of the first frame. Once you’ve done that test the movie.
var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, clockHandler);
timer.start();
function clockHandler(event:TimerEvent)
{
// set hour
var time = new Date();
var hourHand = time.getHours();
var minuteHand = time.getMinutes();
var secondHand = time.getSeconds();
hourHand_.rotation = 30 * hourHand + minuteHand / 2;
minuteHand_.rotation = 6 * minuteHand;
secondHand_.rotation = 6 * secondHand;
}
2 author >> this.addEventListener(“enterFrame”,clockHandler);
I’d adviced u to use Timer class usage with a 1000 ms timeout.
For example: i have a 31 fps movie, which means yr script will update the timing 31 timer per second = no need 4 that.
var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, clockHandler);
timer.start();
function clockHandler(event:TimerEvent)
{
// set hour
var time = new Date();
var hourHand = time.getHours();
var minuteHand = time.getMinutes();
var secondHand = time.getSeconds();
hourHand_.rotation = 30 * hourHand + minuteHand / 2;
minuteHand_.rotation = 6 * minuteHand;
secondHand_.rotation = 6 * secondHand;
}
my code is 31 times optimized than yrs (if the fps is set to 31) ^_^
i updated the script…thanks for share
U r welcome ^_^
nice tut, thanks for the tip..
The new code with timer will cause the second hand to ramdomly jump 2 seconds. Any one know why?
Leave a Comment