Beginning to Use ActionScript

To begin we are going to create a clock using ActionScript. This will allow the developer to gain access to the time on a local computer and display that inside the Flash file. This is a great little feature for some interactive sites.

First we need to determine how the clock will look. We could create something that resembles a digital clock, but for this example we are just going to have it on the stage.

The first thing that we are going to do is create a movie clip that will contain two text fields used to display the current date and the current time from the users own computer. In order to do this select "Insert > New Symbol" from the menu at the top or [CTRL]+[F8] on the keyboard and then select the movie clip option. Inside of this movie we use the text tool to create two boxes that we will place on the same layer and keyframe. They can overlap somewhat so that they will line up and display the date and then the time. There aren't simply text boxes that display text; they must be in a "dynamic text" format in order to display the variables which contain the date and time. For the first box on the left hand side of the stage, we are going to input the variable name currentdate and for the other box, on the right side of the stage, will use the variable name currenttime in the options box.

Once we have created this movie clip we want to return to the main stage of the Flash file and place it on the stage wherever you want the date and time to be displayed. Next we need to tell the movie what we want to display and define the variables that are to be used inside the clip with the date and time.

In order to do this we need to attach the following ActionScript to the movie clip itself. To do this, select the movie clip once it is on the stage of the movie. There you will see the option to enter "Object Actions" in the ActionScript source code panel.

The very first thing that we do is use the term onClipEvent. This means that once the movie clip is loaded (on the very first keyframe for this tutorial) that we want the load array command to begin. Here we are obviously defining the seven days of the week that are going to be used and then the twelve months of the year that we are going to display. What we want to do is create an array that can store the actual names of the days of the week, along with the names for the months of the year so that we can refer to them later on.

onClipEvent (load)
  { days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday',
  'Thursday', 'Friday', 'Saturday', 'Sunday');
  months = new Array('January', 'February', 'March', 'April', 'May',
  'June', 'July', 'August', 'September', 'October', 'November',
  'December'); timedate = new Date(); }

[The lines above are one continuous line. It has been split for formatting purposes.]

Next we define the variables for the month, minutes, seconds, todaydate, day, dayname, month, monthname, and finally year:

onClipEvent (enterFrame) { hour = (timedate.getHours());
minutes = timedate.getMinutes(); seconds = timedate.getSeconds();
todaydate = timedate.getDate(); day = timedate.getDay();
dayname = days[day]; month = (timedate.getMonth()+1);
monthname = months[month-1]; year = timedate.getFullYear();
if (length(minutes) == 1) { minutes = "0"+minutes;

[The lines above are one continuous line. It has been split for formatting purposes.]

We also do a check to see if the length of the number is one or two digits for the minutes and second, and if they are only one digit then we add a zero in front of them so that it would look realistic:

}
if (length(seconds) == 1) { seconds = "0"+seconds;
}

Now we want to define the variables currentdate and currenttime that are going to be actually displayed by the text boxes we created in this movie clip. This is just a matter of putting in the variables we want, using a plus sign to assign multiple variables. Be sure to add a colon (":") to the currenttime variable so that it looks like a digital clock.

currenttime = hour+":"+minutes+":"+seconds;
currentdate = dayname+" "+monthname+" "+todaydate+" "+year;
fulldate = dayname+" "+todaydate+" "+year;
delete timedate;
timedate = new Date();
}

[The lines above are one continuous line. It has been split for formatting purposes.]

The way in which we define the variables uses new functions that were introduced in version 5 of Flash. This allows the user to retrieve the date and time values relative to the operating system on which the Flash player is running. As you can see, in order to define the variables we have first set the timedate to Date(). This simply says that we are going to use the date function in order to define values for each of the variables and determine what the current time and date are to be displayed. In order to get the month and the actual day we use the array to call upon the correct month and day name to display.

Hands-On Stuff - Page 3
Flash 5 Tutorial: Part 1
Colliding Clips - Page 2