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...

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="145" height="188"
horizontalAlign="center" verticalGap="0"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
mouseOver="currentState='rollState'" mouseOut="currentState=''">
<mx:states>
<mx:State name="rollState">
<mx:SetProperty target="{photo}" name="source" value="{data.altsource}"/>
</mx:State>
</mx:states>
<mx:Image id="photo"
width="120" height="168"
source="{data.source}" />
<mx:Label text="{data.character}" fontWeight="bold" fontSize="14"
color="yellow" width="136"/>
<mx:Label text="{data.name}" fontStyle="italic" />
</mx:VBox>

[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>

[Unregistered]

It flicks one time....
When 1 change...
why?