Recipe 10.5. Creating a Basic Interface to Control Timeline Playback

Problem

You want to create a button bar to give users control over movie playback.

Solution

Create the buttons or use premade buttons from the common library. Then use button event handler methods to call the stop( ), play( ), and gotoAndStop( ) methods as appropriate.

Discussion

You can create a set of buttons to give control over playback to the user. Whether your movie contains animation, video, or even a series of slide-like pages with a voice-over soundtrack, playback controls make it possible for users to stop and start the movie, fast-forward over parts they've seen before, or rewind to parts they want to see again.

Creating a set of playback controls involves two major steps: creating the buttons that will serve as the interface, and writing the code that will make the buttons functional.

For a basic set of controls, you will need at least three buttons (or movie clips that handle button events)one for stopping the playback, one for pausing the playback, and one for resuming the playback. Refer to Chapter 9 for more information about creating buttons or movie clips that act like buttons. Optionally, one fast way to put together an interface is to use one of several button sets available in the Common Libraries (Window Common Libraries Buttons).

After you've created the buttons, next create instances on the stage. Make sure to give them each instance names. The example code in this recipe uses the instance names btStop, btPause, and btPlay. If you use different instance names, make sure to adjust your code appropriately.

With the buttons (or movie clips) on the stage with instance names, the next step is to add the ActionScript code. There are a variety of ways you could write the code depending on the exact setup of your Flash file. However, the following code should work in the majority of scenarios. Just add the code to the appropriate keyframe of the timeline. For example, if you have placed the button instances on the first frame of the main timeline, you should create a new layer with a label of Actions, and then add the code to the first frame of that layer.

	// Declare a variable, and assign it a reference to the timeline you want
	// to affect. In this example the value of this is used. Assuming the code
	// is on the main timeline, this refers back to the main timeline. If you
	// want to affect a movie clip named mAnimation that is on the main
	// timeline, then change the this reference to mAnimation. The purpose of
	// the variable, mTimeline, is that it provides you with one central
	// location to define which timeline you want to affect.
	var mTimeline:MovieClip = this;

	// Define an onPress( ) event handler method for the stop button. When the
	// user clicks on the button tell the playhead to go to and stop on frame
	// 1.
	btStop.onPress = function():Void {
	  mTimeline.gotoAndStop(1);
	};

	// Define an onPress( ) event handler method for the pause button. When
	// the user clicks the button tell the playhead to stop at the current
	// frame.
	btPause.onPress = function():Void {
	  mTimeline.stop();
	};

	// Define an onPress( ) event handler method for the play button. When the
	// user clicks the button tell the playhead to start  
playing from the
	// current frame.
	btPlay.onPress = function():Void {
	  mTimeline.play();
	};

See Also

Recipe 9.2, Recipe 10.1, Recipe 10.4