1 Reply Latest reply on Apr 25, 2008 3:24 PM by javamonjoe

    mouseover state flickers

    cmcskevin
      Hi,
      I am using a custom item renderer to show a set of collector cards (normal state shows front, rollover shows back)
      The parent component is a Tilelist containing a set of VBoxes
      On the rollover state, the image continuously flickers. How do I keep it from flickering?

      Here is the code...
        • 1. Re: mouseover state flickers
          javamonjoe
          Your problem stems from multiple mouseOver events. I've made some modifications to your code which seem to work. The states have been removed and replaced with actionScript methods which do the following:

          The method for the mouseOver event swaps the image and disables the event to prevent flicker. The method for the mouseOut event will restore both the image and the mouseOver event.

          The other change is the source of the event. Rather than the box, the photo should be the source of the event just in case the photo is not the same dimension as the box.

          <mx:Script>
          <![CDATA[
          [Bindable]
          [Embed(source="Rick.jpg")]
          private var p1: Class;

          [Bindable]
          [Embed(source="duck.jpg")]
          private var p2: Class;

          private var toggle : Boolean = false;

          private function rollDuck(event : MouseEvent) : void
          {
          // this event is triggered the first time the mouseOver happens.
          photo.source = p2;
          // now remove event barrage to stop flickr
          photo.removeEventListener(MouseEvent.MOUSE_OVER, rollDuck);
          }

          private function rollBack(event : MouseEvent) : void
          {
          // replace original photo
          photo.source = p1;
          // restore roll over event
          photo.addEventListener(MouseEvent.MOUSE_OVER, rollDuck);
          }
          ]]>
          </mx:Script>
          <mx:VBox id="boxedIn" xmlns:mx=" http://www.adobe.com/2006/mxml"
          width="145" height="188"
          horizontalAlign="center" verticalGap="0"
          horizontalScrollPolicy="off" verticalScrollPolicy="off">
          <mx:Image id="photo"
          width="120" height="168"
          source="{p1}" mouseOver="rollDuck(event)" mouseOut="rollBack(event)"/>
          <mx:Label text="Moose" fontWeight="bold" fontSize="14" color="yellow" width="136"/>
          <mx:Label text="Yada" fontStyle="italic" />
          </mx:VBox>