Skinning a list in Flex 4 – Magnifier Effect
Here’s a little video about how to use different Spark components to make a magnifier effect for a list. To create this effect I did the following:
- used the Spark Component model with Skins and States
- employed the new Spark item renderer that support Designer/Developer workflow
- Parametrize Spark Skins with CSS
You can download the final project from here and watch the video here.
Great! This was something I was looking for. Something that I’m missing, is the magnefier changing back to the last-selected option when hovering out.
Nice tutorial, very good place to start studying new flex4 capabilities.
Thanks
Very nicely done.
The Style tips and the setLayoutTransform() – in your video – are really nice.
Thank you very much.
PS Also loved the whiteboard view of the magnifier algorithm.
Very cool effect, might be nice if it works in the TileLayout view, could be really cool for music application views (Album artwork) etc….
Magnifier Effect doesn´t work Adobe Flash Builder (Flex 4) final version!
when we have new verison? error on tag reziseMode=”scale”
@marcelo
Use the fillMode instead of resizeMode.
Great work.
I’m a newbie, starting to learn Flex 4. I tried using this code with a list that has data provider as the .lastResult of a CallResponder (I’m using Remoting to get data from a php service).
I get the image name and path from the php service. Then create the ‘Source’ path for the bitmapImage using a simple method like this getThumbs(folder:String, picName:String):String.
First I tried to display using a simple item renderer to display the thumbnails with pic name, and was successful in displaying it perfectly.
But when I use your code, nothing is showing up in the list. Ofcourse I changed the {data.bitmap} and {data.name} to point to the function {getThumbs(data.folder, data.pic_name)} and {data.pic_name} respectively. But I still get nothing in my list
Can anyone point out to the possible issue here?
I really like the way you explain the formula that is used for the resizing effect. I am disappointed with the performance though, if you mouse around even moderately it jumps a hell of a lot.