Sponsor

Video tutorials - We provide comprehensive tutorials for Dreamweaver MX, Dreamweaver MX 2004, Excel 2002, Flash MX, Flash 8, Photoshop 7, Photoshop CS, Photoshop CS2, Poker, VB.NET and Windows XP - geared for beginner to intermediate users.

Digital Flash Clock Create a digital flash clock using actionscript and flash!

Category: Flash Views: 9509

In this tutorial you will learn how to make a digital clock in flash through actionscript i will explain all the code. Also i will teach you how to display the day of the week and what day of the month it is. you can put thi digital clock in one of your sites or on anything elese you might want to. so lets get started.

1. Open flash click "new flash document"

   

2. click on the text tool is the one with the letter "A" on it make sure is on static text and type the following "time", "today", and "date"

   

 

   

   

3. Now click on the text tool again but this time make sure is on dynamic text instead of static text and just drag it next to each of the static text. if you dont quite follow look at the picture.

   

   

4. After you have made the dynamic text now its time to give each one of the variable names the way you do this first you select the first dynamic box the one that is right next to the word "time" then you go to the properties window and where is says var type the following "nTime"

   

   

5. follow that step again for the next two boxes. On dynamic box that says "Today" name that one "displayDay" and on the one that says "Date" name that one "displayDate" remember you have to place the variable on the dynamic box not on the static text.

   

6.The next step click on the first static box and convert it to a symbol to do this select it and press (F8) make sure movie clip is clicked and name it whatever you want.

   

   

7. Now select the other two dynamic boxes and make them both into one symbol. not seperate symbol make sure to make both of them one symbol. and name it whatever you want.

   

8. Now select the top symbol the one that is by itself then press (F9) this will bring up the actionscrip windo type the following

   

onClipEvent (enterFrame) {
myTime = new Date();
nSeconds = myTime.getSeconds();
nMinutes = myTime.getMinutes();
nHours = myTime.getHours();
if (nHours>=12) {
ampm = "pm";
} else {
ampm = "am";
}
if (nHours>=13) {
nHours = nHours-12;
}
if (length(nMinutes) == 1) {
nMinutes = "0" nMinutes;
}
if (length(nSeconds) == 1) {
nSeconds = "0" nSeconds;
}
nTime = nHours ":" nMinutes ":" nSeconds " " ampm;
}

   

9. Now select the on the other symbol which has both the "today" and "date" and open the actionscript windo again if its not already open and type the following.

   

onClipEvent (load) {
mon = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept",  "Oct", "Nov", "Dec"];
weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
}
onClipEvent (enterFrame) {
now = new Date();
nDay = weekdays[now.getDay()];
nMonth = mon[now.getMonth()];
nDate = now.getDate();
nYear = now.getFullYear();
displayDate = nMonth " " nDate ", " nYear;
displayDay = nDay;
}

   

10. If you press (Ctrl Enter) you will see your movie clip working it should be displaying the time, todays date, as well as the date of the month if it does not re read this tutorial carefully and see if you did somethign wrong. here is what mine looks like. dont mind the graphics is just a little something i added is not important. and also dont go away next i will explain the code.

   

         

TIME CODE:

     

       

onClipEvent   (enterFrame) {

     

     

This part of the code loops the actions contained   within it every time the movie is accessed.

     

       

myTime = new   Date();

     

     

This creates the Date Object that will be used to   retrieve the information from your system.

     

       

nSeconds = myTime.getSeconds();
          nMinutes = myTime.getMinutes();
          nHours = myTime.getHours();

     

     

        This defines the variables for seconds, minutes,   and hours, and retrieves the information from your system and incorporates it   into the Flash file.
         

     

       

if   (hours>=12) {
            ampm = "pm";
          } else {
            ampm = "am";
          }

     

     

        This if statement allows for the switch of am for   pm when the hour is greater than or equal to 12.

     

       

if   (hours>=13) {
              nHours = nHours-12;
          }

     

     

Because Flash displays time in the 24 hour system   instead of the 12 hour system, this if statement is used to subtract 12 from the   hour if the hour is greater than or equal to 13 ( 13 %u2013 12 = 1).

     

       

if   (length(nMinutes) == 1) {
             nHinutes = "0" nMinutes;
          }
          if (length(nSeconds) == 1) {
             nSeconds = "0" nSeconds;
          }

     

     

Both of these if statements are here to add a %u201C0%u201D in   front of the seconds and minutes if their length is equal to one, meaning that   the variable is less than 10.
         
        nTime =   nHours ":" nMinutes ":" nSeconds "   " ampm;
        }
       
    This displays the time using the dynamic text   box named %u201CnTime%u201D that you created.

     

DATE CODE:

     

onClipEvent (load){
       
        This performs the actions contained within   the brackets only once, when the movie clip is loaded. This is usually used to   define variables.
       
        mon = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
        "Aug","Oct","Nov","Dec"];
         
        weekdays   = ["Sunday","Monday","Tuesday",
        "Wednesday","Thursday","Friday","Saturday"];
       
        These   are the arrays that are used for the rest of the code. Arrays are zero-based, so   when the following code outputs a 0, January will display, 1 = February, etc%u2026   You can edit these as necessary.
       
        now = new   Date()
        }
       
        Again, this creates the Date Object that will be used   to retrieve the time information.
       
        onClipEvent (enterFrame){
       
        Again, this   loops the animation and performs the actions every time the movie is   accessed.
       
        nDay =   weekdays[now.getDay()]
        nMonth = mon[now.getMonth()]
        nDate = now.getDate()
        nYear = now.getFullYear()
       
        These are used to retrieve the   information. The arrays are contained within brackets %u201C[ ]%u201D.
       
        displayDate = nMonth "   " nDate ", " nYear
        displayDay =   nDay
        }
       
      The last bit of code is used to display the information   within the dynamic text fields that were created earlier. Again, there are many   ways to use this effect, and many ways to modify the code. This is just the way   that I feel most comfortable with, and the way that I feel is easiest.

   

 

If you would like more help with this tutorial please register and visit the forum.

Bookmark with:

             

Add to Favorites	Google Bookmark
Delicious	Digg
reddit	Stumble Upon