3 Replies Latest reply on Oct 28, 2008 7:01 AM by Solerous

    Avoiding jerky rollover behavior

      I have an image and I'd like to add a rollover effect to it so that a user can click on it as is common in many HTML pages. However the redraw is extremely jerky. It looks as if it were deleting the component (which pulls all the elements underneath it up on the window) and then adding it back with the new image (which pushed all the elements back down again). This is done very quickly and looks very unprofessional. How do I do this in a way that avoids this kind of jerkiness?

        • 1. Re: Avoiding jerky rollover behavior
          -Hob Level 1
          The problem is that when you change the source property on an Image object, it makes another HTTP call to get the new image. It's not smart enough to cache the bitmap data. You can fix the problem by using Eli Greenfield's SuperImage instead of Image.

          http://www.quietlyscheming.com/blog/2007/01/23/some-thoughts-on-doubt-on-flex-as-the-best- option-orhow-i-made-my-flex-images-stop-dancing/
          • 2. Re: Avoiding jerky rollover behavior

            There are 2 ways that you can accomplish this.

            1. If you are using a transparent gif as your logo, you could take advantage of the built-in glow effect. Notice the code below:
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" >
            <mx:Glow id="highlightOn" duration="200" color="0xFFFFFF"
            alphaFrom="1.0" alphaTo="0.5" blurXFrom="0.0" blurXTo="50.0" blurYFrom="0.0" blurYTo="50.0" />
            <mx:Glow id="highlightOff" duration="200" color="0xFFFFFF"
            alphaFrom="0.5" alphaTo="1.0" blurXFrom="50.0" blurXTo="0.0" blurYFrom="50.0" blurYTo="0.0" />
            <mx:Image source="@Embed(source='images/logo.png')" rollOverEffect="{highlightOn}" rollOutEffect="{highlightOff}" x="505" y="24"/>


            2. rather than changing the source of 1 image, try using 2 images that crossfade each other. Notice the code below:
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp();">
            public function initApp():void
            this.logo.addEventListener(MouseEvent.ROLL_OVER, logo_rollOver);
            this.logo.addEventListener(MouseEvent.ROLL_OUT, logo_rollOut);

            public function logo_rollOver(event:MouseEvent):void
            this.logo_highlighted.visible = true;

            public function logo_rollOut(event:MouseEvent):void
            this.logo_highlighted.visible = false;
            <mx:Fade id="fadeIn" duration="200" alphaFrom="0.0" alphaTo="1.0" />
            <mx:Fade id="fadeOut" duration="200" alphaFrom="1.0" alphaTo="0.0" />
            <mx:Image id="logo_highlighted" source="@Embed(source='images/logo-highlighted.png')" visible="false" showEffect="{fadeIn}" hideEffect="{fadeOut}" x="505" y="222"/>
            <mx:Image id="logo" source="@Embed(source='images/logo.png')" rollOverEffect="{fadeOut}" rollOutEffect="{fadeIn}" rollOver="logo_rollOver(event);" rollOut="logo_rollOut(event);" x="505" y="222"/>

            Both examples result in smooth transitions. Let me know how they work...!

            • 3. Re: Avoiding jerky rollover behavior
              Solerous Level 1
              Thanks guys, that worked great. I ended up using solution #2 from #bholli.