Learn how to make an analogue clock. This tutorial shows you how to create a analogue clock in Flash. Have a look at the time on the clock below:

Example: Download the Flash file Int 031a

An Analogue Clock with a clock face made in Flash MX 2004.

Note: This clock is taking the time off your local computer and displaying it on the web page through Flash. This is not perfect as I don't know if your clock is correct. There are other ways of finding out the time but they are much more complicated and not necessarily more accurate. So I have gone for a very simple method of finding out the time. It works and is not too difficult to create.

Cross Ref: If you would like to create an Digital Clock: Digital Clock Tutorial
Digital clocks are much easier to make in Flash because you haven't all the work of creating the face and hands.

Cross Ref: If you would like to display the date: Date Tutorial

Step One: Setting Up the Flash Document

1. Open a new: Flash Movie
2. Go to: Modify > Document (Ctrl J)
3. Set the size to: 150 x 150 pixels
4. If you wish select a: Background Colour
5. Click: OK

Step Two: Creating the Clock's Second Hand

1. Go to: Insert > New Symbol
2. Type the Name: Second Hand MC
3. Select behavior: Movie Clip
4. Click: OK
   
   
5. If the Tools panel is closed, open it: Window > Tools
6. Select the Line tool:
7. Whist holding the Shift Key down drag out a small: Vertical Line
8. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
9. Set the line colour to: Red
10. Set the line width to: 1
    
    
    The Line width is not set in the width box but in the Line attribute area.
    
    
11. Set the X value to: 0
12. Set the line height to: 57
13. Set the Y value to: -57
    
    Your red Second Hand should be sitting directly above the centre cross:
    
    
    Second Hand.

Step Three: Creating the Clock's Minute Hand

1. Go to: Insert > New Symbol
2. Type the Name: Minute Hand MC
3. Select behavior: Movie Clip
4. Click: OK
   
   
5. Select the Line tool:
6. Whist holding the Shift Key down drag out a small: Vertical Line
7. Set the line colour to: Black
8. Set the line width to: 3
9. Set the X value to: 0
10. Set the line height to: 40
11. Set the Y value to: -40
    
    Your Minute Hand should be sitting directly above the centre cross:
    
    
    Minute Hand settings.

Step Four: Creating the Clock's Hour Hand

1. Go to: Insert > New Symbol
2. Type the Name: Hour Hand MC
3. Select behavior: Movie Clip
4. Click: OK
   
   
5. Select the Line tool:
6. Whist holding the Shift Key down drag out a small: Vertical Line
7. Set the line colour to: Black
8. Set the line width to: 5
9. Set the X value to: 0
10. Set the line height to: 30
11. Set the Y value to: -30
    
    Your Minute Hand should be sitting directly above the centre cross:
    
    
    Hour Hand settings.
    
    Note: In your Library you should now have three Symbols: Window > Library (F11)
    
    
    Three Movie Clips in the Library.

Step Five: Creating the Clock's Face

1. Go to: Insert > New Symbol
2. Type the Name: Clock Face
3. Select behavior: Graphic
4. Click: OK
   
   You need to use the Oval tool: and other drawing and text tools to create a clock face. What the clock face looks like is up to your own artistic ideas and could be something as simple as a circle or an elaborate design.
   
   

   The clock face that I drew.	A simpler clock face.

   
   Note: If you wish you could create the Clock face in another program such as PhotoShop (or Fireworks or Illustrator or Freehand or CorelDraw etc). You would then need to import or paste the clock face image into the above Graphic Symbol.
   
   At this stage do not get too engrossed with the look of the clock face as it is easy to change the design latter. Just go to the library (F11) and double click on the Clock Face Symbol.
   
   Remember that your Movie size is 150 x 150. So the clock face should not be bigger than this. If it is bigger you will need to enlarge the size of your Movie: : Modify > Document (Ctrl J)
   
   
5. When you have finished drawing return to the Selection Tool:
6. When you have finished creating your design you will need to make sure that it is centred in the middle of the Stage. TO do this select all objects either with the Selection Tool or: Edit > Select All (Ctrl A)
7. Group all the objects: Modify > Group (Ctrl G)
8. If the Align Panel is closed, open it: Window > Design Panels > Align (Ctrl K)
9. In the Align Panel select the Align to Stage option:
10. Click on Align Horizontal Center:
11. Click on Align Vertical Centre:
    
    
    The central cross should now be right in the middle of your clock face:
    
    
    The cross in the centre shows that the face is centred correctly. This cross is only a guide and does not show up in the final Movie.

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.

Step Seven: Testing the Clock

The clock is not actually on the Main Stage but in the Library so although all the work is done it will not be visible. The last step is to place the clock onto the Main Stage and check that it works.

1. If the Edit Bar is not open, open it: Window > Tool Bars > Edit Bar (Flash MX04 only)
2. Return to the Main Stage by clicking on the Scene 1 Tab in the Edit Bar:
3. From the Library drag out the: Clock MC
4. Position the clock in the centre of the Stage. If you wish use the Align Panel to do this: Centre Clock
5. Save your file: File > Save (Ctrl S)
6. Test the Movie: Control > Test Movie (Ctrl + Enter)
   
   
   That's it!! Your clock should now be ticking along nicely!

Kaynak webwasp.co.uk/tutorials/a31-clock-analogue/index.php