Ticking the Needle This part involves action scripting.
We want to rotate the needle so it points to the current seconds. To
do this, we need to use the Date object. The Date object
is a built in Flash object. It has functions to retrieve the current
time, including minutes, hours, and seconds.
Insert a new layer, name it: Actions.
On the first frame of the Actions layer, enter the following code:
this.onEnterFrame =function()
{
var dateObject=new Date();
var seconds=dateObject.getSeconds();
secondsMC.gotoAndStop(seconds+1);
}
This code creates a new Date object, it then retrieves
the current seconds, using getSeconds(). Then, it tells the
secondsMC to jump to the frame number representing the current number
of seconds.
Test the movie. The needle should tick once per second, and
the position should match the clock on your machine. Note: If the clock on your
machine is incorrect, then the Flash clock will be incorrect, too. If
your machine battery is dead, then the clock on your machine will definitely
be incorrect.
Creating the Minute Needle These are just the same set of procedures
as earlier. Do Insert->New Symbol. Name it MinuteNeedleGraphic,
set the Behavior to Graphic.
Draw the needle. You can experiment and try making the
needle look nice later, but it's always easier to start with a plain line.
Make the line slightly shorter than the seconds needle. Make it thick
and use different color.
I made the needle 65 pixels tall, and I use 10
for the thickness. Again, this needle must be centered horizontally
(set X to 0). Set Y to -65 (the negative
value of the height) so that the end of the line falls on the origin the the
movie clip (the origin is the plus like sign). This is so that we can
rotate the needle easily using Motion Tween.
New, let's animate the needle.
Do Insert->New Symbol.
Name it MinuteNeedleMovieClip, set the Behavior to Movie
Clip.
You should be in the editing mode of the
MinuteNeedleMovieClip symbol. As before,
drag an instance of MinuteNeedleGraphic
onto the stage. Position it so that the origin of the needle is at the
center point of the movie clip (X: 0, Y: -65).
Create 60 frames of this needle, representing every different
position for every minute of the 60 minutes in an hour rotation.
To do that, select frame 61 then do Insert Keyframe.
A key frame should be inserted at frame 61. Now click on frame
46 and bring up the Frame Property dialog. Set Tween
to: Motion, and set Rotate to CW (clockwise).
You should also notice that the needle is pointing at 45 seconds
direction (west).
Putting the needle Go back to the main scene (Scene 1) and create a new layer below
the SecondNeedleLayer, name it: MinuteNeedleLayer.
Drag an instance of MinuteNeedleMovieClip onto the
stage onto the new layer (the MinuteNeedleLayer). Name the instance:
minutesMC. Position it so that the axis of rotation is centered
on the stage (X: 75, Y: 10). (You might want to lock the
SecondNeedleLayer so that you can select
the new needle easily.
Ticking the Needle As before, we use the Date object to retrieve the current
minute. Edit the code that we put on the frame 1 of the Actions
layer so that it looks like below (the newly added code is in bold):
this.onEnterFrame =function()
{
var dateObject=new Date();
var seconds=dateObject.getSeconds();
secondsMC.gotoAndStop(seconds+1);
var minutes=dateObject.getMinutes();
minutesMC.gotoAndStop(minutes+1);
}
This code retrieves the current minutes (using getMinutes()).
Then, it tells the minutesMC to jump to the frame number representing
the current minutes. Test the movie.
The new needle should point to the correct minute. Next,
we will create the "hours" needle.