Andrew Trice

Wednesday November 07, 2007

Bending The Rules

I recently downloaded and started using the latest version of Ubuntu linux, and I became inspired. I love the windowing effects that are now available through the Compiz/Fusion window manager. The windows will bend and distort when you drag them. At first, I thought this was annoying, but I started to love it. When I booted back into windows, I really missed that higher level of interactivity with the desktop. It got me thinking... Can this be done in Flex and Flash?

The short answer... YES

Using the capabilities that are available in the Flex framework, I've been able to recreate this kind of interaction. It is still very rudimentary at the moment. I'd consider this pre-pre-alpha, and there are definitely a few bugs that need to be worked out, but this idea is just too cool to not share.

Here's a quick example... You can click and drag the grid/box below. Watch what happens as you drag it. It will "warp" and bend based on the direction that you are dragging it. In its current state, it works best when you drag horizontally, but does support dragging in both horizontal and vertical directions.

This type of interaction does not only apply to static images. It can be applied to Interactive Flex components, video, etc... Here are a few examples to show its capabilities

• Interactive Flex Components:
  This example is based on a simple DateChooser. You can completely interact with the DateChooser, but you can also click and drag the DateChooser around the screen. When you do this, you can see the dynamic distortion of the component.
  Launch Flex Component Demo
  
  
• Videos:
  This example shows real-time distortion of video playback. In this example, you can see the distortion based on the dragging of the video component, and video playback quality does not suffer. This is probably my favorite demo.
  Launch Video Component Demo
  
  
• Images:
  This example shows real-time distortion of simple Images. In this example, you can see the distortion based on the dragging of the image components.
  Launch Images Browser Demo

This approach can be used to add an additional level of interactivity and richness to any application. It can apply to everything from simple media browsing applicaitons, MDI interfaces, or even basic applicaiton drag/drop. A lot of new doors have been opened, and I'm excited to see where this leads. It is a resource-intensive effect, so be aware.

Enjoy!