I thought I'd give bloke some help and write a short tutorial on how to write a digital clock.

Step 1: Create your images
For a digital clock, you will need a background image and ten images containing the digits from 0 to 9. Let's say you created the images below:





Step 2: Position your images
Using an image editing software such as Adobe Photoshop, or simply by hand, determine the positions of the clock digits relative to the clock background. See below:



All digits will have a vertical offset of 11 pixels, while the horizontal offsets for each digit are different. Of course, in your own example, the values will differ from those shown in the picture above.

Step 3. Write the widget code
The widget code to display a clock with 2-digit hours, 2-digit minutes and 2-digit seconds should look similar to:


Note that you only need to specify the parameters that are different from the default values, i.e. you don't need to set a hOffset="0" and a vOffset="0" for the background image, or the width, height or visible for the window object. You need to assign names to the images you will be updating based on the current time.

Step 4. Start the clock
This is where you need a piece of JavaScript. The simplest way to make the clock work is to add a function that updates all the digits based on the current time. Then, call the function when the widget starts (in the onLoad action) and every second (in the onTimer action).


That's it! I've included a .zip file with a sample clock for your convenience. I'm also preparing a tutorial on how to build an analog clock, a web radio, a rss reader and other simple tutorials -- stay tuned.

Note: The code above is just about the simplest clock, you can add countless interface upgrades and code optimizations once you get accustomed to JavaScript and YWE SDK: make the digits fade from one to another, fetch the date only once per widget run and increment the number of seconds in your code, make the colons blink, change or rotate colors, add multiple time zones, add AM/PM or military notations and many more.


Radu Galesanu

is that for Yahoo widgets as well?
salut!
PD: thanks for the tutorial, is cool

big THX...
...works great, great tutorial...
...thank you very much!!!!

bloke

Quote:

Ernesto Quezada
is that for Yahoo widgets as well?
PD: thanks for the tutorial, is cool

The code is for Yahoo! Widgets.
Thank you!

Here is the tutorial on how to build an analog clock, as promised.

Thank you for the tutorial. It was really helpfull.
P.S. : Are you from Romania ?

dbnba: thanks, glad you liked it. Greetings from Bucharest .

thanks for this pls i am here i don't know if you will love buy crude oil that is why am here,if you won't you can tontact me with this email;chief_tompulor@yahoo.com hope to here from

Thanks a bunch!

I also would like to know how could I run a digital clock like this on a Sharepoint Lotus migration of Mainsoft.

XML should work with the solution?

Excellent....Please help me ...how can i place swf files directly to a blogspot?

Cool good tutorial

I think you just add the object embed code, although I've never tried on blogspot

1. Create a new flash file (Actionscript 3.0) and save it at clock_24.fla .

