Here are a few additional examples of Flex 4 / Spark ItemRenderers. They are similar to the examples I provided in my previous post with a different set of items.
Here is a first example using the new “depth” attribute, the new States syntax and a PostLayoutTransform:
A second example showing a different approach to “zoom” the hovered ItemRenderer:
A third showing a Rotate3D effect:
You can view the complete source code for the application here.
You can download the source code here.
4 Comments
Christophe — one suggestion. When using a ‘zoom’ effect on tiles of items (i.e., a TileList, like you have above), the zoomed in item can make it difficult to ‘roll over’ the items next to it (because they overlap). I’d suggest –
1) make the image itself mouse opaque.
2) add a transparent rectangle to the item renderer that _doesn’t_ zoom.
That will keep the hit area of the item renderers constant, which means you will always be selecting the item the mouse would be over if the renderer wasn’t using a zoom effect.
Ely.
One other suggestion — Chet added the ‘auto reverse’ feature to effects so that roll overs could smoothly reverse themselves when moving the mouse quickly. You might want to use it on that first example.
Great Stuff..
Thanks for sharing .. :)
Ely made the comments about how to resolve the issue with the overlapping images (image mouse opaque + transparent rectangle) – but does anyone have an example for this?
One Trackback
[...] http://coenraets.org/blog/2010/02/more-flex-4-spark-itemrenderer-samples/ [...]