Flex | Flash | Air | AS3
Create a “24 style” digital clock
May 23rd, 2009 in FlashSee how to build step by step a digital clock like in the 24 serie. This tutorial uses actionscript 3.
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.
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 :
stage.addEventListener(Event.ENTER_FRAME,updateDate);
function updateDate(e:Event):void{
var date = new Date();
if (date.hours< 10){
hours_t.text = "0" + date.hours;
}
else {
hours_t.text = date.hours;
}
if (date.minutes< 10){
minutes_t.text = "0" + date.minutes;
}
else {
minutes_t.text = date.minutes;
}
if (date.seconds< 10){
seconds_t.text = "0" + date.seconds;
}
else {
seconds_t.text = date.seconds;
}
}
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.
7. Test the movie to see it in action.
May 30th, 2009
Really cool stuff , THANKS…
May 31st, 2009
really very easy script. keep it up buddy…..
Jun 1st, 2009
Any way to turn this into a countdown timer? Great tut btw
Jun 10th, 2009
good ide
Jun 10th, 2009
Great Stuff!
Thanks.
Jun 11th, 2009
Perfect ! Thanks !
Jun 12th, 2009
thanks………very good
Jun 15th, 2009
it’s so nice i like this
Jul 8th, 2009
Excellent ….. i really appreciate
Jul 13th, 2009
Excellent !!
Jul 16th, 2009
Hello good sir.
Very nice tutorial, and I got it working for the most part. However, I can’t seem to get the movie to show the dynamic text properties correct. I have tried getting bold and italic on the text, and it looks fine in the .fla, but in the .swf the text properties are normal. Everything else works just fine, even if I change the font size it shows in the .swf. Any suggestions?
Jul 21st, 2009
[...] Read tutorial [...]
Aug 8th, 2009
Hi,
Its a very good tutorial, but i hv one question, if i want to make this digital clock standard to a particular time zone, so a person opening a web page from any time zone will be able to see the time of my time zone, so what changes should i make in my code to do that?
Please help me
Sep 5th, 2009
simple and effective, thanks
Oct 21st, 2009
hatur thank u
Nov 24th, 2009
wowww awesome tutor
Dec 6th, 2009
what program are u using???
Mar 7th, 2010
Hi,
i am new in cs4 flash programming. And upon seeing the above example I wanted to ask how to do my assignment. I wanted to make a flash wherein after every 30 minutes a certain led will light..please help me..thanks