• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to write a mask code in EASELJS

Enthusiast ,
Aug 13, 2018 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

Views

3.5K

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
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 13, 2018 Aug 13, 2018

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

...

Votes

Translate

Translate
Aug 13, 2018 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);

                   

Votes

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
community guidelines
Enthusiast ,
Aug 13, 2018 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.

Votes

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
community guidelines
LEGEND ,
Aug 13, 2018 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.

Votes

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
community guidelines
Enthusiast ,
Aug 13, 2018 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

Votes

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
community guidelines
Community Expert ,
Aug 13, 2018 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

Votes

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
community guidelines
Enthusiast ,
Aug 13, 2018 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.

Votes

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
community guidelines
Explorer ,
Oct 04, 2020 Oct 04, 2020

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines
Community Beginner ,
Jun 24, 2020 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.

 

 

Votes

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
community guidelines