Digital Clock

This tutorial was written for the Flash Designer software, which allows you to create flash animations in a much easier way than by using Macromedia Flash. You may get Flash Designer here.

Display current date and time in a Flash movie.

1. Launch Flash Designer and choose "Blank".

2. Set frame size to 300 x 100 ("Frame" > "Frame Size")

3. Create 2 edit fields with the "Edit Field" tool (they should appear as Edit1 and Edit2, if necessary rename edit fields: double click each field and change "variable name")

4. Change Frame delay to 0.05 seconds ("Frame" > "Frame Delay" and enter "Delay: 0.05 and "Frames": 1)

5. Choose "Frame" > "ActionScript" and paste the following script:

// get the current time and date
today_date = new Date();
 
// create array of month names
var monthname = new Array();
monthname[0] = "January";
monthname[1] = "February";
monthname[2] = "March";
monthname[3] = "April";
monthname[4] = "May";
monthname[5] = "June";
monthname[6] = "July";
monthname[7] = "August";
monthname[8] = "September";
monthname[9] = "October";
monthname[10] = "November";
monthname[11] = "December";
 
// get month name
mon = monthname[today_date.getMonth()];

// get current day
d = today_date.getDate();

// get current year in 4 digits format
y = today_date.getFullYear();

// get current hour
h = today_date.getHours();

// get minutes
min = today_date.getMinutes();

// get seconds
s = today_date.getSeconds();

// add leading 0 to hours
if (h<10) {h="0"+h;};

// add leading 0 to seconds
if (s<10) {s="0"+s;};

// add leading 0 to minutes
if (min<10) {min="0"+min;}

// write current time in Edit1 field 
Edit1 = h + ":" + min + ":" + s;

// write current date in Edit2 field 
Edit2 = mon + " " + d + ", " + y;

6. Click OK and hit F9 to see it the clock shows the date and time. Hit Esc to quit.

You may have to resize edit fields if the date or time is clipped.

To customize the edit field double click it and uncheck "border" option. Check "define layout" and set the align to "center". Click OK. Repeat the same or Edit2.

To change the font of the edit field select it and choose "Item" > "Set Font", to change font color choose "Item" > "Text Color".

Drag a background rectangle with the "Rectangle" tool, move it behind edit fields with "Edit" > "Send to Back". To change rectangle color hit Ctrl+F.

To create output files the clock choose "File" > "Export HTML Page".

Download source project t1046.zip (5 kb)