Creatively sharing Flash Creations, News, and Tutorials

Our Item Title is Flash Tutorial Analogue Clock

August 4, 2008 3:08 pm t. m. Uncategorized

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.

… Read More of this tutorial at WebWasp.co.uk Tutorials