Learn Flash: Animated Clock	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Animated Clock

Free Tutorial

Step Three: The ActionScript MC Frame 3

Note: You should still be Editing inside the Movie Clip: ActionScript MC

1. Right click on Frame 3 and select: Insert Blank Key Frame

Note: If you wanted the animation to play at a slower speed you could place the code on a frame further down the timeline, such as Frame 10 etc.

2. Add this code to the Timeline in Frame 3:

// Set the target to this
tellTarget ("..") {
    // Get the location of the mouse and set the clock location accordingly
    yClock = _ymouse+clockOffsetY;
    xClock = _xmouse+clockOffsetX;
    // Set the date location
    yDate[0] = yDate[0]+(yClock-yDate[0])*easingRate;
    xDate[0] = xDate[0]+(xClock-xDate[0])*easingRate;
    // For the length of the variable D set the date center starting location and easing rate
    for (i=1; i<D.length; i=i+1) {
        yDate[i] = yDate[i]+(yDate[i-1]-yDate[i])*easingRate;
        xDate[i] = xDate[i]+(xDate[i-1]-xDate[i])*easingRate;
    }
    // Set the hands of the clock center starting location and easing rate
    yHand[0] = yHand[0]+(yClock-yHand[0])*easingRate;
    xHand[0] = xHand[0]+(xClock-xHand[0])*easingRate;
    // For the length of the variable F set the hands center starting location and easing rate
    for (i=1; i<F.length; i=i+1) {
        yHand[i] = yHand[i]+(yHand[i-1]-yHand[i])*easingRate;
        xHand[i] = xHand[i]+(xHand[i-1]-xHand[i])*easingRate;
    }
    // Get the system date
    var time = new Date();
    // Get the seconds from the system date
    var seconds = time.getSeconds();
    // Get the minutes from the system date
    var minutes = time.getMinutes();
    // Get the hours from the system date
    var hours = time.getHours();
    // Set the angle for the seconds
    var secondsAngle = 3.141593*2*(seconds/60-1.250000);
    // Set the angle for the minutes
    var minutesAngle = 3.141593*2*((minutes+seconds/60)/60-1.250000);
    // Set the angle for the hours
    var hoursAngle = 3.141593*2*((hours+minutes/60)/12-1.250000);
    // Set up the clock face numbers with some maths
    for (i=0; i<F.length; i=i+1) {
        var faceSprite = eval("chFace"+i);
        a = (i*FaceDeltaAngle-90)*3.141593/180;
        faceSprite._y = yHand[i]+clockDiameter*Math.sin(a);
        faceSprite._x = xHand[i]+clockDiameter*Math.cos(a);
    }
    // Set the location for the hour hand based on some maths
    for (i=0; i<H.length; i=i+1) {
        var hoursSprite = eval("chHours"+i);
        hoursSprite._y = yHand[i]+HandY+i*HandHeight*Math.sin(hoursAngle);
        hoursSprite._x = xHand[i]+HandX+i*HandWidth*Math.cos(hoursAngle);
    }
    // Set the location for the minute hand based on some maths
    for (i=0; i<M.length; i=i+1) {
        var minutesSprite = eval("chMinutes"+i);
        minutesSprite._y = yHand[i]+HandY+i*HandHeight*Math.sin(minutesAngle);
        minutesSprite._x = xHand[i]+HandX+i*HandWidth*Math.cos(minutesAngle);
    }
    // Set the location for the second hand based on some maths
    for (i=0; i<S.length; i=i+1) {
        var secondsSprite = eval("chSeconds"+i);
        secondsSprite._y = yHand[i]+HandY+i*HandHeight*Math.sin(secondsAngle);
        secondsSprite._x = xHand[i]+HandX+i*HandWidth*Math.cos(secondsAngle);
    }
    // Set the circular rotation of the date around the clock face with some maths
    for (i=0; i<D.length; i=i+1) {
        var dateSprite = eval("chDate"+i);
        dateSprite._y = yDate[i]+clockDiameter*1.500000*Math.sin(dateRotation+i*DateDeltaAngle*3.141593/180);
        dateSprite._x = xDate[i]+clockDiameter*1.500000*Math.cos(dateRotation+i*DateDeltaAngle*3.141593/180);
    }
    // Set the date rotation speed
    dateRotation = dateRotation-dateRotationStep;
}
// Replay the code and update the code to show the new time from last time it was checked
gotoAndPlay(2);

6. If the Edit bar is closed, open it: Window > Tool Bars > Edit Bar
7. Return to the Main Stage by clicking on the Scene 1 tab in the Edit Bar:

Note: the ActionScript is complete but it needs to be placed inside the Clock Movie Clip.

8. Right click on the Clock Movie Clip and select: Edit

Note: You should find your Letter X Movie Clip inside the Clock MC.

9. Re-name Layer 1 to: Letter X
10. Add a second layer by clicking on the Insert layer button:
11. Re-name the new layer to: ActionScript
12. Select frame 1 of the new layer: ActionScript
13. If your Library is closed, open it: Window > Library (F11)
14. Drag onto stage from the Library the: ActionScript MC
    
    
15. Test your Movie by going to: Control > Test Movie (Ctrl + Enter)

That's it! Easy Hey?