3D Rotation using Motion Guide


In your original 3D rotation effect using scaling, you used multiple keyframes and tweens ( alongside changes in scale) to achieve the 3D rotation effect. Here you're going to create the same effect using a motion guide. Most animation programs allow you to draw a path that an object should follow in a given amount of frames . Using a motion guide, or motion path as it is also known, can greatly cut down development time when you need your object to follow an irregular path that has lots of twists and turns. In Flash, you draw a motion path in a special type of guide layer called the motion guide. Motion paths are very powerful animation tools and can easily allow you to create complex animations that would otherwise take many keyframes and lots of tweaking.

  1. Follow steps 1 to 4 from the basic 3D rotation using scaling effect so that you have a myCircle movie clip centered on the stage (alternatively, you could use the movie clip featured in basic_tweened_rotate.fla as a starting point for this example).

  2. You'll right away add the motion path to your circle: with the myCircle layer selected, choose Insert > Motion Guide . You should see a motion guide layer called Guide: myCircle appear above the myCircle layer.

    click to expand
  3. Using the Oval Tool (O) with a stroke color that is different from the color of the circle (so you can see it easily) and no fill, draw a large, flat oval on the motion guide layer. This is going to be the path that your circle follows :

    click to expand
  4. It's a good idea at this point to lock your myCircle layer so that you can easily work with the motion path layer without selecting the circle by mistake. Once you've locked the layer, select a tiny portion of the upper arc of the motion path, toward the middle, and delete it to create a small hole (zooming in helps). The important point is that motion paths cannot be closed shapes ”they need a beginning and an end.

    click to expand
  5. You're done with the motion guide layer itself, so lock it and unlock the myCircle layer since you're going to be manipulating that next . Click on frame 32 of the motion guide layer and select Insert > Frame (F5) to extend the motion path all the way to frame 32.

  6. Now click on frame 32 of the myCircle layer and add a keyframe ( Insert > KeyFrame or F6). Your timeline should now resemble the one below:

    click to expand
  7. Zoom in so that you can see both sides of the motion path at either side of the hole. Click on frame 1 of the myCircle layer to move the playhead there. Then click on the registration point (center) of the myCircle movie clip and drag it to one of the ends of the motion path. It should snap into place ”if it doesn't, make sure Snap to Objects is turned on under the View menu (CRTL/CMD+SHIFT+/).

    click to expand
  8. Click on frame 32 of the myCircle layer to move the playhead and snap the myCircle movie clip to the other end of the motion path.

  9. Click on frame 1 of the myCircle layer and select Insert > Create Motion Tween to create the animation.

    click to expand
  10. Play the movie by pressing ENTER, and you should see that the circle follows the motion guide.

  11. Now let's add the scaling effects. Click on frame 1 of the myCircle layer. Scale the myCircle clip to 33% of its normal size using Modify > Transform > Scale and Rotate... (CTRL/CMD+ALT/OPT+S).

  12. Starting with frame 2, use the Control > Step Forward (.) command to move the playhead forward until your myCircle clip reaches the first horizontal extreme of its motion path. Create a keyframe here (F6) and scale the myCircle clip to 66%.

  13. Repeat the previous step for when the circle reaches the other horizontal extreme.

  14. Continue scrubbing the timeline until you reach the end of the motion path and scale the myCircle clip to 33%. When you're done, your timeline should resemble the one below:

    click to expand
  15. Test the movie to see the 3D motion path rotation.

    click to expand
  16. If you tried out the first basic 3D rotation effect in this chapter, you should notice that this effect too is plagued by the two issues mentioned there in step 12, so following steps 13 to 17 of that effect will fix those issues for this one too; no more abrupt stopping and easing at key points will help create the illusion of motion in 3D. Additionally, feel free to adapt the "3D rotation around another object" effect to use the motion path animation instead of the version using basic 3D rotation with scaling.

3D Rotation Effect Variations

You can modify the 3D rotation effects presented here in many ways to create variations and combinations. To do this, create the effects inside a movie clip so you can apply transformations to the whole animation. Turning the animation and scaling it, as well as using multiple instances of it will allow you to create more complex scenes. For a simple example of what is possible, take a look at the sample file sphere_variation.fla from this chapter's examples:

click to expand



Flash 3D Cheats Most Wanted
Flash 3D Cheats Most Wanted
ISBN: 1590592212
EAN: N/A
Year: 2002
Pages: 97

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