Digital Clock


Requirements

  • Flash MX or higher.

Preview

1. Start by creating a 300x50 document in Flash.

2. Select the Text Tool.

3. In the Property Inspector set the Text type to Dynamic Text.

4. Draw a text box that covers the entire stage.

5. You should have something that looks like the following.

image 1

6. Select the text box you created with the Selection Tool and in the Property Inspector set the Instance Name to tTime

7. Change the Font Size to somewhere around 50 so it is easily readable.

8. If you do not want people to be able to select the numbers in your digital clock, in the Property Inspector unselect Selectable

9. In my example I set the font to OCR A Extended.

10. Click on the first frame in the Timeline and press F9 to open the Actions Panel.

11. Insert the following ActionScript code into the Actions Panel.

var dTime = new Date(); //Creates a new Date
var dHours = dTime.getHours(); //Gets the current hour of the time (0-23)
var dMinutes = dTime.getMinutes(); //Gets the current minutes of the time (0-59)
var dSeconds = dTime.getSeconds(); //Gets the current seconds of the time (0-59)
var tAMPM; //Used to differentiate between AM and PM
this.onEnterFrame = function()
{
dTime = new Date();
dHours = dTime.getHours();
dMinutes = dTime.getMinutes();
dSeconds = dTime.getSeconds();
if(dHours > 11) //If hours is greater than 11 then it is PM
tAMPM = "PM";
else
tAMPM = "AM";
if(dMinutes < 10) //If minutes is less than 10, add a 0 before the minutes so it is 05 instead of 5
dMinutes = "0"+dMinutes;
if(dSeconds < 10) //If seconds is less than 10, add a 0 before the seconds so it is 05 instead of 5
dSeconds = "0"+dSeconds;
if(dHours > 12) //If the hours are over 12, then subtract 12 from the hours.  20:00 becomes 8:00
dHours -=12;
if(dHours == 0) //If the hours is 0, then set it to 12
dHours = 12;
if(dHours < 10) //If hours is less than 10, add a 0 before the hours so it is 05 instead of 5
dHours = "0"+dHours;
tTime.text = dHours + ":" + dMinutes + ":" + dSeconds + " " + tAMPM; //Set the text field to display the time.
}

12. You may now test your movie.

Tutorial Files (Right click the link and choose save target as...)




Author's URL: Tutorial Scene
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website. More Flash Tutorials: Featured Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com

No comments yet...
Add comments to "Digital Clock"

Captcha