COMMUNICATING WITH JAVASCRIPT: ANALOG  WATCH


One of the more wonderful Flash capability is its ability to communicate with JavaScript.  This example is intended to shows how JavaScript can tell a Flash MovieClip to "jump" to a certain frame.   This document applies to Flash 4, and JavaScript must be enabled to run the example below.  To understand this tutorial, familiarity with JavaScript is assumed.

As an example, an analog clock movie:

 

How Does It Work?
This particular example uses JavaScript to move the clock "needles" on every second.  There are 3 needles: one for second, one for minutes, and another one for hour.  Each needle is a MovieClip instance which contains 61 frames of tweened animation, such as this:

A Graphic symbol is used for the needle like this (make sure the center of rotation is at the center of the axis):

:

Then, a new MovieClip is used to create the animation for the needle rotation.  On the 1st and the last frame of this movie clip, the needle is placed (they must be on the exact same position, so use Paste-in-place), and the axis of rotation must be at the center, like shown below.  

The picture below shows the onion skin of the 61 frames, showing  each needle position.  The red needle shows the position of the needle on the first and last frame.  The in-between frames (green) are created automatically with Motion Tweening. 

As can be seen, the animation is just a simple "rotation" of a straight line.  61 frames are used to complete a full rotation (the last frame is a duplicate of the first frame).  This works well because there are 60 ticks on one minute; and there're 60 ticks on one hour.  

On the JavaScript side, the pseudo code is like this:

  • set up a loop to execute every 1 second (or less) - use "setTimeout()" function

  • use JavaScript to get the current time (JavaScript always will get the time from user's machine, not the server machine)

  • communicate with the Flash movie to set the appropriate frame number for each needle

By doing the above, the JavaScript code will call itself every second, and then simply tell Flash to move the Movie Clip for each needle to the appropriate frame number.  So, for example, if the current time is 10:30:24; then the JavaScript code will:

  • "tell" the Second needle to move to frame 24

  • "tell" the Minute needle to move to frame 30

  • "tell" the Hour needle to move to frame 10*5+(30/12).  This  basically means (hours*5) + (minute/12); because there're 5 ticks between hours.  The hour needle need to move one tick on every 12 minutes.  

You might be wondering about how to "tell" a movie clip to do something.  Well, to "tell" a MovieClip to go to a certain frame from JavaScript, use:
TGotoFrame(movieClipName, frameNumberToGoTo)

TGotoFrame is a Flash method specifically provided to enable JavaScript to communicate with a Flash movie.  For more information, see this tutorial.


<<BACK>>
F. Permadi
May 2000

(C) 2000 F. Permadi