orthopedic pain management

Flashuser

  • Pin It

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.

[as3]
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;
}
[/as3]

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+

  • 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.

    • Using a timer creates a delay between the flash loading and the clock displaying the correct time, personally if the application isnt a game or something that requires lots of processing then I dont see the harm in the clock being updated every frame.

      Though another fix for this would be to call clockHandler(null); when starting the timer.

  • Jloa

    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?