< Day Day Up >
Controlling the Playback Speed and Direction of a Timeline
Normally, a movie's timeline plays in a forward direction at a pace dictated by the fps
(frames per second) setting in the Movie Properties dialog box. However, you can control
the direction in which the timeline moves as well as its speed by using ActionScript. In
fact, by combining scripting elements (which control direction) with the onEnterFrame
event, you can gain incredible control over the project's timeline.
The first two scripting elements we'll discuss are the nextFrame() and prevFrame()
methods of the MovieClip class. You use these methods to move a timeline to the next or
previous frame by employing the following syntax:
myButton_btn.onRelease = function(){
myMovieClip_mc.nextFrame();
}
or
myButton_btn.onRelease = function(){
myMovieClip_mc.prevFrame();
}
By assigning these event handlers to buttons, you can create navigation controls that
automatically advance or rewind a timeline one frame at a time with each click of the
button.
Even more powerful is a timeline's _currentframe property (a read-only property): its
value represents the frame number at which the playhead currently resides. For example,
if the main movie is being played, the following script places the numerical value of the
playhead's current frame position into a variable named whereAreWe:
var whereAreWe:Number = _root._currentframe;
You can also use this property in conjunction with a conditional statement to determine
when the playhead is within a specific range of frames and make it act accordingly:
_root.onEnterFrame = function() {
if(this._currentframe >= 50 && _this.currentframe <= 100)
// Perform these actions
}
}
In this script, the actions within the conditional statement are executed only when the
playhead on the main timeline is between Frames 50 and 100.
Using the _currentframe property in conjunction with a gotoAndPlay() action allows you
to control the direction as well as the pace in which the timeline moves. In the following
example, the playhead on the main timeline advances 10 frames from its current position:
_root.gotoAndPlay (_currentframe +10);
In the same way, you can use the following script to make the timeline move backward
10 frames:
_root.gotoAndPlay (_currentframe -10);
As the following exercise demonstrates, by using the onEnterFrame event to execute a
line of script such as the one above, you can create fast forward and rewind buttons to
control a timeline's playback.
1. Open makeMyDay3.fla.
We'll continue to build on the project from the preceding exercise; most of the
work for this exercise focuses on the Messages section of the application. In this
area are four buttons named play_btn, stop_btn, ff_btn, and rew_btn, and a
graphically empty movie clip named messages_mc. The four buttons eventually
will be scripted to control the messages_mc timeline. Let's take a closer look at
that timeline.
2. Double-click the messages_mc movie clip instance to edit it in place.
This movie clip's timeline contains two layers, Sound Clips and Actions. Frame 1
of the Actions layer contains a stop() action to prevent the timeline from moving
forward until we instruct it to do so. The Sound Clips layer has a series of
streaming sound clips that stretches across 700 frames. (Dragging the playhead
plays the various clips.) In this exercise, we'll set up the buttons on the main
timeline that the user can employ to navigate this timeline forward and backward.
3. Return to the main timeline. With the Actions panel open, select Frame 1 of the
Actions layer and add the following script at the end of the current script:
4.
5. var fastSound:Sound = new Sound(messages_mc);
6.
7. function handleMessages(action:String){
8.
9. }
10.
The first line of the script creates a Sound object named fastSound. This Sound
object eventually will be scripted to play a fast-forwarding sound when the
messages_mc timeline is fast-forwarded or rewound.
The remaining lines of the script are the beginnings of the handleMessages()
function. This function accepts a single parameter named action, which contains a
string value of "play", "stop", "ff", or "rew". This parameter value tells the
function whether it should play, stop, fast-forward, or rewind the messages_mc
timeline. As we'll describe shortly, this function will be called and passed various
parameter values when you interact with one of the playback control buttons.
4. Insert the following conditional statement within the handleMessage() function
definition:
5.
6. if(action == "play"){
7.
8. fastSound.stop()
9.
10. delete messages_mc.onEnterFrame;
11.
12. messages_mc.play();
13.
14. }else if(action == "stop"){
15.
16. fastSound.stop();
17.
18. delete messages_mc.onEnterFrame;
19.
20. messages_mc.stop();
21.
22. }else{
23.
24. fastSound.attachSound("rewind");
25.
26. fastSound.start(0, 50);
27.
28. if(action == "ff"){
29.
30. messages_mc.onEnterFrame = function(){
31.
32. this.gotoAndStop(this._currentframe + 3);
33.
34. }
35.
36. }else{
37.
38. messages_mc.onEnterFrame = function(){
39.
40. this.gotoAndStop (this._currentframe - 10);
41.
42. }
43.
44. }
45.
46. }
47.