Serving Up Web-Friendly Animations: In a Flash: Working with Text | WebReference

Serving Up Web-Friendly Animations: In a Flash: Working with Text

Working with Text

Serving Up Web-Friendly Animations: In a Flash

Tool Bar and Type SubMenu Using layer one as the "current layer," choose your type tool (the "A" on the tool bar) and set it down anywhere on the stage. You can also change your face, color, size, and alignment using the sub-toolbar that appears underneath the main toolbar. (After adding your text, you can change any of the options by highlighting the text and then making your changes.)

If you need to reposition the text, click the "arrow" icon on the toolbar, and then click the text. A box will outline your selection, and it can now be picked up and moved (or moved via the arrow keys on your keyboard).

I have added to the center of my banner.

At this point, I think I will want that there for the duration of my movie, so I want to go ahead and tell my movie that. I click on frame 50 in the layer that contains this bit of text and then choose "insert frames." Frames 1-50 now contain

MySite Banner

I'm now going to add some more text into Layer 2, but I've thought this out, and I want this text to appear one letter at a time, almost as if it's being typed. I want "My site is in Motion" to appear across the bottom of the banner one letter at a time, but I want to be on the screen by itself for just a few seconds before the new material starts, so I'll start the new text on frame 3.

If, after playing back the movie I decide that's too soon, I can always insert frames prior to frame three on the new layer and therefor delay it's start date. Also, if I feel the flip rate for the frames is too fast as a whole, I can adjust that using the Modify/Movie screen I used to change the size and color properties of the movie. It's generally best, however, to make this decision after you've completed your movie.

In layer two, I create 50 frames just to give myself some space. Then, I put my cursor in Frame 3 of Layer 2 and clicking the box, I choose "Insert Key Frame." You have to insert a key frame whenever you want to add something to a specific layer.

A key frame allows you to insert material at that point. If you don't have a key frame, whatever you enter will actually start in the closest previous key frame (in this point, frame 1). Before I enter my first letter, there's one more thing to do: move the time marker to frame 3 (and, if you haven't already done so, make Layer 2 current).

I know that I'm going to need a new key frame every two frames (the amount of time I've decided to leave between the addition of each letter), but I don't want to create those yet. If you wait and create each new key frame after you add the new letter, the new key frame will maintain the information you've already added.

If you all the key frames at once, then when you added the "M," the next key frame would still appear blank, so you'd have to re-add the "M" and then the "y." Since this would leave you struggling to precisely reposition the letters each time in order to maintain the alignment of the phrase, it's not practical.

Adding the next key frame after the addition of each frame's new letter will make this process painless. Banner

In frame 3, I add the "M." In frame 5, I create a new key frame, move my marker, and add a "y." The easiest way to add letters in this scenario is just to click, with your type tool, on the letter you added before. The type-tool line will appear in the box, and you can add your letter, perfectly aligned.

Keep in mind that with each new letter, the text will shift to the left, so make sure you started your initial letter far enough over to give you the necessary room. It isn't easy to go back in and move the final words over because the changes will not appear in all the previous frames. In other words, once you're finished, you can't simply move the words that appear in the final frame and have the change filter back to the first frame. Each frame would need to be adjusted individually. (Once you're comfortable with Flash, working with symbols alleviates this problem.)

I've added all the letters now into their respective key frames. Using the "VCR controller" I can play my movie to see what's happened so far. VCR Controller (If you don't see the control pad with the play arrow, click Windows/Controller, and it will appear. Drag it to the top right of the screen next to the help arrow, and it will snap into place --most Flash desktop items are snappable.)

I like the typewriter effect, but I think even this needs punch. After each word is completed, I want that word to change colors. Had I decided this in the beginning, I could have made the change as I went, and then each new key frame would have been accurate, but I didn't plan ahead (something you want to try and do with Flash). I'll have to go back in and adjust each key frame.

I like that. Now, upon completion, each word turns from yellow to purple, and the adjustment wasn't complicated and didn't take too much time. Banner

As you can see from the image above, finished words have turned purple. The letters to "Motion" are yellow and will remain so until the final letter of the word appears.

Comments are welcome

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