Recipe 10.7. Creating Seek Buttons

Problem

You want the timeline to fast-forward or rewind visually as long as the user holds down a button.

Solution

Use the gotoAndStop( ) method in conjunction with the _currentframe property to skip back or forward in the timeline. Add the gotoAndStop( ) method within an onEnterFrame( ) event handler method, so that it gets called repeatedly at the frame rate of the movie. Use button event handler methods to define and remove the onEnterFrame( ) method based on the state of the button.

Discussion

In Recipe 10.6, you learned how to play a movie clip's timeline in reverse. Using very similar principals, you can add functionality to your Flash movie that causes a timeline to visually rewind or fast forward. There are several elements involved. First, you need to create buttons to trigger the rewind and fast-forward functionality. Then, you need to apply onPress( ) and onRelease( ) event handler methods to the buttons. Within the onPress( ) event handler methods, define an onEnterFrame( ) event handler method for the movie clip you want to affect. The onRelease( ) event handler method should remove the onEnterFrame( ) definition. That may sound like a lot of information, so here's an example.

Imagine that you have a button on the main timeline with an instance name (exp 3pod.com) btRewind. Also on the main timeline is a movie clip with an instance name (exp 3pod.com) of mAnimation. When the user clicks on the btRewind button, you want the timeline of mAnimation to play in reverse rapidly. Then, when the user releases the button, you want the mAnimation timeline to stop. You can accomplish this task with code that is actually quite similar to some of the code from Recipe 10.6.

	// As with the code in Recipe #"Playing the Timeline Backwards," this
	// example uses a variable to create a reference to the timeline you want to
	// affect. Assuming that you place this code on the main timeline, then the
	// value of this will refer to the main timeline. If you want to affect
	// another timeline, change the value from this to the instance name (exp 3pod.com).
	var mTimeline:MovieClip = this;

	// Define an onPress( ) event handler method that gets called when the
	// user clicks on the button.
	btRewind.onPress = function():Void {

	  // Define an onEnterFrame( ) event handler method to repeatedly call the
	  // code that moves the playhead within the timeline.
	  mTimeline.onEnterFrame = function():Void {

	    // Declare a variable to determine how many frames you want the
	    // playhead to move back with each iteration. The greater the value,
	    // the faster the rewind will appear.
	    var nFrames:Number = 5;

	    // Check to see if the frame to which you are sending the playhead is
	    // a valid frame, and then move it.
	    if(this._currentframenFrames < 1) {
	      this.gotoAndStop(1);
	    }
	    else {
	      this.gotoAndStop(this._currentframenFrames);
	    }
	  };
	};

	// Define an onRelease event handler method that gets called when the user
	// releases the click on the button.
	 
btRewind.onRelease = function():Void {

	  // Use the delete operator to remove the definition for the
	  // onEnterFrame( ) event handler method. That causes Flash to stop
	  // calling the onEnterFrame( ) code.
	  delete mTimeline.onEnterFrame;
	};

	// Assign the same definition from the onRelease( ) event handler method
	// to the onReleaseOutside( ) event handler method. That way, if the user
	// clicks on the button, drags the mouse off the button, and releases the
	// button, the rewind will stop. Otherwise, the  
rewinding would keep
	// going.
	btRewind.onReleaseOutside = btRewind.onRelease;

Likewise, you can create a button to cause a movie clip's timeline to fast-forward. The code is practically identical to the preceding example, but instead of subtracting from the _currentframe value to determine the frame to which you want the playhead to move, you should add to it.

It's typically preferable to use an interval function rather than an onEnterFrame( ) event handler method in order to perform actions repeatedly. However, in this recipe and the previous one, the onEnterFrame( ) event handler method is actually a good choice. That is because the onEnterFrame( ) event handler method gets called at the frame rate. So by placing the prevFrame( ) method within an onEnterFrame( ) method, the playhead moves backward at the same rate that it would normally play forward. However, the faster you want the timeline to rewind, the choppier the animation can appear if you use the onEnterFrame( ) technique. If that problem occurs, you can consider using an interval function.

Define a function that accepts a single parameter that determines how many frames the playhead should move. And within the function, call the gotoAndStop( ) method to move the playhead accordingly. Then make sure to call the updateAfterEvent( ) function so the stage refreshes. For example, the following function will move the playhead of the timeline within a movie clip named mAnimation:

	function movePlayhead(nFrames:Number):Void {
	  mAnimation.gotoAndStop(mAnimation._currentframe + nFrames);
	  updateAfterEvent();
	}

