INTRODUCTION:

Okay, this is my first tutorial, so you'll have to bear with me abit. Feedback would be good as
I'm kind of unsure what sort of level everyone is at with Actionscript. If you're a total newbie
to Flash then you want to check out 2!ast"'s beginners' guides which start #$%$.
As far as this tutorial goes, I'm going to sail a middle ground and assume you know a little
bit of Actionscript. &here's not much of it involved in this tutorial, but what there is will be
written in Actionscript 2. format seeing as that's the most recent release.
%ight, without further ado let's get on with it.
STAGE 1: 'etting up the stage(
First things first, you're going to need some kind of background to use for your clock. )ow
I'm not particularly great at !hotoshop so I've managed to come up with the background
below. If you're a dab hand at !hotoshop, then I'm sure you can come up with something
better. And if you're not ... well, you're more than welcome to use my one*
+. %ight, time to load up Flash and create a new Flash file the same si,e as your background.
If you're using the one above it will be 2+-p. . /2
2. 0reate 1 layers. And name them 2from the top3 4Actions4. 4'econds4, 45inutes4, 4#ours4
and 46ackground4
7. 0hoose File 8 Import 8 Import to 'tage and select the file that you'll be using for your
background. 0entre it nicely on the stage. At this point you should have something that looks
something like the following(
&he eagle9eyed amongst you will notice that I've put a little white colon in the middle of the
background graphic. :ou can do that either in !hotoshop or Flash 9 it will be used to separate
the hours from the minutes.
STAGE 2: &e.t 6o.es
+. For this tutorial we will be using ;ynamic &e.t bo.es as we want to be able to control
them through Actionscript. 'elect the &e.t button on the left hand side 2 3 and have a
look down at the properties bar underneath the stage. :ou should see a drop down menu
there. 0lick on it and ensure that 4;ynamic &e.t4 is selected. Once you've done that, you can
draw a te.t bo. on top of your background. :ou can make it whatever si,e you like 9 <ust
make sure that it's big enough to hold a couple of digits comfortably. In case you're
interested, mine was 1"p. . 1"p..
2. Once you've got a te.t bo. on your hour layer. 'elect it and then copy and paste it on to
your 4minutes4 layer and your 4seconds4 layer. :ou should now have three te.t bo.es on
separate layers. I reduced the si,e of the bo. on my seconds layer slightly, but the choice is
up to you. If you want to, then you'll need the resi,ing tool 9
7. )ow we need to give each te.t bo. a uni=ue name so that we can refer to each one
specifically in our Actionscript coding. Flash calls this uni=ue name an 4Instance )ame.4
'elect your first te.t bo. again 2the one on the hour layer3 and have a look at the properties
bar. >nder the drop down menu, there should be a little te.t bo. that may even have
??Instance )ame88 written in it. 0lick on it and write in the word 4hour4 like in the picture
below(
:ou have now given that te.t bo. the Instance )ame of 4hour.4 %epeat this process for each
of your other te.t bo.es calling them 4minutes4 and 4seconds4 respectively.
It's at this point that you might also want to choose what font you want displayed in your
te.t bo.es. &hat can also be done from the properties panel. If you have an @0; font
available then use that 9 if not then there are a few at ;aFont.
STAGE 3: &he Fancy 'tuff(
+. )ow we come onto the coding. 'elect the first frame on your 4actions4 timeline and then
open the 4Actions4 !anel which you should find <ust above the !roperties !anel. 0opy and
paste the following code(
this.onEnterFrame=fn!tion"#$
%ar no&:Date=ne& Date"#'
%ar hors:Nm(er=no&.)et*ors"#'
%ar mins:Nm(er=no&.)et+intes"#'
%ar se!s:Nm(er=no&.)etSe!on,s"#'
this.hor.te-t=hors'
this.mintes.te-t=mins'
this.se!on,s.te-t=se!s'
.
Ok ... let's go through this line at a time(
@ine + 9 &he on$nterFrame23 function means that the rest of the code will occur every time
that the Flash timeline enters this particular frame. &his is great for us, seeing as we'll want
the clock to be updated every second.
@ine 2 9 Ae're using the date23 function to store the current date 2and time*3 into a variable
called 4now4. It's worth mentioning that Actionscript 2. now re=uires you to tell you it what
type of data a specific variable will be holding. &he 4(;ate4 after the variable name, <ust tells
Flash that we'll be storing a date in it.
@ines 791 9 &hree new variables are created named 4hours4, 4minutes4 and 4secs4 2each of
which will hold a number3. &he current hour, minute or second is then stored in each of the
relevant variables.
@ines -9B 9 &he value of each of these three variables is then output to the relevant te.t bo.
that you created on the stage. &his is why each te.t bo. had to be given a uni=ue name and
you can now see those uni=ue names in this block of code.
STAGE /: &esting(
+. And that's pretty much it. !ress 0&%@ C ?$)&$%8 to compile your movie and watch it
run. #opefully you should see your clock ticking round.
)ow if you watch it for long enough, you might notice <ust one slight problem with it. @et's
say for e.ample that the time is +/.+ ... your Flash movie will display it as +/.+, which
doesn't look particularly great. 'imilarly, Flash won't put a ,ero before the first + seconds of
every minute. @et's try and correct this as it doesn't look very good.
2. 0opy and past the following code <ust underneath the line var
secs:Number=now.getSeconds();(
if"hors011#$
%ar hors:Strin)=2123hors'
.
if"mins011#$
%ar mins:Strin)=2123mins'
.
if"se!s011#$
%ar se!s:Strin)=2123se!s'
.
All we've done here is add 7 if23 statements. $ach time the clock is updated 2ie every
second3, Flash will check whether any of the the numbers that it's about to print on to the
screen is less than +. If any of them are, it will create a new variable 2which will now hold a
'tring3 and insert a 44 before the current number.
:our complete block of Actionscript should now look like this(
this.onEnterFrame=fn!tion"#$
%ar no&:Date=ne& Date"#'
%ar hors:Nm(er=no&.)et*ors"#'
%ar mins:Nm(er=no&.)et+intes"#'
%ar se!s:Nm(er=no&.)etSe!on,s"#'
if"hors011#$
%ar hors:Strin)=2123hors'
.
if"mins011#$
%ar mins:Strin)=2123mins'
.
if"se!s011#$
%ar se!s:Strin)=2123se!s'
.
this.hor.te-t=hors'
this.mintes.te-t=mins'
this.se!on,s.te-t=se!s'
.
&ry pressing 0&%@ C ?$)&$%8 again ... that should have fi.ed the problem*