3D: Taking effects into the next dimension

While the Flex team was busy working on Flex 4 and thinking about component architectures, skinning and namespaces, the Flash team was releasing Flash Player 10 with all kinds of cool, new features. One of those features was 3D; the ability to position and orient Flash display objects in Z as well as x and Y.

Flash Player does not support a complete 3D graphics engine. In particular, there is no Z buffer, which means you may encounter some overlapping artifacts if you are trying to render complex 3D models. However, Flash Player does support correct 3D positioning and perspective projection, which allows you to create some stunning visual effects. You may not be able to easily write a 3D modeler without some extra processing on the objects to avoid depth issues, but you can certainly write cover flow-like or other 3D UI effects in a much easier and more visually-correct way than was previously possible.

With all of new features included in Flash Player 10, it behooved the Flex team to take advantage of them. The Flex 4 SDK beta includes new effects that allow you to easily manipulate objects in 3D—just as you can in 2D. In particular, the new subclasses of the transform effects (discussed in Part 1 of this article series) make it possible to manipulate the 3D attributes of an object's transform matrix:

• Move3D exposes from, to, and by properties for x, y, and z to allow you to animate objects between 3D positions (the default position of Flex objects are at z=0).
• Rotate3D exposes from, to, and by properties for the x, y, and z axes for rotation in 3D (the usual 2D rotation is around the z axis only and the rotation values around the other axes are typically 0).
• Scale3D exposes the from, to, and by properties for scaling in x, y, and z to allow scaling in 3D. Note that scaling in 2D is just in x and y, with the z scale factor being 1.

These three classes expose both 2D and 3D properties and make it easy to manipulate objects in all three dimensions simultaneously.

Example: 3D mouseOver

Let's look at the code used to animate the 3D properties of some UI elements.

If you've downloaded the sample files from the first page of this article and want to follow along, this sample is found in the application named ThreeDButtons.

The ThreeDButtons application is a simple application that animates buttons whenever the mouse hovers over them. In this example, both rotation and movement in 3D are animated. You can switch between the effects using the radio buttons at the top of the application. As the user's mouse moves over the buttons, effects are run on each button that either rotate the button 360 degrees around the y axis or move the button toward the viewer and then back into place. The effects are declared like this:

<s:Rotate3D id="rotator" angleYBy="360" 
    autoCenterTransform="true"
    effectEnd="effectEndHandler(event)"/>
<s:Move3D id="mover" duration="200" zBy="-30" repeatCount="2"
    repeatBehavior="{RepeatBehavior.REVERSE}" 
    autoCenterTransform="true" 
    effectEnd="effectEndHandler(event)"/>

The "rotator" effect spins a target object around the y axis, with the transform center anchored at the center of the object. The "mover" effect will move an object toward the viewer (using a decreasing Z value) and then move it back again.

The effects are played when the buttons detect that the mouse is over them, via the mouseOver event. An event handler calls a script function to start the appropriate effect, like this:

<s:Button id="button0" width="100" height="100" 
    mouseOver="animateHover(button0)"/>

The animateHover() function is defined in a script block, as shown below:

private function animateHover(target:Object):void
{
    if (animatingTargets[target.id] === undefined)
    {
        var effect:Effect;
        if (rotationButton.selected)
            effect = rotator;
        else
            effect = mover;
        effect.target = target;
        animatingTargets[target.id] = effect;
        effect.play();
    }
}

In the code example above, the appropriate effect is set up (based on which radio button the user selected), the target is set and the effect is played. We also add an entry into an Object map for the target, to note that we are currently playing an effect on this target. This prevents the effect from restarting if another mouseOver event is broadcast while the effect is still playing. We also register an event listener for the effectEnd event in our effects so that we can remove that entry from the map when the effect is done:

private function effectEndHandler(event:EffectEvent):void
{
    delete animatingTargets[event.effectInstance.target.id];
}

Setting up and playing 3D effects using the Flex 4 SDK beta is fairly straightforward. Next, let's see how we can use Pixel Bender to create shader effects with the Flex 4 SDK beta.

Page 2 of 3

Previous Page

Next Page