Wednesday, June 3, 2009

Creating Vista's Flip 3D effect component in Flex

Lately I have come to really like the flip3D window switcher in vista/7, even more than expose in OS-X. I was wondering if i could reproduce the same effect using the new native 3D transformations introduced in Flash 10 using Flex without papervision3d.

To my delight, I found out that a simple compiler argument "-target-player=10.0.0" will open up the world of native 3D for Flex SDK 3.3. Although, obviously, it creates a SWF targeted for Flash Player 10 therefore it crashed if opened in Flash Player 9 or lower.

I started by wanting to create an MXML component that I can just use just like a Canvas, using addChild() and removeChild() to add and remove windows. I liked the idea so much, I ended up extending mx.containers.Canvas :)

For 3D Matrix tweeing, I found out that there was a bug in Flex SDK 3.3's Matrix3D.interpolate() that ignores scaling so I used an excellent alternative code I found at:

http://wonderfl.kayac.com/code/5587dec25ecd87aff4b7670f42352c61dcbb11c5

This is what I have ended up with - Desktop.as (view source is enabled):

The code is very rough there are some bugs I haven't squashed yet, but I am happy with it for now =) I have a feeling this code will be quickly outdated with the next Flex version already in beta, but it was a fun personal exercise. I intend to do more of these in the future and share it here. If you like the what this component does, you are welcome to extend/fix it for your use.

1 comment:

  1. Very nice article, i think that a fadeout should be added when the window is the foremost.

    ReplyDelete