Create An Analog Clock in Flash Lite

Importing and Setting Up the Graphics

We are not going to create the graphics for this clock from scratch to save time. Download this file to get the graphics saved in an SWF file. Unzip the contents (the SWF file) and put them somewhere accessible.

We are going to start off by creating a new FLA. Open Flash and go through File>New, the New Document window should pop up, click on the Templates tab, click on Global Hand, select Nokia S60 – 240×320 and click OK.

If you like to test on your actual phone and it does not have the aspect ratio we selected then feel free to select that ratio, our movie will work nonetheless because we will set the ActionScript version to Flash Lite 1.1, which is guaranteed to work on practically all models running the Flash Lite player.

To do this last part, access the Properties Inspector and click on the Settings… button, from there simply change the Version to Flash Lite 1.1.

It’s time now to import the graphics, go through File>Import>Import to Stage, browse for the SWF file you unzipped from our assets zip archive and click OK. You should see all the graphics on the stage now.

Our clock is going to move its hands around to show the time. In order for us to manipulate any asset on the stage we need to have this asset converted to a movie clip symbol and then assign an instance name to it to be able to refer to it from ActionScript. We are going to convert our clock hands one by one.

If you attempt to select any of the clock hands you will notice that all of them are grouped together. Simply hit Ctrl+B to break up the group into the three clock hands.

Click on an empty spot on the stage and then select the hours hand (the shortest one in the middle). We are going to convert it to a symbol by pressing F8. The Convert to Symbol window should pop-up, assign the name Hours MC to it, set the type to Movie Clip, and the Registration Point to the lower middle point (We will discuss the Registration Point more in a bit).

We need to assign an instance name to our newly created movie clip in order to be able to refer to it via ActionScript. While the Hours Hand is selected on stage, access theProperties Inspector and assign the instance name hours_mc to it.

The Registration Point is the center of our movie and it will be used as the pivot for rotation when the clock functions later. We have now put this point on the lower tip of the hours clock, which is the exact point at which the hand should revolve but it is very close. If we were to rotate our clock hand now it will look something similar to this because the pivot is at its very lowest tip.

Realistically the pivot would be a bit higher than this and more in between the four sharp points of the clock hand.

We can manually alter the position of our graphic over the registration point of the movie clip by double clicking the hours hand movie clip on stage to edit its own timeline. You should see your clock hand dotted once again now. Simply Zoom-In and then move the hand using the arrow keys on your keyboard so that the Plus Sign is a bit higher than the absolute bottom in the position we showed in the image earlier.

That should do it. Now our clock hand will rotate from the right pivot point! Double click on an empty spot on the stage to go back to your main timeline. You will now need to repeat this process for the Minutes Hand and the Seconds Hands. In summary, here is what you will have to do for the minutes hand:

1. Select the Minutes Hand then press F8 to convert to a Movie Clip Symbol, name it Minutes MC, and the set the Registration Point to the lower bottom.
2. Assign the instance name minutes_mc to this movie clip.
3. Double Click the minutes hand to edit its timeline and move the hands so that the registration point is at the right position (a bit above its absolute lowest tip). Once you are done double click an empty spot to go back to the main timeline.

And then once again for the seconds hand:

1. Select the Seconds Hand then press F8 to convert it to a Movie Clip Symbol, name it Seconds MC.
2. Assign the instance name seconds_mc to this movie clip.
3. Double Click the seconds hand to edit its timeline and move the hands so that the registration point is at the right position (a bit above its absolute lowest tip). Once you are done double click an empty spot to go back to the main timeline.

You should end up with the three hands as movie clips with assigned instance names on the stage. All we need to do now is just put them on the proper place on stage. Move the clock graphic to the middle of the stage and then position the clock hands over the center of the clock. A trick that you can use to make sure that registration point of all your hands is right on top of the center of your clock is to select them one at a time and use the Properties Inspector to set their transparency to 20% and then try to put the Plus Sign right on top of the center of clock. (You can zoom in to make things much easier as well!) – You will obviously have to remove the transparency effect when you are done.

You should end up with this sort of alignment.

All of our graphical assets are now ready and set for our clock. All we need to do now is script this. Right-click the top layer in your timeline and select Actions to start coding.

Coding the Clock

Our clock code is pretty simple. The Flash Lite player can retrieve the time of the device it is running on by using the FSCommand2 method along with the parametersGetTimeHours, GetTimeMinutes, and GetTimeHours. We are going to retrieve these three values and save them in variables with corresponding names. Simply paste the code below to do so:

myHours = FSCommand2(“GetTimeHours”);
myMinutes = FSCommand2(“GetTimeMinutes”);
mySeconds = FSCommand2(“GetTimeSeconds”); 

The Flash Lite Player outputs the hours as a value between 0 and 24, the minutes between 0 and 60, and the seconds between 0 and 60 – which are the regular units of time. However, we need to translate these into a rotation degree. A full revolution around the clock is 360 degrees to find the multiplier to covert our values into a degree we simply divide 360 by the maximum value of each of our time units.

// Hours: 360 divide by 24 = 15
// Minutes: 360 divide by 60 = 6
// Seconds: 360 divide by 60 = 6

This will work properly for minutes and seconds, but clocks usually show hours in the 12 hour format, so we are going to get our hour multiplier by dividing 360 by 12.

// Hours: 360 divide by 12 = 30
// Minutes: 360 divide by 60 = 6
// Seconds: 360 divide by 60 = 6

We are going to apply this into our code now by using our multipliers to convert our time into degrees:

myHours = FSCommand2(“GetTimeHours”);
myMinutes = FSCommand2(“GetTimeMinutes”);
mySeconds = FSCommand2(“GetTimeSeconds”);  myHours = myHours*30;
myMinutes = myMinutes*6;
mySeconds = mySeconds*6;

And now we will assign these degrees as the value for the rotation properties of our clock hands:

myHours = FSCommand2(“GetTimeHours”);
myMinutes = FSCommand2(“GetTimeMinutes”);
mySeconds = FSCommand2(“GetTimeSeconds”);myHours = myHours*30;
myMinutes = myMinutes*6;
mySeconds = mySeconds*6;

hours_mc._rotation = myHours;
minutes_mc._rotation = myMinutes;
seconds_mc._rotation = mySeconds; 

Identifiers ending with _mc refer to the movie clips we have on stage, the other identifies refer to the variables in which we stored the time.

Believe it or not, our code is practically done. However, we need this code to be executed repeatedly, to do this, we are going to use a manual timeline loop, to close the Actions panel and access the Timeline. Right-click on the only frame you have on your upper layer and Insert a Frame. Repeat this process for the other layer as well.

By adding another frame we are making the movie play from frame 1 to 2, and then back to 1, 2, 1, 2, and so on. This way our code will be repeatedly executed each time frame 1 is played once again. To test your clock simply press Ctrl+Enter.

Our clock should function well now, but it is not perfect, because the hours hand will point at the current hour and will step suddenly onto the next hour when it comes, while in reality, the hours hand moves gradually bit by bit as time passes and will end up at the next hours smoothly. To mimic this in our clock we will need to add the number of minutes to our hours value. We can do this by adding one line to our code:

myHours = FSCommand2(“GetTimeHours”);
myMinutes = FSCommand2(“GetTimeMinutes”);
mySeconds = FSCommand2(“GetTimeSeconds”);  myHours = myHours + (myMinutes/60);
myHours = myHours*30;
myMinutes = myMinutes*6;
mySeconds = mySeconds*6;

hours_mc._rotation = myHours;
minutes_mc._rotation = myMinutes;
seconds_mc._rotation = mySeconds;

Test your movie once again to view your fully functional clock!