This video requires Adobe Flash Player.

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

This video requires Adobe Flash Player.

This video requires Adobe Flash Player.

This video requires Adobe Flash Player.

Learning the Accordion

One of the most useful user interface constructs is the accordion panel. It allows you to stack various sections of your site and then expand and contract the sections when they’re clicked on. In this tutorial, we’ll create a basic animating accordion panel that can be used as the basis for a full Flash website.

1 [EXAMINE THE FILES]
Open the accordion folder (from the download files available at www.layersmagazine.com) and you should see two FLA files: The accordion.fla file is what you’ll need to open to start the tutorial, and the accordion_final.fla file is a finished version of the tutorial that you can use as a reference. There’s also another folder named gs, which contains an ActionScript animation library called TweenLite that we’ll use to do our animation.

2 [OPEN THE FLA]
Open the accordion.fla file in Flash CS4 (this tutorial will also work with Flash CS3 if you haven’t yet upgraded). On the Timeline, you’ll see two layers: The actions layer will hold all of our ActionScript 3.0 code for this project and the panels layer will contain all of the various sections for our site. The movie is 690 pixels wide and 355 pixels high with a frame rate of 30, and it’s set to publish for Flash Player 9, as we won’t be using any of the new Flash Player 10 features.

3 [DRAW A PANEL]
Select the first frame of the panels layer and select the Rectangle tool (R). In the Property inspector, remove the Stroke color (if there is one) and set the Fill color to #0066CC (blue). Drag out a rectangle on the Stage at any size, then in the Property inspector set the following: W(idth) 600; H(eight) 355; X 0; Y 0. (Note: Make sure the chain icon is “broken” next to Width and Height.) Control-click (PC: Right-click) on the rectangle and choose Convert to Symbol. In the dialog that appears, name it “panel1,” make sure that Movie Clip is the Type, and click OK.

4 [ADD A TEXT FIELD]
In the Property inspector, give the new movie clip an Instance name of “panel1.” Double-click on it with the Selection tool (V) to enter edit mode. Select the Text tool (T), set the Character Family to Myriad Pro (or another font—make sure it’s a clean, legible font, as it will be rotated 90°), enter Size (as desired), and Color (we chose white). Click on the Stage and enter the text, “Panel 1.” Switch to the Selection tool, open the Transform panel (Window>Transform), and set Rotate to 90°. Return to the Property inspector and set the type’s X property to 0 and Y to 9. Click on Scene 1 to return to the main Timeline.

5 [DUPLICATE THE PANEL]
Now we’ll duplicate the movie clip panel for each section of the site. In the Library panel, Control-click (PC: Right-click) on the panel1 movie clip and choose Duplicate. You’ll be prompted to give the new clip a name, so let’s call it “panel2.” Now drag an Instance of the panel2 movie clip onto the Stage, and in the Property inspector, position it at X 30 and Y 0. Give the clip an Instance name of “panel2.” (Obviously, if you were building a real site you could name the various clips based on what they contained.)

6 [MODIFY THE DUPLICATE PANEL]
Double-click on the panel2 movie clip to enter edit mode so you can customize this panel. With the Text tool, change the text to “Panel 2.” Then, select the rectangle and choose another color in the Property inspector. Go back out the main Timeline. Now follow the same steps to create two more panels. Offset the X property on each panel by 30 pixels—that means the third panel will have an X of 60 and the fourth will be X 90. Be sure to give each panel an Instance name, following the same convention as above.

7 [IMPORT TWEENLITE]
Select the first frame in the actions layer and open the Actions panel (Window>Actions). Enter the code shown here into the panel. These two lines of code import the TweenLite animation library so that we can use it. TweenLite is an ActionScript 3.0 library that makes animating with code extremely simple. All that’s required is a single line of code to create some really complex animations. There are other engines such as Tweener and gTween that would also work well for this tutorial. (Note: Make sure the gs folder is in the same folder as your FLA file.)

8 [SET LEFT AND RIGHT POSITIONS]
Add the code highlighted here into the Actions panel. In these four lines of code, we’re attaching some information to each of the panels that will help us when we need to animate them. The first property, lx, is the leftmost X position of the panel. The rx property is the X position for the panel when it’s on the right side of the movie. Notice how all of these values are offset by 30 pixels from one another. The ind property simply holds the index number of the panel.

9 [ADD CLICK EVENTS]
Now we need to set up the click events for each of the panels so that they can react when one of them is clicked. Add these next highlighted lines of code to the Actions panel. The first four lines sets up the click events for each panel. All of them will call a function named onClick that’s located at the bottom of the code block. When a panel is clicked, it will animate all of the panels to the correct position allowing the user to view the full contents of that panel.

