Thought Will Rise

Here is another simple example using fuse to tween a movie clip. It is pretty simple, but it illustrates how easy it is to tween a clip with 1 line of code. The code draws all of the visual assets on the stage so just copt the code below in the first frame of a new FLA and your off and running!

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

And here is the code:

[as]

/*****************************************************************************
=============================================================================
EXAMPLE FILE:
Create an elastic tween with object syntax.
=============================================================================
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 FuseItem for object syntax and Penner’s easing equations.
Draw a box on the stage.
When you click the start button the box moves to the right with an elastic tween ending
at 400 pix.
=============================================================================
*****************************************************************************/
// IMPORT THE CLASSES
import com.mosesSupposes.fuse.*;

init(); // START THINGS ROLLING

// THIS FUNCTION JUST TIDY’S THINGS UP A BIT
function init(){
// ZigoEngine.OUTPUT_LEVEL = 3;
// Fuse.OUTPUT_LEVEL = 3;
ZigoEngine.register(FuseItem, PennerEasing);
this.drawStartButton();
this.drawResetButton();
this.box = this.drawClip(this, “box”, this.getNextHighestDepth(), 50, 50, 0xFFCC00);
this.box._x = 10;
this.box._y = 100;
}

function tweenIt(){
ZigoEngine.doTween({target:this.box, x:400, ease:”easeOutElastic”, seconds:3});
}

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”, 25, 0);
this.startBtn.onRelease = function(){ this._parent.tweenIt(); }
}

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”, 25, 0);
this.resetBtn.onRelease = function(){
ZigoEngine.removeTween(this._parent.box);
this._parent.box._x = 10;
this._parent.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, x, y){
target.createTextField(”tf”, target.getNextHighestDepth(), x, y, 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);
}

[/as]

Elastic tween example using Fuse

Post a Comment

« Home

Categories

Archives

Search

Links

RSS Feeds

Meta