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

How to? Gradient Mask in Adobe Animate

Explorer ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

I have a night scene where the light from a lantern reveals small parts of the environment as the lantern sways.

I was going to use a gradient oval shape for the light source. Adobe Animate mask doesn't work with gradients. This is a very easy thing to do in other animation software, but I am required to use Animate for this project.

 

What workaround can I use to make this happen?

 

Thanks

Views

2.3K

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 2 Correct answers

Community Expert , Jan 11, 2023 Jan 11, 2023

This tutorial may help with a better understanding of the gradient mask. The gradient mask part is towards the end. https://www.youtube.com/watch?v=hHPtJTWUSOw

Votes

Translate

Translate
Community Expert , Jan 11, 2023 Jan 11, 2023

i think i would have gotten this under 3 minutes (but not 2) if i'd not have inadvertently created a bitmap instead of a movieclip or graphic, 

 

 

Video link

Votes

Translate

Translate
Community Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

  •  Animate ignores bitmaps, gradients, transparency, colors, and line styles in a mask layer. Any filled area is completely transparent in the mask; any non-filled area is opaque.

     

     

     

    but you can mask an alpha gradient (along with the stuff you want to mask) and get the same effect you're trying to achieve by using an alpha mask.

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
Explorer ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

Yes. So then, there is no workaround?

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 Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

yes, there's a work-around:

 

"but you can mask a symbol with an alpha gradient (along with the stuff you want to mask) and get the same effect you're trying to achieve by using an alpha mask."

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
Explorer ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

Hmmm. That's interesting. I don't think I've tried that exactly. Thanks - I'll see what I come up with.

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 Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

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
Explorer ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

I'm trying to avoid Actionscript, but I'll try this if a different workaround doesn't give the results I need. Thanks so much for the feedback!

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 Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

This tutorial may help with a better understanding of the gradient mask. The gradient mask part is towards the end. https://www.youtube.com/watch?v=hHPtJTWUSOw

Alpha Mask Transparency, including animation. With a combination of layers and blending modes, the effect is achieved. File here: https://sergiopop.gumroad.com/l/PoMXJ #adobeanimate #tip#tutorial#animate#animation#2d

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
Explorer ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

Thank you! I did see that tutorial already, but when I followed it, I didn't get the result I needed.

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 Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

@rhodehamelr 

 

no code needed:

 

"but you can mask a symbol with an alpha gradient (along with the stuff you want to mask) and get the same effect you're trying to achieve by using an alpha mask."

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
Explorer ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

👍🏻👍🏻 Definitely will try this.

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 Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

it only takes a few seconds, i can't imagine what would require a youtube tutorial.

 

1. create 3 layers

2. put your mask in the top most layer

3. put your masked object in the bottom layer

4. create a layer between the two layers. make sure it's also masked.

5. create something with an alpha gradient > convert it to a symbol

6. lock all layers to see your "alpha-like mask

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
Explorer ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

I really appreciate the additional info. I can't try it until I get off work today.

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 Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

sounds good.  keep us updated.

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 Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

Everyone learns and teaches differently, kglad. Tutorial videos are a great way to help.

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 Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

i don't dispute that. i just can't see this tutorial taking more than 2 minutes.

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 Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

ok, i just scanned that tutorial and the first two minutes of the 4 1/2 minutes are devoted to creating a mask.

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 Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

You are correct the gradient part is at the end. I did say that when I shared the tutorial. lol " The gradient mask part is towards the end." This way there was no time wasted in the beginning. lol 

 

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 Expert ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

i think i would have gotten this under 3 minutes (but not 2) if i'd not have inadvertently created a bitmap instead of a movieclip or graphic, 

 

 

Video link
how to create (what appears to be an alpha gradient) mask.

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
Explorer ,
Jan 11, 2023 Jan 11, 2023

Copy link to clipboard

Copied

Thank you - yeah, I get it. I got that technique to work just fine, but I can't seem to translate this into what I need to accomplish.
Here is a sample of what I'm trying to do. This is not my video -- it's just to share the concept of the lantern illuminating only part of the environment as it is carried by the person: https://www.filmsupply.com/clips/a-person-carrying-a-lantern-walks-into-a-dark-cave/7716

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 Expert ,
Jan 12, 2023 Jan 12, 2023

Copy link to clipboard

Copied

that's a pseudo-alpha mask.  ie, it's not an alpha mask, so you're not going to be able to use it to alpha mask the non-fixed parts of your project's environment.

 

if you have an a3 project, you can create a dynamic mask with alpha gradient.

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
Explorer ,
Jan 12, 2023 Jan 12, 2023

Copy link to clipboard

Copied

Yeah. If I don't use AS3, then I might use this little tactic. Here is the test run. The shape of the light source needs a lot of work, etc. At least I know I can pull it off like this. https://youtu.be/e5lBPPzLgG4

 

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 Expert ,
Jan 12, 2023 Jan 12, 2023

Copy link to clipboard

Copied

LATEST

looks good.

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