Skip navigation

Fading a clip in and out with Fuse

More Fuse goodness. This was an answer to a question asked on the Fuse mailing list about how to create fade a clip out, hold for a bit, and fade it back in.

[kml_flashembed movie=”/wp-content/uploads/fuse/Fade-Out-In.swf” width=”700″ height=”300″ /]

Example code:

[as]
/*****************************************************************************
=============================================================================
EXAMPLE FILE:
Make a box fade out, hold, and fade back in.
=============================================================================
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 Penner’s easing equations.
Draw a box.
Fade the box out, hold and fade in.
=============================================================================
*****************************************************************************/
// IMPORT THE CLASSES
import com.mosesSupposes.fuse.*;
init(); // Start things going

function init(){
ZigoEngine.register(PennerEasing);
this.drawBox();
this.drawStartButton();
}

function drawFade(){
this.fader.stop();
this.fader = new Fuse();
this.fader.push({target:this.box, alpha:0, ease:”easeOutExpo”, seconds:.75});
this.fader.push({target:this.box, alpha:100, ease:”easeInExpo”, seconds:.75, delay:1});
this.fader.start();
}

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

function drawBox(){
this.box = this.drawClip(this, “box”, this.getNextHighestDepth(), 100, 100, 0xFFCC00);
this.box._x = 10;
this.box._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){
target.createTextField(”tf”, this.startBtn.getNextHighestDepth(), 25, 0, 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

Your email is never published nor shared. Required fields are marked *
*
*