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
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
Copy link to clipboard
Copied
inserting image dynamiclly to a layer in a symbol can work too
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
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;
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
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?
Copy link to clipboard
Copied
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));