Transforming components in 3D with Flash 10/Flex 3.2
Do you want to know what a Flex <Panel> looks like when skewed on the z-axis – or any axis for that matter – using the new Flash 10 3D tools? Well, take a look. The top version is applying the transformations directly to a <Panel>. The bottom version is applying the transformations to a <Container> with the <Panel> centered inside it.
| view source |
In the version below the <Container> has clipContent=”false” because the center of the <Panel> is placed at the x=0, y=0 of the <Container>.
| view source |
A few things to note
You can see that the components, especially the text, look a little ragged. That’s because, as I understand it, you’re actually looking at a Bitmap representation of the component. So if you are doing any transformations in 3D and then bring your component back to to a 2D position you should set the component.transform.matrix3D = null. That way the component will no longer be rendered to a Bitmap. You can read more about that at Bit-101.com where Keith talks about the 3D capabilities of the new Flash 10 player. Be sure to read the comment by cnuuja – #11 - who works for Adobe on the 3D features for the Flash 10 player.
There are some really good notes on the OpenSource.Adobe site about the new 3D features. I’m still working my way through understanding everything there.
scaleZ
I could have swore I saw the z-scale slider effecting the position/placement of the <Panel>. Maybe I was imaginging things ’cause it don’t seem to be doin’ much now.
Next Up
This is all cool and very easy to do. Next is getting the head around the Matrix3D class where are the cool toys are. Look for more examples soon.
I got the idea for these experiments from a post by Allen Rabinovich at Yahoo.com.
If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.
Lance
