Thought Will Rise

Here is an example of using Fuse to do a code based Bezier tween.

[kml_flashembed movie=”/wp-content/uploads/fuse/Bezier-Tween.swf” width=”700″ height=”300″ /]

And here is the code:

[as]
/*****************************************************************************
=============================================================================
EXAMPLE FILE:
Move a box along a curve.
=============================================================================
EXAMPLE CREDIT:
Ryan Potter
www.ThoughtWillRise.com
License: Same as Fuse.
=============================================================================
FUSE CREDIT:
Fuse Kit 2
Copyright (c) 2006 Moses Gunesch, MosesSupposes.com
Distributed under MIT Open Source License, see Fuse-Kit-License.html (in fuse package directory)
Easing Equations (c) 2003 Robert Penner used by permission, see PennerEasing
Visit http://www.mosessupposes.com/Fuse
=============================================================================
EXPLANATION:
Load in the Fuse classes.
Register Penner’s easing equations.
Draw a box on the stage.
Create some start and stop buttons.
The tween gets constructed (bezierTweenBox)when the start button is pushed.
Create a fuse instance (this.bezier).
Add the control points and the finish x and y.
Add another tween.
This creates an “s” pattern.
=============================================================================
*****************************************************************************/
// IMPORT THE CLASSES
import com.mosesSupposes.fuse.*;
init(); // Start things going

function init(){
ZigoEngine.register(PennerEasing);
this.drawBox();
this.drawStartButton();
this.drawResetButton();
}

function bezierTweenBox(){
this.bezier.stop();
this.bezier = new Fuse();
this.bezier.push({target:this.box, controlX:400, controlY:0, x:300, y:100, ease:”easeInOutExpo”, seconds:2});
this.bezier.push({target:this.box, controlX:50, controlY:250, x:540, y:100, ease:”easeInOutExpo”, seconds:2});
this.bezier.start();
}
function drawBox(){
this.box = this.drawClip(this, “box”, this.getNextHighestDepth(), 50, 50, 0xFFCC00);
this.box._x = 10;
this.box._y = 100;
}

function drawClip(target, clip, depth, w, h, color){
var c = target.createEmptyMovieClip(clip+depth, depth);
c.beginFill(color, 100);
c.moveTo(0,0);
c.lineTo(w,0);
c.lineTo(w,h);
c.lineTo(0,h);
c.lineTo(0,0);
c.endFill();
return c;
}

function drawLabel(target, text){
target.createTextField(”tf”, this.startBtn.getNextHighestDepth(), 25, 0, 10, 10 );
target.tf.autoSize = true;
target.tf.multiline = false;
target.tf.wordWrap = false;
target.tf.text = text;
var my_fmt:TextFormat = new TextFormat();
my_fmt.bold = true;
my_fmt.color = 0xffffff;
my_fmt.font = “_sans”;
target.tf.setTextFormat(my_fmt);
}

function drawStartButton(){
this.startBtn = this.drawClip(this, “box”, this.getNextHighestDepth(), 20, 20, 0xffffff);
this.startBtn._x = 10;
this.startBtn._y = 10;
this.drawLabel(this.startBtn, “Start Animation”);
this.startBtn.onRelease = function(){ this._parent.bezierTweenBox(); }
}

function drawResetButton(){
this.resetBtn = this.drawClip(this, “box”, this.getNextHighestDepth(), 20, 20, 0xffffff);
this.resetBtn._x = this.startBtn._x+this.startBtn._width+10;
this.resetBtn._y = this.startBtn._y;
this.drawLabel(this.resetBtn, “Reset Animation”);
this.resetBtn.onRelease = function(){
this._parent.bezier.stop();
this._parent.box._x = 10;
this._parent.box._y = 100;
}
}
[/as]