CREATING FLASH ANALOG CLOCK - PART 3


Creating the Hour Needle
These are just the same set of procedures as earlier.  Do Insert->New Symbol.  Name it HourNeedleGraphic.

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 about 60% of the radius of the clock.  Make the line thick and use different color so that it looks different than the other needles.

I made the needle 40 pixels, and used 10 for the thickness.   Center the line and make sure the endpoint is at the center of the movie (X: 0, Y: -40).

Now let's animate this needle.

Do Insert->New Symbol.  Name it HourNeedleMovieClip.  You should be in the editing mode of the HourNeedleMovieClip symbol.  As before, drag an instance of HourNeedleGraphic onto the stage. Position it so that the origin of the line is at the center point of the movie clip. 

Create 60 frames of this needle, representing every different position for every minute of the 60 minutes in an hour rotation.  Select frame 61 and 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 9 o'clock direction (west).

Putting the Needle
Go back to the main scene (Scene 1) and create a new layer below the MinuteNeedleLayer, name it: HourNeedleLayer. 

Hide the SecondNeedleLayer and MinuteNeedleLayer so we can place the new needle easily. 

Drag an instance of MinuteNeedleMovieClip onto the stage onto the new layer (the HourNeedleLayer).  Name the instance: hoursMC.  Position it so that the axis of rotation is centered on the stage. 

Unhide all the layers.

Ticking the Needle
As before, we use the Date object to retrieve the current hour.  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);

  var hours=dateObject.getHours();
  var hoursPosition=(hours%12)*5+Math.round(minutes/60*5);
  hoursMC.gotoAndStop(hoursPosition);
}

The getHours() function returns 24 hours time format - ie: military time format.  In this format hours range from 0 to 23.  For example, 1 pm is equal to hour 13:00, 2 pm is equal to hour 14:00, and so on.  We need to wrap the value around to handle the am/pm hour value (hours%12).  We then multiply the hour by 5 because there're 5 ticks per hour.  The (minutes/12) select the correct minute ticks (for example, if it's 9:30, the hour needle should not point approximately halfway of 9 o'clock and 10 o'clock position). 

As before, the last line tells the hoursMC to jump to the frame number representing the current hour. 

Test the movie.  The clock should show the correct hour, minutes, and seconds now. 

Next, we'll upgrade the look of the clock.


F. Permadi
(C) F. Permadi

Terms of Use