3 Replies Latest reply: Apr 6, 2013 5:56 PM by Peteroid RSS

    How do I create a Custom/Odd Shaped Mask for Odd-Shaped DisplayObject's?

    Peteroid

      I want to create a Sprite with a custom transparent area...

       

      all of the examples I've found using the 'mask' property of a DisplayObject 'cheat' by creating either a rectangle or an oval as a Shape and use it as a mask... this is 'cheating' because these are very primitive convex shapes that have no holes, and 'graphics' doesn't draw any pixels that aren't shown, so there is no portion of the mask itself where 'this portion is transparent and this portion is opaque'... and such masks have no holes in them...

       

      i want, for example, to take a bitmap image of a dog and have a 'mask' that conforms precisely to the dog's visible shape... or something with see-through holes in it... the application doesn't need to figure out the mask shape on the fly, i'm fine with providing the mask shape at design time... but how do i provide this shape?

       

      in the past, either a specific color was designated as the transparent color (no mask needed)... or a 'mask' was an associated rectangle of the same height and width as the bitmap image with black meaning transparent and white (on any color other than black) was opaque...

       

      so how does one create such a custom/odd shaped mask in ActionScript/Flash Pro? put another way, how does one create iregular-shaped sprites?

        • 1. Re: How do I create a Custom/Odd Shaped Mask for Odd-Shaped DisplayObject's?
          Ned Murphy CommunityMVP

          One way would be to use the brush tool and draw the shape.  Another would be to take a bitmapo of the object and convert it to a vector drawing and then whittle away the portions that you do not want showing

          • 2. Re: How do I create a Custom/Odd Shaped Mask for Odd-Shaped DisplayObject's?
            Peteroid Community Member

            maybe these images will make it clearer what i'm asking...

             

            http://www.peteroid.com/images/plumbers_plunger.jpg

            http://www.peteroid.com/images/plumbers_plunger_mask.bmp

             

            it would be insane to have to build the mask shape at run time using primitives... with no way to add a hole... i'm looking for a way to use the mask image above to only draw its white portion of the image and have the black part be transparent...

            • 3. Re: How do I create a Custom/Odd Shaped Mask for Odd-Shaped DisplayObject's?
              Peteroid Community Member

              this is the brute force method i'm working in right now... this should create a Shape that only has pixels where the 'mask' image has non-black pixels:

               

              package 

              {

                  import flash.display.BitmapData;

                  import flash.display.Shape;

               

                  public class MakeMask

                  {

                      public function MakeMask() {}

                     

                      public static function Make_Mask( bm_data:BitmapData, mask_color:uint = 0x000000 ):Shape

                      {

                          var w:int = bm_data.width ;

                          var h:int = bm_data.height ;     

                          var bm_mask:Shape = new Shape() ;

                          var pixel_clr:uint ;

                         

                          bm_mask.graphics.beginFill( 0xFFFFFF ) ;

                         

                          for ( var y:int = 0 ; y < h ; y++ )

                          {

                              for (var x:int = 0 ; x < w ; x++ )

                              {

                                  pixel_clr = bm_data.getPixel( x, y ) ;

                                 

                                  if ( pixel_clr != mask_color )

                                  {

                                      bm_mask.graphics.drawRect( x, y, 1, 1 ) ;

                                  }

                              }

                          }

                         

                          bm_mask.graphics.endFill() ;

                         

                          return bm_mask ;

                      }

                  }

              }