Home > flex, video > Skinning a list in Flex 4 – Magnifier Effect

Skinning a list in Flex 4 – Magnifier Effect

August 16th, 2009

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.


Categories: flex, video Tags:
  1. Oscar
    August 18th, 2009 at 13:10 | #1

    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.

  2. André
    August 19th, 2009 at 20:06 | #2

    Nice tutorial, very good place to start studying new flex4 capabilities.
    Thanks

  3. September 1st, 2009 at 23:45 | #3

    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.

  4. February 16th, 2010 at 20:01 | #4

    Very cool effect, might be nice if it works in the TileLayout view, could be really cool for music application views (Album artwork) etc….

  5. marcelo
    March 23rd, 2010 at 22:53 | #5

    Magnifier Effect doesn´t work Adobe Flash Builder (Flex 4) final version!
    when we have new verison? error on tag reziseMode=”scale”

  6. Hilary Bridel
    June 4th, 2010 at 09:03 | #6

    @marcelo
    Use the fillMode instead of resizeMode.

  7. September 5th, 2010 at 06:01 | #7

    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?

  8. Neil
    November 18th, 2010 at 19:10 | #8

    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.

Comments are closed.