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.