Thought Will Rise

This is an example proof-of-concept I did a while back to see if it would be possible to tween objects into more organic shapes using Fuse. Turns out it is not only possible, it looks pretty neat. I will definitely be using this idea in a project. Give it a click and see what I mean. Just think how this would look if you used some blur filters with it.

The basic ideas is pretty simple. I am creating some points that coorispond to four corners of a box and then using the Fuse command “updfunc” (update function) to call a function that uses the drawing api to draw between the points.

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

Embedded Code:

[as]
/*****************************************************************************
=============================================================================
EXAMPLE FILE:
Create an organic shape with Fuse and the drawing api by tweening variables
and updating a draw function while it tweens.
=============================================================================
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 and the flash geometry point class.
Register FuseItem for object syntax and Penner’s easing equations.
Set FuseItem.ADD_UNDERSCORES = false. By default Fuse is set to add underscores to all
the properties being tweened. This is really handy normally because it is a pain to
have to type in underscores for every prop. In this case though, the point class doesn’t
use underscores so I want to turn this feature off or it won’t work.
Draw a box to tween.
Create 4 points that represent the 4 corners of the box. The properties of the movieclip
are not being tweened here. Instead point variables are being tweened and drawing api is
being used to draw between the points as they are tweened. The function that is doing the
drawing (animateBox) is being called every frame during the tween with the update function
callback (updfunc, under Callback Object in the Zigo Engine Class Docs).
The result is the ability to get really organic shapes when animating.
=============================================================================
*****************************************************************************/
// IMPORT THE CLASSES
import com.mosesSupposes.fuse.*;
import flash.geom.Point;
init();

function init(){
ZigoEngine.register(FuseItem, PennerEasing);
FuseItem.ADD_UNDERSCORES = false;
this.drawStartButton();
this.drawResetButton();
this.box = this.drawClip(this, “box”, this.getNextHighestDepth(), 50, 50, 0xFFCC00);
this.box._x = 250;
this.box._y = 100;
p1 = new Point(0, 0);
p2 = new Point(50, 0);
p3 = new Point(50, 50);
p4 = new Point(0, 50);
}

function tweenIt(){
ZigoEngine.doTween({target:p1, x:-30, y:-30, ease:”easeOutElastic”, seconds:2});
ZigoEngine.doTween({target:p2, x:110, y:-50, ease:”easeOutElastic”, seconds:1.5, delay:.2, extra1:10, extra2:500});
ZigoEngine.doTween({target:p3, x:150, y:110, ease:”easeOutElastic”, seconds:2.5});
ZigoEngine.doTween({target:p4, x:-50, y:150, ease:”easeOutElastic”, seconds:2, updscope:this, updfunc:’animateBox’});
}

function animateBox(){
this.box.clear();
this.box.beginFill(0xff9999, 100);
this.box.moveTo(this.p1.x,this.p1.y);
this.box.lineTo(this.p2.x,this.p2.y);
this.box.lineTo(this.p3.x,this.p3.y);
this.box.lineTo(this.p4.x,this.p4.y);
this.box.lineTo(this.p1.x,this.p1.y);
this.box.endFill();
}

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(FuseKitCommon.ALL); // remove all tweens
this._parent.box.clear();
this._parent.box.beginFill(0xffcc00, 100);
this._parent.box.moveTo(0,0);
this._parent.box.lineTo(50,0);
this._parent.box.lineTo(50,50);
this._parent.box.lineTo(0,50);
this._parent.box.lineTo(0,0);
this._parent.box.endFill();
this._parent.p1.x = 0;
this._parent.p1.y = 0;
this._parent.p2.x = 50;
this._parent.p2.y = 0;
this._parent.p3.x = 50;
this._parent.p3.y = 50;
this._parent.p4.x = 0;
this._parent.p4.y = 50;
}
}

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]