Selteco.com > FlashDesignerZONE.com > Tutorials > T1046

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 Web Page".

Download source project t1046.zip (5 kb)

Products | Purchase | Downloads | Support | Flash Tutorials | Contact
Copyright © 1999-2017 Selteco Software, Inc. www.selteco.com, ph: +1 810 377 5778