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.
Thanks for this example! I've been trying to figure out how to get that center registration point working. Is this the only way to do it with Flex components? Or could you do some matrix transformation to make it work maybe?
I noticed in the FxRotate3D class they do some interesting magic to make the 3d registration point in the center but I can't replicate it. Again, thanks for the example, it helps a lot.
Best,
Lance
@Lance, I'll take a look at the FxRotate3D – that's a Gumbo thing, right? I haven't messed with Gumbo much because I have my hands full with other goodies. But soon, very soon. :-)
Could you try to reproduce some odd scrollbar behavior that I'm seeing that may be a bug?
Your center rotate project makes a good test case.
Increase the Panel3D contents size so that the panel has scrollbars.
Add two more Panel3D objects to the project. Scroll bars on panels to the right will raise up the Panels to the left.
This is exactly what I did.
In Panel3D change the height of the image to 500 to get scrollbars in the panel.
In _3D_centerRotate.mxml, copy the Container tag and paste it twice.
fix the unique id's for "panel" and "panel3d"
offset the two new panels. Add -50 to the second panel x= value and -100 to the third panel x value.
Run the project and you should see 3 panels offset by 50. Scroll the right panel and you should see it raise up the panels to the left of it. Use the sliders to rotate and move the panels and you should see the panels stay offset by the scroll.
If you take the objects out of 3d space, then the scrollbar works normally. To test this I just deleted all the rotation, scale and z settings of the panels.
If this isn't a bug, then how do you put multiple objects with scrollbars in 3d space without the scroll bars effecting each other? Hopefully you will see the same issue that I'm seeing.
Thanks,
Steve
@Steve, any chance you could just send me the code? I'm sort of in the middle of moving and working on too many projects.
@Steve, I tested this out and OUCH! That is seriously messed up. I have no idea why the scrollbars in one Panel would affect those in another Panel.
I'll post this example and if Tink thinks it's a bug then I'll submit it to Adobe.
Note: in case you didn't know, Tink is pretty much an encyclopedia on all things Flash and will know right off the bat if it's a bug with the player or my code. :)
I might be missing something here, but I don't see the rotationX, rotationY, rotationZ in the panel option. And it won't compile adding those values.
I am using Flex Builder 3.0.2. and made sure I had the 3.3 SDK installed.
Ah, apparently it took a couple of restarts of the Flex Builder for them to show up.
Thanks so much for this little demo. _SUPER_ helpful, and fun :-)
Erik