Fun Things to Do with Movie Clips in Flash MX - Building a Clock with Clips

(Page 6 of 6 )

Now that you’ve learned the fundamentals of movie clip programming, let’s put this knowledge to use by creating a sample analog clock application, which exemplifies the typical role of movie clips as basic content containers. See also the various versions of the multiple-choice quiz posted at the online Code Depot.

In this chapter we saw how to create movie clips with attachMovie() and how to set movie clip properties with the dot operator. With these relatively simple tools and a little help from the Date and Color classes, we have everything we need to make a clock with functional hour, minute, and second hands.

First, we’ll make the face and hands of the clock using the following steps (notice that we don’t place the parts of our clock on the main Stage—our clock will be generated entirely through ActionScript):

1. Create a new, empty Flash movie.
   
2. Create a movie clip symbol, named clockFace, that contains a 100-pixel-wide black circle shape, centered on the clip’s registration point.
   
3. Create a movie clip symbol, named hand, that contains a 50-pixel-long, vertical red line.
   
4. Select the line in hand; then choose Window -> Info (Flash MX) or Window -> Panels -> Info (Flash 5).
   
5. Because we want the hands to rotate around the center of the clock, we must position the line so that one end is at the registration point (the center) of the hand clip. Therefore, position the bottom of the line at the center of the clip by setting the line’s x-coordinate to 0 and its y-coordinate to –50.

Now we have to export our clockFace and hand symbols, so that instances of them can be attached dynamically to our movie:

1. In the Library, select the clockFace clip; then select Linkage from the pop-up Options menu. The Linkage Properties dialog box appears.
   
2. Select the Export For ActionScript checkbox.
   
3. In the Identifier box, type clockFace, and then click OK.
   
4. Repeat Steps 1 through 3 to export the hand clip, giving it the identifier hand.

The face and hands of our clock are complete and ready to be attached to our movie. Now let’s write the script that places the clock assets on stage and refreshes them with each passing second:

1. Add the script shown in Example 13-7 to frame 1 of Layer1  of the main timeline. 
   
2. Rename Layer 1  to scripts.

Skim Example13-7 in its entirety first; then we’ll dissect it.

Example 13-7. An analog clock

// Create clock face and hands
attachMovie("clockFace", "clockFace_mc", 0);
attachMovie("hand", "secondHand_mc", 3); attachMovie("hand", "minuteHand_mc", 2); attachMovie("hand", "hourHand_mc", 1);

// Position and size the clock face clockFace_mc._x = 275;
clockFace_mc._y = 200;
clockFace_mc._height = 150; clockFace_mc._width = 150;

// Position, size, and color the clock hands
secondHand_mc._x = clockFace_mc._x; secondHand_mc._y = clockFace_mc._y; secondHand_mc._height = clockFace_mc._height / 2.2;
secondHandColor = new Color(secondHand_mc); secondHandColor.setRGB(0xFFFFFF); minuteHand_mc._x = clockFace_mc._x; minuteHand_mc._y = clockFace_mc._y; minuteHand_mc._height = clockFace_mc._height / 2.5;
hourHand_mc._x = clockFace_mc._x; hourHand_mc._y = clockFace_mc._y; hourHand_mc._height = clockFace_mc._height / 3.5;

// Update the rotation of hands with each passing frame
function updateClock () {
  var now = new Date();
  var dayPercent = (now.getHours() > 12 ?
                    now.getHours() - 12 : now.getHours()) / 12;
  var hourPercent = now.getMinutes()/60;
  var minutePercent = now.getSeconds()/60;
  hourHand_mc._rotation = 360 * dayPercent + hourPercent * (360 /
12);
  minuteHand_mc._rotation = 360 * hourPercent;
  secondHand_mc._rotation = 360 * minutePercent;
}

// Update the clock every 100 milliseconds setInterval(updateClock, 100);

That’s a lot of code, so let’s review it.

We first attach theclockFaceclip and assign it a depth of 0 (we want it to appear behind our clock’s hands):

  attachMovie("clockFace", "clockFace_mc", 0);

Next, we attach three instances of the hand symbol, assigning them the namessecondHand_mc,minuteHand_mc, andhourHand_mc. Each hand resides on its own layer in the programmatically generated content stack above the main timeline. ThesecondHand_mcclip (depth 3) sits on top of theminuteHand_mcclip (depth 2), which sits on top of thehourHand_mcclip (depth 1):

  attachMovie("hand", "secondHand_mc", 3);
  attachMovie("hand", "minuteHand_mc", 2);
  attachMovie("hand", "hourHand_mc", 1);

We want our clock centered—not in the top-left corner of the Stage—so, we center theclockFace_mcclip on stage and make it larger using the_heightand_widthproperties. In this example, we assume the movie size is the default (550 ×400 pixels), but we could have usedStage.widthandStage.heightto dynamically retrieve the dimensions of the movie at runtime. As an exercise, use Stage.onResize() to keep the clock centered even when the movie is resized.

  clockFace_mc._x = 275;
  clockFace_mc._y = 200;
  clockFace_mc._height = 150;
  clockFace_mc._width = 150;

