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

masking with AS3

New Here ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

im doing a project atm and the last thing i need to complete it is to know how to mask with as3.

im adding a picture dynamically and i need to mask it to a decagon (btw croping can work as well im not sure if its possible).

i need to finish it in 2 days so if some 1 here has a good idea i would super super appreciate it.

thanks and have a nice day

Views

304

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 , Jul 05, 2021 Jul 05, 2021

Hi.

 

An easy way is to have a symbol in the Library exported to ActionScript as Decagon, for example. Then you just instantiate it, add it to the display list and set it as the mask for your images. Like this:

 

 

var decagon:Decagon = new Decagon();

decagon.x = targetImage.x;
decagon.y = targetImage.y;
addChild(decagon);
targetImage.mask = decagon;

 

 

 

Please let us know if this is what you want.

 

Regards,

JC

Votes

Translate

Translate
New Here ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

inserting image dynamiclly to a layer in a symbol can work too

 

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 ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

Hi.

 

An easy way is to have a symbol in the Library exported to ActionScript as Decagon, for example. Then you just instantiate it, add it to the display list and set it as the mask for your images. Like this:

 

 

var decagon:Decagon = new Decagon();

decagon.x = targetImage.x;
decagon.y = targetImage.y;
addChild(decagon);
targetImage.mask = decagon;

 

 

 

Please let us know if this is what you want.

 

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
New Here ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

var decagon:decagon = new Decagon():

 

the animate is not accepting this line becacuse it has ":"

but i have a decagon shaped picture, i added it by new lib and tried to mask it with this line and its still doesnt work

my code looks like this: (mygreen is the stage name of a huge square)

 

var mymask = new lib.maskShape();   -> the decagon shaped pic
mymask.x = 100;
mymask.y = 100;
stage.addChild(mymask);


mygreen.mask = mymask;

 

 

 

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 ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

So you're coding in JavaScript and not AS3.

 

In this case, I think it's easier to use the Graphics API to draw the decagon at runtime. Like this:

var targetBounds = this.targetMC.nominalBounds;
var targetWidth = targetBounds.width;
var targetHeight = targetBounds.height;

this.targetMC.mask = new createjs.Shape(new createjs.Graphics().drawPolyStar(this.targetMC.x + targetWidth * 0.5, this.targetMC.y + targetHeight * 0.5, targetWidth * 0.5, 10, 0, 0));

 

I hope it helps.

 

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
New Here ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

i couldnt understand the where to put it.

i have an image var called thePic. i convert it to bitmap with a new var (myPic1) like this:

myPic1 = new createjs.Bitmap(thePic);

then i dont understand where i put it inside the code u sent me, should i replace the targetMC with myPic1?

and what about the "this".

should it stay or should i replace it with stage or with the parent object?

 

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 ,
Jul 06, 2021 Jul 06, 2021

Copy link to clipboard

Copied

LATEST

Hi.

 

My example was just a generic way of masking a Movie Clip symbol. For bitmaps, you'll just have to replace nominalBounds by getBounds(). And as you're creating the bitmaps dynamically, you'll have to use the variable name. Like this:

var targetBounds = myPic1.getBounds();
var targetWidth = targetBounds.width;
var targetHeight = targetBounds.height;

myPic1.mask = new createjs.Shape(new createjs.Graphics().drawPolyStar(myPic1.x + targetWidth * 0.5, myPic1.y + targetHeight * 0.5, targetWidth * 0.5, 10, 0, 0));

 

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