Creating multiple planes using the '3DPlane guided' component

The '3DPlane guided' component is very similar to the '3D Plane' component except that it does not have its own mouse engine and has the additional 'Guide' parameter. All you need to do is to enter the instance name of any 3DPlane instance into the 'Guide' parameter and the two 3DPlanes will move together as a unit. If you drag and drop the '3D Plane guided' component on top of the main 3DPlane, it will automatically get the 'Guide' parameter from the instance name of the 3DPlane component.

1. Drag the '3D Plane guided' component from Components Panel and drop it onto the 3DPlane component instance. Repeat this once more so that there are three 3DPlanes on the stage.

2. Distribute these three components on the stage so that you have easy access to all of them. Depending on how you position them in relation to one another, they can combine together to form one unit at runtime.

3. Give to new '3D Plane guided' component instances heights of 100 and set the content parameter to 'mc1' (or whatever name you used for the linkage parameter of your target MovieClip). Check that 3DPlane instance name is entered in the 'Guide' parameter.

4. Adjust the 3D position for each of the 3 planes by dragging the small preview window that is in the component properties panel:

Left 'Guide'	Center - 3DPlane	Right 'Guide'

5. Now we'll create 'z-sorting'. We will use the following principle: we'll place the left guided 3DPlane at a depth of 15 when we are viewing the front of it and a depth of 5 when we are viewing the back of it. Add this ActionScript to the left guided 3DPlane:

onClipEvent (load) {
this.swap = function(front) {
this.swapDepths(10*front+5);
};
}

6. Do the same for right guided 3DPlane, but use depths 16 and 6 respectively:

onClipEvent (load) {
this.swap = function(front) {
this.swapDepths(10*front+6);
};
}

7. Remove the 'swap' function for main 3DPlane and replace it with the following code:

this.swap = function(front) {
this.swapDepths(10*front+7);
};
this.swapDepths(17);
_parent.sphere.swapDepths(10);

The above code uses tells the component to use depths of 7 and 17 for the main 3DPlane, and to initialize the main 3DPlane component with a depth of 17 and a central sphere to depth 10.

You may now test and publish your movie. This example may be a bit slow on older computers, as the Flash Player may struggle to redraw 3 large bitmaps with 2 gradients at 30 fps. Note that there is no performance loss when the objects are not moving.