Creating writing text in Flash
If you have been working with Flash for any length of time, chances are you have seen many different visual affects, such as writing text. In some web applications where creativity for visual text is lacking, this is a very cool affect to create and it’s relatively easy to do. In the following article, we’ll examine the concept and technique to create writing text.
Create the file
Inside Flash, create a new file named writingtext.fla by following these steps:
- From the main menu, select File>New, and in the following window:
- Leave Flash document selected
- Left click OK
Create the following hierarchy:
| myname |
You only need one layer to create writing text. Make sure you reduce the magnification to 50% through the zoom drop down list:
Create the movie clip
When the move loads, we need to write out a word, such as your name. Follow these steps to create the text:
- Make sure you are on the myname layer:
- From the main menu, select Insert>New Symbol
- In the symbol window, type mynamemc and select movie clip
- Rename the layer text
- Click the blue backward arrow button to exit symbol editing mode:
- Make sure you are on the myname layer
- Select frame one
- In the library, select the movie clip and drag it on the stage at the following coordinates:
- X: 0.0
- Y: 0.0
You might be wondering why we use a movie clip to hold our text. Because when the main movie loads, we need a separate movie clip to play the writing text sequence. It could be done from the main timeline, but developers tend to use movie clips to separate different sections of functionality.
Create the text
We’ll create the writing text sequence by using your name. Follow these steps to create the text:
- Make sure you are on the myname layer
- Select frame one
- On the stage, select the movie clip and double click to enter symbol editing mode
In the movie clip, follow these steps:
- Make sure you are on the text layer:
- Select frame one
- Select the text tool button (“A”) from the Tools menu and drag a text instance on the stage
- Make sure the text field is static
- Type <your name> with the following properties:
- Font: Choose a artsy font such as Bradley Hand ITC
- Size: 80 or more
- Color: Black (#000000)
- Font weight: Bold
- Text alignment: Left
- Use the pointer tool from the Tools menu to mark the desired text:
- Then right-click it, select Convert to Symbol and in the symbols window, type mynamegraphic and select graphic
- With the graphic selected, position at the following coordinates (note that these are negative numbers):
- X: -54.0
- Y: -4.0
- Press Ctrl + B three times
This breaks our graphic into individual letters and then into one bitmap object.
Write the text
The affect is essentially a mask. A mask is a way of only showing certain parts of an object to visitors. In our case, we do not want to show the completed text at the beginning, rather, we want to show it progressively, starting with the first letter in your name until we reach your full name. To create this affect, we need to erase individual letters over a series of frames, the reason for our bitmap object from above.
However, when erasing letters, you have to think backwards. For example, since you want to start writing the letter "R" of "Ryan" to your visitor, you start erasing the letter "R" at the end of "Butler" and work backwards, continuing with "e" in Butler. Furthermore, you erase in the opposite direction of how you normally write a letter. For example, take the letter "R", normally you would write it like this:
As seen in the movie, we start at the top of the "r", go down and then make a half line off from the right of the "r". However, in Flash, you erase the letter backwards. For example, take our previous example; you erase the letter like this:
Erasing the text
To create this affect, complete the following:
- While in the movie clip
- Right click and select Insert Key Frame.
- Select the eraser tool from the Tools menu:
- Under the Options section, choose the second option:
Start erasing the last "R" in "Butler" as shown below:
You only erase little segments of each letter on separate key frames. The less you erase on each key frame the slower and more dramatic the affect will be. Continue the approach for the rest of your name. The hardest part of this affect is mentally doing. Sometimes it helps if you practice how you normally write the letter before you erase, to make sure you have the process right. You might also find it helpful to increase the zoom on the stage. Save your file and use writingtext_erasing.fla as a comparison.
Finishing the affect
When the movie loads and plays, the writing text affect would look odd since the movie starts erasing letters starting with "R" in "Butler". Follow these steps to reverse the frames to show correctly:
- Left click frame 1, press and hold the Control key + Shift key and left click frame 67 (note that this will change in your file)
- With the frames selected:
- Right click and select Reverse Frames.
Save your file and use writingtext_reverse.fla as a comparison.
Adding a stop
When the movie loads, the writing text affect will work properly except that it loops. Follow these steps:
- Make sure you are inside the movie clip
- Create a new layer and name it stops
- Right click the end frame with your name
- Press F9 on your keyboard to open the action script panel and type the following:
stop();
Save your work, and preview the results. Your text affect should be working.
TIP
You might find it useful to increase your frame rate to make the affect smoother. To do so, follow these steps:
- Select the stage
- In the properties window, locate the frame rate text field:
- Enter a value number, such as 20
Summary
In this article we learned how to use Flash to create writing text. We also learned a bit about:
- Creating your name using the text tool
- Create a movie clip to play the text affect
- Erase letter by letter in Flash to create the mask text affect
- Reverse your key frames to hide the text at the start, then reveal the text progressively
Take the knowledge learned here and write any text imaginable!
If you have questions, contact me.