Rotating around other objects using z-sorting

1. Let's take our first movie 'butterfly.fla' and upgrade it (you can use your own objects as well, the principles remain the same).

2. Give the 3DPlane instance a height of '100' as shown below:

Now the 3DPlane contaning the butterfly picture will rotate at 100px above the zero point (you can check this by testing your movie), i.e. by spherical trajectory. We can increase this visual effect by placing a sphere under the butterfly.

3. Draw a circle on your main timeline with radius 95 (width: 190, height: 190) and give it a radial gradient:

4. Convert the circle into a movieclip (F8 button) and give it the instance name 'sphere'

5. Position the center of the sphere exactly underneath the 3DPlane center (ensure that the sphere MovieClip is positioned under the 3DPlane).

6. Add any background art that you desire:


By default, the 3DPlane creates a 3D effect in one plane only. Using 'z-sorting' we can make objects appear both on top and underneath the 3DPlane. In this example, we know that when we can see the top of the butterfly, it must appear above the sphere, otherwise it must be underneath the sphere. The 'swap' function is called whenever the 3DPlane is overturned. Add the following 'swap' function to the 3DPlane instance:

onClipEvent (load) {
function swap() {
this.swapDepths(_parent.sphere);
}
}

You can now test the movie.


In some cases you may want to create a more rigid 3D rotation that is not as free as the the rotation used in this example. See "Controlling the 3D rotation".