Creating a Flash Clock

RATE
NOW

1.5 years ago on August 21, 2010

actionscript, adobe, download, flash, tutorial

Download free source files for this article. Example

Creating a Flash clock can be a fun and epic experience. All you need is a little bit of ActionScript and a few simple lines. I have seen JavaScript clocks which are very similar but do not require a Flash player, those are a little more complex since they interact with HTML and do not take advantage of our easy drawing tools. Although it is possible, this won't be a pure ActionScript clock as all of our design components will be hand-drawn. Please note that basic Flash drawing skills are required and not covered.

The Anatomy

We're going to begin by drawing our clock face, and adding the interaction afterwards. For the sake of simplicity and comprehension, our face is going to be as simple as possible allowing only lines and circles. Once we have our symbols and instances established, we can go in later and modify design components.

Drawing the Tick Marks

In order to make it easier on yourself, group (Ctrl+G) each new line you draw by itself. It doesn't have to be on its own layer, in fact it's not recommended. The reason is that if these lines intersect they become part of whatever they intersect with and are no longer easily manipulable.

In order to calculate how much each tick mark is rotated, we need to take the total number of degrees of the circle (360) and divide it by how many tick marks we need (60). Each tick mark is rotated by 6 degrees from the last one. 6, 12, 18, 24, 30, etc.

Trimming the Tick Marks

Once we have all of our lines for our tick marks drawn, we copy the outside circle three times and scale each one down, in my case 95%, 90%, and 85%, respectively. You may also resize them manually, but using percentages gives you a more accurate look.

Now comes the fun part! You may want to make a copy of all your hard work so far, since drawing the tick marks is one of the longest parts. Make sure they're all on their same layer, select everything and press Ctrl+B (Break Apart) until everything is ungrouped.

Select the inner lines and delete them.

After more trimming you should end up with the below result.

The Hands of the Clock

Instance vs. Symbol

In order to shorten the process, we're going to create one symbol and simply make scaled down instances of the symbol. In case you weren't aware, a symbol is a new movie clip or button in your library; an instance is a copy of a symbol on the stage. You can have multiple instances of the same symbol.

Draw a new line from the center up, and make into a new symbol. Make sure your registration is at the bottom center as the pivot point for rotation.

Arrow Symbol Registration

Now that we have the registration point (small crosshairs) at the bottom center for rotation, we want to move the transformation point (small circle) to the same position for scaling down. This is accomplished by selecting the newly-created line movie clip and using the Free Transform Tool and moving down the small circle in the middle. Make sure to turn on Snap to Objects to get the transformation point exactly at the bottom center of the line.

Copying Hand Needles

Select your line movie clip, copy, then Paste in Place to place it in the exact same position as the original. Then selecting only the new instance of the symbol, scale it down from the Transform menu.

Scaling Down Minutes Arrow

Repeat the process for the hours hand now scaled 70% from the original, and we can have our three hands as three instances of the hand line symbol.

Three Hands of the Clock

Naming the Instances

In order for ActionScript to differentiate the correct actions to the correct instances, we must name them. Select each of the hand lines and name them, in my case, mcSeconds, mcMinutes, and mcHours, respectively.

For the time in text, create a new text box. Make sure Dynamic Text is selected and name it txtBox.

The Code

Where does the time come from?

The time comes from the user's computer, using Flash's new Date() class. If the user changes their system clock, this will update on-the-fly as well. It's possible to use the hosting server's time, but this requires additional, server-side programming and use of ActionScript's timed functions. This is a little more than we're trying to accomplish.

ActionScript

addEventListener(Event.ENTER_FRAME, entering);
function entering(e:Event):void {
	var date = new Date();
	var milDec = date.milliseconds/1000;
	var secDec = (date.seconds+milDec)/60;
	var minDec = (date.minutes+secDec)/60;
	
	mcSeconds.rotation = secDec*360;
	mcMinutes.rotation = minDec*360;
	
	var twelveHour = (date.hours > 12) ? date.hours-12 : date.hours;
	var hourDec = (twelveHour+minDec)/12;
	mcHours.rotation = hourDec*360;
	
	txtBox.text = lZeros(date.hours)+':'+lZeros(date.minutes)+':'+lZeros(date.seconds)+'.'+lZeros(date.milliseconds,2);
}
 
function lZeros(num,zeros=1) {
	var ltqt:uint = 1;
	var theString:String = num;
	for(var i=0; i<zeros; i++) {
		ltqt *= 10;
		if(num < ltqt) {
			theString = '0'+theString;
		}
	}
	return theString;
}

In retrospect we're simply calculating the time and rotation of each needle and also updating the text box each time the SWF enters a new frame. It enters a new frame at your frame rate (FPS), 15 FPS (15 calculations per second) in my case. More FPS means a smoother animation and more accurate result but it can take a toll on performance, especially for a user with a less-than-capable system. The frame rate can be set under Properties in the Flash development environment.