5 Replies Latest reply on Nov 26, 2010 2:18 PM by Shongrunden

    Problem: alpha mask disables mouse events.

    hd465

      Hi,

       

      I want to create my own container which uses alpha masking. So, here's my solution (my 'my:CustomContainer' code):

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx"
                maskType="alpha">
           
           <s:layout>
                <s:VerticalLayout/>
           </s:layout>
      
           <s:mask>
                <s:Group>
                     <s:Rect width="{this.width}" height="{this.height}">
                          <s:fill>
                               <s:LinearGradient rotation="-90">
                                    <s:GradientEntry alpha="0" color="0x000000" ratio="0" />
                                    <s:GradientEntry alpha="1" color="0x000000" ratio="1" />
                               </s:LinearGradient>
                          </s:fill>
                     </s:Rect>
                </s:Group>
           </s:mask>
      
      </s:Group>
      

       

       

      It works correctly if I create one instance of this container in my application:

       

       

      (...)
           <my:CustomContainer>
                <s:Button label="A" />
           </my:CustomContainer>
      (...)
      

       

       

      But when I create two or more instances of this container:

       

       

      (...)
           <s:layout>
                <s:HorizontalLayout/>
           </s:layout>
      
           <my:CustomContainer>
                <s:Button label="A" />
           </my:CustomContainer>
      
           <my:CustomContainer>
                <s:Button label="B" />
           </my:CustomContainer>
           
           <my:CustomContainer>
                <s:Button label="C" />
           </my:CustomContainer>
      (...)
      

       

       

      then only button A works correctly (buttons B and C just don't get any mouse events - there is no interaction with them). How to fix that?

       

      I'm sure that the problem is with maskType="alpha" property inside CustomContainer mxml code. When I change it into maskType="clip" everything works fine. As I know from Flash and AS3, to use alpha masks we need to change 'cacheAsBitmap' property of masked Sprite (or any DisplayObject) into true. It seems that second and third instance of my CustomContainer are just redrawn into bitmap, so mouse events don't work. But it's only my supposition, and I do not have an idea how to fix that. Any help or ideas?

        • 1. Re: Problem: alpha mask disables mouse events.
          hd465 Level 1

          As I noticed it's not a problem with multiple instances. Problem exist just if I set different position than default x="0", y="0" to my container (when I have multiple instances of this container other have different x and y because of HorizontalLayout).

           

          I've found some bug connected to this problem: https://bugs.adobe.com/jira/browse/SDK-25492?page=com.atlassian.streams.streams-jira-plugi n:activity-stream-issue-tab

           

          It's just stupid. This is my first component of my first big project in Flex 4. Great beginning...

          • 2. Re: Problem: alpha mask disables mouse events.
            hd465 Level 1

            Okhay, I've found something that could be a solution. But it totaly makes no sense for me:

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      maskType="alpha">
                 
                 <s:layout>
                      <s:VerticalLayout/>
                 </s:layout>
            
                 <s:mask>
                      <s:Group>
                           <s:Rect width="{this.width+this.x}" height="{this.height+this.y}">
                                <s:fill>
                                     <s:LinearGradient rotation="-90">
                                          <s:GradientEntry alpha="0" color="0x000000" ratio="{0*(this.height)/(this.height+this.y)}" />
                                          <s:GradientEntry alpha="1" color="0x000000" ratio="{1*(this.height)/(this.height+this.y)}" />
                                     </s:LinearGradient>
                                </s:fill>
                           </s:Rect>
                      </s:Group>
                 </s:mask>
            
            </s:Group>

             

             

            I just set mask's rectangle to 'this.width+this.x' width and 'this.height+this.y' height. And it works...

             

            It may look like flex draws this mask's rect from (0,0) of the application's stage, but it's not. If you set for example x="5" and y="5" to this rect above, You'll notice that flex draws this rect from (0,0) of the component. So it's totally stupid for me to do what I've done in example above, but it's the only way it works. What's more if you set width="{this.width+this.x-5}" you'll see, that there's a 5px's wide area inside this component, where mouse events don't work. WTF...

            • 3. Re: Problem: alpha mask disables mouse events.
              Flex harUI Adobe Employee

              Hmm.  Maybe we don't parent the mask.  Then the mask shape does have to be

              in stage coordinates.

              • 4. Re: Problem: alpha mask disables mouse events.
                aterground

                I have this problem to.

                Code with borderMask spoils MouseEvent.CLICK hits over someChild.

                 

                class MaskedGroup extends Group
                {
                        ....

                       override protected function createChildren():void
                        {
                                         super.createChildren();

                                        // borderMask
                                         borderMask = new Image();
                                         borderMask.source = new BorderMask();
                                         borderMask.mouseEnabled = false;
                                         borderMask.mouseChildren = false;
                                         borderMask.mouseFocusEnabled = false;
                                         borderMask.source.mouseEnabled = false;
                                         borderMask.source.mouseChildren = false;
                                         borderMask.percentWidth = 100;
                                         borderMask.percentHeight = 100;
                                         addElement(borderMask);
                                         maskType = MaskType.ALPHA;
                                         mask = borderMask;

                 

                                        someChild = new Image();
                                         someChild.source = new Icon();
                                         addElement(someChild);
                         }

                       ....

                }

                 

                It assignment: maskType = MaskType.ALPHA; spoils events for right bottom corner with someChild, it is exactly. How to fix it?