CREATING FLASH ANALOG CLOCK - PART 2

 

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 KeyframeA 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.

<<PREVIOUS PAGE>>
<<
NEXT PAGE>>
<<INDEX>>

(C) F. Permadi

Terms of Use