Flex item renderer - change alpha when clicked - apache-flex

Question

I want to change the alpha of Rect when list item is clicked but I could not solve that. And I don't know how exactly do this as I'm doing it on Rectangle inside item renderer, is there any suggestion?
CODE:
<s:List id="list" labelField="name" dataProvider="{items}" top="20" bottom="20" left="20" right="20"
contentBackgroundAlpha="0"
change="list_changeHandler(event)">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="100%" height="200" autoDrawBackground="false" contentBackgroundAlpha="0">
<s:Group width="100%" height="100%">
<s:Rect id="rect" left="0" right="0" top="0" bottom="0" alpha="0.3">
<s:fill>
<s:SolidColor color="#FFFFFF"
/>
</s:fill>
</s:Rect>
<s:Image source="{data.icon}" top="30" horizontalCenter="0"/>
<s:Label text="{data.name}" top="100" horizontalCenter="0" color="#101010" fontWeight="bold" fontSize="16"/>
<s:Label text="{data.line1}" top="130" horizontalCenter="0" color="#343434" fontSize="14"/>
<s:Label text="{data.line2}" top="150" horizontalCenter="0" color="#343434" fontSize="14"/>
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:layout>
<s:TileLayout requestedColumnCount="3" requestedColumnCount.landscape="4" columnAlign="justifyUsingWidth"/>
</s:layout>
</s:List>

Answer 1

You can use the ItemRenderer's states for this. Add these states to your ItemRenderer:
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color.normal="0x0000ff"
color.hovered="0x00ff00"
color.selected="0xff0000" />
</s:fill>
</s:Rect>
With this code your renderer will be blue by default; it will turn green when you hover over it; and red when you select it. The same can of course be done with the alpha value.