animated blur html5

[truf0]

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

[JoãoCésar]

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

[truf0]

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.