Rotate a sprite using ActionScript3

Question

I want to rotate a sprite in 3d using AS3. The example below, tells how to do rotate an image using MXML and AS3, however, I want to do it through pure AS3:

Example

thanks

Answer 1

Flex is AS3. Flex compiles down to actionscript. Often, it's just a declarative (as opposed to the imperative) way to get things done.

So the meat of that example is in the code snippets:

        private function playEffect(target:Animate, angle:Number):void {
            if (!target.isPlaying) {
                rotY += angle;
                target.play();
            }
        }

//snip...

<fx:Declarations>
    <fx:Number id="rotY">0</fx:Number>
    <s:Rotate3D id="fxRotate3DNeg" target="{image}" angleYTo="{rotY}"
                autoCenterTransform="true" />
    <s:Rotate3D id="fxRotate3DPos" target="{image}" angleYTo="{rotY}"
                autoCenterTransform="true" />
</fx:Declarations>

What's doing the work is the "Animate" object in conjunction with the two "Rotate3D" objects. So to get this to work in pure AS3, the only tough thing that's required is linking to the flex libraries. Depending on your IDE, that's pretty easy to do.

From there all you have to do is create the objects you want, imperatively instead of declaratively. So instead of doing things like:

<fx:Number id="rotY">0</fx:Number>

You need to do:

var rotY:Number = 0;

---

Once you know that, converting from Flex to AS3 and vice versa is pretty straightforward. The translated flex code would look something like the following in ActionScript:

import spark.effects.Rotate3D;

var rotY:Number;
var fxRotate3DNeg:Rotate3D;
var fxRotate3DPos:Rotate3D;

rotY = 0;

fxRotate3DNeg = new Rotate3D(image);; //the constructor sets the "target" property
fxRotate3DNeg.angleYTo = rotY;
fxRotate3DNeg.autoCenterTransform = true;

fxRotate3DPos = new Rotate3D(image);
fxRotate3DPos.angleYTo = rotY;
fxRotate3DPos.autoCenterTransform = true;

Now, that's off the top of my head, glancing at the Rotate3D API and typing in this text editor so I'm sure it's not perfect but it should give you a clear idea on how to move forward. If you need more help, let me know and I could translate more of the example.

I hope that helps,

--gMale

EDIT: As I look at the code, one other tricky point is that the angleYTo properties are bound to rotY. So to truly get this to work, you have to explicitly set those properties in the playEffect function. As in:

        private function playEffect(target:Animate, angle:Number):void {
            if (!target.isPlaying) {
                rotY += angle;
                //manually set properties
                fxRotate3DNeg.angleYTo = fxRotate3DPos.angleYTo = rotY;
                target.play();
            }
        }

Alternatively, you could imperatively create the data binding, which is pretty easy to do. Then, the playEffect function would require no modification.

Answer 2

Its like rotating the object as you usually do. However in 3d space you will have to use: sprite.rotationY

Make sure you are exporting for flash 10 or later since the 3d functionality doesnt exist in earlier versions.