2. Rename “layer 1″ to “time”. Take the Text Tool and draw 3 dynamic text on the stage to display hours, minutes, seconds with respective instance names as : hours_t, minutes_t and seconds_t.
Create 2 static text to display colons ( that you insert between hours and minutes and between minutes and seconds. Align everything correctly.

3. To accomplish our “24 style” we need a special font. You can download one at www.dafont.com/fr/ds-digital.font. (Feel free to donate to the author.)
Install the font on your system.

4. Now set the property font of all the dynamic text to the font you’ve just installed and set their font size to something big like 150. Set the color to something near white : #F7F7F5.

5. To finish the 24 special effect we need to add a filter. Open the filters window and add some orangish glow.

Screenshot

6. So far we have created the appearance of the 24 clock. Now we need to add the actionscript code. To do so, create an “actions” layer and open the actions panel. Type the following code :
view source
print?
01 stage.addEventListener(Event.ENTER_FRAME,updateDate);
02
03 function updateDate(e:Event):void{
04 var date = new Date();
05
06 if (date.hours< 10){
07 hours_t.text = "0" + date.hours;
08 }
09 else {
10 hours_t.text = date.hours;
11 }
12
13 if (date.minutes< 10){
14 minutes_t.text = "0" + date.minutes;
15 }
16 else {
17 minutes_t.text = date.minutes;
18 }
19
20 if (date.seconds< 10){
21 seconds_t.text = "0" + date.seconds;
22 }
23 else {
24 seconds_t.text = date.seconds;
25 }
26 }

We add an ENTER_FRAME event listener to the stage so that every time an ENTER_FRAME event occured the time will be updated.
In the updateTime function we instantiate a Date variable. We use the properties hours, minutes and seconds of the class Date to display the time. Note that we check for each if the number is inferior to 10 and if so we add a zero like in a digital clock.1. Create a new flash file (Actionscript 3.0) and save it at clock_24.fla .

2. Rename “layer 1&#8243; to “time”. Take the Text Tool and draw 3 dynamic text on the stage to display hours, minutes, seconds with respective instance names as : hours_t, minutes_t and seconds_t.
Create 2 static text to display colons ( that you insert between hours and minutes and between minutes and seconds. Align everything correctly.

3. To accomplish our “24 style” we need a special font. You can download one at www.dafont.com/fr/ds-digital.font. (Feel free to donate to the author.)
Install the font on your system.

4. Now set the property font of all the dynamic text to the font you’ve just installed and set their font size to something big like 150. Set the color to something near white : #F7F7F5.

5. To finish the 24 special effect we need to add a filter. Open the filters window and add some orangish glow.

Screenshot

6. So far we have created the appearance of the 24 clock. Now we need to add the actionscript code. To do so, create an “actions” layer and open the actions panel. Type the following code :
view source
print?
01 stage.addEventListener(Event.ENTER_FRAME,updateDate);
02
03 function updateDate(e:Event):void{
04 var date = new Date();
05
06 if (date.hours< 10){
07 hours_t.text = "0" + date.hours;
08 }
09 else {
10 hours_t.text = date.hours;
11 }
12
13 if (date.minutes< 10){
14 minutes_t.text = "0" + date.minutes;
15 }
16 else {
17 minutes_t.text = date.minutes;
18 }
19
20 if (date.seconds< 10){
21 seconds_t.text = "0" + date.seconds;
22 }
23 else {
24 seconds_t.text = date.seconds;
25 }
26 }

We add an ENTER_FRAME event listener to the stage so that every time an ENTER_FRAME event occured the time will be updated.
In the updateTime function we instantiate a Date variable. We use the properties hours, minutes and seconds of the class Date to display the time. Note that we check for each if the number is inferior to 10 and if so we add a zero like in a digital clock.1. Create a new flash file (Actionscript 3.0) and save it at clock_24.fla .

2. Rename “layer 1&#8243; to “time”. Take the Text Tool and draw 3 dynamic text on the stage to display hours, minutes, seconds with respective instance names as : hours_t, minutes_t and seconds_t.
Create 2 static text to display colons ( that you insert between hours and minutes and between minutes and seconds. Align everything correctly.

3. To accomplish our “24 style” we need a special font. You can download one at www.dafont.com/fr/ds-digital.font. (Feel free to donate to the author.)
Install the font on your system.

4. Now set the property font of all the dynamic text to the font you’ve just installed and set their font size to something big like 150. Set the color to something near white : #F7F7F5.

5. To finish the 24 special effect we need to add a filter. Open the filters window and add some orangish glow.

Screenshot

6. So far we have created the appearance of the 24 clock. Now we need to add the actionscript code. To do so, create an “actions” layer and open the actions panel. Type the following code :
view source
print?
01 stage.addEventListener(Event.ENTER_FRAME,updateDate);
02
03 function updateDate(e:Event):void{
04 var date = new Date();
05
06 if (date.hours< 10){
07 hours_t.text = "0" + date.hours;
08 }
09 else {
10 hours_t.text = date.hours;
11 }
12
13 if (date.minutes< 10){
14 minutes_t.text = "0" + date.minutes;
15 }
16 else {
17 minutes_t.text = date.minutes;
18 }
19
20 if (date.seconds< 10){
21 seconds_t.text = "0" + date.seconds;
22 }
23 else {
24 seconds_t.text = date.seconds;
25 }
26 }

We add an ENTER_FRAME event listener to the stage so that every time an ENTER_FRAME event occured the time will be updated.
In the updateTime function we instantiate a Date variable. We use the properties hours, minutes and seconds of the class Date to display the time. Note that we check for each if the number is inferior to 10 and if so we add a zero like in a digital clock.1. Create a new flash file (Actionscript 3.0) and save it at clock_24.fla .

2. Rename “layer 1&#8243; to “time”. Take the Text Tool and draw 3 dynamic text on the stage to display hours, minutes, seconds with respective instance names as : hours_t, minutes_t and seconds_t.
Create 2 static text to display colons ( that you insert between hours and minutes and between minutes and seconds. Align everything correctly.

3. To accomplish our “24 style” we need a special font. You can download one at www.dafont.com/fr/ds-digital.font. (Feel free to donate to the author.)
Install the font on your system.

4. Now set the property font of all the dynamic text to the font you’ve just installed and set their font size to something big like 150. Set the color to something near white : #F7F7F5.

5. To finish the 24 special effect we need to add a filter. Open the filters window and add some orangish glow.

Screenshot

6. So far we have created the appearance of the 24 clock. Now we need to add the actionscript code. To do so, create an “actions” layer and open the actions panel. Type the following code :
view source
print?
01 stage.addEventListener(Event.ENTER_FRAME,updateDate);
02
03 function updateDate(e:Event):void{
04 var date = new Date();
05
06 if (date.hours< 10){
07 hours_t.text = "0" + date.hours;
08 }
09 else {
10 hours_t.text = date.hours;
11 }
12
13 if (date.minutes< 10){
14 minutes_t.text = "0" + date.minutes;
15 }
16 else {
17 minutes_t.text = date.minutes;
18 }
19
20 if (date.seconds< 10){
21 seconds_t.text = "0" + date.seconds;
22 }
23 else {
24 seconds_t.text = date.seconds;
25 }
26 }

We add an ENTER_FRAME event listener to the stage so that every time an ENTER_FRAME event occured the time will be updated.
In the updateTime function we instantiate a Date variable. We use the properties hours, minutes and seconds of the class Date to display the time. Note that we check for each if the number is inferior to 10 and if so we add a zero like in a digital clock.1. Create a new flash file (Actionscript 3.0) and save it at clock_24.fla .

2. Rename “layer 1&#8243; to “time”. Take the Text Tool and draw 3 dynamic text on the stage to display hours, minutes, seconds with respective instance names as : hours_t, minutes_t and seconds_t.
Create 2 static text to display colons ( that you insert between hours and minutes and between minutes and seconds. Align everything correctly.

3. To accomplish our “24 style” we need a special font. You can download one at www.dafont.com/fr/ds-digital.font. (Feel free to donate to the author.)
Install the font on your system.

4. Now set the property font of all the dynamic text to the font you’ve just installed and set their font size to something big like 150. Set the color to something near white : #F7F7F5.

5. To finish the 24 special effect we need to add a filter. Open the filters window and add some orangish glow.

Screenshot

6. So far we have created the appearance of the 24 clock. Now we need to add the actionscript code. To do so, create an “actions” layer and open the actions panel. Type the following code :
view source
print?
01 stage.addEventListener(Event.ENTER_FRAME,updateDate);
02
03 function updateDate(e:Event):void{
04 var date = new Date();
05
06 if (date.hours< 10){
07 hours_t.text = "0" + date.hours;
08 }
09 else {
10 hours_t.text = date.hours;
11 }
12
13 if (date.minutes< 10){
14 minutes_t.text = "0" + date.minutes;
15 }
16 else {
17 minutes_t.text = date.minutes;
18 }
19
20 if (date.seconds< 10){
21 seconds_t.text = "0" + date.seconds;
22 }
23 else {
24 seconds_t.text = date.seconds;
25 }
26 }

We add an ENTER_FRAME event listener to the stage so that every time an ENTER_FRAME event occured the time will be updated.
In the updateTime function we instantiate a Date variable. We use the properties hours, minutes and seconds of the class Date to display the time. Note that we check for each if the number is inferior to 10 and if so we add a zero like in a digital clock.1. Create a new flash file (Actionscript 3.0) and save it at clock_24.fla .

2. Rename “layer 1&#8243; to “time”. Take the Text Tool and draw 3 dynamic text on the stage to display hours, minutes, seconds with respective instance names as : hours_t, minutes_t and seconds_t.
Create 2 static text to display colons ( that you insert between hours and minutes and between minutes and seconds. Align everything correctly.

3. To accomplish our “24 style” we need a special font. You can download one at www.dafont.com/fr/ds-digital.font. (Feel free to donate to the author.)
Install the font on your system.

4. Now set the property font of all the dynamic text to the font you’ve just installed and set their font size to something big like 150. Set the color to something near white : #F7F7F5.

5. To finish the 24 special effect we need to add a filter. Open the filters window and add some orangish glow.

Screenshot

6. So far we have created the appearance of the 24 clock. Now we need to add the actionscript code. To do so, create an “actions” layer and open the actions panel. Type the following code :
view source
print?
01 stage.addEventListener(Event.ENTER_FRAME,updateDate);
02
03 function updateDate(e:Event):void{
04 var date = new Date();
05
06 if (date.hours< 10){
07 hours_t.text = "0" + date.hours;
08 }
09 else {
10 hours_t.text = date.hours;
11 }
12
13 if (date.minutes< 10){
14 minutes_t.text = "0" + date.minutes;
15 }
16 else {
17 minutes_t.text = date.minutes;
18 }
19
20 if (date.seconds< 10){
21 seconds_t.text = "0" + date.seconds;
22 }
23 else {
24 seconds_t.text = date.seconds;
25 }
26 }

We add an ENTER_FRAME event listener to the stage so that every time an ENTER_FRAME event occured the time will be updated.
In the updateTime function we instantiate a Date variable. We use the properties hours, minutes and seconds of the class Date to display the time. Note that we check for each if the number is inferior to 10 and if so we add a zero like in a digital clock.1. Create a new flash file (Actionscript 3.0) and save it at clock_24.fla .

2. Rename “layer 1&#8243; to “time”. Take the Text Tool and draw 3 dynamic text on the stage to display hours, minutes, seconds with respective instance names as : hours_t, minutes_t and seconds_t.
Create 2 static text to display colons ( that you insert between hours and minutes and between minutes and seconds. Align everything correctly.

3. To accomplish our “24 style” we need a special font. You can download one at www.dafont.com/fr/ds-digital.font. (Feel free to donate to the author.)
Install the font on your system.

4. Now set the property font of all the dynamic text to the font you’ve just installed and set their font size to something big like 150. Set the color to something near white : #F7F7F5.

5. To finish the 24 special effect we need to add a filter. Open the filters window and add some orangish glow.

Screenshot

6. So far we have created the appearance of the 24 clock. Now we need to add the actionscript code. To do so, create an “actions” layer and open the actions panel. Type the following code :
view source
print?
01 stage.addEventListener(Event.ENTER_FRAME,updateDate);
02
03 function updateDate(e:Event):void{
04 var date = new Date();
05
06 if (date.hours< 10){
07 hours_t.text = "0" + date.hours;
08 }
09 else {
10 hours_t.text = date.hours;
11 }
12
13 if (date.minutes< 10){
14 minutes_t.text = "0" + date.minutes;
15 }
16 else {
17 minutes_t.text = date.minutes;
18 }
19
20 if (date.seconds< 10){
21 seconds_t.text = "0" + date.seconds;
22 }
23 else {
24 seconds_t.text = date.seconds;
25 }
26 }

We add an ENTER_FRAME event listener to the stage so that every time an ENTER_FRAME event occured the time will be updated.
In the updateTime function we instantiate a Date variable. We use the properties hours, minutes and seconds of the class Date to display the time. Note that we check for each if the number is inferior to 10 and if so we add a zero like in a digital clock.1. Create a new flash file (Actionscript 3.0) and save it at clock_24.fla .

2. Rename “layer 1&#8243; to “time”. Take the Text Tool and draw 3 dynamic text on the stage to display hours, minutes, seconds with respective instance names as : hours_t, minutes_t and seconds_t.
Create 2 static text to display colons ( that you insert between hours and minutes and between minutes and seconds. Align everything correctly.

3. To accomplish our “24 style” we need a special font. You can download one at www.dafont.com/fr/ds-digital.font. (Feel free to donate to the author.)
Install the font on your system.

4. Now set the property font of all the dynamic text to the font you’ve just installed and set their font size to something big like 150. Set the color to something near white : #F7F7F5.

5. To finish the 24 special effect we need to add a filter. Open the filters window and add some orangish glow.

Screenshot

6. So far we have created the appearance of the 24 clock. Now we need to add the actionscript code. To do so, create an “actions” layer and open the actions panel. Type the following code :
view source
print?
01 stage.addEventListener(Event.ENTER_FRAME,updateDate);
02
03 function updateDate(e:Event):void{
04 var date = new Date();
05
06 if (date.hours< 10){
07 hours_t.text = "0" + date.hours;
08 }
09 else {
10 hours_t.text = date.hours;
11 }
12
13 if (date.minutes< 10){
14 minutes_t.text = "0" + date.minutes;
15 }
16 else {
17 minutes_t.text = date.minutes;
18 }
19
20 if (date.seconds< 10){
21 seconds_t.text = "0" + date.seconds;
22 }
23 else {
24 seconds_t.text = date.seconds;
25 }
26 }

We add an ENTER_FRAME event listener to the stage so that every time an ENTER_FRAME event occured the time will be updated.
In the updateTime function we instantiate a Date variable. We use the properties hours, minutes and seconds of the class Date to display the time. Note that we check for each if the number is inferior to 10 and if so we add a zero like in a digital clock.1. Create a new flash file (Actionscript 3.0) and save it at clock_24.fla .

2. Rename “layer 1&#8243; to “time”. Take the Text Tool and draw 3 dynamic text on the stage to display hours, minutes, seconds with respective instance names as : hours_t, minutes_t and seconds_t.
Create 2 static text to display colons ( that you insert between hours and minutes and between minutes and seconds. Align everything correctly.

3. To accomplish our “24 style” we need a special font. You can download one at www.dafont.com/fr/ds-digital.font. (Feel free to donate to the author.)
Install the font on your system.

4. Now set the property font of all the dynamic text to the font you’ve just installed and set their font size to something big like 150. Set the color to something near white : #F7F7F5.

5. To finish the 24 special effect we need to add a filter. Open the filters window and add some orangish glow.

Screenshot

6. So far we have created the appearance of the 24 clock. Now we need to add the actionscript code. To do so, create an “actions” layer and open the actions panel. Type the following code :
view source
print?
01 stage.addEventListener(Event.ENTER_FRAME,updateDate);
02
03 function updateDate(e:Event):void{
04 var date = new Date();
05
06 if (date.hours< 10){
07 hours_t.text = "0" + date.hours;
08 }
09 else {
10 hours_t.text = date.hours;
11 }
12
13 if (date.minutes< 10){
14 minutes_t.text = "0" + date.minutes;
15 }
16 else {
17 minutes_t.text = date.minutes;
18 }
19
20 if (date.seconds< 10){
21 seconds_t.text = "0" + date.seconds;
22 }
23 else {
24 seconds_t.text = date.seconds;
25 }
26 }

We add an ENTER_FRAME event listener to the stage so that every time an ENTER_FRAME event occured the time will be updated.
In the updateTime function we instantiate a Date variable. We use the properties hours, minutes and seconds of the class Date to display the time. Note that we check for each if the number is inferior to 10 and if so we add a zero like in a digital clock.

Thank you very much for excellent tips! I learned a lot!