Ever wanted to know how to make a digital clock. This tutorial shows you how easy it is to create a digital clock in Flash. Have a look at the time below:

Example: Download the Flash file Int 029a

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: 220 x 50 pixels
4. If you wish select a: Background Colour
5. Click: OK

Step Two: Creating the Clock Movie Clip - The Dynamic Text Box

1. Go to: Insert > New Symbol
2. Type the Name: Time MC
3. Select behavior: Movie Clip
4. Click: OK
5. If the Tools panel is closed, open it: Window > Tools
6. Select the Text tool:
7. Drag out a: Text Box
8. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
9. Set the Text Box's width to about: 200 pixels

   Note: In the Property Inspector you can see the Text Box's width and height. Select the Text Box with the Text Tool and drag the small square in the corner: Do not do it numerically or with the Transform tool as this will stretch the font size.
   
   
   
   To re-size a Text Box select it with the Text tool and drag the small square.
   
   
   
   The small square may be in either the top or bottom left corner:
   
   
   
   The small square may even be a circle!

   
   

10. In the Property Inspector set the X Y values to: 0 , 0
    
    
    
    
11. In the Property Inspector select: Dynamic Text
    
    
    
    
12. In the Property Inspector set the Variable Name to: myTime
    
    
    Variable name is: myTime
    
    
13. Set the Line type to: Single
    
    
    
    
14. Set any Font styles such as: Size, Colour, Font etc.
    
    Mine are like this:
    
    
    Text Box Properties.
    
    The Text Box is now complete. If you wish to reduce the Download time do the Following steps:
    
    
15. In the Property Inspector click the Character Button:
    
    
16. Select the radio Button: Specify Ranges
    
17. Select: Numerals [0..] (11 glyphs)
18. In the Include these characters box type a colon:
    
    
    The Character Option Box complete.
    
19. After you have typed the colon click: OK

Step Three: Creating the Clock Movie Clip - Actions

You should still be in the Time MC. If you are not open the Library and find the symbol and select Edit from the drop down menu.

1. Re-name layer 1 to: Text Box
2. On frame 2 right click (Mac: Ctrl click) and select: Insert Frame
   
   
   Timeline with two frames.
   
   
3. Create a new layer by clicking on the Insert Layer button:
4. Rename this new Layer: Actions
   
   
   New Actions Layer.
   
   
5. In frame 1 of this new Layer place the following ActionScript:
   
   
   
   // Gets the date and time info from the local computers clock
   myDate = new Date();

   //Gets the hours and adds a zero if the number is a single digit like this: 01
   var hours = myDate.getHours()>9 ? myDate.getHours() : "0"+myDate.getHours();

   //Gets the minutes and adds a zero if the number is a single digit like this: 01
   var minutes = myDate.getMinutes()>9 ? myDate.getMinutes() : "0"+myDate.getMinutes();

   //Gets the seconds and adds a zero if the number is a single digit like this: 01
   var seconds = myDate.getSeconds()>9 ? myDate.getSeconds() : "0"+myDate.getSeconds();

   // Displays the time like this: 00 . 01 : 01
   myTime = (hours + " . " + minutes + " : " + seconds);
   

6. In Frame 2 of the Actions Layers right click and select: Insert Blank Keyframe
   
7. Place the following ActionScript in frame 2 of the Actions layer:
   
   gotoAndPlay(1);
   

   Note: Your Timeline should look like this:
   
   
   Timeline.
   

8. The Movie Clip is now complete so return to the Main Stage by clicking the Scene 1 Tab:

   Note: If you cannot see the Scene 1 Tab open the Edit bar: Window > Toolbars > Edit bar

Step Four: The Main Stage

1. If the Library is closed, open it: Window > Library (F11)
   
2. Drag on to the Main Stage the Symbol: Time MC
   
3. If the Align Panel is closed, Open it: Window > Design Panels > Align (Ctrl K)
4. With the Movie Clip selected click on the
   
   • Align to Stage button:
   • Align Vertical Centre:
   • Align Horizontal Centre:
     
     Your Movie Clip should now be in the centre of the Main Stage:
     
5. Save your work: File > Save (Ctrl S)
6. It is time to Test your Movie: Control > Test Movie (Ctrl + Enter)
   
   Your clock should look like this:
   
   
   The clock works fine but has no border.
   
   
   Your clock is now finished. You may wish to add a border:
   
   
   Clock with a border.
   
   
   Note: The border is simply a rectangle with the centre deleted.
   
   To get the rounded corner look use the Rounded Corner option:
   
   This option button is visible once you select the Rectangle tool:
   

That's all there is to it!

discuss this topic to forum