Create an Attractive Digital Clock in Flash
ActionScript 3.0 is a very powerful language, capable of creating anything from simple and light utilities to full-featured desktop applications.
In this tut, we’re going to create something simple, a basic and good looking digital clock in Flash.
Step 1: Brief Overview
Using the Date object and its properties, we’ll get the day, hours, minutes and seconds and use TextFields on stage to display the obtained data. The updates will be handled by a Timer.
Step 2: Starting
Open Flash and create a new Flash File (ActionScript 3).
Set the stage size to 600×300 and add a blue to black radial background (#003030, #000000).
Step 3: Glowing Text
We’re going to add two Dynamic Textfields for every element, we’ll place the ones with the glow first to get the lines effect.
Select the Text Tool and create a 342×104px textfield, use the color #00FAFF, click the Center option in the Paragraph panel and choose a font you like. I used DS-Digital italic, 100pt.
Name it "clockGlow", add some numbers, center it to use it as a guide and add a Glow Filter with the following values:
You should have something like this:
Repeat the process with a smaller font size for the days and the am/pm indicator. The instance names are the name of the day plus the "Glow" word, this will be "monGlow", "tueGlow" and so on, "ampmGlow" for the AM/PM indicator.
Step 4: Lines Screen
We’ll draw a series of lines that will cover the stage to get the LCD screen effect.
Select the Rectangle Tool and create a 600×1px black line, duplicate it (Cmd+D) and place it below leaving a 1px space.
Repeat the process until it matches the stage height. You will end with something like this:
Convert the lines screen to a group (Cmd+G) and center it in the stage.
Step 5: Sharp Text
As you can see in the last image, the line effect is all over the text. We only want it to apply to the glow, so let’s add a new layer of text.
As this text is exactly the same we created before (without the Glow Filter) we can just copy the textfields and remove the Glow Filter. We’ll also remove the "Glow" word from the instance names.
This will complete the interface.
Step 6: ActionScript Time
Create a new ActionScript Document and save it as "Main.as".
Step 7: Required Classes
This time we’ll need just a few classes.
package
{
import flash.display.MovieClip;
import flash.utils.Timer;
import flash.events.TimerEvent;
Step 8: Extending the Class
We’re going to use MovieClip specific methods and properties so we extend using the MovieClip Class. Extending using the Sprite Class won’t work.
public class Main extends MovieClip
{
Step 9: Variables
These are the variables we will use, explained in the comments.
/* A Date object used to get the day, and time */ var date:Date = new Date(); var day:int = date.day; //The day /* The time */ var hours:int = date.hours; var minutes:* = date.minutes; var seconds:* = date.seconds; /* A Timer object that will handle the updates, executed every second */ var timer:Timer = new Timer(1000);
Step 10: Main Function
This function is executed when the class is loaded.
public function Main():void
{
/* Prevents lag, since the timer is not executed until 1 second after starting the movie */
updateClock();
/* Hides all days text, these functions are explained later */
hideObjects(mon, monGlow, tue, tueGlow, wed, wedGlow, thu, thuGlow, fri, friGlow, sat, satGlow, sun, sunGlow);
/* Unhides the current day */
showCurrentDay();
/* Starts the timer */
timer.addEventListener(TimerEvent.TIMER, startClock);
timer.start();
}
Step 11: Clock Function
This is the function that handles the Clock. It is called once in the main function, then every second in the startClock function.
private function updateClock():void
{
/* AM PM, if hours is greater than 11, that is 12 and 12 is PM */
if (hours>11)
{
ampm.text="PM";
ampmGlow.text="PM";
}
else
{
ampm.text="AM";
ampmGlow.text="AM";
}
/* Avoids 24 hour clock, if hours is greater than 12 (like 13) substracts 12 (so it is 1) */
if (hours>12)
{
hours-=12;
}
/* If number is just one digit, add a 0 to the left */
if (String(minutes).length<2)
{
minutes="0"+minutes;
}
if (String(seconds).length<2)
{
seconds="0"+seconds;
}
/* Set TextFields */
clock.text=hours+":"+minutes+":"+seconds;
clockGlow.text=hours+":"+minutes+":"+seconds;
}
Step 12: Hide Function
This is a function to make objects invisible, we use the …rest parameter to pass any number of parameters.
private function hideObjects(...targets)
{
for (var i:int = 0; i < targets.length; i++)
{
targets[i].visible=false;
}
}
Step 13: Current Day
This Switch statement will check the day variable to get the day and unhide it.
private function showCurrentDay():void
{
switch (day)
{
case 0 :
sun.visible=true;
sunGlow.visible=true;
break;
case 1 :
mon.visible=true;
monGlow.visible=true;
break;
case 2 :
tue.visible=true;
tueGlow.visible=true;
break;
case 3 :
wed.visible=true;
wedGlow.visible=true;
break;
case 4 :
thu.visible=true;
thuGlow.visible=true;
break;
case 5 :
fri.visible=true;
friGlow.visible=true;
break;
case 6 :
sat.visible=true;
satGlow.visible=true;
break;
default :
trace("Week day error");
}
}
Step 14: The Start Function
This function updates the Date object to get the actual date and calls the updateClock function to update the textfields.
private function startClock(e:TimerEvent):void
{
date = new Date();
hours=date.hours;
minutes=date.minutes;
seconds=date.seconds;
updateClock();
}
Step 15: Document Class
Go back to the .Fla file and in the Properties Panel add "Main" in the Class field to make this the Document Class.
Conclusion
As you can see, it’s pretty easy to create and modify this Digital Clock. Experiment with the Date Class, change the interface and maybe add more functionality!
Thanks for reading.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Carlos Yanez
Related Posts
Magma design - More
Active Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Cool, I really like design, something similiar to iPhone Clock
Thanks!
Really a great tutorial…
Thanks a lot dude and congratulations.
nice tut…. !!
Simple but effective. Great tut Carlos.
Super cool. But you should align the clock text to the right because when a 1 number appears, all the text is going with it, which ruins the digital effect. Anyway, very cool !
i agree with this,
I’m with Bratu, digital clocks are pretty easy in Flash but the problem is that nobody ever uses a mono-spaced digital font or spaces it to give the same effect. It removes from the realism…anyone know a good mono-spaced digital/LED font?
Very nice! Thanks!
This is probably a dumb question, I’m new to flash, but why not use setTimeout() instead of a timer for updating the clock?
I think because Timer class is more easy to use – you don’t need to worry about saving interval reference to clear it later. You just use timerObj.start() and timerObj.stop(). Also Timer object dispatches events instead of simply calling a function. Hope this makes some sense
Like this tutorial, easy to follow. Would be cool to teach people how to use the graphics from inside an external swf or something along those lines.
Cool, gonna try this soon
OMG legit tutorial. Good work my friend, good work!
Its really a greate help for me
Thank you very much
can this be use as an icon for iphone?,as a live clock a tweak from cydia
WOW! Awesome. It could be used in several ways. In a futuristic look website, it’d be great!
Thanks a lot!
luved the …rest reference!
You could make this clock better if you made it so when the numbers changed the clock doesnt move to the left. if the last number changes from a 5 to a 1 the five takes up more room than the one so when it changes it will move to the left.
i think it would look better if it stayed in place.
Make this tuts better!
Open source in Flash
1. Modify->Timeline->Distribute to Layers.
2. Lock All Layers, unlock layer clockGlow, select textfield, in properties paragraph format -> select Justify.
3. unlock all layers, select clock and retry 2.
- Clock more like on real indicator.
I got this error in the AS:
1084: Syntax error: expecting rightbrace before end of program.
Well, you need to close the class definition and the package as well by 2 right-braces } } .
This is definitely a good tutorial. Good job ^^
its cool
Cool, but there is a alignment problem in your clock.
I have seen one of these before, except the glow was orange and the day of week and AM PM functions weren’t there
I have seen one of these before, but there wasn’t the AM PM and the day of week
duh…!
tried to alter this for Flash CS3, without days (removing references to day variables in code), code syntax is fine but testing movie gives me cc or type errors in the first few lines… don’t know where to go from here, is it necessary to use the days? Am total noob to Flash, sorry.. Is their a local testing environment necessary to test AS3 script?
is there a way to have the 0 appear in front of the hour… if it is a single digit?
try this:
# if (String(hours).length<2)
# {
# hours="0"+hours;
# }
havent tried to see if it works though.
Very very nice
You are a good Flash Developer
Great tut Carlos.
Very good tutorial! I´ll use it, FOR SURE!
Thank you, Bye.
Good tutorial, i did not tried the tutorial but, i think the code might work according to my knowledge in this field, in the adobe flash program i mean.
I like mostly the use of colors, but the layout or structure of the objects are also a plus, which makes this tutorial a real plus, so thanks for the digital clock, for the idea, for the design, layout, and the work it took to make it, i am going to try this out, i create many flash clocks per week, so i do not mind getting some new ideas once and a while.
Great Tuto i like it it works beter and its fantastic thanks alot Mr Carlos Yanez
we hope to hear from you a lot of usefull tutos be happy bro
The interesting thing is that I tried this, typed it as is in flash and got errors.
I thought i mistyped somewhere so I checked it over and over, going character by character and all was fine but still got errors. Then I copied the original .AS file into mine (against which I checked if I miss spelled) and it worked. Can’t figure out what was the problem.
Hi..Everybody…
I am a newbie in ActionScript.. so..
Could you Please, anybody help me to bring-out into ActionScript tutes.
Here by attach the my mail id : srinufx@gmail.com.
Give me Helping Hand in my Career..
Thanks @ advance.
Hi srinufx, you better visit the following websites to learn actionscript, and here is one tip from a guy that once was on your position, do not try to learn everything in one day, give it time for your mind to assimilate, organize yourself, practise a lot, i mean do it all the time, write down the code yourself even when you want to copy a snipet of actionscript code into a flash project, and do not miss loosen up yourself at weekends, go out with friends or do something else, but do not get too much loosen up, you want to remember what you learned.
Actionscript websites, the best:
http://actionscript.org
http://flashkit.com
Flashkit.com has a great flash movies resource, with swf and fla files, download the ones that look like the think you want to create in flash, then download to open in flash to study and learn from the actionscript used on those flash movies.
Read ebooks in english language only, about actionscript and flash itself at:
http://pdfchm.com
in the above site, register a free account, then search for flash ebooks, every ebook i awesome and free, you can download 2 ebooks per day, that is enough considering the quality of the ebooks.
Cool clock, I just did the tutorial. Works great!
But the font sucks, because the “1″ is narrower than the other diggits. That makes the display jumping when a 1 appears/disappers.
anyone know why my published swf font isnt italicised when i run it? it is in the fla file but the swf file it is not. HELP??
I’m using CS3 and I need to add 1 line to step 7:
import flash.text.TextField;
Anyway, great tutorial. Thanks.
I’m getting lots of errors in the actionscript.
Is there anyway to just copy and paste this in so the errors do not come up?
Nevermind, some how I missed that giant Source Button… Perhaps more sleep is needed…
It’s very cool.
It’s really like a digital clock.
I am going to make a similar digital flash clock as yours here, i never used that color nor that glow filter which is the main attraction in my opinion, of course the ds-digital font is great but for it to work visually smoothly, i think i should aligh the text at left, i think you have it aligned at center, that is why i suppose the change/ship of numbers make the clock move, so in that matter i advice you to update the digital flash clock, if you want of course.
I get these errors:
1046: description Type was not found or was not a compile-time constant: TextField. source package{
this error is in every line including import statements.
Please help me out someone!
Check the actionscript source code you entered again, that seems like an error on the source code somewhere, however i am not sure, if you downloaded the as file, unless you tried to insert it manually yourself.
Does this clock can be used as screensavers
with what programs can do the lesson and where can I download
hi carlos,
loved the clock. but i had a little trouble. i need a background to match my site and a different font and the clock just wont work now. i made the background cement #dedcd5 and chose the helvetica font and errors are everywhere. any ideas buddy?
btw, i’m not experienced at all with flash but i know i only made those changes.
Hi!
I have a seriously problem. I made this tutorial and everything works very well, but I try integrate this clock in another project. The question is: Why I can’t import the .as file to .fla without be like the step 14? The way I need to import .as files is in the actions panel with this code ” import package.*; ” (import all as files in the package)