Skip to main content
Known Participant
May 22, 2025 1:40 AM UTC
Answered

Canvas gradient mask

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? 

    joejoe_jackCorrect answer
    Inspiring
    May 23, 2025 12:43 AM UTC

    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;
    }

     

    5 replies

    joejoe_jackCorrect answer
    Inspiring
    May 23, 2025 12:43 AM UTC

    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;
    }

     

    Translate
    Rob_NZAuthor
    Known Participant
    May 23, 2025 4:45 AM UTC

    Amazing. This worked a treat. Thank you!

    Translate
    kglad
    Community Expert
    Community Expert
    May 22, 2025 1:50 PM UTC
    Rob_NZAuthor
    Known Participant
    May 23, 2025 4:43 AM UTC

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

    Translate
    kglad
    Community Expert
    Community Expert
    May 23, 2025 2:23 PM UTC

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

    Translate