If you’d like to download the files used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.

A common task for Flash developers is to create countdown timers that let users know how long it is until a certain conference or event takes place. You can get very creative with the style of your timers but the ActionScript needed to build them doesn’t change much. In this tutorial, you’ll take some Photoshop artwork and build a simple countdown timer in Flash.

1 OPEN THE PHOTOSHOP FILE
Download the files for this tutorial from www.layersmagazine.com. The ZIP file contains a PSD file named “countdown.psd.” Open this file in Photoshop. This is the artwork that you’ll use as the basis of your countdown timer. The top layer (called chrome) makes up the main visuals for the timer. The bottom layer (called backdrop) contains the background for the numbers that you’ll create in Flash. You’ll import this PSD file directly into Flash.

2 CREATE THE FLASH DOCUMENT
Launch Flash and create a new ActionScript 3.0 document. This tutorial doesn’t use any of the new features found in Flash CS4, so it will work with earlier versions of Flash as well. Since this movie will simply count down every second, we can lower the frame rate quite a bit to lessen the system resources used by the movie. In the Property inspector, change the FPS value to 2. Save this FLA somewhere on your hard drive as countdown.fla.

3 IMPORT THE PSD FILE
Now you’ll import the PSD file into your Flash movie. Select Import to Stage from the File>Import menu. Navigate to the countdown.psd file and click the Import button. This opens the Photoshop Import dialog. Uncheck the Background layer, as you won’t need that in the Flash movie. Shift-click the two remaining layers and change the JPEG compression to 90 by clicking on the Custom radio button. Now click the Set Stage Size to Same Size as Photoshop Canvas checkbox to make Flash crop the movie to the same size as the PSD. Click OK to import the file.

4 ADD SOME LAYERS
After importing the PSD file, you should see the same layer structure in the Timeline panel as you saw in the Layers panel in Photoshop. Rename Layer 1 by double-clicking on it and entering “actions,” then lock it so no visuals can be placed on it. You’ll write all of your ActionScript code on this layer. Now click the New Layer icon, rename it “numbers,” then drag it between the backdrop and the chrome layers. This layer will contain the dynamic text fields for the days, hours, minutes, and seconds that constitute the core of the countdown timer.

5 CREATE A TEXT FIELD
Select the first frame on the numbers layer in the Timeline and get the Text tool (T). Click on the Stage to create a new text field and enter three digits just so you can preview what it will look like. Switch to the Selection tool and click on the text field to select it. In the Property inspector, select Dynamic Text from the Text Type drop-down menu, give it an instance name of “daytxt,” change the font Family to Myriad Pro, Style to Bold Condensed, Size to 20, and make the Color white. Also make the text Format Align Center in the Paragraph section. Position the text field in the Day field on the Stage.

6 EMBED THE FONT
One thing that beginning Flash developers often forget to do is embed the fonts for dynamic text fields. You can’t rely on end users having Myriad Pro on their system so embedding the font assures that everyone will see the same thing. Select the text field and then click on the Character Embedding button in the Property inspector. When embedding fonts you only want to include the characters you’ll need to help keep the file size down, so select Numerals from the list and click OK.

7 CREATE THE REMAINING TEXT FIELDS
Repeat Step 5 and Step 6 for the remaining three text fields. Give the hours text field an instance name of “hrtxt,” the minutes text field an instance name of “mintxt,” and the seconds text field an instance name of “sectxt.” Position all of the text fields in the appropriate places. Tip: The easiest way to insure that all the text fields have the same properties is to simply copy the first one you created, paste it to create duplicates, then change the instance name of each duplicate in the Property inspector. Now it’s on to the code!

8 START THE ACTIONSCRIPT CODE
Select the first frame of the actions layer and open up the Actions panel by pressing Option-F9 (PC: Alt-F9). The first thing you’ll do is create a new Date object that holds the date that you’re counting down to. To the Date object you pass in the year, month, day, and time. One important thing to remember is that Flash starts counting months with 0, so December will actually be passed in as 11, not 12. Add the code shown in the image above into the Actions panel. Here we’re only passing in the hour but you can also input the minutes and seconds.

9 ADD THE ENTERFRAME LOOP
Obviously, you’ll need to constantly update the text fields on the Stage and using an enterframe loop is one way to do that. Essentially, you define a function that gets called every time a new frame is reached. For this example that will happen two times a second since the frame rate (FPS) is set to 2. You could use a Timer object to do this as well. Enter the code shown in the image above into the Actions panel. This creates an enterframe event that calls a function called loop.

10 GET THE CURRENT DATE
The first thing you’ll do in the loop function is find out the current date and time so you can calculate how long it is until your event, and to do this you simply create a new Date object and pass in no parameters. Next, use the getTime method to subtract the current time from the time of the event to get the total time remaining. This value will be the total number of milliseconds until the event and is stored in ms variable.

11 CALCULATE THE VALUES
Now you have the total number of milliseconds until your event but obviously you need to break that into days, hours, minutes, and seconds. Enter the code from the image above into the Actions panel. To get the number of seconds we simply divide the number of milliseconds by 1000. For minutes you divide the number of seconds by 60. (Noticing a predictable pattern here?) We wrap each of these operations in the Math.floor function so that it rounds the numbers down to make them nice and clean.

12 CORRECT THE VALUES
In the previous step you calculated various values needed to display the countdown. But there’s a problem. You can’t display the total number of seconds because it would be a huge number. You need to normalize these values; the way to accomplish this is to use a modulus (%) operator. Input the code shown in the image above. Let’s use seconds for example. In the code shown in the image, we’re taking the seconds and modding them by 60. This will divide the number by 60 and return the remainder—this is the number we want displayed.

13 SET THE TEXT FIELDS
Now that you’ve calculated the values, you can format them to be displayed in the text fields. Enter the code shown in the image above into the Actions panel. For the hours, minutes, and seconds you want to add a leading zero if the number is below 10 to make it look nicer. In this code, you’re testing the values and adding the zero if necessary before outputting the value. We use the toString method on our numbers so that they’re converted to strings before trying to put them into the text field.

14 THE FINISHED TIMER
Now press Command-Return (PC: Ctrl-Enter) to test your movie and see the finished countdown timer. There are many ways in which you can customize it. You could, for instance, also display the milliseconds. For that, increase the frame rate of your movie to make it look right. You can also pass in the target date via Flashvars to make a timer that could be reused for multiple events. Countdown timers are a simple way to help promote your event and, as this tutorial has shown, they’re relatively easy to create in Flash.

ALL IMAGES BY LEE BRIMELOW UNLESS OTHERWISE NOTED