7 Replies Latest reply on Apr 26, 2012 4:44 PM by jbfiedler2

    mask and mouse events

    Piotr Wierzgała

      Hi,

       

      I have a object (1) that I need to cover with a mask from a file (3). When I apply the mask to the object it looks as expected (3). The only thing that doesn't work as I want are mouse events that are dispatched over areas coverd with the mask (4, black areas). Could you tell me what I should do make object to dispach events only when mouse is over area not coved with the mask, please?

       

      mask.jpg

       

      Here's the code I use:

       

      <s:Group width="100" height="100"
           rollOver="group_ROLL_OVER(event)" rollOut="state_ROLL_OUT(event)">
           <s:Rect width="100%" height="100%" maskType="luminosity">
                <s:fill>
                     <s:SolidColor color="0xff0000" />
                </s:fill>
                <s:mask>
                  <s:Image source="assets/mask.png" />
                </s:mask>
           </s:Rect>
      </s:Group>
      
        • 1. Re: mask and mouse events
          Shongrunden Adobe Employee

          Try setting mouseEnabledWhereTransparent="false" on the Group.


          • 2. Re: mask and mouse events
            Piotr Wierzgała Level 1

            Setting mouseEnabledWhereTransparent to false doesn't work. I also found luminosityClip property which set to true should clip masked object but it doesn't work too. I'm out of ideas how to solving this problem right now but I don't belive that it can not be done.

            • 3. Re: mask and mouse events
              Flex harUI Adobe Employee

              I'm not sure if image masks work or not.  I know they didn't used to but

              maybe that's new to FP10 and I don't know about it.

              • 4. Re: mask and mouse events
                Piotr Wierzgała Level 1

                Image masks works - they mask object properly but I didn't find out how to disable mouse events on the masked areas.

                 

                The unwanted events issue doesn't happen when you use masks created with graphics property so I decided to use following workaround:

                 

                /* Getting mask's bitmap data.*/
                var maskGroup:Group = new Group;          
                var bitmapData:BitmapData = (new MaskClass as Bitmap).bitmapData;
                
                
                /* MaskClass holds PNG object with transparent areas. Below I copy non transparent pixels on my maskGroup. */
                maskGroup.graphics.beginFill(0xffffff);
                for (var y:uint=0; y<bitmapData.height; y++) {
                     for (var x:uint=0; x<bitmapData.width; x++) {                              
                          if (bitmapData.getPixel(x,y) != 0) { //Pixel is not transparent.
                               maskGroup.graphics.drawRect(x,y,1,1);
                          }
                     }
                }
                maskGroup.graphics.endFill();
                 
                /* Masking object. */
                addElement(maskGroup:Group);
                maskedObject.mask = maskGroup:Group ;
                

                 

                It's sooo bad but at least it works Please let me know if you have better solution.

                 

                Ps.

                In my first post I used graphics with very simple shapes to present my problem. In fact I need to use complex mask that would be very difficult to draw with graphics property.

                • 5. Re: mask and mouse events
                  Flex harUI Adobe Employee

                  Interesting.  Flash Player must not have updated its hit detection to deal

                  with image masks.  It is still using edge detection.  I suppose you could

                  scan the image and create the set of edges.  Not sure that would be any

                  faster.

                  • 6. Re: mask and mouse events
                    knadiminti

                    Hi,

                     

                    I have the exact opposite problem.

                     

                    I've set a png image to be the mask for a UIComponent. (which I'm using as an item renderer for a list in a mobile application).

                     

                    The problem now is that I can't change the list item selection when I click on an item - it doesn't seem to raise any mouse events at all!

                    Removing the mask fixes it - but I need the mask to shape the items as trapeziums...

                     

                    I've tried using hit areas, but that doesn't seem to do anything.

                    I've also tried to disable mouse events on the mask sprite - no use.

                     

                    Any ideas?

                     

                    Regards,

                    Krishna

                    • 7. Re: mask and mouse events
                      jbfiedler2

                      Not sure if this is the right place but I discovered something that may be useful.

                       

                      If you do a 3D rotation on an alpha masked container then you get the MouseEvent's from its children. I did this by adding the following lines to one of my Flex 4 layouts:

                       

                      ...

                      newMatrix.appendRotation(0.001, Vector3D.Y_AXIS); //note: inconsequential non-zero rotation

                      element.setLayoutMatrix3D(newMatrix, false);

                      ....

                       

                      I think this works because the 3D rotation forces cacheAsBitmap on the component which magically fixs hit detection. At one point I got MouseEvent's working by setting cachePolicy="on" on the masked Group. However I am unable to reproduce that solution at this time...

                       

                      I was very happy when I got this working but there is one major caveat. Since this cache's the component as a bitmap the visual quality can be SEVERELY degraded.  In the end I ended up just using a overlay with mouseEnabled="false" instead. Anyways I hope this helps.