Text animation: In export to html/js the chars stay blured. How to handle filters in export to canv?

[katizh]

I followed the fantastic explanation in http://www.adobepress.com/articles/article.asp?p=2755709&seqNum=7 to animate from blur to non blur.

That works fine with my characters (text distributed to layers)

But in export to html/canvas/js the chars stay blured and do not change to non blur as expected.

Is it maybe only a caching problem? I removed the export and published fresh from skratch.

Any hint?

Thank you

Katja

Update:

Just a remark from myself: I think this is a #easejs ore #tweenjs topic.

- BlurFilter in easejs seems to be an expensive thing

- Can BlurFilter be animated/tweened/whatever to make a smooth from here to there?

[chrish18591230 · Accepted solution]

You have made it most of the way to the correct answer on your own. In canvas animations all of the filter effects, including blur, are slow and expensive to process, so on publish they are cached on the first frame they are used and will never update even if they appear to do so in the Animate UI.

It's an unfortunate limitation of the transition from Flash to HTML5 Canvas. I've found it easiest to just avoid using blurs wherever possible in my work, but if you find yourself absolutely needint to have an animated blur, here are two possible workarounds I can offer.

1) Create two copies of your symbol, one that is blurred and one that is not. Place them perfectly on top of eachother on separate layers, and animate their alpha's to fade between the two states. It's not going to be as nice as animating the blur, but it's an approximation that is easy to set up and is relatively low impact on performance and file size.

2) Convert the blur to a series of images. Right click on your tween and use the Convert to Frame-by-Frame Animation option, try using Keyframe every third frame or every fourth frame to reduce the density of the animation. On each keyframe that is created, right click on your symbol on the stage and select Convert to Bitmap. Now when you export the blur should animate, but it's not going to be as smooth as a tween. You're also going to increase your file size because you now have a separate image file for each step of the blur, and your symbols have now all been converted to bitmaps, so if you ever need to change them you'll have to delete the bitmaps, create your animation again, and do this whole process over. I don't reccomend this route, but it's the closest I think you can get to true blur animation if you absolutely need it. (You could also look into using spritesheets. It's going to get you more or less the same result as what I've outlined here, but it's a more elegant way of going about it if you don't mind writing javascript)