Skip to main content
Participating Frequently
November 30, 2021
Question

animated blur html5

  • November 30, 2021
  • 1 reply
  • 573 views

Hello,

I'm trying to animate a the createJS blur filter but, so far, without success 😞

here is my fla :

https://www114.zippyshare.com/v/V5m0z67k/file.html

and this is the bit of code I'm using:

var myBlur = new createjs.BlurFilter(25, 25, 1),
nb = this.mario_mc_1.nominalBounds;
this.mario_mc_1.filters = [myBlur];
this.mario_mc_1.cache(nb.x, nb.y, nb.width, nb.height);
this.timeline.addTween(cjs.Tween.get(myBlur).to({blurX:0, blurY:0},25).wait(1));

I'm aware that the filter only works on a http server. So I used servez (from greggman).

The blur works... But not the animation. As can be seen here:

https://banner-testing.neocities.org/

Can anybody help me unblur Mario?

Cheers

    This topic has been closed for replies.

    1 reply

    JoãoCésar17023019
    Community Expert
    Community Expert
    November 30, 2021

    Hi.

     

    This sample might help you:

    https://github.com/CreateJS/EaselJS/blob/master/examples/Filters_animated.html

     

    Basically, you need to animate the cached bitmap and not the filter itself.

     

    Please let us know if you need further assistance.

     

    Regards,

    JC

    truf0Author
    Participating Frequently
    November 30, 2021

    Thanks Joao,

    but this is not really what I'm after. I want to really animate the blur because I want it to go from a very high value (100) to 0. So I can't use this technique.

    This technique works in the example shown because the element has a very small amount of blur... And even then it's not very nice graphically. I mean I can see that it's an image fading into a copy of the same image but blured.

    And by the way, I could do that with the tools available in animate (alpha). No need for coding easelJS.