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)