Welcome To NewFreeTemplates.com Flash Tutorials Area - Digital clock

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 "Alt+F4" to close preview.

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)