4 Replies Latest reply on Jan 7, 2010 8:47 AM by allanjard

    State changing using mouseOver and child elements

    allanjard Level 1

      Hello all,


      I've been looking at a very simple little application which will change it's state based on the mouseOver / mouseOut events (to get a handle on states in Flex 4). The trouble I'm having is that the element which I have the event listeners on has child elements, and when the mouse passes the element boundary the state 'flickers' - presumably due to the bubbling effect.


      Example swf: http://sprymedia.co.uk/media/misc/flex4_scroll.swf

      Example mxml: http://sprymedia.co.uk/media/misc/flex4_scroll.mxml.txt


      Is there a way to stop the flicker in states in this case? Or have I got the basic principles wrong?


      Many thanks,


        • 1. Re: State changing using mouseOver and child elements
          David_F57 Level 5



          Experimenting to get the feel of states is a good idea, using states to effect things like alpha on other components is very risky , when using states this way you have to consider what happens in child components, for instance the scrollbar has a skin which doesn't involve alpha changes but parts of the scroller like thumb, background and buttons have skins that use alpha to control shading, these alpha values will always override parent settings


          Another consideration is what states are there by default, with spark you very rarely get to see what states containers or components have as they are embedded in the skin.


          Now if you took the scroller and put it into a container and then controlled the container alpha the scroller could never exceed that parameter even when its alpha values change.


          The thing is never fight the urge to play its a wonderful process of discovery and thats where you will get the most out of learning about capabilities and limitations.




          • 2. Re: State changing using mouseOver and child elements
            allanjard Level 1

            Hi David,


            Thanks very much for the reply. I do like experimenting, and I'm loving what I can do with Flex 4. I keep thinking "I wonder if I can..." and typically I can :-)


            Regarding the issue here: I can see what using states to change the alpha might result in odd things happening from your post, but I'm still not sure how to address to problem with the state 'flicker' when passing between child elements (mousing around the scroller for example causes state 'flicker' (for lack of a better phrase). Here is another example which uses a position change for the state change - no transition effect:


            Example swf: http://sprymedia.co.uk/media/misc/flex4_scroll2.swf

            Example mxml: http://sprymedia.co.uk/media/misc/flex4_scroll2.mxml.txt


            When you pass the mouse over the elements of the scroll bar it jumps around. Obviously you would have something like this in "read life" but it shows the state issue I'm having.




            • 3. Re: State changing using mouseOver and child elements
              rfrishbe Level 3

              I think your code here looks perfectly fine.  You can use states to control the alpha value of components.  The alpha that gets applied in the skin to the subcomponent will also be applied if it gets set.  I think the only issue here is that instead of mouseOver/mouseOut, you should use rollOver/rollOut, which handles child components better.



              • 4. Re: State changing using mouseOver and child elements
                allanjard Level 1

                Hi Ryan,


                Ahhh! That's it. I would never have guessed about there also being a rollOver/Out as well as a mouseOver/Out. Thanks very much that does the trick perfectly!