Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

3D Distortion in Flex and Flash

0 (0 Likes / 0 Dislikes)
[Adobe Developer Connection] [ codedependent(); ] [keystrokes clicking] [Chet Haase - Flex SDK Team] Today on CodeDependent I'm going to talk about 3D. In particular, I'm going to talk about an artifact that someone noticed When they were working on some application, they had some beautiful vector art of a map and then they wanted to spin it around in 3D, and they noticed in some situations when they spun it, things got really blurry, even though it was vector art. They couldn't understand what was going on, why was there so much distortion of this supposedly vector art created object because Flash is really good at drawing vector graphics, right? So I looked into it and figured out that it is a bit of an eccentricity with how Flash handles 3D coupled with what you're transforming and how much you're scaling your object. So let's take a look at a simple example. So I've got this application with two circles on the screen. And I've got a slider down at the bottom, and the slider is going to control the amount of rotation in y, the rotation around the y axis of both of these circles. And they're both going to rotate around their center. All right, so we're going set up a projection center of the center of the object for each one of these things. And they're simply going to spin around that axis, so as I pull it around, they're going to spin around in 3D. And watch what happens to the one on the left. It got all nasty, blurry, didn't it? And the one on the right looks great, right? So every time we come to zero, you'll notice a little blip there, as we get back to zero. The one on the left comes back into focus, right? So what is going on there? So let's take a look at how the objects are created. So we have two groups down here, and each group has a circle inside of it, which is created by this ellipse call. So this first object, which I call smallCircle, has a width and a height of 20. So you'll notice in the application, the objects were much bigger than that, right. So I'm actually drawing a circle much smaller, and then I'm scaling it up. So we had width and height of 20. I position it at a certain place inside the container, and then the group itself is scaled by 10. Right, so we have a black stroke on this thing, and then we scale the object up. So what is happening is we're drawing a really small circle, and then we're scaling the thing, but because it's vector art, and Flash is really good at drawing vectors, that happened seamlessly. We don't get any blurry artifacts by scaling vector art. It knows, okay, well, I've scaled this thing, but I still know how to draw a circle with nice, crisp lines, which is why it looks good when there is no rotation on it. So that's fine for the small circle. Then we have this other thing down here that I call the bigCircle. So we have the group here. Again, we're scaling the group by 10, so we're going to be scaling up this thing, and then we have the ellipse that defines the big circle. But you'll notice this has a width and a height of 200, so a much bigger circle, In fact, exactly this big. And then we're going to scale this thing down. So we're actually going to draw a big circle, downscale it, and then the group itself is scaling it back up, sorting of putting it back in its natural size of 200 x 200. So then we take the slider, and we pull the slider back and forth, and we call the little handler to handle those things and set the rotation y value. And in the meantime, we get this really funky artifact, so what's going on? So the circle on the left is being drawn really small and then scaled up by Flash, but when Flash draws things in 3D, it actually captures a bitmap of that object and then positions that bitmap around in 3D. It's not drawing vector art in 3 dimensions. Instead, it's drawing vector art onto, let's say, a postcard, kind of a virtual postcard. And then it's positioning the virtual postcard around in 3 dimensions. All right, well, if the inherent object behind it all is really small, that's what is going to be drawn into the bitmap that Flash uses for 3D. So it goes and it says, okay, you've got a 20 x 20 circle. I know how to draw that, so it's going to create a bitmap that's about 20 x 20, and then it's going to position that in space. While in the meantime, it scaled it up because there is a group transform on it, and you get this blurry artifact because all of a sudden a really small bitmap is being scaled up to a very large size. Meanwhile, this object on the right is drawn at a natural size of 200 x 200, so that when Flash goes to create a bitmap of that object, it draws a larger object, a larger bitmap, and then when it transforms that around in space, there's no problem because the size we're looking at on the screen is the same size, it was the same resolution, that it was drawn into the bitmap at. So this is not necessarily a pointer--always draw large objects-- it's more information to be aware of if you're manipulating things in 3D, especially if you're scaling those objects. You may want to make sure, especially if you see some of the blurry artifacts, like we do here on the left, that the objects that you're using are being drawn at a good enough inherent size natural size, that Flash is creating an appropriate bitmap to be transforming in 3D for them. If you want to see the code for this application and other related applications, check out my Blog at

Video Details

Duration: 5 minutes and 16 seconds
Language: English
License: All rights reserved
Genre: None
Views: 89
Posted by: adobetv on Oct 21, 2010

Chet explains how scaling artifacts can sometimes distort the visuals when using the 3D capabilities of Flex and the Flash Player, and how you can avoid these problems.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.