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

Community Beginner ,
Jan 02, 2018 Jan 02, 2018

Copy link to clipboard

Copied

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!

Views

2.3K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Participant , Jan 02, 2018 Jan 02, 2018
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,

Likes

Translate

Translate
Adobe Community Professional ,
Jan 02, 2018 Jan 02, 2018

Copy link to clipboard

Copied

i see the same problem.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 02, 2018 Jan 02, 2018

Copy link to clipboard

Copied

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,

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 02, 2018 Jan 02, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 02, 2018 Jan 02, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 03, 2018 Jan 03, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 18, 2021 Aug 18, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines