to design guide

Macromedia Flash Tutorial
 Using Flash to create an animated clock (Part 2 of 2)
8/2/98

by John Croteau

Note: To view the examples in this article you will need the Flash 3 plug-in (or ActiveX Control): http://www.macromedia.com/shockwave/download/.

In Part I of this article, we created a basic timer animation. In Part II, we will construct buttons to control the timer, then convert the timer into an accurate clock.

As you work, you may want to test your files. In the Flash authoring environment, you can't test Movie Clips. To test these files, create a .swf file by selecting Control > Test Movie from the Flash menu.

You may want to follow along and try the steps for yourself. To do this, you'll need to download a demo copy of Flash. The demo is fully functional for 30 days, so anything you create will be usable on the Web. You can also download the Flash work files used to create the clock and work with them as you read.

Using Buttons to Get User Input

In Flash, buttons are the only direct way that you can get input from a user. A button is a special type of symbol with four frames in its timeline:

You construct the first three frames as if you were creating a JavaScript mouseover. You will need to create three versions of an image to reflect the actions that will occur (at rest, mouseover, on mouse click). The fourth frame, the Hit state, works a little differently.

Start by removing any text and other decorative elements you might have copied into the Hit frame. All you'll need is a simple filled rectangle, oval, or other shape to define the area that you want to react to the mouse. Make sure you use a solid color to fill your shape (not a gradient), and remove any line borders around your shape. Though most buttons will have the Up, Over, Down and Hit areas in the same place on the image, this is not required.

Controlling the Timer

The finished timer has three buttons: Start, Stop, and Reset. Each button is created in a similar fashion. Open your Flash Library and find the Movie Clip called 'Clock'. You should have created this clip in Part I of this tutorial.

You will need three frames in this clip: Park, On and Off. You will also need to put a stop action in the second frame (this frame is named On). This is where you will place the Start button in the Button layer. You will place the Stop button in the third frame of the Button layer.

The Reset button will be placed in the second frame of the Reset layer. You want the Reset button to be available while the timer is stopped or running, so you will need to leave an empty (blank) frame in the third frame of the Reset layer. Empty frames reflect whatever is in the previous Keyframe (represented by a filled blue dot) or Empty Keyframe (represented by a hollow blue dot). Empty Keyframes have no images, but they can have labels and actions applied to them.

To create these buttons, use Insert > Create Symbol. Be sure to select Button as the Behavior. All three symbol types in Flash 3 can share behaviors, but due to the special nature of buttons, a symbol must be originally created as a button to function as a button.

For the Start button, select the pencil tool and rectangle shape and draw a rectangle outline. Use the fill tool to fill in the rectangle. If we wanted to have the Up, Over, and Down states identical, we could stop now.

Highlight the Over, Down, and Hit frames, click on the right mouse button, and select Insert Keyframe from the drop down menu. Go to the Over and Down frames and change the colors as desired.

Next, go to the Hit area and delete the border. You need to eliminate line borders in the Hit frame in Flash 3 to prevent a flickering mouse behavior that occurs sometimes at the interior edge (between the line borders and their fills).

We'll add a new layer for text above the main button layer. Since we don't want the text to appear in the Down or Hit frames, we'll put an empty keyframe in the Down frame.

Adding Actions to Buttons

Now we have a Start button that reacts to the mouse and displays differently in the Up, Over and Down states. However, it performs no actions. After creating the Stop and Reset buttons we will add the actions.

Go to the Instance property of the Start button, which is in the second frame of the Clock Movie Clip timeline. Do this by selecting the frame, then choosing Modify > Instance.

You will need to add two actions to the Start button. The first is a Go to Next Frame action, which you can add by selecting the Go To action and marking the Next checkbox on the right of the dialog window. When that's done, add a second action inside the On(Release) by highlighting Go to Next Frame, and selecting (+) and Tell Target.

Now add Timer as the target by double clicking on it in the Parameters box. Timer will now appear in the Target box. Again select the plus (+) and add a Play action. Then add actions to the Stop and Rest buttons. This is what it should look like:

Start Button Actions (in frame 2):

