Canvas gradient mask

[Rob_NZ]

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? 

[kglad]

https://www.youtube.com/watch?v=Z3MbkZ0eV-0&ab_channel=kglad

[Rob_NZ]

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

[kglad]

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

[joejoe_jack · Accepted solution]

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_NZ]

Amazing. This worked a treat. Thank you!