Macromedia Flash Tutorial
Using Flash to create an animated clock (Part 1 of 2)
7/20/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/.
Until recently, graphics on the Web were limited to GIFs and JPEGs. Now there is Macromedia Flash. It allows the creation of dazzling graphics and animations. Flash 3, the newest version of the technology, also gives you the capability of creating interactive games. It's also a very fast-loading format, which means users don't need to wait forever while animations download.
How is this possible? Flash streams, and it streams well. A properly designed Flash page should normally start playing almost instantly. GIFs and JPEGs can be reduced substantially in file size when converted to the Flash format. This potential for reduced download times, combined with Flash's streaming capability, allows pages created with Flash to start displaying faster, load more quickly, and provide greater possibilities for design and presentation.
So what's the catch? Flash requires a plug-in or ActiveX control. The plug-in is small (140K to 190K) and is normally easy to install. Netscape 4.5 includes the Flash plug-in, and Flash will be part of all new Netscape browser versions. Internet Explorer 4 also includes Flash, but it is an option that can be installed only after the main installation is completed. Windows 98 includes Flash as part of its Internet options. If you are a Flash developer, you'll need to make sure that the server that hosts your Flash files is configured for the Flash MIME type.
This article will demonstrate how to create a simple timer using Flash. In Flash 3 there are many ways to complete tasks, including keyboard shortcuts. For consistency, I will generally refer to menu options in explaining how to perform an action.
As you read, 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.
Before you start, you may want to take a look at a quick graphical tour of the creation process at http://www.ahref.com/flash/Stars_Stripes.htm (it's in the Flash format, so you'll need the plug-in to view it).
In creating the Flash Clock, the first step is to create the clock's digits. The clock will make use of a custom font created in Flash and stored as a symbol.
Symbols are the basic building blocks of Flash. Each symbol is a reusable object, a master copy of which is stored in the library. There are three types of symbols in Flash 3: the Graphic, the Button, and the Movie Clip. When a copy of a symbol is placed on the "stage" (which was called the canvas in Flash 2), it is called an Instance. Using symbols can drastically reduce file size; for example, when you place an Instance on the stage, Flash references the master copy in the library instead of storing another full copy.
In our clock, all of the digits will be stored in a single ten-frame graphic symbol named Numbers. This one multi-frame graphic symbol will be the source of the shape information for every number digit. If we want to change the font, we only have to change it in one place. The zero is in frame one, and the numbers one through nine are in frames two through ten.
Our clock's numbers feature a "Stars and Stripes" theme: red stripes with a blue square for the stars in the top left hand corner of each digit. To create these custom numbers, we will first create a Stripes template (so that we don"t have to recreate the stripes each time). Once that is done, we will create each of the numbers.
Creating a Stripe
To create a symbol in Flash, go to the main stage (your primary workspace in Flash) and make sure everything is deselected (Edit > Deselect All). Then create a symbol (Insert > Create Symbol). When you're prompted to name your symbol, name it "Numbers" and make sure the Behavior option is set as Graphic. Now we'll actually create the symbol we've named.
Flash doesn't have a filled polygon tool, so we need to create the rectangle for the stripe first, then convert it to a filled rectangle. Start by selecting the pencil tool and then the rectangle shape. Draw a rectangle on the stage. Select the fill tool, choose the color red, then fill the rectangle. You will now have a red rectangle with a border. Double click on the border to select it, then delete the border by choosing Edit > Clear from the Flash menu.
At this point, you will need to set the size of the red rectangle you've created. Each colored stripe to be used in the digits will be long and thin (about ten times as wide as it is high). To set the size, make sure the red rectangle is selected and open the Inspector (Window > Inspector).
You will see four variables: x, y, h, and w. The h (height) and w (width) variables define the size of the object. In the example I created, I used a width of 270 and a height of 27. Choose your dimensions and type those values into the Inspector. Press the Enter key and the rectangle will change to the size you chose. The x and y in the Inspector define the exact location of the upper left corner of the object. To make calculations easier, you can set both of these to zero.
Duplicating the Stripe
There are several ways to duplicate objects in Flash. One way is to use the Duplicate feature (Edit > Duplicate). Another way is to copy (Edit > Copy) and then paste in place (Edit > Paste in Place). This will place a new copy directly over the old object. You can then use the Inspector or the cursor key to move the copy down to its proper position (make sure it is still selected, or this won't work). Using the Inspector to position copies has the advantage of mathematical accuracy, since you can calculate the exact position of an object and this location in the Inspector.
After all ten stripes are placed, select all of them (Edit > Select All). Use Align (Modify > Align) with Space Evenly to equalize the spacing between all of the selected stripes. You can also use Align to match object sizes, relative alignment between objects, or the alignment of objects on the page.
Creating a Digit
You should now have one frame of your Stripes template completed and saved as a symbol named Numbers. The next step is adding a copy of the stripes you created to each of the remaining frames. To do this, you'll need to use the timeline.
Every graphic and animation in Flash is based on the timeline, which displays the contents of a Flash movie over time. Each frame in a movie represents a single point in time. The frame rate (number of frames per second) can be adjusted by the user (Modify > Movie > Frame Rate).
We'll create the number 4 as our example of creating a digit. Go to the timeline and highlight frames 1 through 10. Click the right mouse button and select Insert Keyframe. A copy of the stripes template will now be in each frame. Since zero will be in frame 1, go to frame 5 where we will create the number 4. Drag the symbol Four Shape from the Flash symbols library (or import or create your own number shape) and place it beside the stripes. You may want to refer to the graphical tour to see how this looks if you haven't already.
For the "Stars and Stripes" theme, we'll create digits that are constructed from stripes and have no edge border. To do this, the first step is to break apart the 4 symbol (Modify > Break Apart). Next select the ink drop tool and select a small or hairline line size. Apply an outline to the number 4, then deselect everything by clicking on a blank area. Once you've deselected everything, select the interior of the 4 and delete it.
Now take the outline of the 4 and place it on top of the stripes. When it is in the correct position, delete the portions of the stripe that are outside of the digit's outline. Next delete the outline of the digit itself.
You can create a Stars graphic (a blue box with stars) in the same way that you created a Stripes graphic. When you've created and saved the Stars graphic, create a Stars layer in the Numbers graphic. Make sure you are still in frame 5 when you do this, since you want to apply the stars to the number 4. Now drag the Stars graphic from the Library. Align the Stars graphic over the upper left corner of the 4. You're done with the number 4. Other numbers can be created in a similar manner.
Adding Animation
After all of the numbers (0-9) have been created, we need to create a Movie Clip for each unit of time in the timer (tens of seconds, seconds, minutes, tens of minutes, and hours). Or in other words, for every digit that the clock displays, we need to create a Movie Clip.
Movie Clips are a new feature of Flash 3. A Movie Clip has its own timeline which can run independently of the main timeline. When a Movie Clip is placed on the main timeline, it will begin to play when the movie gets to the frame it is in. The Movie Clip can continue to run even if the main timeline is stopped.
We'll start this example with seconds. First, create a new symbol and name it "1 Second." Make sure the behavior is set to Movie Clip. Insert a new layer, then open the library. Drag a copy of Numbers onto the stage. Then go to frame 11, click the right mouse button, and select Insert Frame. When you've done that, click the right mouse button and select Insert Blank Keyframe.
Now go back to the first layer of your 1 Second symbol. Go to frame 11 of that layer and highlight frames 1 to 11. Click the right mouse button and select Insert Blank Keyframe. In frame 1, assign a frame action of Stop (to do this, click the right mouse button and select Properties > Actions > + and select Stop from the drop down list).
Go to each Blank Keyframe in frames 1 through 10 and add a label (0-9). To do this, select each frame and then click the right mouse button, then choose Properties > Label. The labels should match up with the numbers displayed on the stage. In frame 11, add the action "Go to", making sure the Play box on the right is unchecked and the Label is checked and set at 0.
Next, add another action. Highlight "Go to and Stop," then +(Plus) > Tell Target. Add /Clock/10Seconds in the Target box on the right. Then add another "Go to" action, this time checking Next Frame. It should look like this when done:
Go to and Stop Label 0
Begin Tell Target /Clock/10Seconds
Go to Next Frame
End Tell Target
If items end up in the wrong order use the up and down arrows on the right side of the dialog box to rearrange them.
Duplicating Digits
Instead of recreating each Movie Clip for each digit we will duplicate them and modify them as needed. Go to the library and select "1 Second", then click the down arrow and select Duplicate. Create Movie Clips for 10 Seconds, 1 Minute, 10 Minutes, and 1 Hour.
In the 10 Seconds Movie Clip change the Tell Target in the last frame to /Clock/1Minute and delete frames 7, 8, 9, and 10 in both layers. In the tens digits we don't need these numbers since there are only 60 seconds in a minute.
In the 1 Minute Movie Clip change the Tell Target to /Clock/10Minutes.
In the 10 Minutes Movie Clip change the Tell Target to /Clock/1Hour and delete frames 7, 8, 9, and 10 in both layers.
In the 1 Hour Movie Clip delete the Tell Target.
We need a Movie Clip to create a one second delay, so create a new Movie Clip, call it "1 Second Delay" and insert 10 frames in it. In frame 1, add a label of Start. In frame 10, insert a Blank Keyframe and add these actions:
Go to and Play Label: Start
Begin Tell Target /Clock/1Second
Go to Next frame
End Tell Target.
Putting it All Together
To make this timer completely modular we are going to create a Movie Clip named "Clock." Start by clearing the stage, or canvas. Now open up the library and drag each of the Movie Clips you created onto the Clock's stage.
Physically line up 1 Second, 10 Seconds, 1 Minute, 10 Minutes, and 1 Hour (the digit for each of these should be zero). Then drag One Second Delay onto the canvas. Note, it has no graphic and will be blank, but Flash uses a small white circle as a marker. Each copy of a symbol when placed on the stage is a unique Instance. The Instance name, not the name of the master Movie Clip in the library, is the name used in Tell Targets. Double click each Movie Clip, select Definition and enter the correct Instance name:
1 Second Delay - Delay
1 Second - 1Second
10 Seconds - 10Second
1 Minute - 1Minute
10 Minutes - 10Minutes
1 Hour - 1Hour
Go back to the Main Timeline/Stage and Drag the Clock Movie Clip on to the stage. Double click its white marker and give it an Instance name of "Clock."
Select Control > Test Movie and the Timer should start and run.
In Part 2 of this Flash tutorial (to be published later this summer), we'll cover how to add the Start, Stop, and Reset buttons. Then we will convert the timer to an accurate Clock (one that uses the time from your server or the user's computer) and include a more detailed explanation of how the timer works.
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.
© 1998-1999 Anchor Productions, Inc. All rights reserved.