Archived:How to implement a chronometer in Flash Lite 3.0

Comments

Dear Author, 1. The SWF seems to be Flash SWF and not a Flash Lite SWF. Kindly change the export settings and upload the new file. 2. Actionscript 3.0 is not applicable to Nokia phones. Hence any reference to AS3 is inappropriate in this forum

Log in or Join to leave comments.

Archived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

We do not recommend Flash Lite development on current Nokia devices, and all Flash Lite articles on this wiki have been archived. Flash Lite has been removed from all Nokia Asha and recent Series 40 devices and has limited support on Symbian. Specific information for Nokia Belle is available in Flash Lite on Nokia Browser for Symbian. Specific information for OLD Series 40 and Symbian devices is available in the Flash Lite Developers Library.

Article Metadata

---

Code Example

Source file: Media:Eapsed Time Chronometer.zip Media:Countdown Chronometer.zip

---

Article

Created: cristovaodoj (02 Mar 2010)

Last edited: hamishwillee (14 May 2013)

Introduction

This article will show how to implement a chronometer in Flash Lite 3.0 and ActionScript 2.0.

Countdown Chronometer

First of all we need to build the graphic design which is compost by five (5) Static Text fields with the following values: "Days", "Hours", "Minutes", "Seconds" and "Milliseconds"; and a Dynamic Text field with the instance name "chronometer" as shown in the picture below:

Now only what left to complete our task is coding the frame that contains the chronometer. To do this we need update the chronometer constantly to see the values changing. In the action area enter with the code:

this.onEnterFrame = function() {
     // everything inside this block will be executed constantly.
};

Tip: Simpler solution for updating, is to add one more frame after this current frame(let current frame be 1, for illustration purpose). In the new empty frame, simply add the code - gotoAndPlay(1);

Reason - A code executed inside onEnterFrame, executes N times a second- dictated by frame rate. For the case of a simple chronometer, this is unnecessary overhead.

Obs.: This way executes the code half times than the previous one;

So let's create an object Date with the name "now" which will represents the exactly moment that the code will be executed, after that take the value of this moment in milliseconds using the method getTime() and then we'll have how to work better with the dates. Do the same for the final date using the Date's constructor new Date(year, month, day); attention! the good values for the months are 0 (January) until 11 (December). Now the difference between the final time and the current time's the quantity of milliseconds from now until the final date. The code's something like this:

var now:Date = new Date();
var current_time = now.getTime();
// Future date that we want to wait for it. July, 31, 2010
var final_date:Date = new Date(2010, 06, 31);
var final_time = final_date.getTime();
var milliseconds = final_time - current_time;

Note: Obs.1: The hours, minutes, seconds and milliseconds will be at midnight, however if you want to set them only add new params to the Date's constructor. For Example: new Date(2010, 06, 31, 13, 30, 25, 45) means that the future date will be at July, 31, 2010 at 13 hours, 30 minutes, 25 seconds and 45 milliseconds.

We have to transform the milliseconds to days, hours, minutes and so on. The following code does this for us:

var seconds = Math.floor(milliseconds / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);

OBS.: The method Math.floor returns the closest integer that is less than or equal to the given parameter.

Now we do have the difference between the final date and current date in all forms we want it to, milliseconds, seconds, minutes, hours and days. However to complete our countdown chronometer there's more one task to, transforming this values in real time like we see at the watch. The shown code does this transformation:

//The Dynamic Text variable chronometer receives the transformed time
chronometer.text = (days % hours % 365) + " : " + (hours % minutes % 24) + " : " + (minutes % seconds % 60) + " : " + (seconds % milliseconds % 60) + " : " + (milliseconds % 1000);

Finally, the countdown chronometer's complete and remember: the whole code shown above must be inside the function.

Elapsed Time Chronometer

Well, above I taught how to implement a countdown chronometer. Now I'll teach you how modify it to becomes an elapsed time chronometer. First you need to create a variable called "begin_time" outside of the function "onEnterFrame"; just like that:

var begin_time = new Date().getTime();

The second step is to take the difference between the "begin_time" and the "current_time"; Notice that in the countdown chronometer we had the "final_time" less the "current_time". Inside the "onEnterFrame" function modify "var milliseconds = final_time-current_time;" for this:

var milliseconds = current_time - begin;

The third, and last step is to change the Dynamic Text field from this:

chronometer.text = (days%hours%365)+" : "+(hours%minutes%24)+" : "+(minutes%seconds%60)+" : "+(seconds%milliseconds%60)+" : "+(milliseconds%1000);

to this:

chronometer.text = (days%365)+" : "+(hours%24)+" : "+(minutes%60)+" : "+(seconds%60)+" : "+(milliseconds%1000);

Thanks!. The elapsed time chronometer's done and works fine just as well.

Source Codes for Download

• File:Countdown Chronometer.zip
• File:Eapsed Time Chronometer.zip