7 Replies Latest reply on Jun 10, 2009 4:08 PM by acath

    Rollover/Rollout Issue

    loosepaint

      I have 3 graphic components that are horizontal bars about 100px long and 20px high.  They're stacked over each other vertically on the left edge of the page, with about 10px space between them.

       

      Each component has an UP and an OVER state.

       

       

      When I rollover each graphic they slide to the left and fade to to 50% transparency.  Rollout restores them to the original UP state.

       

      If I move my cursor somewhere in the middle of the graphic, the state changes work well, but if I'm less than 20 or 30px from the end of the graphic the rollover and rollout states occur in rapid succession.  Imagine a horizontal piston at 3K rpm.

       

      Any thoughts?

       

      -jh

        • 1. Re: Rollover/Rollout Issue
          Kevin Rommen Level 1

          do you have an example?

          • 2. Re: Rollover/Rollout Issue
            acath Level 4

            Does your button change sizes in its Up and Over states? If it does, it will flicker wildly. Here's why...

             

            Suppose your graphic is 100px wide in the Up state and 50px in the Over state. You put your mouse over pixel #60. The button goes "yay, I got moused over, better go into my over state!". It goes into the over state and resizes to be 50px. Now it thinks "the mouse is no longer over me. Better go back to my Up state!". It goes into the up state and resizes to be 100px. Now it thinks "yay, I got moused over..."...ad infinitum.

             

            If this is the problem, you can work around it by creating a "hit rectangle" in both states and setting it's opacity to 0.

             

            -Adam

            • 3. Re: Rollover/Rollout Issue
              loosepaint Level 1

              loosepaint.com/Main.swf

               

              Hopefully that will run in your browser.

              • 4. Re: Rollover/Rollout Issue
                loosepaint Level 1

                They doesn't change size, but they do move.

                 

                The bars aren't interfering with each other, it happens when you mouse over the end of each bar. Originally I was using the timeline/move action, but had some difficulty with that.  The bars kept moving to the right and eventually made their way across the page like escaped convicts - a little farther after each rollover.  I only had 2 moves x -30 (rollover) and x +30 (rollout), so the numbers were right.

                 

                Then I tried the state method.

                 

                Then I decided to post.

                 

                -jh

                • 5. Re: Rollover/Rollout Issue
                  acath Level 4

                  Yes, this is exactly what I was describing.

                   

                  Since the bars move in their rollover states, they essentially jump out from under your mouse, which makes them go back to their normal state, which makes them jump under your mouse again, which makes them go into their rollover state, which makes them jump out from under your mouse, which makes them go back to their normal state...

                   

                  The fix is to add a transparent (0-opacity) rectangle that exists in both states, and can act as a "hit area" to accept mouse interaction.

                   

                  -Adam

                  • 6. Re: Rollover/Rollout Issue
                    loosepaint Level 1

                    Won't the same thing happen when the cursor reaches the edge of the transparent rectangle (as opposed to the edge of the actual button)?

                     

                    -jh

                    • 7. Re: Rollover/Rollout Issue
                      acath Level 4

                      I think this will be easier to explain visually. I've attached an FXP with an example. Dive into the two different buttons to see the difference.

                       

                      (I had to rename the FXP to TXT because of our dumb content filter. Remove the TXT extension before opening).

                       

                      -Adam