Highlighted

How to write a mask code in EASELJS

Enthusiast ,
Aug 13, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to write a mask code in EASELJS

Enthusiast ,
Aug 13, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 13, 2018 0
Aug 13, 2018

Copy link to clipboard

Copied

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);

                   

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2018 0
Enthusiast ,
Aug 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2018 0
Adobe Community Professional ,
Aug 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2018 1
Enthusiast ,
Aug 13, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2018 0
Adobe Community Professional ,
Aug 13, 2018

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2018 1
Enthusiast ,
Aug 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2018 1
Community Beginner ,
Oct 04, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2020 0
Community Beginner ,
Jun 24, 2020

Copy link to clipboard

Copied

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.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 24, 2020 0