Tutorial: Page (1) of 1 - 01/20/06 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Motion Quick Tip 3: Particles on a Motion Path

Using particles to create an animated dotted line By Dave Nagel
In our previous two quick tips on Apple's Motion 2.0, we looked at methods for animating an arrow around a background to illustrate a path of movement over a geographical region. It makes sense though to include some sort of dotted line along the path to show the viewer not just where the arrow is going, but also where it's been. Can we do it, once again, without any keyframing? Why, yes, we can. 

Once again, this tutorial is going to rely on the behavior called Motion Path. But this time, instead of creating new motion paths for our dotted line, we'll be reusing the motion path of our arrow object. And we'll combine this with the creation and modification of particles to produce the effect with absolutely no keyframing.

Here's basically what we're going for.

Because we've covered motion paths already fairly extensively, we'll focus this time on the use of particle with a Motion Path behavior. If you need some background on motion paths not covered here, you can find it in our previous Motin quick tips.

? Part 1: Basic Motion Paths
? Part 2: Using Multiple Motion Paths to Create Stopping Points

If you do not already have a project that involves motion paths, you can download my project from the second installment in this series by clicking on this link:

? Download: FollowArrow.zip (16 KB)

Creating the particles
1. Begin by drawing a square, circle or rectangle on the canvas of your previous project. I'll draw a white circle.

2. Select the new object, and then choose Object > Make Particles. A new object will appear in your Layers palette called "Emitter."

3. Select this Emitter, and go to the Inspector palette. For the basic controls, use these settings.

4. Now scroll down to the Cell Controls section of the Emitter properties. You're going to want to make several changes to the cells' parameters. Set the Birth Rate to something like 10. (This sets how quickly the particles are emitted; the higher the value, the tighter the dots will be along the path of motion.) Set the life to something that matches the duration of your sequence. I'll set mine to 10. And set the Speed to 0. This way a particle will stay in place when it's born, rather than flying across the screen. And adjust the scale so that it's the size that you want. (This will vary depending on the size of your original oibject.)

Here are all of my cell settings.

Now you have your particles set up. It's time to put them in motion.

Reusing your existing motion paths
Because we already have motion paths attached to our arrow object, and because we're just going to make this dotted line follow that arrow, we don't need to create all new motion paths from scratch for our particles. Instead, we can just reuse the existing ones.

Here's how you set up this animation.

1. Select the Emitter in your Layers palette, and then move it so that its anchor point is directly on top of the anchor point of your arrow at the starting point of the sequence.

2. Now select the three Motion Path behaviors that are attached to your arrow object. (Shift-click or Command-click to select multiple objects in the Layers palette.)

3. Now hold down the Option key and drag these behaviors on top of the Emitter object in the Layers palette. This will copy the behaviors to the emitter.

4. Now, it's likely that the motion paths are not lined up properly in terms of their starting and ending points in the timeline. So go down to the timeline and manually move them to their proper positions so that they line up with the motion paths attached tot he arrow object.

If you select all of the Motion Path behaviors, you should see them lined up on your canvas.

That's basically it. (Not too shabby for an entire animation that uses no keyframes.) Now all you need to do is test it. If you find that the dots on the line are spaced too closely or too far apart, just go back and adjust their birth rate to alter the spacing of the dots.

And here's our final dotted line animation.

If you have any further questions, be sure to visit me in the Apple Motion forum at DMN Forums by clicking here.

Page: 1

Related Keywords:apple motion, motion opaths, dashed line, dotted line, animated line, animated arrow

