If you need to know how to set up your .fla to use Elemental 4D, go here.

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.

This lesson will create an instance of the Cube class primitive, with 6 sides (obviously) that consist of 6 separate movie clips. I will also make the Cube rotate based on mouse position. This lesson will demonstrate how to use the Stage3D class, the Cube class, and the Face3D 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.

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)

To make an instance of the Cube class, you will need to make a new movie clip and change its linking base class to elemental4d.display.Cube, similar to how we made the Stage3D above. You'll then want to open up that object, so that we can make our 6 faces inside it.

This is where it gets a little tricky. One, the Cube class is really a rectangular prism, it will take any dimension sides as long as they actually fit together. So the first tricky part is making sure you make 6 sides that will validly fit together. The next tricky part is that you need to have their dimensions precise, otherwise you'll get open space on edges and stuff. And the hard part about that is that you have to resize elements inside the movie clips, not just resize the clips themselves. To make these things work in 3D, I need to make the engine mess with each objects width and height and skewing and stuff to make them look 3D. So if you're messing with their width and height and stuff, we're gonna get some unexpected results.

Once you have 6 faces made, you need to open each one's linkage and set the base class to elemental4d.display.Face3D and make sure to put each of the 6 inside the Cube instance you made. Then put that Cube inside the Stage3D instance, and the Stage3D instance out onto the stage.

I know what you're wondering... How does it know which face is which? Because you're going to tell it. When I made the Cube primitive, I made it search through its children and search for the names front, back, left, right, top, and bottom. So give each of your faces its appropriate name, and when you publish you should see your Cube!

At this point however, your Cube is just sitting there, and most likely, all you can see is its front face. We need to write a little script to make it follow your mouse. First, give the Cube inside your Stage3D an instance name, I used c. In an earlier tutorial, I listened for Event.ENTER_FRAME to move the object. Now I'm gonna teach you something new. If you listen for Event.RENDER, it will only dispatch when the Stage3D is actually updating itself, so if someone were to turn off the autoRender, it wouldn't just keep updating anyway like Event.ENTER_FRAME would. Either event will work, but I'm going to use Event.RENDER here. Inside the Stage3D, where your Cube is, write this:

addEventListener(Event.RENDER, renderHandler);

function renderHandler(event: Event) : void
{
   c.rotY += mouseX / 100;
   c.rotX += mouseY / 100;
}

Once you do that, you should see something like this: