Поведение ItemRenderer при событиях мыши

[_SoWa]

Доброго времени суток!
У меня стоит задача - сделать ItemRenderer для списка пользователей социальной сети.
В рендерере есть Group-подложка, который по умолчанию скрыт, и появляется только при наведении мыши на элемент, который отрисует рендерер. В этом Group есть кнопка, которая вместе с контейнером прячется/показывается.
В итоге вроде все хорошо, подложка показывается при наведении мыши и скрывается при уходе мыши с элемента. НО когда мышью наводимся на кнопку, которая в подложке - подложка мелькает, будто происходит событие ухода мыши с элемента. Подскажите пожалуйста, как с этим бороться?

Вот код ItemRenderer`а:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" width="100" height="176" 
				autoDrawBackground="false"
				creationComplete="initComplete(event)"
				mouseOver="group1_mouseOverHandler(event)"
				mouseOut="group1_mouseOutHandler(event)">
	<fx:Declarations>
		<s:Resize id="big" target="{imageRound}" widthTo="70" heightTo="70" duration="100"/>
		<s:Resize id="low" target="{imageRound}" widthTo="50" heightTo="50" duration="100"/>
	</fx:Declarations>
 
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			protected function initComplete(event:FlexEvent):void
			{
 
			}
 
			protected function group1_mouseOverHandler(event:MouseEvent):void
			{
				low.stop();
				big.play();
				plashka.alpha = 1;
			}
 
			protected function group1_mouseOutHandler(event:MouseEvent):void
			{
				big.stop();
				low.play();
				plashka.alpha = 0;
			}
 
		]]>
	</fx:Script>
 
	<s:Group id="plashka" left="5" right="5" top="10" height="150" alpha="0">
		<s:Rect left="0" right="0" top="0" bottom="0" radiusX="4" radiusY="4">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:GradientEntry color="0xf0eee4" alpha="0.1"/>
					<s:GradientEntry color="0xf0eee4" alpha="1"/>
				</s:LinearGradient>
			</s:fill>
			<s:filters>
				<s:DropShadowFilter angle="90" distance="2" strength="1" blurX="4" blurY="8" alpha="0.6" color="0x4d4d4d"/>
			</s:filters>
		</s:Rect>
		<s:Button y="125" label="Выбрать" horizontalCenter="0"/>
	</s:Group>
 
	<s:VGroup left="5" right="5" top="23" height="125" gap="7" horizontalAlign="center">
		<s:Group id="imageRound" width="50" height="50">
			<s:Rect left="0" right="0" top="0" bottom="0" radiusX="45" radiusY="45"> <!-- THIS IS CIRCLEEEEEEE!!!! -->
				<s:fill>
					<s:LinearGradient rotation="90">
						<s:GradientEntry color="0xff00f0" alpha="0.61"/>
						<s:GradientEntry color="0xff0000" alpha="1"/>
					</s:LinearGradient>
				</s:fill>
			</s:Rect>
		</s:Group>
		<s:Label text="{data.first_name}"/>
		<s:Label text="{data.last_name}"/>
	</s:VGroup>
 
</s:ItemRenderer>

[djyamato]

я бы использовал стэйты рендерера, у него уже есть механизм реагирования на события мышки.

<s:states>
		<s:State name="normal"/>
		<s:State name="hovered"/>
		<s:State name="selected"/>
	</s:states>
 
	<s:Group id="plashka" 
			 left="5" 
			 right="5" 
			 top="10" 
			 height="150" 
			 alpha.normal="0"
			 alpha.hovered="1"
			showEffect="Fade">
		<s:Rect left="0" right="0" top="0" bottom="0" radiusX="4" radiusY="4">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:GradientEntry color="0xf0eee4" alpha="0.1"/>
					<s:GradientEntry color="0xf0eee4" alpha="1"/>
				</s:LinearGradient>
			</s:fill>
			<s:filters>
				<s:DropShadowFilter angle="90" distance="2" strength="1" blurX="4" blurY="8" alpha="0.6" color="0x4d4d4d"/>
			</s:filters>
		</s:Rect>
		<s:Button y="125" label="Выбрать" horizontalCenter="0"/>
	</s:Group>
 
	<s:VGroup left="5" right="5" top="23" height="125" gap="7" horizontalAlign="center">
		<s:Group id="imageRound" 
				 width.normal="50" 
				 height.normal="50"
				 width.hovered="150"
				 height.hovered="150"
				 resizeEffect="Resize">
			<s:Rect left="0" right="0" top="0" bottom="0" radiusX="45" radiusY="45"> <!-- THIS IS CIRCLEEEEEEE!!!! -->
				<s:fill>
					<s:LinearGradient rotation="90">
						<s:GradientEntry color="0xff00f0" alpha="0.61"/>
						<s:GradientEntry color="0xff0000" alpha="1"/>
					</s:LinearGradient>
				</s:fill>
			</s:Rect>
		</s:Group>
		<s:Label text="{data.first_name}"/>
		<s:Label text="{data.last_name}"/>
	</s:VGroup>

Обратите внимание:

<s:Group id="imageRound" 
				 width.normal="50" 
				 height.normal="50"
				 width.hovered="150"
				 height.hovered="150"
				 resizeEffect="Resize">

http://help.adobe.com/en_US/flex/usi...3611-7ffe.html

[Bond007]

Попробуйте использовать события rollOut и rollOver вместо ваших.