Blur + Tweener in AS3

blur

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

Posted in actionscript, as3, lab. Tags: , , , , .

13 Responses to “Blur + Tweener in AS3”

  1. Jared Says:

    Just what I was looking for, thanks.

  2. Miquel Says:

    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.

  3. flaim Says:

    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

  4. Shadowlit Says:

    thanks a lot!

  5. Jamis Says:

    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.

  6. flaim Says:

    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…

  7. KidVector Says:

    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.

  8. flaim Says:

    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

  9. flaim Says:

    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.

  10. Sean M. Says:

    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 :D

  11. flaim Says:

    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

  12. john Says:

    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

  13. flaim Says:

    Hi John,

    Please read all comments under this post. There are solutions for newer versions of Tweener there.

    Flaim

Leave a Reply