by E.J. aka IamNotJubba

This tutorial is actually two minor tutorials wrapped into one. This tells you how to display the time digitally in Flash, and also display the full date. In order to gain an understanding of arrays, I suggest you look through the posts in the Best of Forum; there are numerous threads there that explain the basics of arrays. As usual, I will explain all of the code at the end of the tutorial. Click here to download the partial source. To download the partial source, click here.

You will create an animation similar to the following animation:

[ the digital clock ]

Here's how:

  1. If you downloaded the partial source then you are a step ahead, so skip right to step 2. If you did not download the partial source, then open Flash 5 and select the text tool. Create a 3 dynamic text boxes by clicking on the Text Options tab in the Text Tool Box. Name them “nTime”, “displayDate”, and “displayDay”. They really could be called anything you like, but for the sake of organization with the code I have provided I recommend naming them these names, and adjusting the code for your personal use later.

    Once you make the text boxes, select the box named “nTime” and press F8 to convert this to a movie clip and name it whatever you like.. With this done select the other two text boxes and press F8 to convert them both into 1 movie clip (just to clear up: you should have 1 movie clip with two text boxes in it). Again, name these whatever you want to name them.

[ the dynamic text option ]

  1. Select the movie clip that contains the “nTime” text box and insert the following code. Just copy the code below and paste it into the Actions Panel of the movie clip.

  1. Now select the movie clip that contains the other two text boxes and insert the following code. As with before just copy and paste into the Actions Panel.

  1. That’s it. There is nothing more to this effect. Using the Text Tool Box you can change the color, size, or even the font of the time and date. Below I will explain the code so you will be able to duplicate this effect on your own.

Time to split the code apart

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 – 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 “0” 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 “nTime” that you created in step 1.

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",
weekdays = ["Sunday","Monday","Tuesday",

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… 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 “[ ]”.

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.

download final source

That’s pretty much all there is to this effect. There are a lot of different ways to modify this, and the limit is basically your imagination. If you have any questions feel free to e-mail me or post on’s Message Boards.

J.E. aka IamNot Jubba
[email protected]



SUPPORTERS:'s fast and reliable hosting provided by Media Temple.