Adobe Animate CC 2017 - HTML5 canvas - drop shadow opacity issue

[dmersh]

Hello all,

Im working on creating some banner ads using Animate CC 2017 and publishing with canvas for HTML5.

Ive managed to add a drop shadow to a movie clip that has static text inside.  Im animating said movie clip by scale and opacity over time.

The drop shadow that I have applied to the text movie clip has the opacity/"strength" set to 20%. When previewing within adobe animate the drop shadow renders correctly, but upon publishing the banner, the drop shadow is 100% opacity black.

My question is; is this a limitation of the drop shadow filter with HTML5, or is this an error (user or otherwise)?

Any help is greatly appreciated.

thanks!

[kglad]

i see the same problem.

[albertd9194959 · Accepted solution]

Hi,

This is an Animate CC limitation, it does not publish the RGB hex transparency value in the javascript.

EaselJS v1.0.0 API Documentation : Shadow

Your best bet is to create an opaque shape under the object inside the movie clip.

If you want the fancy blur, you will need to add your shadows using javascript.

myObject.shadow = new createjs.Shadow("rgba(0,0,0,0.2)",200,200,15);

Regards,

[dmersh]

Thank you Albert, thats very helpful to know!

Im a Flash OldHead - so im still getting used to all the limitations presented in Animate related to HTML5/ Javascript.

thanks again!

[albertd9194959]

Not a problem !

If your in need of those filter effects its usually best to use javascript directly. ( Some of the filter effects work correctly, some do not, just easier to add the code and not need to trouble shoot.)

Regards.

[ClayUUID]

Literally everything you code in a Canvas document is using JavaScript directly. It's the native scripting language.

[janeh68681426]

Hi,

I have used this code to create a drop shadow in animate cc and it works fine in chrome, however it does not work in safari. Do you know how to overcome this?

Thanks