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.