Desaturate an image in an HTML5 canvas animation made with Animate CC

[jaakko.pontinen]

Hello!

My problem is as is described on the topic. I am new to Animate CC and JS. I've used several editions of Flash and done some CSS work, but just really basic styling stuff. Still, I'm sure there ought to be a straightforward way of doing what I wish to accomplish.

Which, again, is simply desaturate an image to the point of being grayscale in an animation and have that animation exported as HTML/JS/CSS and have the desired effect function with as much browser compatibility as possible.

I have found a filter, with which I can produce the desired effect in a tween, but it doesn't work after publishing my work as HTML/JS/CSS.

It would be great to find an archive of filters, tweening effects and actionscript that will work after exporting work from AnCC to HTML/JS/CSS. And I'm talking about a simple list, not about how EaselJS (I think it's called) works or anything like that, just "If you do this, it will work, if this, it will work, if this, it won't". For example: doing a tween with "Classic tween", the "Alpha" property seems to work perfectly when exported to HTML/CSS/JS. However, for example, the "Tint" property does not. How can I know which Animate CC effects/options/applications will work and which won't?

Thank you!

- Jaakko Pöntinen, Finland

[ClayUUID]

You can't tween filter effects in HTML because they run too slowly for that (they're emulated in JavaScript instead of natively supported by the browser). If you want to animate an image from full color to desaturated, you'll have to make a separate desaturated copy of the image in Photoshop or whatever, then in Animate alpha fade it over the original.

[just.emma]

You can do it with one image and two movie clips, like this: Dropbox - colorToBlack

Please note that filters may not work locally in Chrome due to browser security settings, but it will work once it's uploaded to a server.

[ClayUUID]

just.emma  wrote

You can do it with one image and two movie clips, like this: Dropbox - colorToBlack

It would be helpful if you explained how, so people don't have to figure out what you did.

[just.emma · Accepted solution]

Instead of making a desaturated copy of an image in Photoshop, you can bring one fully saturated image into Animate.

Convert it to a movie clip, and place a copy of the movie clip onto two layers. 

Add a saturation filter to the top layer, and convert it to a movie clip again.  The black and white movie clip is now inside a movie clip, and you can do an alpha fade on that movie clip without animating the filter directly.

Alternately, you could put the black and white version on the bottom layer, and fade the color version away to reveal it.

[jaakko.pontinen]

Thank you - I prefer this answer, because it requires only one image asset to be imported, thus making the end result more lightweight.

just.emma ClayUUID​, thank you both!