Cool ItemRenderers Made Easy in Flex 4

Flex 4 makes a lot of things a lot easier to build. After looking at custom components and skins in my previous post, here are a couple of samples focusing on ItemRenderers, States, and Animations.

In this first example, I use the new “depth” attribute together with the new States syntax to make sure that the hovered ItemRenderer is always on top of the other ones. I also use a PostLayoutTransform to “zoom” the hovered ItemRenderer without any impact on the position of the other ItemRenderers in this TileLayout.

Here is the source code for the 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"
				autoDrawBackground="false"
				depth="0" depth.hovered="1">

	<s:states>
		<s:State name="normal" />
		<s:State name="hovered" />
	</s:states>

	<s:postLayoutTransformOffsets>
		<mx:TransformOffsets id="offsets" x.hovered="-40" y.hovered="-40" scaleX.hovered="2" scaleY.hovered="2" />
	</s:postLayoutTransformOffsets>	

	<s:transitions>
		<mx:Transition fromState="normal" toState="hovered" autoReverse="true">
			<s:Animate target="{offsets}" duration="200">
				<s:SimpleMotionPath property="scaleX" />
				<s:SimpleMotionPath property="scaleY" />
				<s:SimpleMotionPath property="x" />
				<s:SimpleMotionPath property="y" />
			</s:Animate>
		</mx:Transition>
		<mx:Transition fromState="hovered" toState="normal" autoReverse="true">
			<s:Animate target="{offsets}" duration="200">
				<s:SimpleMotionPath property="scaleX" />
				<s:SimpleMotionPath property="scaleY" />
				<s:SimpleMotionPath property="x" />
				<s:SimpleMotionPath property="y" />
			</s:Animate>
		</mx:Transition>
	</s:transitions>	

	<mx:Image id="image" source="{data.image}" width="80" height="80" horizontalCenter="0" verticalCenter="0"/>

</s:ItemRenderer>

In this second example, the ItemRenderer uses a simple Rotate3D effect.

Here is the source code for the 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"
				autoDrawBackground="false"
				depth="0" depth.hovered="1">

	<s:states>
		<s:State name="normal" />
		<s:State name="hovered" />
	</s:states>

	<s:transitions>
		<s:Transition fromState="normal" toState="hovered" autoReverse="true">
			<s:Parallel>
				<s:Rotate3D target="{image}" angleYFrom="0" angleYTo="360" autoCenterProjection="true" autoCenterTransform="true" duration="400"/>
				<s:Fade target="{image}" startDelay="400" duration="200"/>
				<s:Fade target="{group}" startDelay="400" duration="200"/>
			</s:Parallel>
		</s:Transition>
	</s:transitions>

	<s:Rect id="rect" left="0" right="0" top="0" bottom="0">
		<s:fill>
			<s:SolidColor color="black" alpha="0.7"/>
		</s:fill>
	</s:Rect>

	<s:Group id="group" left="0" right="0" top="0" bottom="0" visible.normal="false">
		<s:Label text="{data.firstName}" verticalCenter="-10" horizontalCenter="0" color="white"/>
		<s:Label text="{data.lastName}" verticalCenter="10" horizontalCenter="0" color="white"/>
	</s:Group>

	<mx:Image id="image" source="{data.image}" width="80" height="80" horizontalCenter="0" verticalCenter="0" visible.hovered="false"/>

</s:ItemRenderer>

You can view the complete source code for the application here.

You can download the source code here.