so animating a blur doesn't work now?

[productionArtistChad]

It worked in the past i've used it many times. doesn't seem to be working now.  I just looked at an old file where it was working fine and now it isn't working at all.

http://chaddemoss.com/blur.zip

[RandomlyFish]

Did the old file use Actionscript?

[productionArtistChad]

no it was an animate html5 canvas file. maybe the blur didn't work and I just didn't notice but its not working now in the old file or this test file I just made..

[ClayUUID · Accepted solution]

Yes, animating blurs isn't supported in Canvas for performance reasons. Browsers do not natively implement blurring canvas elements, or any other filter effects, so they all have to be emulated in JavaScript, which is very slow.

The best compromise is to use a cached version of a blurred image and then fade it in or out. Alpha compositing of bitmaps IS natively supported by the canvas element, so it's fast enough to animate.

[Colin Holgate]

One way to do what you want is to select the tween and convert to keyframes. That alone won't work, because the same symbol is in the same layer, and CreateJS won't update it. If you use one layer per frame, then it works.

[ClayUUID]

Of course, if you do that you're circumventing a protection that was put in place for a very good reason, and anyone who does so may pay the price in a jerky frame rate.

[Colin Holgate]

Indeed, though it happens to work fine for the small graphic. Also you could trade performance for file size and convert each each frame into a bitmap.

The cross fade idea isn't quite right in this case, because it's supposed to look like spread out letters coming together, and fading from spread out to normal wouldn't have the same effect.

[productionArtistChad]

so no more motion blurs, bummer.

[Colin Holgate]

Even ActionScript doesn't do motion blur.

[ClayUUID]

He means a Blur filter applied along only the X or Y axis.