Monday, December 03, 2007

Tweening the filters classes with actionscript 3.0

I was trying to tween blur or glow filters via ActionScript 3.0 and I came across this issue that it doesn't tween. After some trial and error I have figured out ways of tweening filters using tween class.

This really led me to understand tween and filter classes. Basically the object assigned to filters property is an object by itself and it's not a property of the MovieCLip. so the MovieClip cannot be updated unless of course some how reapply the object.

well enough about objects and my rambling so I'll post a code here to make it work.
for example if you are trying to create roll over filter effect.



function rolledOver(e:MouseEvent):void
{
filterTween = new Tween(e.target.bfOver, "blurX", Back.easeInOut, 0, 100, 2, true);
filterTween.addEventListener(TweenEvent.MOTION_CHANGE, updateGraphics);
filterTween.start();
}
function rolledOut(e:MouseEvent):void
{
filterTween = new Tween(e.target.bfOver, "blurX", Back.easeInOut, 100, 0, 2, true);
filterTween.addEventListener(TweenEvent.MOTION_CHANGE, updateGraphics);
filterTween.start();
}


function updateGraphics(e:TweenEvent):void
{
this.filters = [bfOver];
}


This is out of my DynamicButton class so you'll have to tweak a little or create your own but at least I hope you see what I'm doing here. If it successfully compiles then you'll see blur tween over 2 seconds with some easing.

Motion Tween or tween sends out MOTION_CHANGE event when they update properties. you basically catch this event to update the desired MovieClip's appearance.

Actually it was easy.

Now.. please don't ask me about CPU etc... I don't know.
I wish you could control stages or times it calls the function or steps for tween. then you can make it a little easy for CPU or older computers.

anyways, try it out.

4 comments:

Unknown said...

Thanks for the work. I've been looking for how to tween the filters. Yours was the first one I found.

Rob Lee said...
This comment has been removed by the author.
Rob Lee said...

what's bfOver?

Anonymous said...

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import flash.filters.BlurFilter;


btn.addEventListener(MouseEvent.ROLL_OVER,rolledOver);
btn.addEventListener(MouseEvent.ROLL_OUT,rolledOut);


function rolledOver(e:MouseEvent):void
{
var filterTween = new Tween(e.target, "blurX", Regular.easeOut, 0, 100, .5, true);
filterTween.addEventListener(TweenEvent.MOTION_CHANGE, updateGraphics);
filterTween.start();
}
function rolledOut(e:MouseEvent):void
{
var filterTween = new Tween(e.target, "blurX", Regular.easeOut, 100, 0, .5, true);
filterTween.addEventListener(TweenEvent.MOTION_CHANGE, updateGraphics);
filterTween.start();
}


function updateGraphics(e:TweenEvent):void
{
var b:BlurFilter = new BlurFilter(e.position,e.position,1);
btn.filters = [b];
}