Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Analog Clock

VCB331 Rich Media 1

Analog Clock (AS3)

Flash has some built-in commands that make it easy to work with dates and times. With a little math and graphic design, we can create an analog display, or something more unusual and creative.

Create the graphics

1. Launch Flash and creater a new Actionscript 3 file.
2. First you will need some graphics. Create a new layer for your clock. Make a circle (whatever size you like) and convert it to a movie clip. This will serve as the clock face.
3. Make three hands: a second hand, minute hand and hour hand. Simple triangle wedges will suffice (see illustration), but you can make 'em as fancy as you like. Have them point straight up for now. Convert each to a movie clip (you could also use a single movie clip for all three hands and resize them on stage).
4. Very important: set the registration point for each hand at the base of the hand. You can do this in the make movie clip dialog box or afterwards by opening the movie clip and then dragging the hand so that the crosshair sits at the hand's base.
5. Position your three hands on the clock face (the pivot points should all align). Give the hands the following instance names: "secondHand_mc," "minuteHand_mc," and "hourHand_mc."
6. Option: add numbers.

Actionscript

1. Create a new layer called "actions."
2. Now for the code. First we need to create an instance of a Timer object:

var myTimer:Timer=new Timer(1000);

myTimer.addEventListener(TimerEvent.TIMER, setClock);

myTimer.start();

3. The Timer calls a function called "setClock" which gets the time data from the computer and then uses the information to rotate the clock hands the appropriate amount:

function setClock(myEvent:TimerEvent) {
var timeNow:Date = new Date();
var hourHand:uint=timeNow.getHours();
var minuteHand:uint=timeNow.getMinutes();
var secondHand:uint=timeNow.getSeconds();

hourHand_mc.rotation=30*hourHand+minuteHand/2; minuteHand_mc.rotation=6*minuteHand;
secondHand_mc.rotation=6*secondHand;

}

The function begins by creating and filling four variables. First, a variable called "timeNow" is actually an instance of the Date object; it's used to capture the current date and time information. The next three variables use unsigned integer ("uint") variables, which are used to hold whole positive numbers. Each of these uses a method of Date object—getHours(), getMinutes() and getSeconds() respectivelty—to get the cooresponding values. (so at 9:32, the hour variable would equal 9 and the minute variable would equal 32).

The next part of the function applies the movie clip rotation property to each of the hands. The hour hand is rotated a number of degrees equal to 30 x the current hour (so 6:00 would yield 180 degrees (6 x 30), or half-way around the clock). To further refine the hour hand's movement, half of the minute hand's value is added (0–30), allowing the hour hand to move in smaller incerements between the hours. The minute and second hand each move to a position equal to 6 time their values (so at quarter-past, the minute hand is rotated 90 degrees (6 x 15 = 90).

4. Try it out.

Alternative displays

With a little imagination, you can build more unusual and creative clock displays. For example:

1. Create a long, skinny horizontal rectangle and convert it to a movie clip. Place the registration on the left edge of the box.
2. Give the box an instance name of 'secondsBar."
3. Now add the following code to your function:

secondsBar_mc.scaleX=secondHand/60;

Try it out; does it work? The bar should grow horizontally as the seconds pass. Note the two differences in this code versus the "hands" code above. First, we're dividing the number of seconds by 60, to generate a decimal value (rather than a number of degrees). Second, the property we're setting is scaleX. I could easliy make a bar that grows vertically by using scaleY instead (make sure you move the registration point to the top or bottom first). You could also use width or height, which will give you similar results except it applies the number of seconds to the number of pixels in the bar in a 1:1 ratio.

Point Breakdown

Course Outline

Syllabus

Student Resource