Skip navigation

Random Clips Tween

This is Like the Random delegate example but this time I am drawing a bunch of clips. Fuse manages things quite well. Published to Flash 8 it manages to deal with 100 clips moving at the same time randomly. The time is random too, 20 that means 200 instances of fuse animating 100 clips at the same time and there isn?t even a hiccup on my laptop. Rather impressive.

UPDATED 03-12-07: This example has been updated to the latest version of Fuse 2.

[kml_flashembed movie=”/wp-content/uploads/fuse/Many-Random-Clips.swf” width=”700″ height=”300″ /]

[as]
/*****************************************************************************
=============================================================================
EXAMPLE FILE:
Create 100 Random clips and move them around randomly.
=============================================================================
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 and Delegate Classes.
Register FuseItem for object syntax and Penner’s easing equations.
Create a fuse instance to animate all the clips (this.animator).
Loop through and create a bunch of boxes assigning them a random x and y position.
Use delegate to change the scope of the method call to get a new random spot.
Wrap the tween in a method so it can be called easily.
Add the clips to the animator >> this.animator.push({scope:b, func:b.tweenIt, delay:.02});
Add a start command to the fuse instance so that it loops.
this.animator.push({command:”start”});
=============================================================================
*****************************************************************************/
// IMPORT THE CLASSES
import com.mosesSupposes.fuse.*;
import mx.utils.Delegate;

init();

function init(){
trace(”Inited”);
ZigoEngine.register(FuseItem, PennerEasing);
this.animator = new Fuse();
drawBoxes();
this.drawStartButton();
this.drawResetButton();
}

function drawBoxes(){
var count:Number = 0;
while(count<100){
var b = this[”box”+count] = this.drawClip(this, “box”, this.getNextHighestDepth(), 30, 30, 0xFFCC00);
b._x = getRandX();
b._y = getRandY();
b.dx = Delegate.create(this, getRandX);
b.dy = Delegate.create(this, getRandY);
b.ds = Delegate.create(this, getRandTime);
b.tweenIt = function(){
trace(”tween it: “+this.ds());
ZigoEngine.removeTween(this);
ZigoEngine.doTween({target:this, x:this.dx(), y:this.dy(), ease:”easeOutExpo”, seconds:this.ds()});
};
this.animator.push({scope:b, func:b.tweenIt, delay:.01});
count++;
}
this.animator.push({command:”start”});
}

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 getRandX(){
var r:Number=25+Math.floor(Math.random()*(Stage.width-75));
return r;
}

function getRandY(){
var r:Number=25+Math.floor(Math.random()*(Stage.height-75));
return r;
}

function getRandTime(){
var r:Number=1+Math.floor(Math.random()*5);
return r;
}

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.animator.start(); }
}

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(){ this._parent.animator.stop(); }
}

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]

Post a Comment

You must be logged in to post a comment.