Serving Up Web-Friendly Animations: In a Flash: Tweening Touches | WebReference

Serving Up Web-Friendly Animations: In a Flash: Tweening Touches

Tweening Touches

Serving Up Web-Friendly Animations: In a Flash

"IS YOURS" seems like the logical conclusion to the line I've added. So I'm going to add that bit of text (a taunt if you will) to the movie. But I want it to stand out.

In a new layer, one frame after the scrolling text stops, I add "IS YOURS," and I use the "rotate" icon to set this text at an angle.

I still have some empty space on the left-hand side, so why miss the opportunity to add a little more punch? In layer 4, one frame after "IS YOURS," I want to add an arrow -- one that appears at the top of the screen and then moves down to the bottom as if it is pointing at the page below.

This requires some tweening. Tweening means you mark a beginning and end point, and the selection will automatically move along that path. This eliminates the need for you to reposition an image in every frame. Because my target path is a straight line, I don't need to create a symbol. Flash's tweening is smart enough to handle moving the arrow for me as long as I tell it where to start, where to stop, and how long to take to move between the two points.

If I wanted to tween along a curved path, I would be better off making a symbol first and then setting up the tweening.

So I create my arrow by making four straight lines with Line Tool (one of the options for the pencil).

Tweening Menu Now, I create another key frame 7 frames later. The arrow shows up as a selection, and I move it towards the bottom of the banner until it almost touches the bottom edge. Then, right-clicking on the original key frame where the arrow begins, I select "tweening," and, from the drop-down menu, "Motion" and then "okay."

A red line now connects the two key-frames that contain my arrow in the timeline. A quick "play back" shows me that the arrow now moves from off screen to the bottom. (There are much more sophisticated things you can do with tweening and with symbols, but this gives you a taste of Flash's tweenability.)

The only thing left to do is to make sure that all of your layers have the same number of frames. That's important, here, because we want each object, once it appears, to stay on-screen for the duration of the movie. If one layer didn't have enough frames, it would disappear once the marker passed its final frame.

Comments are welcome

Created: Aug. 24, 1997
Revised: Aug. 24, 1997