AS2: Animating Filters With Fuse
View Example
Download Fuse
Download Example Files
I still use Fuse for my scripted animations in AS2 so I figured I'd show how I animate filters using Fuse in AS2 projects. In this instance, I used the glow filter to animate when you roll over a button. The filter animation in Fuse is pretty much the same no matter what filter you use (of course you have to change the properties of the filter to tween) and you can see all the properties of each tweenable filter in the docs. This is comprised of a class file I made for the button and just some quick code on the timeline to show how to use it.
Here is GlowButton.as:
Actionscript:
-
import mx.events.EventDispatcher;
-
import mx.utils.Delegate;
-
import com.mosesSupposes.fuse.Fuse;
-
import com.mosesSupposes.fuse.FuseFMP;
-
import com.mosesSupposes.fuse.PennerEasing;
-
-
/**
-
* @author Matt Przybylski [http://www.reintroducing.com]
-
* @version 1.0
-
*/
-
-
class com.reintroducing.ui.GlowButton extends MovieClip
-
{
-
//- PRIVATE VARIABLES -------------------------------------------------------------------------------------
-
-
private var dispatchEvent:Function;
-
-
private var _fuse:Fuse;
-
private var _id:Number;
-
private var _startBlur:Number;
-
private var _endBlur:Number;
-
private var _active:Boolean;
-
-
//- PUBLIC VARIABLES --------------------------------------------------------------------------------------
-
-
public static var DEFAULT_NAME:String = "com.reintroducing.ui.GlowButton";
-
-
public var addEventListener:Function;
-
public var removeEventListener:Function;
-
-
// instances
-
public var title_txt:TextField;
-
-
//- CONSTRUCTOR -------------------------------------------------------------------------------------------
-
-
public function GlowButton()
-
{
-
super();
-
-
EventDispatcher.initialize(this);
-
-
this.onLoad = Delegate.create(this, init);
-
}
-
-
//- PRIVATE METHODS ---------------------------------------------------------------------------------------
-
-
private function init():Void
-
{
-
this.initButtonEvents();
-
}
-
-
/**
-
* Adds the events to the button
-
*/
-
private function initButtonEvents():Void
-
{
-
this.onRollOver = Delegate.create(this, doRollOver);
-
this.onRollOut = Delegate.create(this, doRollOut);
-
this.onRelease = Delegate.create(this, doRelease);
-
}
-
-
/**
-
* Clears the button of events
-
*/
-
private function killButtonEvents():Void
-
{
-
this.onRollOver = null;
-
this.onRollOut = null;
-
this.onRelease = null;
-
}
-
-
/**
-
* onRollOver
-
*/
-
private function doRollOver():Void
-
{
-
this._fuse = new Fuse({target: this, Glow_blur: this._endBlur, Glow_alpha: 1, Glow_strength: 2, time: .35, ease: PennerEasing.easeOutSine});
-
this._fuse.start();
-
}
-
-
/**
-
* onRollOut
-
*/
-
private function doRollOut():Void
-
{
-
this._fuse = new Fuse({target: this, Glow_blur: this._startBlur, Glow_alpha: .5, Glow_strength: 2, time: .35, ease: PennerEasing.easeOutSine});
-
this._fuse.start();
-
}
-
-
/**
-
* onRelease
-
*/
-
private function doRelease():Void
-
{
-
this.dispatchEvent({type: "onGlowButtonClicked", target: this});
-
}
-
-
//- PUBLIC METHODS ----------------------------------------------------------------------------------------
-
-
/**
-
* Sets the properties of the button
-
*/
-
public function create($title:String, $id:Number, $color:Number, $startBlur:Number, $endBlur:Number):Void
-
{
-
this.title_txt.text = $title;
-
this._id = $id;
-
this._startBlur = $startBlur;
-
this._endBlur = $endBlur;
-
-
FuseFMP.writeFilter(this, "Glow", {color: $color, blur: this._startBlur, alpha: .5, strength: 2});
-
}
-
-
/**
-
* Enables the button
-
*/
-
public function setEnabled():Void
-
{
-
this.initButtonEvents();
-
-
this.enabled = true;
-
this._active = true;
-
-
this._fuse = new Fuse({target: this, alpha: 100, Glow_blur: this._startBlur, Glow_alpha: .5, Glow_strength: 2, time: .35, ease: PennerEasing.easeOutSine});
-
this._fuse.start();
-
}
-
-
/**
-
* Disables the button
-
*/
-
public function setDisabled():Void
-
{
-
this.killButtonEvents();
-
-
this.enabled = false;
-
this._active = false;
-
-
this._fuse = new Fuse({target: this, alpha: 50, Glow_blur: 0, Glow_alpha: 0, Glow_strength: 0, time: .35, ease: PennerEasing.easeOutSine});
-
this._fuse.start();
-
}
-
-
//- EVENT HANDLERS ----------------------------------------------------------------------------------------
-
-
-
-
//- GETTERS & SETTERS -------------------------------------------------------------------------------------
-
-
public function get id():Number
-
{
-
return this._id;
-
}
-
-
public function set id($val:Number):Void
-
{
-
this._id = $val;
-
}
-
-
public function get active():Boolean
-
{
-
return this._active;
-
}
-
-
public function set active($val:Boolean):Void
-
{
-
this._active = $val;
-
}
-
-
//- HELPERS -----------------------------------------------------------------------------------------------
-
-
public function toString():String
-
{
-
return "com.reintroducing.ui.GlowButton";
-
}
-
-
//- END CLASS ---------------------------------------------------------------------------------------------
-
}
And here is the code on the timeline which just sets up the buttons:
Actionscript:
-
import com.reintroducing.ui.GlowButton;
-
import com.mosesSupposes.fuse.*;
-
-
ZigoEngine.register(Fuse, FuseFMP, PennerEasing);
-
-
var numButtons:Number = 4;
-
-
function setButtons():Void
-
{
-
var btn:GlowButton;
-
-
for (var i:Number = 0; i <numButtons; i++)
-
{
-
btn = GlowButton(this["btn" + i + "_mc"]);
-
btn.create("button" + i, i, 0x996600, 5, 10);
-
btn.addEventListener("onGlowButtonClicked", this);
-
}
-
}
-
-
function onGlowButtonClicked($evt:Object):Void
-
{
-
for (var i:Number = 0; i <numButtons; i++)
-
{
-
var btn:GlowButton = GlowButton(this["btn" + i + "_mc"]);
-
-
if (btn.active == false)
-
{
-
-
btn.setEnabled();
-
}
-
}
-
-
$evt.target.setDisabled();
-
}
-
-
setButtons();
I'm quite aware this isn't the prettiest example (as my examples usually are on the ugly side), but it's the code that counts here 
