How to write a mask code in EASELJS

Hi.

Here is a suggestion.

Please notice that the code here isn't supposed to be a definitive solution. It's an ideal example in which the images have their registration and transformation points at the top left corner and they are also positioned at the top left corner of the stage. So if you rotate or move them, things will not behave as expected.

The important things here are:

- To use the AlphaFilterMask, you need shapes and images;

- To get a reference to a image inside of a Movie Clip (which is a EaselJS container associated with a TweenJS timeline) you can use the 'children' property;

- To get a reference to a shape inside of a Movie Clip, you can use the 'shape' property;

- I'm using setTimeout to make sure that all children will be ready;

- In the FLA, there are two layers with containers and two layers with a image and a shape.

- Turn the guide property on for the 'Mask Container' and 'Masked Container' layers to test the code with containers.

- Turn the guide property on for the 'Mask Shape' layer and the 'Masked Image' layers to test the code with a image and a shape.

JavaScript code:

this.setAlphaMaskFilter = function(masked, mask, containerMode = false, container = exportRoot)
{
    var bounds = {width:mask.x * 2, height:mask.y * 2};
    if (containerMode)
    {
          container.addChild(masked);
          container.addChild(mask);
    }
    mask.cache(-bounds.width * 0.5, -bounds.height * 0.5, bounds.width, bounds.height);
    masked.filters = [new createjs.AlphaMaskFilter(mask.cacheCanvas)];
    masked.cache(0, 0, bounds.width, bounds.height);
    mask.visible = false;
};
setTimeout(function()
{
    //exportRoot.setAlphaMaskFilter(exportRoot.children[0], exportRoot.children[1]);
    exportRoot.setAlphaMaskFilter(exportRoot.b1.children[0], exportRoot.a1.shape, true);
}, 0);

FLA download:
animate_cc_html5_alpha_mask_filter.zip - Google Drive

Regards,

JC