How to write a mask code in EASELJS

[chenjil43641795]

var a1=this.a1;

var b1=this.b1;

b1.AlphaMaskFilter(a1.cacheCanvas);

This writin is ineffective.

How to write correctly in ANCC.

Or not this alphamaskfilter.

Is there any other code available

[ankushr40215001]

Hi Chenji,

Try the below code which I got from here - EaselJS v1.0.0 API Documentation : AlphaMaskFilter.

 var box = new createjs.Shape(); box.graphics.beginLinearGradientFill(["#000000", "rgba(0, 0, 0, 0)"], [0, 1], 0, 0, 100, 100) box.graphics.drawRect(0, 0, 100, 100); box.cache(0, 0, 100, 100); var bmp = new createjs.Bitmap("path/to/image.jpg"); bmp.filters = [   new createjs.AlphaMaskFilter(box.cacheCanvas) ]; bmp.cache(0, 0, 100, 100);

Hope it helps!

Thanks,

Ankush

00);

[chenjil43641795]

Thanks, ankushr40215001.

I went to see that address, too.

But in ANCC, I only want 2 movie clips to mask.

There should be a simple code.

Actually I've collected before.

But I saved it in the ANCC code snippet.

When the ANCC is updated, all the code fragments are gone.

[ClayUUID]

You can't dynamically use a movieclip as a mask in Canvas documents. You can only use a shape as a mask. When you use a movieclip as a mask in the editor, Animate converts it into a shape when you publish.

[chenjil43641795]

Thank you for your answer.

It seems that this mask does not meet my needs.

I miss the mask in AS3.

In fact, I would like to see how the mask in the ANCC is done, if the source file is good.

As you say, have to create a graphic, use code to paint, as a mask.Feel a lot of trouble

[JoãoCésar · Accepted solution]

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

[chenjil43641795]

Thank you very much, the relative code, your explanation is more useful.

But what I actually want to do is mask to follow the form of the mouse.

It's supposed to be wiping out the effect.

SOURCE is here

EaselJS/AlphaMaskReveal.html at master · CreateJS/EaselJS · GitHub

I tried to rewrite this code in ANCC.

You made me understand a lot of things, thank you.

[alexpestov]

Have you figured out how to do that? I'm trying to do the same thing.

[Tom Farrow]

Hi there JoãoCésar,

Is there away to have the graident mask (AlphaMaskFilter) animated? So different areas of the masekd item are revealed?

I'm been trying all sorts but nothing has worked as of yet.

[piotrw70210844]

Hi, is there any chance to make this dowload file active?