Video: A Moment of Reflexion

Finally, after great suspense and bitings of nails, Adobe TV has posted my Reflexion Container video. This video was meant to be Part 1 in a sequence of 2 parts, but for reasons that escape me, Part 2 (What a Drag) got posted first. Many things in life are beyond our control: the weather, the things our children say in public, and our cravings for bacon. Apparently, the order of videos posted on Adobe TV is just another random factor in life.

This video shows a container that displays an image along with its reflection. The application has sliders to control the various parameters of the reflection, so that you can see how these parameters affect the realism of the reflection. The reflected image can be changed by clicking on a different thumbnail or, as we saw in the previous Drag and Drop video, by dragging and dropping that thumbnail onto the reflection container.

The techniques used in creating the reflection are not new; I wanted to create this demo to show how they might be used in a sample application container. Also, I wanted to expose the controls to the reflection parameters so that we could see how the various mechanisms affect the result. A couple of resources that I consulted for the reflection technique include the ReflectionPanel demo by Romain Guy (also the photographer of the pictures used in the demo) in a Java book that I've read entitled Filthy Rich Clients and, a bit closer to Flex, an article by Ben Pritchard on the Adobe Devleoper Connection site..

Video being what it is, you may not be able to see some of the impact of the reflection parameters that clearly. For example, when I talk about blurring the reflection to make it more realistic, it actually looks kind of blurry to begin with. Here is the demo itself so that you can play with it directly:

And here is the source code for anyone wishing to see how it actually works. I should point out that it's not the cleanest code, since it was written in a conference rush. The reflection code is the main point of it all, and it's pretty striaghtforward, but the mechanisms of updating the image and recreating the reflection sprite could definitely be cleaner. But in the interests of getting the code out there for people to see, I'm posting it earlier than I might otherwise.

Here's the video - enjoy: