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.

  • Ross R

    2 things:

    1. Why did you use scaleX and scaleY to enlarge the image in the first example? It seems to me it would have been simpler to animate on the Z axis.

    2. When you MouseOut of the item its depth reverts immediately to 0, causing it to fall behind the next object in the grid as it animates back down to the start position. How would you remedy this?

    • alias

      hay, how to fix this by using Z axis….can u pls help……….

  • Faruk

    Hi Christophe;

    These are really cool samples, I am following your blog and you always do really good exercises.

    And one more thing;
    I am waiting a RobotLegs sample from you, I hope you have time for that

  • John P

    Christophe,

    Fun stuff. Looking forward to using your expertise to build some knockout prototypes and building compelling BI User Interfaces with the Attivio platform to solve customer problems.

  • Pingback: More Flex 4 / Spark ItemRenderer Samples()

  • Dennis

    Hi Christophe,

    I try-out to run the project but i’m missing the lib, i’m using Flash builder SDK 4.0.0

    I loved your solution because im looking for a nice Image grid example like this

    all the best,

    Dennis

  • find the system easy flex has a really nice about this development

  • Tom

    Finaly flex 4 makes easy cool animation (like Silverlight does already …) … Flex becomes fantastic ! no more extra lib needed to make cool stuf …

  • Andrew Clark

    Inspirational examples. I’m trying to do something similar to your first example going from a thumbnail image to a larger version but with additional textual infromation provided.

    This works but causes some of the images to reach the edge of the container and make some of the text (and image) unavailable.

    How would I go about moving any image hovered over to the middle of the tilelist and then return to its original poition when it is no longer hovered over

    tx

  • Kristtee

    Wow! you rock. i have never seen like this done in FB. Thank you. I want to know how to make each item clickable. say when i click on an image, it open a new web page to that person’s blog, like that. is it possible? please let me know.
    Thank you
    kristtee

    • ju

      You can use the property itemselected.

css.php