Then you need to use setInterval( ) to have Flash call the function at a particular frequency. Because you'll likely want the interval to start only when the user presses a button, you should place the setInterval( ) function call instead of an onPress( ) event handler method. When you call setInterval( ), remember to assign the return value to a variable. That way you'll be able to clear the interval later. Also, pass three parameters to setInterval( )the reference to the function, the interval in milliseconds, and either a 1 (for fast-forwarding) or a1 (for rewinding). The interval should probably be 50 or less. The exact value depends on the frame rate of the movie (as rewinding and fast-forwarding should be relatively faster than normal playback) as well as your own preferences. The smaller the interval in milliseconds, the faster the animation.

	// Declare a variable outside the onPress( ) event handler method.

That way, even though you assign a value to it from within the event handler method, you can still reference it elsewhere.

	var nInterval:Number;

	// Define an onPress( ) event handler method for the button.
	 
btRewind.onPress = function():Void {

	  // Call setInterval( ), passing it the reference to the function you
	  // want it to call, the interval in milliseconds, and either a 1 or -1
	  // depending on the direction in which you want the timeline to play.
	  nInterval = setInterval(movePlayhead, 50, -1);
	};

	// Define an onRelease( ) event handler method for the button such that
	// the interval is cleared when the user releases the button.
	btRewind.onRelease = function():Void {
	  clearInterval(nInterval);
	};

	// Assign the same definition from onRelease( ) to the onReleaseOutside( )
	// event handler method. That way the  
rewinding will stop even if the user
	// drags the mouse off the button before releasing it.
	btRewind.onReleaseOutside = btRewind.onRelease;

The following example will generally work for most scenarios. You can place the code on a keyframe in which the buttons and the movie clip timeline you want to control exist. The code assumes that you have buttons with instance names of btRewind, btFastForward, btPlay, btStop, and btPause. If you use different button instance names, change the code accordingly.

	// Declare a variable to hold the reference to the movie clip whose
	// timeline you want to affect. Storing the movie clip reference in a
	// variable in this way makes it very simple for you to modify this code
	// to work with any timeline, as you need to change only a single
	// reference. The example uses the this keyword to reference the timeline
	// in which this code is placed. But you can change that value to target
	// any valid movie clip.
	var mTimeline:MovieClip = this;

	// Declare a variable to store the interval identifier. That way you can
	// clear the interval to stop the  
rewinding or fast-forwarding.
	var nInterval:Number;

	// Declare and define a variable to store the rate at which the
	// function should be called. The smaller the value, the faster the rewind
	// and fast-forward will appear.
	var nRate:Number = 50;
	// Define the onPress( ) event handler method to cause the timeline to
	// stop playback.
	btStop.onPress = function():Void {
	  mTimeline.gotoAndStop(1);
	};

	// Define the onPress( ) event handler method to cause the timeline to
	// pause playback.
	btPause.onPress = function():Void {
	  mTimeline.stop();
	};

	// Define the onPress( ) event handler method to cause the timeline to
	// resume playback.
	btPlay.onPress = function():Void {
	  mTimeline.play();
	};

	// Define the onPress( ) event handler method to cause the timeline to
	//  
rewind. Use setInterval( ) to tell Flash to call the movePlayhead( )
	// function (defined later in the code) at the rate defined earlier,
	// moving the playhead of the timeline back one frame at a time.
	btRewind.onPress = function():Void {
	  nInterval = setInterval(movePlayhead, nRate, -1);
	};

	// Define the onRelease( ) event handler method so that the interval is
	// cleared (and hence the  
rewinding stops) when the user releases the
	// button.
	btRewind.onRelease = function():Void {
	  clearInterval(nInterval);
	};

	// Make sure that the onReleaseOutside( ) has the same definition as	
	// onRelease( ).
	btRewind.onReleaseOutside = btRewind.onRelease;

	// Define the onPress( ) event handler method to cause the timeline to
	//  
fast-forward. Use setInterval( ) to tell Flash to call the
	// movePlayhead( ) function at the rate defined earlier, moving the
	// playhead of the timeline forward one frame at a time.
	 
btFastForward.onPress = function():Void {
	  nInterval = setInterval(movePlayhead, nRate, 1);
	};

	// Define the onRelease( ) event handler method so that the interval is
	// cleared (and hence the fast-forwarding stops) when the user releases the
	// button.
	btFastForward.onRelease = function():Void {
	  clearInterval(nInterval);
	};

	// Make sure the onReleaseOutside( ) has the same definition as
	// onRelease( ).
	btFastForward.onReleaseOutside = btFastForward.onRelease;

	// Define the function that gets called on the interval.
	function movePlayhead(nFrames:Number):Void {
	  mTimeline.gotoAndStop(mTimeline._currentframe + nFrames);
	  updateAfterEvent();
	}

See Also

Recipe 10.4, Recipe 10.6