Flash: Curvy Motion
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
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
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").
Comments are welcome
Created: Sep. 29, 1997
Revised: Oct. 9, 1997