Skip to main content
N
NirKarni
Participant
July 5, 2021
Answered

masking with AS3

  • July 5, 2021
  • 2 replies
  • 679 views

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

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    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

    2 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community ExpertCorrect answer
    Community Expert
    July 5, 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

      N
      NirKarniAuthor
      Participant
      July 5, 2021

      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;

       

       

       

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      July 5, 2021

      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

      N
      NirKarniAuthor
      Participant
      July 5, 2021

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

       

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices