Using a Fuse sequence to play a series of actionscripted tweens

The sample above works exactly like the one on the Tween Sequence page except it uses Fuse, developed by Moses Gunesch and others instead of the built-in Tween class and its onMotionFinished method. To use Fuse, you'll need to download the latest Fuse classes, install them in com/mosessupposes in a directory where you have other AS2 classes stored, and change your Flash preferences to point to that directory, as described here. Then in your code, you import the fuse class, register Fuse with the ZigoEngine.register command, and build a Fuse sequence.

Building a sequence of tweens with Fuse is quite straightforward: you create a new Fuse object (instance of the Fuse class) and then push a definition of each tween onto that object, in the order you want the tweens to occur. You can also push a function onto the Fuse stack, to be executed when it is encountered in the stack, and/or include callback functions as part of each tween definition, as described in Lee Brimelow's Fuse Animation tutorial. In this example we just create a stack of three tweens (slide picture into place, slide colored strip across bottom, fade in caption), and apply them any time a control button is clicked. This is the complete code for the example above:

import com.mosesSupposes.fuse.*;

ZigoEngine.register(Fuse);

// create a new Fuse instance (to hold information about sequence to execute)
var f:Fuse;
var biodata:Array = [
	{btn:whitebtn, color:0xffffff, caption:"lives in Santa Fe, NM", pic:"whitepic"},
	{btn:beigebtn, color:0xE4D9B9, caption:"lives in Brooklyn, NY", pic:"beigepic"},
	{btn:bluebtn, color:0x9CA4BA, caption:"lives in Madison, WI", pic:"bluepic"},
	{btn:redbtn, color:0xC60733, caption:"lives in San Jose, CA", pic:"redpic"}
	];

// assign a color instance to the strip for setting its color below
var stripcolor:Color = new Color(strip);

// assign event handler functions to controls
for (var i:Number=0; i < biodata.length; i++) {
	
	var btn:MovieClip = biodata[i].btn;
	
	btn.outer_mc._visible = false;	
	btn.onRollOver = function() {
		this.outer_mc._visible = true;
	};
	btn.onRollOut = function() {
		this.outer_mc._visible = false;	
	};
	btn.onPress = function() {
		this.inner_mc._alpha = 50;
	};
	
	// keep a pointer into the array for each button
	btn.myi = i;
	
	btn.onRelease = function() {
		this.inner_mc._alpha = 100;
		
		// if a previous Fuse instance is executing, stop it
		if (f != undefined) f.stop();
		// create new Fuse instance for this sequence
		f = new Fuse();			
		// set the initial states of each element
		caption._alpha = 0;
		strip._xscale = 0;
		stripcolor.setRGB(biodata[this.myi].color);
		caption._txt.text = biodata[this.myi].caption;
		
		// calculate the point where the faces movieclip should end up to show the corresponding picture
		// add a tween to this spot to the fuse object
		f.push({target:faces, x:maskmc._x-faces[biodata[this.myi].pic]._x, y:maskmc._y-faces[biodata[this.myi].pic]._y, seconds:1.5});
		// add a tween to make the colored strip move
		f.push({target:strip, xscale:100, seconds:.7});
		// add a tween to fade the caption in
		f.push({target:caption, alpha:99, seconds:.5});
		
		// start the tween sequence
		f.start();
	};
}

Each tween definition contains the movieclip to be targeted, the end value for one or more properties (specified as x, alpha, etc instead of _x, _alpha, etc), and the number of seconds over which the tween is to occur. So simple! You can build more advanced tween definitions as specified in the help docs that come with the Fuse class. The as and fla files for the sample on this page can be downloaded by subscription from the link at right.