3D Rotation Around Another Object

In the previous effect, you animated a circle to make it appear to rotate in 3D space. Although rotating objects are fine by themselves , the effect of depth is heightened when you make one object appear to orbit another. This is an effect that you'll have no doubt seen various times with text. Here you're going to make your circle from the previous effect orbit a larger circle. To achieve this you need to manipulate the z-order of movie clips on the stage.

Z-ordering in Flash

Z-order determines which movie clips appear on top of others when two or more movie clips overlap. Clips with higher z-order (or depth) appear on top of (and if opaque , obstruct) clips with lower depths. Flash has the following rules that determine the z-order of movie clips.

For dynamically created movie clips:

• Movie clips that are dynamically created using ActionScript (using the duplicateMovie() , attachMovie() and createEmptyMovieClip() methods ) are created on a separate z-order stack, the depth of which is higher than the z-order stack for movie clips that you create on the stage. This means that dynamically created movie clips will always appear on top of movie clips that are created on the stage .

• The depths of dynamically created clips must be explicitly set when the clips are created .

For movie clips placed on the stage during authoring:

• Clips on higher layers will have higher depths and appear in front of clips on lower layers .

• For clips on the same layer, the latest clips to be added to the layer appear in front of clips added earlier (for example, if you have a movie clip partially obstructing another one on the same layer, you can select the partially obstructed clip, cut it and then paste it in place and it will appear in front of the clip that was previously obstructing it) .

Knowing the z-order rules noted above will come in handy when following a great number of the effects in this book from this point on, since achieving 3D realism in Flash relies heavily on juggling z-orders.

1. Follow along with the steps in the previous effect (3D rotation using scaling) to create a rotating sphere (or you can use basic_tweened_rotate.fla as a starting point for this example).

2. Insert a new layer ( Insert > Layer ), label it background, and move it under the myCircle layer.

3. In frame 1 of the background layer, choose a fill color that's different from the color you chose for your circle and draw a larger circle using the Oval Tool (O) (holding down the SHIFT key to constrain it, as usual). For our new circle we've chosen a dark gray color with a black stroke.

4. Select your new background circle and center it behind the smaller one. If you'd rather not eyeball it, you can use the Align horizontal center and Align vertical center buttons on the Align panel (CTRL/CMD+K), with the To Stage button toggled. Your stage should now have an object that looks somewhat like a wheel smack in the middle of it.

   

5. Go ahead and test the movie at this point. You will see that the smaller circle rotates in front of the larger one. You want it to rotate around it. For this you need to manipulate the z-order of the two circles at key points within the animation. In this case, manipulating the z-order is as simple as placing the larger circle in a higher layer for certain parts of the animation. You can also achieve this effect by masking the myCircle layer with a rectangular fill that covers the whole stage and has a hole the size of the larger circle in the middle of it. The effect is achieved by placing this mask over the myCircle layer during those frames that it should appear behind the larger sphere ”--see tween_around_mask.fla for a working example.

6. Returning to the present example, to start you need a new layer above the myCircle layer, so create a new layer ( Insert > Layer ) and call it foreground :

   

7. If the playhead isn't on frame 1, rewind the movie using Control > Rewind (CTRL/CMD+ALT/OPT+R) and then step through the animation one frame at a time using Control > Step Forward (.) until you reach the frame where the smaller circle first overlaps the larger one on its way back from the right edge of the stage. In our movie, this occurs at frame 11.

   

8. Click on the foreground layer to activate it and make sure that the playhead is in the frame you identified in the previous step. Insert a blank keyframe (F7) in the foreground layer to mark this position.

   

9. Continue scrubbing the timeline using Control > Step Forward (.) until you reach the frame where the small circle overlaps the larger one on its way back from the left edge of the stage. Create another blank keyframe at this frame on the foreground layer (F7). In our movie this occurs at frame 27.

   

10. On the same frame that you put the second blank keyframe on the foreground layer, select Insert > Keyframe (F6) for the background layer (click on the background layer to activate it if it isn't active).

11. On the same frame that you put the first blank keyframe on the foreground layer, insert a blank keyframe (F7) for the background layer, making sure that the background layer is still selected. Once you're done, your timeline should resemble the one shown below:

    

12. The only thing left to do is to copy the larger circle to the first blank keyframe in the foreground layer. To do this, select frame 1 of the background layer and choose Copy Frames (CTRL/CMD+ALT/OPT+C) from the Edit menu. Finally, click on the first blank keyframe in the foreground layer and choose Edit > Paste Frames (CTRL/CMD+ALT/OPT+V).

    

Test out the movie and you should see that the smaller circle now rotates around the larger one in a realistic fashion. The finished effect can be seen in basic_tweened_rotate_around.swf , available with the downloaded sample files. All we did was copy the larger circle to a higher layer for those frames where the smaller circle was supposed to be behind it. Doing this gave the larger circle a higher z-order and led to it obstructing the smaller circle. This is the simplest way of creating the effect of one object rotating around another. Another way to create the same effect uses motion paths and is the topic of our next effect.