How To Make an Analog Clock Using ActionScript

In this tutorial, you will learn how to create an analog clock that you can use either on your website, or just as a random application. To make the clock function in this tutorial, we will be using a coding language called ActionScript.

Step 1: Creating The Flash Document

After you have loaded Macromedia/Adobe Flash, we will need to reconfigure the size of the stage for the size of our clock. In this tutorial, we will be using the dimensions of 300×300 pixels. To change the dimensions of the stage, click on the Size button in the Properties Inspector (the Properties panel at the bottom of your Flash window). This will load the Document Properties window.

Step 2: Creating The Clock Body

To make the clock look like an actual clock, you can either create/draw your own clock body, or look for a clock without any hands on Google Images. In this tutorial, I will be using an image acquired from Google Images, and we will need to import this image into our Flash document. When choosing a clock image, please make sure the image type/extension is Jpeg (.jpg).

To import the clock image into our Flash document, from the File menu, click on the Import to Library option. This will load a window similar to Open/Save that will let you choose the file that you would like to import into Flash. After you have selected the image that you would like to use, and then click on the “Open” button. Your image will now be imported into your document’s library.

Step 3: Utilizing The Library

In this step, we will be utilizing a tool called “the library,” which is a list of all of the items you are currently using in your Flash document. In some versions of Flash, the Library is not automatically visible. To view the Library, click on the Window menu from the top of your Flash window, and then select Library. The library for your Flash document will now appear with your imported image (as shown below).

Step 4: Placing The Clock on The Stage

Importing the clock image into the Library does not mean that it will automatically be present on the stage. With this in mind, we will need to manually place the clock image on the stage. To do this, drag the name of the image from the library and place it on the stage. To make sure that it is in the right place on the stage where you want it, you can use your mouse, or you can nudge the image around using the arrow/cursor keys on your keyboard.

Step 5: Layering

In this step, we will be preparing the stage for the hands of the clock; however, we will need to make sure that the clock image is sent straight to the back so our hands will successfully appear. To do this, we will be using a method called Layering.

Near the top of your Flash window, you will see an element called the Timeline. Within the Timeline, double click on the Layer 1 name and rename this layer “Clock” (without quotes). This is so we can tell which layer is which.

After you have renamed the first layer, create a second layer by clicking on the Insert Layer button. This button will be designated with icon that looks like a piece of paper with a plus sign (+) on its left. This will automatically add a new layer (Layer 2) to the Timeline. After you have created this new layer, rename the layer “Hands” (without quotes).

Step 6: Creating The Hands

After you have created the second layer in the Timeline, select the first Keyframe of the second layer in the Timeline so that Flash knows which layer we will be working with. When you have the first Keyframe of the second layer selected, we will be making three lines for the hands of the clock (Hour, Minute, Second).

To create the hands in this tutorial, we will be using the Line Tool from the Tools section of your Flash window. Select the Line Tool options from the Tools section, and then draw three lines right next to one another on the clock face (as shown below). For effect, make one line shorter than the rest for the hour hand.

So that we know which hand is which (and for effect), thicken the lines that you want to be the hour and minute hands. To do this, select the Arrow Tool (white) from the Tools box and individually select these lines. To thicken a line that is selected, within the Properties Inspector, click on the down arrow next to the thickness number (defaulted to 1) and move the slider upward to give the line more thickness. Repeat this step for the hour hand as well.

(For this tutorial, we will be using the thickness of 3.75)

Step 7: Designating The Hands

In this step, we will be assigning the hands their unique function; however, we will need to convert the shapes (what the lines are now) to symbols. To do this, select the Arrow Tool from the Tools box and select the first hand that you would like to designate. In this tutorial, we will be making the first hand the minute hand.

With the minute hand selected, press the F8 key on your keyboard and a Convert To Symbol window will appear. In the Name text box, enter “Minute Hand” without quotes, and make sure that “Movie Clip” is selected from the Behavior options. In the Registration section of the Covert To Symbol window, make sure the middle-bottom box is selected. After all these values are set in the Convert To Symbol window, press the “OK” button.

Perform this step for all three hands, only changing the Name section of the Convert To Symbol window and leaving all of the other values the same. You will also see the items appear in the Library after you have converted the lines to symbols; however, you do not need to drag them onto the stage.

So that the ActionScript code (that we will be entering in a few steps) recognizes these items, we will need to give them Instance Names. To do this, individually select each line one by one, and in the Properties Inspector, change the Instance Name to a one-word title that designates their function (e.g. minhand, hourhand, sechand). Do this for each of the hands you have created so far.

Step 8: Getting The Hands Ready

We are now ready to move the hands into place on the clock. With an individual line selected, move the line so that all hands are pointed to the 12 o’clock position on the stage with the bottom of the lines in the middle. You can move the lines using your mouse, and also using the arrow/cursor keys on your keyboard to nudge them into the right place. To the eye, they will all look like one line, but all 3 lines are there on top of each other. The stage should now look like this:

Step 9: Coding The Time using ActionScript

In this step of the tutorial, we will be using ActionScript to make the clock function and using calculations to make the hands show the exact time. Do not worry, the calculations have already been made for you.

We will be inserting the ActionScript into a Movie Clip object. To create the movie clip object, draw a line (using the Line Tool from the Tools box) across the bottom of the stage. Since we do not want this line to appear with our clock, under the Colors section of the Tools box, select White as the color (Stroke Color) next to the pen. The line will then appear white and hidden from view.

With the white line still selected (shown by the small black dots across the line’s length), press the F8 key on your keyboard to open the Convert To Symbol window. Enter “Actions” (without quotes) in the Name text box, and then press “OK.” This object is now ready to have ActionScript applied to it.

To type the ActionScript into your Flash document within the “Actions” object, open the Actions window and enter the following code. So that the clock will function properly, do not alter any of the code shown below.

onClipEvent (enterFrame) {

	// Assign variables from time
	now = new Date();
	hour = now.getHours();
	minutes = now.getMinutes();
	seconds = now.getSeconds();
	milsec = now.getMilliseconds();

	// Convert to 12-hour clock
	if (hour>12) {
		hour -= 12;
	}
	secondAngl = 360*seconds/60;

	// Designate rotation
	_root.sechand._rotation = secondAngl;
	_root.minhand._rotation = minutes*6+(seconds/10);
	_root.hourhand._rotation = hour*30+(minutes/2);

}

Step 10: Your Clock is Ready!

After you have entered the ActionScript above, your clock will now function. To test your clock, click Control from the menu at the top of your Flash window and then select Test Movie. Your clock will look like the example that I have provided below.

Please be sure to leave any questions or feedback below in this tutorial’s comment section.

By Chad Sweely

Chad Sweely is a staff writer and Flash Designer for FlashNewz.

Leave a comment