5 Replies Latest reply on Oct 19, 2010 4:57 AM by BhaskerChari

    Stoping a group of child components from listening for mouseover event.

    l33tian Level 1

      Hi,

      I am trying to create a type of navigation system in this little app i'm working on which executes a function when the mouse is rolled over a canvas container. There are four of these canvas container which carry child components like labels, image, and text controls. These canvas containers have an initial alpha values of 0.5 so i want the fade effect to gradually animate to 1.0 when the mouse is rolls over it. When the mouse rolls out i want the alpha to animate the alpha values back to 0.5. I have sucessfuly done this here is a sample code.

       

           public function rollOverEffect(e:Event):void

           {

                var ROFadeEffect:Fade=new Fade(e.target);

                ROFadeEffect.duration=500;

                ROFadeEffect.alphaFrom=0.5;

                ROFadeEffect.alphaTo=1;

                ROFadeEffect.end();

                ROFadeEffect.play([e.target]);

           }

           public function rollOutEffect(e:Event):void

           {

                var ROFadeEffect:Fade=new Fade(e.target);

               ROFadeEffect.duration=500;

                ROFadeEffect.alphaFrom=1;

                ROFadeEffect.alphaTo=0.5;

                ROFadeEffect.end();

                ROFadeEffect.play([e.target]);

           }

       

      So this is working but not perfect...everytime my mouse rolls over the canvas it comes to life (Fades in).....but when it rolls over its child components, it fades out. I really dont follow why. Do i need to stop these child components from recieving events or what

       

      here is the MXML code for the UI

       

           <mx:Canvas  alpha="0.5" id="newMemCanvas" mouseOver="rollOverEffect(event)" mouseOut="rollOutEffect(event)"  x="448" y="32" width="252"      height="218" backgroundColor="#FBFBFB" borderColor="#15B5F7" borderStyle="solid" borderThickness="1" cornerRadius="4">

                <mx:Label x="61" y="24" text="New Members" fontWeight="bold" fontSize="14" color="#0EB6DA"/>

                <mx:Label x="10" y="65" text="0 New Member(s)" fontWeight="normal" fontSize="12" color="#434343"/>

                <mx:Image x="17" y="10" source="resource/studentUser.png" width="36" height="42"/>

                <mx:HRule x="14" y="55" width="226"/>

           </mx:Canvas>

       

           <mx:Canvas  alpha="0.5" id="recPosted" mouseOver="rollOverEffect(event)" mouseOut="rollOutEffect(event)" x="448" y="252" width="252"               height="218" backgroundColor="#FBFBFB" borderColor="#15B5F7" borderStyle="solid" borderThickness="1" cornerRadius="4">

                <mx:Label x="42" y="16" text="Recently Posted" fontWeight="bold" fontSize="14" color="#0EB6DA"/>

                <mx:Label x="14" y="65" text="No Post Yet!" fontWeight="normal" fontSize="12" color="#434343"/>

                <mx:Image x="10" y="10" source="resource/blog_post_new.png"/>

                <mx:HRule x="10" y="51" width="226"/>

           </mx:Canvas>

       

           <mx:Canvas  alpha="0.5" mouseOver="rollOverEffect(event)" mouseOut="rollOutEffect(event)" x="702" y="32" width="252" height="218"      backgroundColor="#FBFBFB" borderColor="#15B5F7" borderStyle="solid" borderThickness="1" cornerRadius="4">

                <mx:Label x="78" y="23" text="Unread Messages" fontWeight="bold" fontSize="14" color="#0EB6DA"/>

                <mx:Label x="17" y="64" text="0 Unread Message(s)" fontWeight="normal" fontSize="12" color="#434343"/>

                <mx:HRule x="14" y="54" width="226"/>

                <mx:Image x="10" y="20" source="resource/unreadMess.png" width="60" height="30"/>

           </mx:Canvas>

       

           <mx:Canvas  alpha="0.5" mouseOver="rollOverEffect(event)" mouseOut="rollOutEffect(event)" x="703" y="253" width="248" height="218"      backgroundColor="#FBFBFB" borderColor="#15B5F7" borderStyle="solid" borderThickness="1" cornerRadius="4">

                <mx:Image x="10" y="10" source="resource/mainLogo.png" width="41" height="35"/>

                <mx:Label x="55" y="18" text="Guided Tours" fontWeight="bold" fontSize="14" color="#0EB6DA"/>

                <mx:HRule x="11" y="51" width="226"/>

                <mx:Label x="10" y="66" text="Tower Building Video" fontWeight="normal" fontSize="11" color="#434343" textDecoration="underline"/>

                <mx:Label x="10" y="89" text="Student Interviews" fontWeight="normal" fontSize="11" color="#434343" textDecoration="underline"/>

                <mx:Label x="10" y="111" text="Social Events" fontWeight="normal" fontSize="11" color="#434343" textDecoration="underline"/>

                <mx:Label x="10" y="132" text="Living the School Life" fontWeight="normal" fontSize="11" color="#434343" textDecoration="underline"/>

           </mx:Canvas>

       

      ...any help will be greatly appreciated...thanx                                                                                    

        • 1. Re: Stoping a group of child components from listening for mouseover event.
          l33tian Level 1

          Anyone out there care to help me on this one...still cant figure whats wrong

          • 2. Re: Stoping a group of child components from listening for mouseover event.
            Claudiu Ursica Level 4

            Set the mouseChildren = false for Canvas.

            Not tested it on your code though.

             

            C

            • 3. Re: Stoping a group of child components from listening for mouseover event.
              l33tian Level 1

              Thanx Claudiu, this works but not completely...i plan to put some other dynamic links on this...but looks like i wont be able to click any other control on the Canvas since its child wont recieve any mouse events...DO you have any other way i can make the child components not respond to mouseover and mouseout events so i can click links, buttons or other controls on the canvas

              • 4. Re: Stoping a group of child components from listening for mouseover event.
                Claudiu Ursica Level 4

                Try to setup states on your Canvases (normal-hovered). So when they are hovered

                they are playing the effect - from normal to hovered and the other way around

                (something like the button class), the effects will be the transitions between

                states (make sure you declare the transitions). If you are already in the

                hovered state you can prevent the transition from happening (you trigger your

                state change on the roll over effect and check if currentState = "hovered").

                Then your children will still be able to fire events.

                 

                C

                1 person found this helpful
                • 5. Re: Stoping a group of child components from listening for mouseover event.
                  BhaskerChari Level 4

                  Hi l33tian,

                   

                  Check the below code with small modifications that I have made to your code in order to make it work...

                   

                  Observe the changes that I have made in your rollOver and rollOut functions and also in the mxml code in which I have taken a seperate canvas for all the canvases and added the mouseOver and mouseOut events on this canvas instead of outer canvas so that we can eliminte the problem of FadeOut when we mouseOver on the child components of canvas...

                   

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
                  <mx:Script>
                    <![CDATA[
                     import mx.effects.Fade;
                     import mx.controls.Alert;
                    
                     public function rollOverEffect(e:Event):void
                         {  
                              var ROFadeEffect:Fade=new Fade(e.currentTarget.parent);
                   
                              ROFadeEffect.duration=500;
                   
                              ROFadeEffect.alphaFrom=0.5;
                   
                              ROFadeEffect.alphaTo=1;
                   
                              ROFadeEffect.end();
                   
                              ROFadeEffect.play([e.currentTarget.parent]);
                   
                         }
                   
                         public function rollOutEffect(e:Event):void
                         {
                             var ROFadeEffect:Fade=new Fade(e.currentTarget.parent);
                   
                             ROFadeEffect.duration=500;
                   
                             ROFadeEffect.alphaFrom=1;
                   
                              ROFadeEffect.alphaTo=0.5;
                   
                              ROFadeEffect.end();
                   
                              ROFadeEffect.play([e.currentTarget.parent]);
                   
                         }


                    ]]>
                  </mx:Script>


                  <mx:Canvas  alpha="0.5" id="newMemCanvas" x="448" y="32" width="252" height="218" backgroundColor="#FBFBFB" borderColor="#15B5F7" borderStyle="solid" borderThickness="1" cornerRadius="4">

                            <mx:Label x="61" y="24" text="New Members" fontWeight="bold" fontSize="14" color="#0EB6DA"/>

                            <mx:Label x="10" y="65" text="0 New Member(s)" fontWeight="normal" fontSize="12" color="#434343"/>

                            <mx:Image x="17" y="10" source="resource/studentUser.png" width="36" height="42" maintainAspectRatio="false"/>

                            <mx:HRule x="14" y="55" width="226"/>
                       <mx:Canvas  width="100%" height="100%" mouseOver="rollOverEffect(event)" mouseOut="rollOutEffect(event)" />
                       </mx:Canvas>

                   

                       <mx:Canvas  alpha="0.5" id="recPosted" x="448" y="252" width="252" height="218" backgroundColor="#FBFBFB" borderColor="#15B5F7" borderStyle="solid" borderThickness="1" cornerRadius="4">

                            <mx:Label x="42" y="16" text="Recently Posted" fontWeight="bold" fontSize="14" color="#0EB6DA"/>

                            <mx:Label x="14" y="65" text="No Post Yet!" fontWeight="normal" fontSize="12" color="#434343"/>

                            <mx:Image x="10" y="10" source="resource/blog_post_new.png"/>

                            <mx:HRule x="10" y="51" width="226"/>
                      <mx:Canvas  width="100%" height="100%" mouseOver="rollOverEffect(event)" mouseOut="rollOutEffect(event)" />
                       </mx:Canvas>

                   

                       <mx:Canvas  alpha="0.5" x="702" y="32" width="252" height="218"      backgroundColor="#FBFBFB" borderColor="#15B5F7" borderStyle="solid" borderThickness="1" cornerRadius="4">

                            <mx:Label x="78" y="23" text="Unread Messages" fontWeight="bold" fontSize="14" color="#0EB6DA"/>

                            <mx:Label x="17" y="64" text="0 Unread Message(s)" fontWeight="normal" fontSize="12" color="#434343"/>

                            <mx:HRule x="14" y="54" width="226"/>

                            <mx:Image x="10" y="20" source="resource/unreadMess.png" width="60" height="30"/>
                      <mx:Canvas  width="100%" height="100%" mouseOver="rollOverEffect(event)" mouseOut="rollOutEffect(event)" />
                       </mx:Canvas>

                   

                       <mx:Canvas  alpha="0.5" x="703" y="253" width="248" height="218"      backgroundColor="#FBFBFB" borderColor="#15B5F7" borderStyle="solid" borderThickness="1" cornerRadius="4">

                            <mx:Image x="10" y="10" source="resource/mainLogo.png" width="41" height="35"/>

                            <mx:Label x="55" y="18" text="Guided Tours" fontWeight="bold" fontSize="14" color="#0EB6DA"/>

                            <mx:HRule x="11" y="51" width="226"/>

                            <mx:Label x="10" y="66" text="Tower Building Video" fontWeight="normal" fontSize="11" color="#434343" textDecoration="underline"/>

                            <mx:Label x="10" y="89" text="Student Interviews" fontWeight="normal" fontSize="11" color="#434343" textDecoration="underline"/>

                            <mx:Label x="10" y="111" text="Social Events" fontWeight="normal" fontSize="11" color="#434343" textDecoration="underline"/>

                            <mx:Label x="10" y="132" text="Living the School Life" fontWeight="normal" fontSize="11" color="#434343" textDecoration="underline"/>
                            <mx:Canvas  width="100%" height="100%" mouseOver="rollOverEffect(event)" mouseOut="rollOutEffect(event)" />
                       </mx:Canvas>

                   

                  </mx:Application>

                  Check this out and please let me know..

                   

                  Thanks,

                  Bhasker