Motion Paths

Interactivity, Sound, and Curvy Motions in Flash

After positioning the MySite.com symbol where I want it in the lower left corner, I'm ready to set my endpoint. Since I'm going to do a more elaborate movement sequence so that you can get a glimpse of the power of tweening, I'm going to set the endpoint along the left edge in the center. In other words, it will finish slightly above and to the right of the point at which it started. But it's got a ways to go first.

Figure 6: Current Frame Marker

To set the endpoint, determine how many frames you want in between -- how much time the animation will take, in other words, and, in this case, how fast the text will move -- and then create a key frame at the furthest end. Move your current frame marker (Figure 6) to the end key frame and then, using the arrow tool, move the symbol to its final position.

Figure 7: Pencil Icon

To add a motion path, click on the pencil next to the current layer and choose "add motion guide." (Figure 7)

Figure 8: Motion Guide Symbol

Another layer appears and is marked by an aqua curved line (Figure 8). This is the layer that will hold the motion guide. Since you've already set the end point, the new layer will already be the right size, so you're ready to create your path. Using the pencil tool, draw the path. While the path I've created would probably annoy users, it is exaggerated so that you have plenty of time to see the effect of MySite.com following the curved path.

Figure 9: "Snapped" path

Now that the path is created, it's time to "snap" the symbol into place. Move your current frame marker back to the first frame and, using the arrow tool, pick up the symbol in the center (where the small + sign is). Then, drag the symbol directly over the endpoint of the motion path. When it's lined up, you'll see a small black circle appear in the center. You can now release the symbol; it's snapped into place. (If you have problems, doublecheck to make sure your "snapping" features are on. Either click the Magnet icon or click View/Snap.) Now move your current frame marker to the endpoint and snap the symbol onto the end of the motion guide. (Figure 9)

Figure 10: Insert Menu

Final task, set the symbol to tween by clicking the small rectangular box next to the key symbol in frame one of the MySite.com layer and choose "tweening". (Figure 10) From the pop-up menu, choose "motion." (Figure 11)

Figure 11: Tweening Dialog

To test that your tweening worked, use your VCR controls. If you don't see MySite.com follow the figure 8 across the screen, doublecheck that you snapped the symbol onto the path endpoints. If everything worked, and you like the effect, go ahead and turn off the motion guide (click the pencil icon next to the Motion Guide layer and choose "hidden").