3D MovieClips with Flex and ActionScript 3

September 7th, 2010 by Kawika Heftel

ActionScript 3For whatever reason, tonight my brain will not shut up, even after hours of watching Hulu.  So it’s time to share some of what I learned today.  Attention, non-geeks – this will be quite a technology-heavy post.  But there will be pretty pictures.

Flash has had the ability to do 3D for quite some time now, natively, without using any of the fancy libraries out there like PaperVision3D.  All you have to do is set the z property on a MovieClip.  Seriously, that’s all it takes.  And you know how you can rotate a MovieClip by setting the rotation parameter?  Now there are rotationX, rotationY, and rotationZ parameters.  Changing any of these through code will result in the MovieClip being displayed in three dimensions.  Groovy!

Here is a small example.  There are two ellipses that move back and forth in the Z axis.  They also rotate in three dimensions, one around the X axis and one around the Y axis.

Click here to download the source FLA for this demo.  It is a Flash CS5 file, so you must have Flash CS5 to open it.

Here is the source code, in case you don’t have Flash CS5.  All you need to do is add two MovieClips to the stage, one called ellipse1 and the other called ellipse2.

const BACK:int = 1000;
const FRONT:int = -100;

function frameHandler(e:Event):void
	var mc:MovieClip = e.currentTarget as MovieClip;
	if(mc.z > BACK)
        mc.z = BACK;
        mc.dir = -1;
    else if (mc.z < FRONT)
        mc.z = FRONT;
        mc.dir = 1;
    mc.z += mc.dir * mc.moveSpeed;
	mc.rotationX += mc.rotXSpeed;
	mc.rotationY += mc.rotYSpeed;

ellipse1.shapeIndex = 0;
ellipse1.dir = 1;
ellipse1.rotXSpeed = 3;
ellipse1.rotYSpeed = 0;
ellipse1.moveSpeed = 10;
ellipse2.shapeIndex = 1;
ellipse2.dir = 1;
ellipse2.rotXSpeed = 0;
ellipse2.rotYSpeed = -5;
ellipse2.moveSpeed = 15;
ellipse1.addEventListener(Event.ENTER_FRAME, frameHandler);
ellipse2.addEventListener(Event.ENTER_FRAME, frameHandler);

More to come in the future! 3D Flash is an exciting world to explore!

EDIT: I realize the title of this blog post is slightly misleading.  I mentioned Flex, and the Flex part doesn’t come until the next post.  My apologies.  This example of 3D in ActionScript 3 is entirely Flash-based.

No related posts.

Posted in Technology

Tags: , , , , , , ,

2 Responses to “3D MovieClips with Flex and ActionScript 3”

  1. Yay! Fun Actionscript. Keep it coming!

    --Daniel Larsen, on September 7th, 2010 at 7:16 pm
  2. I love ActionScript. It’s fun. Thanks for commenting! It fills me with warm fuzzies :)

    --Kawika Heftel, on September 7th, 2010 at 7:19 pm

Leave a Reply