10 [WHO WAS CLICKED?]
Since all of the panels will call the same function when they’re clicked on, we need to determine which one was clicked so we can animate the panels appropriately. We can easily get a reference to that clip by using the target property of the event object that gets sent to the function. Add this highlighted code into the Actions panel at the specified location to create a variable named “clicked,” which references the clip that was clicked on.

11 [LOOP THROUGH THE PANELS]
Now that we know which clip has been clicked on, we need to loop through all of the panels and animate them to the correct position. In ActionScript 3.0, the most common way to do this is by using a “for” loop. A counter variable is incremented each time the loop is run until it no longer satisfies the condition. Enter the highlighted code into the Actions panel at the specified location. Inside the loop we create a new variable named “mc” that references the panel clip based on the value of the loop counter i.

12 [ANIMATE THE PANELS]
Enter this highlighted code into the Actions panel at the location specified. First, we check whether the index of the current clip is less than or equal to the index of the clip that was clicked on. If it is, we need to animate it to the left. If not, it needs to be animated to the right. For each case, we’re using the TweenLite.to function to do the animation. The animation length is set to 0.5 seconds and we’re using an exponential ease-out effect. Both of these settings can be customized to change the feel of the animation (see Step 14).

13 [ADD CONTENT TO THE PANELS]
Test the movie by choosing Test Movie from the Control menu. Click on the various panels to see the nice animation effect. Now that the code is complete, you can start customizing the panels so that they contain actual content. Double-click on one of the panels to enter edit mode. Now you can start adding text, images, video, or anything else that you want on that particular panel. Check out the accordion_final.fla file to see an example of a finished panel.

14 [CUSTOMIZE TWEENLITE]
As mentioned in Step 12, you can change some of the values in the TweenLite function call to customize the animation effect. Try changing Expo.easeOut to Bounce.easeOut. This makes the panels bounce into place. Another interesting choice would be Elastic.easeOut, which gives it a springy, elastic effect. You can also adjust the length of the animation to achieve different results. To see the full list of customization options, check out the documentation for TweenLite at http://blog.greensock.com/tweenliteas3.

Click here to download the files to follow along with this tutorial.

This video requires Adobe Flash Player.

Click here to download the files to follow along with this tutorial.

This video requires Adobe Flash Player.

Tom Green has made the files for this tutorial available for download. Click here (355MB)

This video requires Adobe Flash Player.

One of the most important skills for Flash developers to learn is how to utilize the vast collections of Web APIs that are available for services such as Flickr, Twitter, Facebook, and mapping using either Google or Yahoo. In this tutorial you’ll learn how to integrate Google Maps into your Flash application using just a few lines of code. The Google API is incredibly easy to use and it’s extremely powerful.

1 [DOWNLOAD THE GOOGLE MAPS API]
The first step in adding Google Maps to your Flash application is to first download the necessary files. Go to http://code.google.com/apis/maps/documentation/flash in your browser. This site is where you can find all of the information on using Google Maps inside of Flash, so be sure to bookmark it. Find the section on the right called “How do I start?” and download the Software Development Kit (SDK) using the link posted in the second item on the list. Unzip the downloaded file to your desktop.

