[kml_flashembed movie="http://www.theorigin.net/tutorialFiles/ScrubTimeline/scrub.swf" height="400" width="550" /]

The ability to control the position on a MovieClip Timeline graphically seems complex at first glance, but by using some object oriented philosophies, we can build a control bar that can scrub through the Timeline of a Movieclip with relatively little code.

The Setup

The first thing we need to do is setup a movieclip that we want to scrub through. For this tutorial , I just made a short animation that tweens an object between two keyframes. I called this “sequence” and placed an instance on the stage (also named “sequence”), but any animation will work similarly.

Then create another MovieClip that contains two other movieclips, this is the scrubber. Within the “scrubber” one of these two other MovieClips named “bar” that will serve as our base. The “bar” MovieClip should be as long as the entire scrubber, and we will use it to determine, relatively, where the sequence should be. The other movieclip, “handle”, will both graphically represent where on the timeline the target movieclip’s playhead is, and be used to manipulate that position.

Inside the scrubber, we need to setup a few properties and event handlers. First we’ll assign some event handlers to functions that are defined a bit later. By assigning these event handlers to functions rather than creating an anonymous function for them to execute directly, we have the flexibility to change how these events are handled at any point, then change back whenever we want.

Here onPressHandler and onRelease Handler refer to functions that we will define below. Also, I’ve assigned the onReleaseHandler function to both the onRelease event and the onReleaseOutside event just in case our mouse moves faster moves faster than the movie is updating (this is most problematic when using low framerates.

this.onEnterFrame  = null;
this.onPress =  onPressHandler;
this.onRelease =  this.onReleaseOutside = onReleaseHandler;

These properties are pretty simple. boundry_mc refers to the bar Movieclip we created above, again, it is referenced through a variable for flexibility. lowerBound is the minimum value of -X that we will allow our handle to have and similarly, upperBound is the maximum. upperBound is calculated in such a way that the handle can move across the entire “bar”, but since we don’t want it to butt up agains and not go beyond the end of the bar, we subtract out it’s width from the upper bound.

var  boundry_mc:MovieClip = bar;
var  lowerBound:Number = boundry_mc._x;
var  upperBound:Number = boundry_mc._width + boundry_mc._x -  handle._width;
var  target_mc:MovieClip = _root.sequence;

Now to setup those Event handler functions that we assigned to the event handlers above. onPressHandler assigns the function onEnterFrameDown to the onEnterFrame event, while onReleaseHandler clears onEnterFrame. See how we can dynamically change the functions based on user input when we use this method of assigining functions.

function  onPressHandler():Void{
    this.onEnterFrame  = onEnterFrameDown;
}
function  onReleaseHandler():Void{
    this.onEnterFrame  = null;
}

Using the general rule of one action per function, we can break down what we want to happen via the onEnterFrame event that is created via onPress (defined above) into two parts fow which we will create functions. dragWithin will move our handle across the timeline, and scrubMovie will adjust the position of the playhead in our target_mc (also defined above)

function  onEnterFrameDown():Void {
    dragWithin();
    scrubMovie(target_mc);
}

dragWithin simply compares the current _xmouse position to the upper and lower bounds we defined above and moves the handle to the _xmouse position if it is within the bounds. If the _xmouse position is outside of the bounds, the handle is moved to it’s outermost point in the direction on _xmouse.

function  dragWithin():Void{
 var  xmousePosition = this._xmouse;
    if  (xmousePosition > lowerBound && xmousePosition <  upperBound){
        handle._x =  xmousePosition;
    } else if  (xmousePosition < lowerBound){
        handle._x =  lowerBound;
    } else if  (xmousePosition > upperBound){
        handle._x =  upperBound;
    }
}

scrubMovie calculates a ratio of the handle position as compared to the total length of the scrubber then applies that ratio to the total number of frames within our sequence to find the frame that corresponds to that position. Then it goes to that frame.

function  scrubMovie(f_target_mc:MovieClip):Void{
    var  totalFrames:Number = f_target_mc._totalframes;
    var  newFrame:Number = Math.round(totalFrames * handle._x / (upperBound -  lowerBound));
    f_target_mc.gotoAndStop(newFrame);
}

This is a simple implementation, but it could be expanded to tween between frames to have the sequence continue to play after the handle is released, or any number of other things. Have fun with it.

Download Source.

About the Author: Patrick Gunderson is a web developer and designer at NFL.com in Los Angeles.