Quietly Scheming

Another sample component in my continuing quest to spread the word about how expressive Flex applications can be.

This component was inspired by a number of really nice flash sites I’ve seen over the past number of years that make effective use of zooming to navigate information in a way only flash can do. In the right circumstances, a good zoom is the perfect way to both give the user a 1000 foot view of data and quickly drive them down to explore the details as necessary.

So the Landscape component makes it easy to do just that. By default, it essentially behaves like a Canvas component, laying out its children absolutely, sizing itself to the smallest size that can contain them all. But you can pass it any collection of descendants (children, or children’s children, etc), and it will automatically zoom in to the tightest area possible that contains the ’selected’ descendants.

Simple in theory, but fairly versatile in the effects you can achieve with it. Here are three sample applications that use the Landscape component in very different ways.

• LightTable. This is in many ways the most obvious use of the Landscape component. As usual, it’s a photo browsing app based on the Flickr API. Once you start a search, it populates a Landscape with a Tiled set of matching thumbnails. As you page through the thumbnails, the application just focuses the landscape on different batches of the result set. Click on an image, and the application Tells the Landscape to focus in on the single image. Click on the image again to back out.

  • View the demo
  • view the source
  • download the source

• WPA. This little toy app allows you to browse a collection of old WPA posters from the Library of Congress. choose a poster from the list on the left to see the poster and additional details about it. The posters are all aranged in a grid inside the Landscape component. Because the posters are all the same size, and the Landscape itself matches them, the animation as the the Landscape focuses from poster to poster turns into a simple Pan through a clipping window.

  • View the demo
  • view the source
  • download the source

• Declaration. This one’s my favorite. In this app, I’ve filled the Landscape with a high resolution image of the United States Declaration of Independence. On top of that, I’ve overlaid some Rectangular boxes (hidden at first) absolutely positioned on specific parts of the image. Click on the links on the left, and the Application focused the Landscape onto the corresponding hilight box (and shows it). I’m sad to admit that I actually learned a lot about the Declaration in the process of building this application (a lot which seems particularly apropos to today’s political climate in the US).

  • View the demo (warning: This one’s a big download because of the high res image in there)
  • view the source
  • download the source

There’s lots more work to do on this one, but my plate’s pretty full these days, so I wanted to put it out there.

As always, these are released under the MIT open source license, so feel free to take ‘em, extend ‘em, improve ‘em. Let me know if you find them useful.

Comments, feedback, suggestions? Leave them for me here.