It is easy to get Flash to display the day and date. Alternatively you can have Flash display only the day or only the date. Flash can also be used to display the time. This tutorial shows you how easy it is to display the day and date. Have a look at the date and day below:

Note: This Day/Date display 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 the local users computer has been set correctly. There are other ways of finding out the day, date and time but they are so much more complicated and not necessarily more accurate. So I have gone for a very simple method. It works and is very easy to create.

Cross Ref: To learn how to display the time see the previous tutorial: Digital Clock

The Time: 24 hour clock.

In this tutorial I will show you how to display the Day and the Date as in the first example:

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

Step two: Creating the Day + Date Movie Clip - The Dynamic Text Box

1. Go to: Insert > New Symbol
2. Type the Name: Day & Date 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: myDate
    
    
    

    Variable name is: myDate
    
    
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. (Click to enlarge)
    
    The Text Box is now complete.
    

Step three: Creating the Clock Movie Clip - Actions

You should still be in the Day & Date 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:
   
   myDate = new Date();
   weekday = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
   month = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

   // Displays: Monday 1 January 2000
   myDate = (weekday[myDate.getDay()]+" "+myDate.getDate()+" "+month[myDate.getMonth()]+" "+myDate.getFullYear());

   
   
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 three: The Main Stage

1. If the Library is closed, open it: Window > Library (F11)
   
2. Drag on to the Main Stage the Symbol: Day & Date 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:


You may wish to add 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!