Flash Training: Animated Clock - ActionScript	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Animated Clock

Free Tutorial

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