Macromedia Flash Mx 1002004 Actionscript Training From The Source [Electronic resources] نسخه متنی

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.

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.

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.

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:

var fastSound:Sound = new Sound(messages_mc);
function handleMessages(action:String){
}

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.

Insert the following conditional statement within the handleMessage() function definition:

if(action == "play"){
fastSound.stop()
delete messages_mc.onEnterFrame;
messages_mc.play();
}else if(action == "stop"){
fastSound.stop();
delete messages_mc.onEnterFrame;
messages_mc.stop();
}else{
fastSound.attachSound("rewind");
fastSound.start(0, 50);
if(action == "ff"){
messages_mc.onEnterFrame = function(){
this.gotoAndStop(this._currentframe + 3);
}
}else{
messages_mc.onEnterFrame = function(){
this.gotoAndStop (this._currentframe - 10);
}
}
}

Before we discuss how the first part of the conditional statement works, you should be aware of two events that occur later in the statement when the function is passed a value of "ff" or "rew". In either of those circumstances, a fast-forwarding sound is attached to the fastSound Sound object and played, and the functionality for carrying out either the fast-forwarding or rewinding of the messages_mc timeline is accomplished via an onEnterFrame that gets attached to the messages_mc instance. With that in mind, let's look at the conditional statement one section at a time.

If the handleMessages() function is passed a value of "play", the first part of this conditional statement is executed. It uses the stop() method of the Sound class to tell the fastSound Sound object to quit playing, deletes the onEnterFrame event handler from the messages_mc movie clip instance (to prevent that timeline from continuing to fast-forward or rewind), and tells the messages_mc instance to play().

If the function is passed a value of "stop", the second part of the conditional statement is executed. This part of the statement does almost the same thing as the first, except that the stop() command stops the messages_mc timeline from playing.

If the handleMessages() function is not passed either a value of "play" or "stop", the last part of the conditional statement (else) is executed. If this part of the statement is executed, the function has been passed a value of "ff" or "rew". This part of the conditional statement has a nested if/else statement. Because the task of fast-forwarding and rewinding have both common and unique functionalities, this structure allows us to handle this circumstance in the most efficient manner. Here's how.

Whenever the messages_mc timeline is either fast-forwarded or rewound as a result of this function's being passed a value of "ff" or "rew", the application should attach the sound named rewind in the library to the fastSound Sound object and then play it. The first two lines of script within the else part of the statement handle this common functionality in either case. Following that, the value of action is further evaluated. If action has a value of "ff", an onEnterFrame event handler is attached to the messages_mc instance. This event handler advances the messages_mc timeline to its current frame, plus 3. Because the onEnterFrame event executes this script 24 times a second, the movie's timeline moves forward rapidly. If action has a value of "rew", the actions in the nested else statement are executed. This is much like the script we just discussed, except that it moves the messages_mc timeline backward 10 frames with every onEnterFrame event, moving the timeline in reverse very rapidly.

To reiterate a point made earlier, fast-forwarding or rewinding continue until the onEnterFrame event is deleted from the messages_mc instance. This occurs when the handleMessages() function is passed a value of "play" or "stop".

The handleMessages() function is complete. The only thing left to do is to set up our button instances to call this function and pass it the appropriate values.

Add the following script at the end of the current script:

play_btn.onRelease = function(){
handleMessages("play");
}
stop_btn.onRelease = function(){
handleMessages("stop");
}
ff_btn.onPress = function(){
handleMessages("ff");
}
ff_btn.onRelease = function(){
handleMessages("play");
}
rew_btn.onPress = function(){
handleMessages("rew");
}
rew_btn.onRelease = function(){
handleMessages("play");
}

These lines of script assign event handlers to the various playback control buttons. How this works should be obvious to you by now. The only thing to be aware of is that both the ff_btn and rew_btn instances have an onPress and an onRelease event assigned. This allows those buttons to fast-forward or rewind when pressed, but to automatically initiate normal playback when released.

It's time to test the final result.

Choose Control > Test Movie to view the project to this point.

When the movie appears, use the various buttons to control the playback of the messages_mc movie clip instance. Clicking the FF button moves that timeline forward quickly; clicking the Rew button moves it backward quickly (as is evident from the points where the various sound clips in the instance are heard).

Close the test movie and save the project as makeMyDay4.fla.

Playback control buttons such as the ones we set up here have a wide range of usesnot just for streaming sounds (as demonstrated) but for any kind of project whose timeline contains hundreds of frames of content. By making use of these buttons, you enable users to control the way they view your projectsa powerful capability.