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 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]

5 Comments

krille andersen

Posted March 16, 2007 at 5:40 am | Permalink

This is way cooool, you rock
Ari Braginsky

Posted April 16, 2007 at 2:41 pm | Permalink

Very nice. Thanks especially for the source.
Dominik

Posted May 2, 2007 at 11:08 am | Permalink

That’s really cool and this Fuse Kit is cool anyway. I just took your code and added color and filter tweening to it. It’s proof-of-concept, too, of course, but I like it anyway.

You can have a quick look at it on http://ajaxtooltip.pytalhost.com/organicTransform.swf
I highly recommend, not to view that in a browser, because of performance.

If anybody wants, I’ll post the source, too, but I still have to clean the code a little bit and debug it. I still don’t know, how to solve the problem, that the color and filter transform highly depend on system performance. It would be rather easy, if you could tell the Fuse Kit the duration of a transform in frames, but I don’t know if that’s possible. Any ideas how to solve that?

Greetings
luchezze

Posted June 23, 2007 at 7:02 am | Permalink

Very Helpful! Great! … Dominik i like ur concept! i wanna c the code 2
joxBASS

Posted August 6, 2007 at 8:42 pm | Permalink

Champion!

Tweening variables using fuse

5 Comments

Post a Comment

« Home

Categories

Archives

Search

Links

RSS Feeds

Meta