Skip to main content
Known Participant
May 22, 2025
Answered

Canvas gradient mask

  • May 22, 2025
  • 2 replies
  • 351 views

I'd like to apply a gradient/feathered mask to a MovieClip in Canvas. I've researched and tried various methods but haven't been successful with getting anything to work.

Ideally I'd like the gradient mask to be a MovieClip so I can easily tween it over the masked content, which rules out using AlphaMaskFilter.

Is there anyone out there that could offer me some code or advice on how to achieve this? 

    Correct answer joejoe_jack

    You can apply a composite mode to the MovieClip that will be your mask.

    1. Nest the MovieClip you want masked and the MovieClip that will be your mask into a nesting MovieClip, making sure the masking MovieClip is above the masked MovieClip on it's own layer.
    2. Set the nesting MovieClip to Render mode 'Cache as Bitmap'.
    3. Inside the nesting MovieClip, animate the mask as you would like and add a name to the mask instance (other than the word 'mask'). For example, you may use the name 'msk'.
    4. Create a layer above everything inside the nesting MovieClip. Name it something like 'code' and on the very first frame on your code layer, add the following JS code and change compositeOperation to something such as 'destination-out' or 'destination-in'. There are several different operations so google global composite operations to read about them.
    if(!this.init) {
        this.msk.compositeOperation = "destination-in"; // change the composite mode to your needs.
        this.timeline.on('change', () => this.updateCache()); // this updates the cache as the frame changes
        this.init = true;
    }

     

    2 replies

    joejoe_jackCorrect answer
    Inspiring
    May 23, 2025

    You can apply a composite mode to the MovieClip that will be your mask.

    1. Nest the MovieClip you want masked and the MovieClip that will be your mask into a nesting MovieClip, making sure the masking MovieClip is above the masked MovieClip on it's own layer.
    2. Set the nesting MovieClip to Render mode 'Cache as Bitmap'.
    3. Inside the nesting MovieClip, animate the mask as you would like and add a name to the mask instance (other than the word 'mask'). For example, you may use the name 'msk'.
    4. Create a layer above everything inside the nesting MovieClip. Name it something like 'code' and on the very first frame on your code layer, add the following JS code and change compositeOperation to something such as 'destination-out' or 'destination-in'. There are several different operations so google global composite operations to read about them.
    if(!this.init) {
        this.msk.compositeOperation = "destination-in"; // change the composite mode to your needs.
        this.timeline.on('change', () => this.updateCache()); // this updates the cache as the frame changes
        this.init = true;
    }

     

    Rob_NZAuthor
    Known Participant
    May 23, 2025

    Amazing. This worked a treat. Thank you!

    kglad
    Community Expert
    Community Expert
    May 22, 2025
    Rob_NZAuthor
    Known Participant
    May 23, 2025

    I actually came across this video prior to posting this. Unfortunately I couldn't get it to work. Appreciate the suggestion though.

    kglad
    Community Expert
    Community Expert
    May 23, 2025

    you couldn't follow the steps?  (i noticed the audio was poor.)