Flash Tutorial: Analogue Clock	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Free Flash Tutorial - Analogue Clock

Free Flash Tutorial

Step Six: Setting up the Clock

It is now time to assemble all of these different clock parts and put them altogether so that we can create a working clock:

1. Go to: Insert > New Symbol
2. Type the Name: Clock MC
3. Select behavior: Movie Clip
4. Click: OK
   
   
5. In the Timeline re-name Layer 1 to: Face
6. In the Timeline right click (Mac: Ctrl click) on frame 2 and select: Insert Frame
   
   
   Your Timeline has 2 frames.

Note: We will later use these two frames to create a loop. It is easier to create the double frame now as subsequent Layers will automatically have two frames.

7. If the Library is closed, open it: Window > Library (F11)
8. From the Library drag out the: Clock Face
9. If the Align Panel is closed, open it: Window > Design Panels > Align (Ctrl K)
10. In the Align Panel select the Align to Stage option:
11. Click on Align Horizontal Center:
12. Click on Align Vertical Centre:

Note: Your clock face should now be in the centre of the Stage.

The Hour Hand

13. In the Timeline create a new layer by clicking on the Insert Layer button:
14. Re-name this Layer to: Hour Hand
15. Select Frame 1 of the: Hour Hand Layer
16. Drag from the Library the: Hour Hand MC
17. In the Property Inspector give the Hour Hand MC an Instance Name: myHourHand
    
    
    Instance Name: myHourHand
    
    
18. With the Hour Hand MC still selected go to the Align Panel and click Align Horizontal Center:
19. Then click Align Bottom Edge:
    
    
    The Hour Hand sits just above the centre cross.
    
    
    The Minute Hand
    
20. In the Timeline create a new layer by clicking on the Insert Layer button:
21. Re-name this Layer to: Minute Hand
22. Select Frame 1 of the: Minute Hand Layer
23. Drag from the Library the: Minute Hand MC
24. In the Property Inspector give the Hour Hand MC an Instance Name: myMinuteHand
25. In the Align Panel click Align Horizontal Center:
26. Then click Align Bottom Edge:
    
    
    The tip of the Minute Hand is just visible below the 12.
    
    
    The Second Hand
    
27. In the Timeline create a new layer by clicking on the Insert Layer button:
28. Re-name this Layer to: Second Hand
29. Select Frame 1 of the: Second Hand Layer
30. Drag from the Library the: Second Hand MC
31. In the Property Inspector give the Second Hand MC an Instance Name: mySecondHand
32. In the Align Panel click Align Horizontal Center:
33. Then click Align Bottom Edge:
    
    
    The Second Hand sits on top of the other hands.
    
    
    
    Note the order of your Layers.
    
    
    
    The ActionScript
    Now for the fun part. It is at this stage that we make the clock tick and bingo we have a working clock:
    
34. In the Timeline create a new layer by clicking on the Insert Layer button:
35. Re-name this Layer to: Actions
36. Select Frame 1 of the: Actions Layer and place the following ActionScript. You may leave out the Gray Comments if you wish:
    
    
    // Gets the date and time from the local computer
    myTime = new Date();

    // Gets the seconds as a number
    var seconds = myTime.getSeconds();

    /* Uses the above number to rotate the second hand. The multiplication by 6 is because there are 60 seconds in a minute but 360° in a circle ie: 6x60=360 */
    mySecondHand._rotation = seconds*6;

    //As above but for the Minute hand
    var minutes = myTime.getMinutes();
    myMinuteHand._rotation = minutes*6;

    /* As above but for the hour hand. The equation is different because there are 24 hours in a day. ie: 24x30=720. In other words the hour hand rotates twice in a day. 360x2=720. */
    var hours = myTime.getHours();
    myHourHand._rotation = hours*30;

    /* The above equation makes the Hour hand point to the exact hour. This is ok for the minute and second hands but not the hour hand. At half past you want the hour hand between the two clock digits. At ten to the hour you want the hour hand to be nearly at the next number on the clock face. So the equation below adds a small amount of rotation depending on how many minutes have past the hour: 1/2° every minute. */
    myHourHand._rotation += (minutes/2);
    

37. Right click on Frame 2 of the: Actions Layer and select: Insert Blank Keyframe (F7)
38. Place the following Actions on Frame 2:
    
    gotoAndPlay(1);
    
    
    
    This script simply sets up a loop so that the Movie goes back to Frame 1 and re-checks the time. As there is no stop in either frame 1 or frame 2 this loop is continuous. The Clock MC is now complete.
    
    
    Your Timeline should now have two small 'a's in the Actions layer.