Yahoo! Flash (R) Blog

3D with Flash 10: Simple Way First

As you are probably well-aware, Flash Player 10 was recently released. In this milestone release, Adobe once again introduced a number of great new features, making the player ever so powerful and useful in a wide range of projects. As we are actively exploring the new player for the many upcoming components and libraries in the ASTRA toolkit, we thought it would help to dedicate a few blog posts to the features we found most interesting.

To start off, we’ll take a look at the feature we like to call “the new dimension.” For the first 9 versions, the native rendering in Flash was limited to the Cartesian coordinates. During that time, many ways to “fake” 3-dimensionality were invented and publicized, from the simple “skewing” methods to entire bitmap-based 3D rendering libraries, like Papervision and Alternativa. Now, in the 10th version of Flash, a fair amount of 3D rendering capabilities have finally become native.

To check out this new feature, take a look at a simple application (Note that you need to install Flash Player 10 to see it):

Note: The proper version of Flash Player is not installed or JavaScript is not enabled. Unable to display SWF content.

Notice that instead of the old-time z-plane rotation (DisplayObject.rotation), we can now rotate a display object in all three planes (DisplayObject.rotationX, DisplayObject.rotationY, and DisplayObject.rotationZ), with perspective distortion thrown in for free. Also, in addition to the x and y coordinates, we can modify the z coordinate, which is visually equivalent to “scaling” the display object, but doesn’t actually change the scale values.

The beauty of this new feature is that it preserves the relation among coordinate systems of nested display objects. What does that mean? Well, let’s say you had a few display objects that you wanted to place in a stack, and then observe that stack as a 3D object — well, long story short, you can do just that.  Any changes to the 3D coordinates of the parent display object propagate down to the child, and so we can take the example above, and kick it up a notch:

Note: The proper version of Flash Player is not installed or JavaScript is not enabled. Unable to display SWF content.

Now we’re cooking with gas! With just a few lines of code (included below the cut), we put together a simple and elegant way to look at a stack of images.

These newly added features for creating 3D interfaces will greatly facilitate building rich interactive applications, but they are not quite perfect. As Justin Everett-Church once explained, using these properties is akin to creating “postcards in space” — it’s still a far cry from creating true 3D objects and environments, because modifying the three dimensions of rotation and position of planar objects doesn’t deal with more complex issues like back-face and occlusion culling, drawing primitive elements in 3D, etc. We’ll look at new features that go further in enabling more complex 3D work in the next post.

The MXML code for the examples above is below the cut.

Example 1:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”329″ height=”427″>

<mx:Label y=”34″ text=”X rotation” horizontalCenter=”0″/>
<mx:Label y=”80″ text=”Y rotation” horizontalCenter=”0″/>
<mx:Label y=”126″ text=”Z rotation” horizontalCenter=”0″/>
<mx:Label y=”167″ text=”Z position” horizontalCenter=”0″/>

<mx:HSlider y=”179″ id=”zPos” value=”0″ minimum=”-50″ maximum=”50″ horizontalCenter=”0″ liveDragging=”true”/>
<mx:HSlider y=”46″ id=”rotX” value=”0″ minimum=”-90″ maximum=”90″ horizontalCenter=”0″ liveDragging=”true”/>
<mx:HSlider y=”92″ id=”rotY” value=”0″ minimum=”-90″ maximum=”90″ horizontalCenter=”0″ liveDragging=”true”/>
<mx:HSlider y=”138″ id=”rotZ” value=”0″ minimum=”-90″ maximum=”90″ horizontalCenter=”0″ liveDragging=”true”/>

<mx:Image rotationX=”{rotX.value}” rotationY=”{rotY.value}” rotationZ=”{rotZ.value}” z=”{zPos.value}”
y=”233″ width=”182″ height=”138″ themeColor=”#FFFFFF” id=”myImage” scaleContent=”true” autoLoad=”true” horizontalCenter=”0″>
<mx:source>http://farm4.static.flickr.com/3136/2412535804_6fccd7a155.jpg</mx:source>
</mx:Image>

</mx:Application>

Example 2:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”329″ height=”427″>

<mx:Label y=”34″ text=”X rotation” horizontalCenter=”0″/>
<mx:Label y=”80″ text=”Y rotation” horizontalCenter=”0″/>
<mx:Label y=”126″ text=”Z rotation” horizontalCenter=”0″/>
<mx:Label y=”167″ text=”Z position” horizontalCenter=”0″/>

<mx:HSlider y=”179″ id=”zPos” value=”0″ minimum=”-50″ maximum=”50″ horizontalCenter=”0″ liveDragging=”true”/>
<mx:HSlider y=”46″ id=”rotX” value=”0″ minimum=”-90″ maximum=”90″ horizontalCenter=”0″ liveDragging=”true”/>
<mx:HSlider y=”92″ id=”rotY” value=”0″ minimum=”-90″ maximum=”90″ horizontalCenter=”0″ liveDragging=”true”/>
<mx:HSlider y=”138″ id=”rotZ” value=”0″ minimum=”-90″ maximum=”90″ horizontalCenter=”0″ liveDragging=”true”/>

<mx:Container id=”imageStack” width=”182″ height=”138″ y=”228″ rotationX=”{rotX.value}” rotationY=”{rotY.value}” rotationZ=”{rotZ.value}” z=”{zPos.value}”
horizontalCenter=”0″>
<mx:Image z=”50″ width=”182″ height=”138″ themeColor=”#FFFFFF” id=”myImage1″ scaleContent=”true” autoLoad=”true”>
<mx:source>http://farm3.static.flickr.com/2033/2411743383_38aa13de89.jpg</mx:source>
</mx:Image>
<mx:Image z=”0″ width=”182″ height=”138″ themeColor=”#FFFFFF” id=”myImage2″ scaleContent=”true” autoLoad=”true”>
<mx:source>http://farm4.static.flickr.com/3282/2411740475_d6a44c913b.jpg</mx:source>
</mx:Image>
<mx:Image z=”-50″ width=”182″ height=”138″ themeColor=”#FFFFFF” id=”myImage3″ scaleContent=”true” autoLoad=”true”>
<mx:source>http://farm4.static.flickr.com/3136/2412535804_6fccd7a155.jpg</mx:source>
</mx:Image>
</mx:Container>

</mx:Application>

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!