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);
// 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;