Flash Tutorials: Animated Clock	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash Tutorial - Animated Clock

Free Tutorial

This Flash tutorial shows you how to make an animated clock that follows the mouse as your cursor moves. The clock gives the viewer the time and date based on the settings on their local computer. So no matter where they are in the world the clock will be correct for them, as long as their computer clock is correct. The clock is built with ActionScript so the download time is very small.

Example: Download the Flash file  Int 134a Flash MX

Roll over the Movie to see how the clock animates and follows the mouse.

Set One: Setting up the Flash Movie

1. Open a new: Flash Movie
2. Go to: Modify> Document (Ctrl J)
3. Set the size of your Movie. Mine is: 550 x 400
4. Set the Background colour. Mine is: #FFCCFF
5. Click: OK
6. Select the Text tool:
7. Drag onto the Stage a small: Text Box
8. Type in the box the capital letter: X

Note: This letter X does not display, it only makes the text box easier to find and edit.

9. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
10. In the Property Inspector set the Text Box to: Dynamic Text
    
    
    
    
11. I recommend you use the font: _sans , size: 8, style: bold
12. Set the Variable (Var) name to: MyText
    
    
    The settings in the Property Inspector should be similar to this.
    
    Note: The text box does not need an Instance name only a Variable name.
    
    
13. Right click (Mac: Ctrl click) on the Text Box and select: Convert to Symbol
14. For Symbol Name type: Letter X
15. For behavior select: Movie Clip
16. Click: OK
17. Select the new: Movie Clip
18. In the Property Inspector give the Movie Clip an Instance Name: MyLetterX
    
    
    Instance name: myLetterX   Movie Clip name: Letter X
    
    
19. Right click (Mac: Ctrl click) on the Letter X Movie Clip and select: Convert to Symbol
20. For Symbol Name type: Clock
21. For behavior select: Movie Clip
22. Click: OK

Note: In the Library you should now have two symbols. If you wish to check open your Library: Window > Library (F11)


The Symbols in my Library.

Step Two: The ActionScript MC Frame 1

1. Create a new Movie Clip by going to: Insert > New Symbol (Ctrl F8)
2. For Symbol Name type: ActionScript MC
3. For behavior select: Movie Clip
4. Click: OK
5. Select: Frame 1
6. Open the Actions Panel: Window Actions (F9)
7. In Frame 1 add this code:

Note: If you have any questions about the code and how it works feel free to ask on the webwasp forum.

// If the following has not loaded then run the code and set the loaded variable to true so that it wont load again
// Basically only run this code once
// This code basically sets up the properties and components that in the next frame we will use to build the clock
if (!_load) {
    // Set the variable loaded to 1 to show the code has now been loaded
    _load = 1;
    // Set the target to this
    tellTarget ("..") {
        // Set the diameter of the clock face
        clockDiameter = 40;
        // Set the vertical off set distance from the mouse
        clockOffsetY = 0;
        // Set the horizontal off set distance from the mouse
        clockOffsetX = 100;
        // Set the update speed
        easingRate = 0.750000;
        // Set the date rotation speed
        dateRotationStep = 0.100000;
        // Set the rotation starting point
        dateRotation = 0;
        // Set the height of the hands of the clock
        HandHeight = clockDiameter/4.500000;
        // Set the width of the clock hands
        HandWidth = clockDiameter/4.500000;
        // Set up the days of the week
        var dayNames = ["SUNDAY", "MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY"];
        // Set up the months of the year
        var monthNames = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
        // Set up a variable and set its value to the system date
        var now = new Date();
        // Get the day of the week from the variable
        var day = now.getDate();
        // Get the year value from the variable
        var year = now.getYear();
        // If the date is less than the year 2000 compensate for this
        if (year<2000) {
            year = year+1900;
        }
        // Set a variable to today's date : today's day name +today's months name + this year
           // Example: Tuesday March 2009
        var todaysDate = " "+dayNames[now.getDay()]+" "+day+" "+monthNames[now.getMonth()]+" "+year;
        // Remove any spaces form the date value taken from the variable and break the date up into this format:
             // T
             // u
             // s
             // d
             // a
             // y
             // M
             // a
             // r
             // c
             // h
             // 2
             // 0
             // 0
            // 9
        D = todaysDate.split("");
        // Set a variable H to ...
        H = "...";
        // Remove spaces from each word to return:
             // .
             // .
             // .
        H = H.split("");
        // Set a variable M to ....
        M = "....";
        // Remove spaces from each word to return:
             // .
             // .
             // .
             // .
        M = M.split("");
        // Set a variable S to .....
        S = ".....";
        // Remove spaces from each word to return:
             // .
             // .
             // .
             // .
             // .
        S = S.split("");
        // Set a variable F to 12 1 2 3 4 5 6 7 8 9 10 11
        F = "12 1 2 3 4 5 6 7 8 9 10 11";
        // Remove spaces from each word to return:
            // 12
            // 1
            // 2
            // 3
            // 4
            // 5
            // 6
            // 7
            // 8 
            // 9
            // 10
            // 11
        F = F.split(" ");
        // Set up the clock face angle
        FaceDeltaAngle = 360/F.length;
        // Set up the date angle
        DateDeltaAngle = 360/D.length;
        // Set the hands X and Y center location
        HandY = 0;
        HandX = 0;
        // Create an array for the numbers on the clock
        yHand = new Array();
        xHand = new Array();
        // For the length of the variable F set the numbers "12 1 2 3 4 5 6 7 8 9 10 11" into an array
        for (i=0; i<F.length; i=i+1) {
            yHand[i] = 0;
            xHand[i] = 0;
        }
        // Create an array for the date
        yDate = new Array();
        xDate = new Array();
        // For the length of the variable date set the value of the date into an array
        for (i=0; i<D.length; i=i+1) {
            yDate[i] = 0;
            xDate[i] = 0;
        }
        // Set a variable to 1
        j = 1;
        // Create a movie clip and add each character from the variable D
        for (i=0; i<D.length; i=i+1) {
            ch = myLetterX.duplicateMovieClip("chDate"+i, j);
            j = j+1;
            ch.mytext = D[i];
        }
        // Create a movie clip and add each character from the variable F
        for (i=0; i<F.length; i=i+1) {
            ch = myLetterX.duplicateMovieClip("chFace"+i, j);
            j = j+1;
            ch.mytext = F[i];
        }
        // Create a movie clip and add each character from the variable S
        for (i=0; i<S.length; i=i+1) {
            ch = myLetterX.duplicateMovieClip("chSeconds"+i, j);
            j = j+1;
            ch.mytext = S[i];
        }
        // Create a movie clip and add each character from the variable M
        for (i=0; i<M.length; i=i+1) {
            ch = myLetterX.duplicateMovieClip("chMinutes"+i, j);
            j = j+1;
            ch.mytext = M[i];
        }
        // Create a movie clip and add each character from the variable H
        for (i=0; i<H.length; i=i+1) {
            ch = myLetterX.duplicateMovieClip("chHours"+i, j);
            j = j+1;
            ch.mytext = H[i];
        }
        // Hide the myLetterX movie clip
        myLetterX._visible = false;
    }
    // End of TellTarget
}
// Go to the next frame
nextFrame();
play();

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?

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here