Blur + Tweener in AS3
April 3, 2008 — flaim
Hi again 
Many people ask me how to do tweening of blurX and blurY (and other filters and properties) using Tweener - but in AS3 not AS2 (as in previous posts).
The solution is quite simple:
1. You need Tweener for AS3 (you can download it from googlecode)Â - import the class,
2. import the filter you want (from flash.filters.*),
3. place an example mc on the stage and name it ‘my_mc’,
4. finally here is the example code:
// Import Filters
import flash.filters.*;
// Import Tweener
import caurina.transitions.Tweener;
// Add Events
my_mc.addEventListener(MouseEvent.ROLL_OVER, my_mc_ROLLOVER);
my_mc.addEventListener(MouseEvent.ROLL_OUT, my_mc_ROLLOUT);
// And that is how it works…
function my_mc_ROLLOVER(e:MouseEvent):void
{
 Tweener.addTween(my_mc, {_blur_blurX:15,_blur_blurY:15, time:2});
};
function my_mc_ROLLOUT(e:MouseEvent):void
{
 Tweener.addTween(my_mc, {_blur_blurX:0,_blur_blurY:0, time:2});
};
HAVE FUN,
FLAIM
April 7, 2008 at 11:03 pm
Just what I was looking for, thanks.
April 21, 2008 at 12:25 pm
I’m finding the following problem:
## [Tweener] Error: The property ‘_blur_blurY’ doesn’t seem to be a normal object property of [object MovieClip] or a registered special property.
April 21, 2008 at 8:24 pm
you are not using the stable version of Tweener - or a newer/older one - this shouldn’t happen normally. download the 1_26_62 stable version from google code (http://code.google.com/p/tweener/).
Cheers,
Flaim
April 22, 2008 at 7:06 pm
thanks a lot!
May 9, 2008 at 5:11 pm
I just tried this and it wouldn’t work until I imported the shortcuts and changed “_blur_blurX” to “_Blur_blurX”:
import caurina.transitions.properties.FilterShortcuts;
//initialize the shortcuts
FilterShortcuts.init();
Before I changed those 2 things it didn’t work.
May 9, 2008 at 7:09 pm
Hi Jamis,
Thanks for the information . It all depends on the version of Tweener you are using. I haven’t checked versions for a while - they might have changed that. Anyway - thanks for the info…
May 22, 2008 at 11:17 am
Hey there, great post man!
I was just wondering if there is a standardized method for applying blur effects with tweener, only when the tween is taking place, i.e. I’m animating a cube from one side of the screen to the other and I want it to blue only when it’s in motion. I’ve had a look around and can’t currently find anything. Any pointers from anyone would be great.
May 22, 2008 at 6:54 pm
Thanks for commenting KidVector,
I haven’t seen a standarized model for bluring during animation but have been doing such things some time ago. The idea is to use the onUpdate handler of tweener to change the blur on the tweened object. Something like:
1. Create some tween like:
Tweener.addTween(my_object, {x:300,y:300,time:3,transition:”easeOutBack”,onUpdate:update_mc,onUpdateParams[my_object.name]});
- the idea is to pass the name or reference to the object on update so the function knows which object to blur
2. update function example:
function update(object_name)
{
var to_blur = container.getChildByName(object_name);
// and now the fun part here —
// you need to apply blur to the object here depending on that objects x and y - it would be wise to measure speed of the object somewhere and keep the initial x and y of the object somewhere to calculate the blur direction, speed (strength) and so on … that is the idea.
}
this worked for me sowmewhere - but cannot remember where I did that : )
FLAIM
May 24, 2008 at 2:41 pm
Dear KidVector
I wrote you the function method here:
http://flaim.wordpress.com/2008/05/24/directional-blur-tweener-in-as3/
It not only blurs the object when in motion - it also takes the direction of movement and speed under consideration in order to apply the exact amounts of blur.
June 12, 2008 at 5:34 pm
import caurina.transitions.*;
import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();
Tweener.addTween(mcHome, {_Blur_blurX: 15 ,_Blur_blurY: 15, time:1});
This setup worked for me, using:
http://code.google.com/p/tweener/downloads/list
tweener_1_31_70_as3.zip - Stable version 1.31.70
Though I don’t really understand why you need to import
properties.FilterShortcuts, after the fact that you imported the whole thing, but it seems that it is required for the Tweener special blur properties to work.
Cheers
June 13, 2008 at 12:06 am
Hi Sean,
They’ve changed it in one of the newer versions - filters are an independent import for tweener now. When I was writing this post it worked differently..
Flaim
June 15, 2008 at 1:38 am
Hi, I am having the same problem as Miquel , getting that same error?
(## [Tweener] Error: The property ‘_blur_blurY’ doesn’t seem to be a normal object property of [object MovieClip] or a registered special property.)
I am downloaded tweener_1_31_70_as3.zip got any ideas?
John
June 15, 2008 at 7:58 pm
Hi John,
Please read all comments under this post. There are solutions for newer versions of Tweener there.
Flaim