2 [INSTALLING THE API]
In the sdk/lib folder of the SDK you’ll find a file named “map_1_9.swc.” Copy (Command-C [PC: Ctrl-C) this file to the clipboard. If you’re on a Mac navigate to [user folder]/Library/Application Support/Adobe/Flash CS4/language/Configuration/Components (create a new folder named “Components” if you don’t already have one). If you’re on a PC navigate to [user folder]\Local Settings\Application Data\Adobe\Flash CS4\language\Configuration\Components (create a new folder named “Components” if you don’t already have one). Create a new folder named “Google” and paste (Command-V [PC: Ctrl-V) the SWC file into this new directory. If you had Flash open you’ll need to restart it before trying to work with the API.

3 [OPEN THE FLA FILE]
Download the tutorial files for this article at www.layersmagazine.com. Open the map.fla file in Flash CS4. In the Library there’s a movie clip of the Adobe logo that you’ll be placing on the map at the Adobe offices in San Francisco. There’s a single layer in the Timeline named “actions.” The actions layer is where you’ll be placing all the ActionScript code for this project. This project will be built entirely using ActionScript and you won’t be adding anything to the Stage.

4 [ADD THE GOOGLE MAPS COMPONENT]
Before you can start using Google Maps you first need to add the component to your application. Open the Components panel by selecting it from the Window menu. You should see the Google folder that you created earlier. Twirl down the folder and you should see the GoogleMapsLibrary component. Drag the component into the Library to add it to your project. You’ll now be able to access all of the Google Maps APIs.

5 [CREATE A BASIC MAP]
Select the first keyframe of the actions layer and open the Actions panel (Window>Actions). Enter in the code shown in the image above. The first three lines import the Google Maps libraries. Line 5 creates a new instance of the Map class, which is the main object that creates the map. Line 6 is where you’ll need to add your API key, which we’ll get to in the next step. Line 7 sets the size of the map to the same size as the Flash stage. Finally, line 8 adds the map to display list so we can see it.

6 [GET AN API KEY]
One of the things that you have to do when using Google Maps is to get an API key. Even though it works without one, you need to get one to prevent breaking the license agreement. Go back to the API website and click on the link in the first item in the list. Agree to the terms and then enter in the website that you’ll be using the map on. If you don’t know, just enter http://localhost. Click the Generate API Key button and then copy the resulting key to the clipboard (it will ask you to sign into your Google Account if you’re not already signed in). Now replace MY_API_KEY in the code with your key.

7 [TESTING THE MAP]
Go ahead and test your application (Control>Test Movie) to make sure that you’re seeing the basic map. You should see a zoomed out map of the world but without any of the controls, such as a zoom slider or map type selector, that you’re used to seeing on Internet maps. These will be added in the next step. You must wait until the map ready event fires before adding any controls to the map. Enter in the highlighted code shown above into the Actions panel. The onMapReady function is where you’ll begin manipulating the map.

8 [ADD SOME CONTROLS]
Now you’re ready to begin adding some controls to the map so users can manipulate it. Add the highlighted code into the Actions panel as shown above. The first line of code adds a new ZoomControl to the map. This adds a slider that the user can use to zoom in and out on the map. The second line adds a MapTypeControl that allows users to select between the different map types available such as satellite or hybrid. Press Command-Return (PC: Ctrl-Enter) to test the movie and try out the map controls.

9 [CENTER THE MAP]
At this point the map is centered on the world map and is zoomed all the way out. Now you’ll reposition the map so that it’s centered at the Adobe offices in San Francisco. Enter in the above highlighted code into the Actions panel. To the setCenter method we send in three items: the latitude and longitude of the Adobe office, the desired zoom level, and the type of map. The user can, of course, change these things, but this is how we want the map to show at the start. Test your application to see the new center.

10 [HOW TO FIND LATITUDE AND LONGITUDE]
You may be wondering how I found the coordinates for the Adobe office. There are numerous ways to get this information. The easiest is to first search for an address on the Google Maps site (http://maps.google.com). Once the map is centered on the address, simply type javascript:void(prompt(”,gApplication.getMap().getCenter())); in your browser’s address bar and hit Return (PC: Enter). You’ll see a pop-up with the coordinates that you can paste into Flash. The Google Maps API has the ability to do this directly from Flash, but that’s out of the scope of this tutorial.

11 [ADD A MARKER]
Enter the above highlighted code into the Actions panel. The first line creates a new Marker object at the Adobe offices. There are many different options available for how the marker will look and behave. For now we’ll just keep everything at their default values. The second line of code adds the new marker to the map. Test the application to see the default marker. Now wherever you move the map, the marker will always be visible at the Adobe office. In the next step we’ll customize this marker with the Adobe logo.

12 [CUSTOMIZE THE MARKER]
In the Library panel you’ll see a movie clip named “marker.” Double-click on it to enter edit mode. You’ll see an image of the Adobe logo surrounded by a custom marker graphic. It’s important that the point of the marker is on the crosshairs of the registration point. This movie clip has been set up with a class name of “marker” so we can attach it at runtime. Click on Scene 1 at the top left of the Stage to exit edit mode. Add the highlighted code to the Marker object to tell it to use the custom marker (note the changes made at the end of line 16). Test your application.

13 [OTHER MARKER OPTIONS]
In the last step you customized the look of the marker but there’s much more that you can do. Since the marker is just a regular movie clip, it can contain animation, video, or any other type of interactive content that’s supported in Flash. Markers are not the only types of overlays either. You can draw lines and shapes and add them to the map to create rich, interactive mapping applications.

14 [WHERE TO GO FROM HERE]
In this tutorial you’ve created a very simple mapping application in Flash but have only scratched the surface of what’s possible with the Google API. There’s a full geocoding API that allows you to get latitude and longitude coordinates for points on the map or from addresses. You can also get directions between two points or addresses on the map. You can find the full API reference by clicking on the link in item 4 on the API website that you downloaded the SDK from.

ALL IMAGES BY LEE BRIMELOW UNLESS OTHERWISE NOTED

This video requires Adobe Flash Player.

This video requires Adobe Flash Player.