Search code examples
maskalphacreatejseaseljsflash-cc

How to apply the alphaMaskFilter in Flash CC using Easel.js?

I am working in a canvas document using Flash CC and have the following labeled moveclips on the stage mask_mc (which is a movieclip with a alpha gradient) and logo. The objective is to create a sheen going across the logo. 

var mask_mc = this.mask_mc; 
mask_mc.cache(0, 0, 232, 196);

var logo = this.logo;
logo.cache(0, 0, 271, 40);

logo.filters = [
new createjs.AlphaMaskFilter(mask_mc.cacheCanvas)
];

All I am trying to do is emulate what an alpha gradient mask used to do using AS3, but can't get it to work with the above code:

//Original AS3 code
mask_mc.cacheAsBitmap = true;
logo.cacheAsBitmap = true;
logo.mask = mask_mc;

Thanks!

Solution

  • You have to cache (or updateCache) after you apply the filter(s)

    var logo = this.logo;
logo.filters = [
    new createjs.AlphaMaskFilter(mask_mc.cacheCanvas)
];
logo.cache(0, 0, 271, 40);

    Your second example will not work because the mask property requires a Shape, and will not work with a canvas/cache.