Next, we move thesecondHand_mcclip onto the clock and make it almost as long as the radius of theclockFace_mcclip:

  secondHand_mc._x = clockFace_mc._x;
  secondHand_mc._y = clockFace_mc._y;
  secondHand_mc._height = clockFace_mc._height / 2.2;

Remember that the line in the hand symbol is red, so all our hand instances thus far are also red. To make oursecondHand_mcclip stand out, we color it white using the Color class. Note the use of the hexadecimal color value0xFFFFFF (see the Color Class in the Language Reference for more information on manipulating color):

  // Create a new Color object to control secondHand_mc
  secondHandColor = new Color(secondHand_mc);
  // Assign secondHand_mc the color white 
  secondHandColor.setRGB(0xFFFFFF);

Next, we set the position and size of theminuteHand_mcandhourHand_mcclips, just as we did for thesecondHand_mcclip:

  // Place minuteHand_mc on top of clockFace_mc
  minuteHand_mc._x = clockFace_mc._x;
  minuteHand_mc._y = clockFace_mc._y;
  // Make minuteHand_mc shorter than secondHand_mc
  minuteHand_mc._height = clockFace_mc._height / 2.5;
  // Place hourHand_mc on top of clockFace_mc
  hourHand_mc._x = clockFace_mc._x;
  hourHand_mc._y = clockFace_mc._y;
  // Make hourHand_mc the shortest of all
  hourHand_mc._height = clockFace_mc._height / 3.5;

Now we have to set the rotation of the hands on the clock to reflect the current time. However, we don’t just want to set the rotation once. We want to set it repeatedly, so that our clock hands animate over time. Therefore, we put our rotation code in a function called updateClock(), which we’ll call periodically:

  function updateClock () {
    // Store the current time in now
    var now = new Date();

    // getHours() works on a 24-hour clock. If the current hour
is greater
    // than 12, we subtract 12 to convert to a regular 12-hour
clock.
    var dayPercent = (now.getHours() > 12 ?
                      now.getHours() - 12 : now.getHours()) / 12;

    // Determine how many minutes of the current hour have
passed, as a percentage
    var hourPercent = now.getMinutes()/60;

    // Determine how many seconds of the current minute have
passed, as a percentage
    var minutePercent = now.getSeconds()/60;

    // Rotate the hands by the appropriate amount around the
clock
    hourHand_mc._rotation = 360 * dayPercent + hourPercent * (360 / 12);
    minuteHand_mc._rotation = 360 * hourPercent;
    secondHand_mc._rotation = 360 * minutePercent;
  }

The first task of updateClock() is to retrieve and store the current time. This is done by creating an instance of the Date class and placing it in the local variablenow. Next we determine, as a percentage, how far around the clock each hand should be placed—much like determining where to slice a pie. The current hour always represents some portion of 12, while the current minute and second always represent some portion of 60. We assign the_rotationof each hand based on those percentages. We calculate thehourHand_mcclip’s position to reflect not only the percent of the day but also the percent of the current hour.

Our clock is essentially finished. All that’s left to do is call the updateClock() function
with the following line of code, which refreshes the clock display every 100 milliseconds:

  setInterval(updateClock, 100);

Test the movie to see if your clock works. If it doesn’t, compare it to the sample clock .fla file provided at the online Code Depot, or check your code against Example 13-7. Updating the clock 10 times per second should create a nice smooth sweep of the second hand, but it may also be overkill (or a drain on performance of a larger piece).

Reader Exercise: Modify Example 13-7 to update the clock only once per second, and add a “tick-tock” sound synchronized with the second hand’s movement (which should give the illusion of a nice firm snap).

Think of other ways to expand on the clock application: Can you draw the clock programmatically with the Drawing API? Can you make the clock more portable by turning it into a component? How about dynamically adding minute and hour markings on theclockFace_mcclip? Can you modify it to display different or multiple time zones? Can you create a stopwatch, complete with a reset button?

Onward!

We’ve come so far that there’s not much more to move on to! Once you understand objects and movie clips thoroughly, you can tackle most ActionScript projects on your own. But there’s still some interesting ground ahead. Chapter 14 shows how to create MovieClip subclasses and components, such as the UI Components shipped with Flash MX.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Comments On: Fun Things to Do with Movie Clips in Flash MX

· This article is an excerpt from the book "ActionScript for Flash MX: the Definitive...   >>> Post your comment now!

Buy this book...

This article is excerpted from chapter 13 of the book ActionScript for Flash MX The Definitive Guide Second Edition, written by Colin Moock (O'Reilly; ISBN: 059600396X). Check it out today at your favorite bookstore. Buy this book now.