Step One: Setting Up the Flash Document 1. 2. 3. 4. 5.

Open a new: Flash Movie Go to: Modify > Document (Ctrl J) Set the size to: 220 x 50 pixels If you wish select a: Background Colour Click: OK

1. 2. 3. 4. 5. 6. 7. 8. 9.

Go to: Insert > New Symbol Type the Name: Time MC Select behavior: Movie Clip Click: OK If the Tools panel is closed, open it: Window > Tools Select the Text tool: Drag out a: Text Box If the Property Inspector is closed, open it: Window > Properties (Ctrl F3) 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 ou 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. 2. 3. 4. If the Library is closed, open it: Window > Library (F11) Drag on to the Main Stage the Symbol: Time MC If the Align Panel is closed, Open it: Window > Design Panels > Align (Ctrl K) 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!