Using Scaling and Paths for 3-D Motion


Although light and motion are the primary ingredients for a 3-D animation, you can achieve respectable results without ActionScripting or 3-D models. Just using the gradients, scaling, and motion path capabilities that already exist in Flash, it's a snap to put together convincing 3-D animations with minimal wear and tear on your brain.

This lesson uses a couple of tricks in Flash to make a smaller sphere look as if it is rotating around a large sphere. Take a moment to look at the final source file, satellite_final.fla. When you test the movie, you will notice that the two smaller satellite images rotate convincingly around the larger sphere. Now take a close look at the source file.

Hide the first layer, TopSphere, and drag your playhead across the screen. Did you see the problem? Without this layer, the small satellites cut in front of the main large sphere in the middle. Now unhide the layer and take a look at the timeline.

For the first several frames , another copy of the large sphere is placed so that the smaller satellites are hidden. Then a blank keyframe is inserted to remove this sphere so that the smaller satellites appear to pass in front of the larger sphere. Finally, another copy of the large sphere is put in place to hide the smaller spheres and simulate the complete orbit .

Another technique used here is to change the scaling and brightness of the rotating spheres. It has been said before, but it bears repeating:

  • Objects closer to you generally appear to be lighter in color than objects that are farther away.

  • Objects closer to you generally appear to be larger than objects that are farther away.

  • Objects closer to you generally appear to move faster than objects that are farther away.

You can use those concepts to your advantage. You'll be experimenting with these techniques in the next exercise.

Exercise 12.6 Using Scaling and Motion Paths to Simulate 3-D Motion

Now that you know what concepts you can use to simulate 3-D motion, it's time to start applying them.

  1. Open satellite.fla in the Chapter_12/Assets/Motion folder on the CD. Rename Layer 1 as BottomSphere.

  2. Drag a copy of the satellite movie clip onto the Stage, and use the Transform panel (Window > Panels > Transform) with Constrain selected to resize it to 600%.

  3. Add a second layer to the Stage and name it TopSphere. Copy the existing satellite clip and choose Edit > Paste in Place to paste it into the second layer. Now the two spheres are positioned with one directly over the other.

  4. Add a layer between the top and bottom layers , and name it Moon. With the Moon layer selected, drag another copy of the satellite movie clip from the Library onto the Stage. Don't resize this one just yet.

  5. You already know that the moon needs to orbit the larger spherethat's the whole point of this exerciseso it's going to need a motion guide. With the Moon layer selected, click the Add Guide Layer icon beneath the layer stack.

  6. On the guide layer, use the Oval tool to draw an unfilled ellipse on the Stage. The ellipse should be at least twice as wide as the large sphere. (See Figure 12.19.) You can use the Rotate tool to give the ellipse an angle.

    Figure 12.19. At this point in the process, you should have the two large spheres, the small moon, and a motion guide on the Stage.

    graphics/12fig19.gif

  7. Lock and hide the TopSphere and BottomSphere layers. Lock the guide layer, but don't hide it.

  8. Make sure that Snap to Objects is on (View > Snap to Objects), and snap the moon to the guide in the middle of the upper side of the ellipse.

  9. Extend your timeline out to frame 40 by selecting frame 40 in all four layers and pressing F5.

    Tip

    When you are using an ellipse or a circle as a motion guide, you have to be a little careful. Flash really likes to have beginning and ending points for its tweens. When the end-points aren't clearly delineated, Flash will choose the shortest path possible. This can cause some interesting behavior, such as tweens suddenly reversing their motion. One way to handle this is to force a break in the ellipse by removing a line segment. Another option is to place your keyframes so that the distance to the next keyframe is shorter than the distance to the previous keyframe. This is a snap to do with three keyframes.

  10. Insert keyframes (F6) in the Moon layer at frames 20 and 40. Position the satellite clip in frame 20 so that it is on the opposite side of the ellipse from the movie clip in frame 1. Position the clip in frame 40 so that it is just to the right of the clip on frame 1. Use Onion Skinning, if you need it. (See Figure 12.20.)

    Figure 12.20. With Onion Skinning turned on, you can see the relative placement of the moon in the three keyframes. After applying a motion tween, scrub through your animation to make sure that the moon keeps moving in the proper direction.

    graphics/12fig20.gif

  11. Click the Moon layer label to highlight all the frames and add a motion tween. Turn off Onion Skinning and scrub the playhead through the animation to make sure that the moon keeps moving in the appropriate direction.

  12. You can add a little more realism to the scene by scaling the moon and changing the brightness, depending on its position.

    Select the satellite that will appear in the foreground (frame 20), and use the Transform panel to scale it to 150%. As long as you have the satellite selected, use the Effects panel (Window > Panels > Effects) to change its Brightness to 25%. For the two other satellites, all you need to do is change their Brightness to 10%.

    Next, you will make that top sphere disappear when the satellite is supposed to be crossing in front of it.

  13. Unhide any hidden layers, and scrub slowly through the animation. You need to add a blank keyframe to the TopSphere layer just at the point when the moon should start to cross in front of it.

  14. Copy frame 1 of the TopSphere layer, and paste a copy into the frame right after the moon passes off of the sphere again.

  15. You can give your file a lot more impact by changing the background color to black. Double-click the Frames Rate box below the layers in the timeline to quick-launch the Movie Properties dialog box and change the Background Color to black.

  16. Save and test your file.

For added fun, try copying your moon and guide layers into two new layers. Use Edit Multiple Frames to rotate the whole thing; then select all the frames in the second moon layer, and right-click and choose reverse frames. You'll probably have to turn on Scale in the Frames panel for the tween before it'll work properly. You might have to move your frames slightly as well.

As you can see, adding interesting three-dimensional effects to Flash movies is not difficultand you can do it without a lot of ActionScripting.



Inside Flash
Inside Flash MX (2nd Edition) (Inside (New Riders))
ISBN: 0735712549
EAN: 2147483647
Year: 2005
Pages: 257
Authors: Jody Keating

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net