Create An Analog Clock in Flash Lite

This time I’ll give you an awsome tutorial about how creating an analog clock in Flash lite. Which is this flash lite can be use as screen saver and also as wallpaper. I find this tutorial at www.republicofcode.com, I believe this tutorial would be very usefull for theme maker just like me. Thanks for Blue_chi who wrote this tutorial 2 years ago. In this tutorial he made Flash lite for Nokia s60 phone, but I think it also works for Nokia s40.

This tutorial will teach you how to create a very simple analogue clock in Flash Lite 1.1. This movie can be used as a screen saver on any mobile phone that supports Flash Lite screen savers. We are going to use very simple FSCommands and _rotation properties to create this effect. You are not expected to have any advanced prior knowledge with Flash Lite to follow this tutorial. This tutorial will be divided into two parts, in the first we will import and set up the graphics, and the second we will code the clock.

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.

Assets on Stage

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.

Ctrl+B To Break Down the Group

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).

Hours Converted to Symbol

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.

Hours Hand Given an Instance Name

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.

Registration Point

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

Registration Point - Proper Place

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.

Move Registration Point

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.

Position Your Hands

You should end up with this sort of alignment.

Stage Ready

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 parametersGetTimeHoursGetTimeMinutes, 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.

Insert Frame

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.

Almost Done

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!

Finally Done - Flash Lite 1.1 Clock

 

This concludes our tutorial, you can download the source file of the final version of the clock here. I hope that you’ve learnt something helpful from this tutorial. Feel free to post any questions you have at the Oman3D Forum.

– End of Tutorial

6 responses to “Create An Analog Clock in Flash Lite

  1. Asfa

    gan, klo bikin theme nya pake flash bisa juga ga??

    ajarin donk, ane minat banget sama yg berbau flash, maklum lulus kul karna bkin game flash🙂

    • iya ini flash lite buat bikin wallpaper berbentuk jam analog, jam digital juga bisa, karena s40 model skarang udah ngedukung flashlite dan kita bisa bikin di flash versi 8 keatas, abis ini gw bakal bikin tutorial cara bikin tema kok, jadi nanti tinggal diikutin aja ya.😀

  2. Hi,Thanks for this tutorial.But what’s the software used for creating flash clock

  3. yuli

    gan…
    maap nih masi gaptek bgt….
    mau nanya nih kira2 da link download buat flash lite nya gag??

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 15 other followers

%d bloggers like this: