• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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.9K

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,

Votes

Translate

Translate
Community Expert ,
Jan 02, 2018 Jan 02, 2018

Copy link to clipboard

Copied

i see the same problem.

Votes

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,

Votes

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!

Votes

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.

Votes

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
LEGEND ,
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.

Votes

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

Votes

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