Flex Thumbnail Browser Component

Regular readers of my site have probably noticed that I have been an inactive blogger over the past couple of months. There’s a very good reason for this. Since starting my own consultancy, I have been very busy! I think I may actually be working for the first time in my life – and having a helluva time doing it. What’s been keeping me so busy? FLEX! For the past four months I have had my head down in Flex Builder creating a revolutionary RIA (beta coming next month).

It’s my year anniversary working with Flex (save a two month stint with Ruby on Rails) and in that year I’ve learned a great deal. Most of my days are spent writing ActionScript 3 components and I must admit that I think I’m getting very good at it. So to ‘prove’ it and to share with the Flex community, I am offering my first Flex component for download!

ThumbBrowser is a knock off of a new widget found in iPhoto ’08. It is a small component that will collect all of your image thumnails into one component. When you move your mouse across the component, you get previews of all the thumbs in collection. You can view a demo here and download the source here.

Some quick notes:

  • The component’s dataProvider property only accepts an array of URL’s/paths to images (I hope to add XMLList soon)
  • You can set 4 styles: borderColor, borderThickness, cornerRadius, and backgroundColor
  • Component dispatches only a click event. I would like to add a progress and complete event in the next release
  • The full size image is downloaded, but the image is scaled so only a small representation of the images actually stays in memory (I think this is true, please correct me if I am wrong)
  • I will add ASDoc style comments over the next few days, and hope to submit it to FlexLib.
  • Although there is no open-source license attached to the component, please feel free to use is it as you please.
  • ThumbBrowser might make a better Adobe AIR component, as loading a large collection of images over the web could take a while.

I’d love to hear your feedback on the component, and please send suggestions as to how I might be able to make ThumbBrowser better!


Adobe Flex Builder

2 thoughts on “Flex Thumbnail Browser Component”

  1. Works really well, functions just like it does in iPhoto. Is there also a property to set which image is the cover image or does it just take the first photo in the collection?

  2. Yip It works well. Nice Function, but how about when you move your mouse scroll down or up it would change the image preview of all the thumbs in collection and at the same time it will display the filename of the image.

Comments are closed.