If you need to know how to set up your .fla to use Elemental 4D, go
here.
Materials:
Download the finished .fla file
here.
You will need to reset the publish settings to point to the Elemental 4D code package on your machine.
What We're Doing
This lesson will start with two vector drawn butterflies, (legal note: I didn't make them, free stock download). I will make those two vector butterflies rotate around a center point in 3D. This lesson will demonstrate how to use the Stage3D class, the Sprite3D class, and the Shape3D class. It will also illustrate the ease of use for using the visual stage to do Flash 3D as well as the capabilities of Elemental 4D to render vector graphics, and Elemental 4D's forward kinematics.
Step 1: Make a Stage3D
First thing to do is make an instance of a Stage3D. In Elemental 4D you need to have an instance of a Stage3D to put all your 3D objects in. The good news is that Stage3D inherits from MovieClip, so you can just make a new MovieClip, set its linkage to elemental4d.display.Stage3D, and then drag it right out onto the stage. Make a new MovieClip using Insert >> New Symbol, and then set the panel to look like this: (you may have to click the Advanced button to see all the options)
Step 2: Make a Container with Sprite3D
In Elemental 4D, a Sprite3D is a class used to contain other 3D objects, much like you would use a Sprite to contain multiple 2D objects in normal Flash. If you rotate a containing Sprite3D, anything it contains will rotate with it, which is how we're going to make our two butterflies rotate around a center point.
The good news is that Sprite3D extends from your normal everyday MovieClip, meaning it can be used on the visual stage as well. Create a new MovieClip, and set its base class the same way you set the Stage3D's base class, except use elemental4d.display.Sprite3D as the class path. Remember to use a unique class name in the "Class" field!
Step 3: Make two butterflies with Shape3D
Now it's time to make our two butterflies. To be honest, use anything, you don't have to download my stuff, any graphics will do. It will be prettier if you use a vector graphic, but you don't have to.
Good news again! Shape3D extends MovieClip and can just be dragged right out onto the visual stage! Anyone noticing a pattern? Thats right: EVERY Elemental 4D display object extends from MovieClip and can go right on the visual stage. Do just what you did for the Stage3D and Sprite3D to make new Shape3D's, using elemental4d.display.Shape3D as the class path. Do it twice, and then put the vector butterflies (or whatever) into each one.
Step 4: Set Up the Scene
Open the Sprite3D object you made. Put both the butterflies in it, preferably at a y of 0 ish, and equally spaced, one on each side of the center on the x. Now open your Stage3D and put your Sprite3D in that, preferably at 0,0. Now go out to the main Flash stage and drag the Stage3D out into the center of it.
If you published right now, it would look just like a 2D scene. Thats the beauty of Elemental 4D, when the Z is as zero (where it starts) the 3D X and Y coordinates and all the scaling will ALWAYS be the same as a 2D scene.
But we want to make it spin, so we'll write a little script that will spin it on the Y axis. Inside your Stage3D instance, give the Sprite3D the instance name c, standing for container, and then write this:
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
function enterFrameHandler(event: Event) : void
{
c.rotY += 1;
}
If your were to publish it now, you'd get a 3D rotating scene!