Skip navigation

Fuse elastic tween example using the Zigo engine and object syntax

This example uses just the Zigo Engine and FuseItem object syntax to scale up a clip with an elastic tween. Nothing too flashy, but it is a simple example of using object syntax.

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

Here is the code:

[as]
/*****************************************************************************
=============================================================================
EXAMPLE FILE:
Scale a box up 300 percent with an elastic tween.
=============================================================================
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 scales up to 300 percent using an elastic tween.
=============================================================================
*****************************************************************************/
// IMPORT THE CLASSES
import com.mosesSupposes.fuse.*;
init();

function init(){
ZigoEngine.register(FuseItem, PennerEasing);
this.drawStartButton();
this.drawResetButton();
this.box = this.drawClip(this, “box”, this.getNextHighestDepth(), 50, 50, 0xFFCC00);
this.box._x = 250;
this.box._y = 100;
}

function tweenIt(){
ZigoEngine.doTween({target:this.box, xscale:300, yscale:300, 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._xscale = 100;
this._parent.box._yscale = 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]

2 Comments

  1. Jan Scheel
    Posted January 8, 2008 at 3:16 am | Permalink

    Hi,

    Is it possible to tween the button to the left with Fuse?

    Kind regards,

    Jan

  2. Posted January 31, 2008 at 10:10 am | Permalink

    Sure. You can tween pretty much any property on any object with Fuse.

Post a Comment

You must be logged in to post a comment.