On(Release)
     Go to Next Frame
     Begin Tell Target          Timer
         Play
     End Tell Target
End On

Stop Button Actions (in frame 3):

On(Release)
     Go to Previous Frame
     Begin Tell Target          Timer
         Stop
     End Tell Target
End On

Reset Button:

On(Release)
     Go to and Play          Park
End On

The Reset button illustrates an important concept. Movie Clips must exist and be available to continue to function. If a Movie Clip is no longer available, all of its functions are interrupted, and it will start fresh if it is used again.

In the Clock Movie Clip all the first frames should consist of Empty Keyframes. Clicking the Reset button will take the Action back to the first frame, where the Movie Clips don't exist (so the Timer's display is blank). All of its actions are terminated. The Reset action is a Go to and Play, so the Movie Clips will be restarted and the display will show all zeros and be ready to start again.

Keeping Accurate Time

The Flash timer's basic timing element is 'Delay - 1 Second', a Movie Clip that loops about once per second. After each loop of the Delay Movie Clip (or after roughly each second), a Tell Target is used to implement the '1 Second' Movie Clip. When the digit in '1 Second' changes from 9 to 0 (or after about ten seconds), it will implement the '10 Seconds' Movie Clip. It will continue in this way, keeping time by bringing in ever larger movie clips.

This Flash timer is not very accurate, but it is totally contained in Flash and will work with every browser with Flash 3. A more accurate Timer can be made by using JavaScript and Flash Methods. Unfortunately, communication of FSCommands (commands sent from Flash) and Flash Methods (commands sent to Flash) require either Live Connect or ActiveX (32-bit only). This means that this method only works with Netscape 3 or later (on Windows 95/98/NT or Power Macintosh) or Internet Explorer 3 or later (on Windows 95/98/NT).

A more accurate timer can be made by using a JavaScript function, setTimeout('Settime()',1000), where setTimeout creates a delay of 1000 milliseconds (1 second), and Settime() is used to increment the timer. Though this is more accurate than the Movie Clip delay method, it is not perfectly accurate.

The Flash Clock (which keeps accurate time, instead of just recording elapsed seconds) also uses the setTimeout function, but only for updating the time (approximately 10 times a second). If the load on the computer delays the JavaScript execution, the correct time will be sent when JavaScript is again allowed to have processing time. The sample Flash Clock will display the user's local time based on the time set on the user's computer. A Flash Clock can also be built based using the time retrieved from the server.

Finishing Up

To get the time from the computer, we'll use three built-in JavaScript Methods: getSeconds, getMinutes and getHours. The seconds and minutes are manipulated in JavaScript to provide a separate tens (0-5) and units (0-9) digit for the seconds and minutes, and the hours are sent to the Hours Movie Clip in 24-hour format (0-23). For the seconds digit we use the following Flash Method in JavaScript to send a command for the correct information to Flash for immediate display.

jc().TGotoLabel('_level0/Clock/1Second', S1);

The function jc() is used to supply the correct object model, which is different for Internet Explorer than for Netscape. We use the Flash Method TGotoLabel(target,label), where target is the same type of Target used in Tell Targets in Flash and label is the Label given to a frame in Flash 3. The _level0 (underline level zero) in the target refers to the main Flash movie on level zero.

Similar to the hierarchy of files and directories, Flash has a hierarchy of timelines. To specify targets at different levels in the hierarchy, add a path to the target name using the same system as file paths or URLs. The main timeline is the top level and Movie clips on it are children of that timeline. Movie Clips inside other Movie Clips are called nested. In our example Movie Clip '1Second' is a child of Movie Clip 'Clock' on the main timeline in the Movie on level zero (hence /Clock/1Second). S1 is the JavaScript variable that shows seconds.


John Croteau (croteau@erols.com), a recognized expert in Flash creation, has been involved in Flash since the release of the beta for Flash 2. His Flash Tech Resource (http://www.FlashCentral.com/Tech/), now a part of Flash Central, is a useful technical information resource for Flash developers.

to design guide

© 1998-1999 Anchor Productions, Inc. All rights reserved.