1 SETTING UP FLASH CS5
If you'd like to use the same text that we're using in this
tutorial, you can download the exercise files from
www.layersmagazine.com. Open Flash CS5 and when the Welcome Screen
appears, click ActionScript 3 in the Create New section. The TLF is
written entirely in ActionScript 3, so if you haven't already
transitioned to the new version of the language, here's yet another
reason to do so. Go under File>Save and save this new document to
your desktop as "TLF.fla."
2 TLF TEXT VS. CLASSIC TEXT
Double-click the name of the first layer in the Timeline and
rename it to "Text." Select the Text tool (T) and drag out a new text
field that fills the top half of the Stage. At the top of the Properties
panel you'll notice a pull-down menu that by default is set to TLF
Text. If you don't want to use the new text engine you can change this
to Classic Text, which is the name for the old text engine. There's some
additional file size and overhead with using TLF, so if you need simple
text, it's better to stick to classic text.
3 CHARACTER OPTIONS
Open the sampleText.txt file that you downloaded, and copy
(Command-C [PC: Ctrl-C]) the English language text. Back in Flash, paste
(Command-V [PC: Ctrl-V]) the text into the TLF text field. Select the
text (Command-A [PC: Ctrl-A]), and in the Character section of the
Properties panel, change the font Family to Adobe Caslon Pro and change
the Size to 20 pt. Choose Readability in the Anti-alias pull-down menu.
If your text field will be dynamic or editable, you'll need to embed the
font by clicking on the Embed button. This workflow hasn't changed from
previous versions of Flash, although there's a new global Font
Embedding dialog (Text>Font Embedding) to make font management much
easier.
4 LINKED CONTAINERS
Linked containers allow you to link two or more individual text
containers together so that text will flow through them. You should see
a small red icon on the bottom-right of the text field on the Stage.
Click on it and your cursor will change to one loaded with text. Now
drag out a new text field somewhere on the Stage and you'll notice a
connecting line between them and also that the overflow text from the
first text field flows into the second. Although the containers are
linked, you can still style, position, and manipulate each text field
individually.
5 LIGATURE SUPPORT
Delete the second text field you created in the last step and
replace the text in the first one with the word "cost." Increase the
font size to 210 pt. Ligatures are special characters that replace
certain combinations of letters in a font. Typographers take extra time
to design beautiful-looking connections between characters and most
people never even know they're there. In the Advanced Character section
of the Properties panel, change the value in the Ligatures menu from
Common to Exotic. As you can see, this particular ligature is quite
fancy, and using them can add a touch of class to your text.
6 MULTICOLUMN LAYOUTS
When dealing with large amounts of text, it's often more
readable to break the text into multiple columns similar to what you see
in newspapers. Delete the text field on the Stage and create a new one
that fills the Stage and change the font Size to 18 pt. Paste in the
block of text from the text file. Go to the Container and Flow section
of the Properties panel and set the Columns to 2. You should now see the
text divided into two columns. You can also adjust the gap between the
columns by adjusting the column gutters property to the right.
7 FUN WITH DIGITS
There are also some subtle options to choose from when it comes
to displaying numbers. Fill the text field on the Stage with numbers,
change the number of Columns back to 1, and increase the Size to 80 pt.
Go to the Advanced Character section of the Properties panel and you'll
see two options for tweaking the way numbers appear in your text field.
Change the Digit Case property to Old Style. This displays digits in a
more old-fashioned style as designed by the typographer. Changing the
Digit Width property to Proportional groups, the digits are grouped
closer together based on the character's proportional size.
8 VERTICAL TEXT ORIENTATION
Another simple thing that designers often want to do is to
create text that's laid out vertically. This wasn't possible with the
classic text field. Create a new TLF text field on the Stage, change the
font Size to 22 pt, and type in a word. Now in the top of the
Properties panel, change the orientation of the text to Vertical using
the menu highlighted in the screen shot. Obviously, you still need to
rotate the characters to make things look right. Change the Rotation to
270 in the Character section of the Properties panel. You now have
vertical text.
9 JAPANESE TEXT
Properly displaying languages like Japanese in previous
versions of Flash was next to impossible. Create a new TLF text field
that fills the Stage. Change the font to Adobe ?? Std, which comes with
Flash CS5. Open the sampleText.txt file and copy-and-paste the Japanese
text into the text field and set the orientation to Vertical. When you
test it, you'll notice that text also selects vertically like it should.
To see additional options for Asian languages, choose Show Asian
Options in the flyout menu at the top of the Properties panel.
10 ARABIC TEXT
Another difficult language to display in Flash is Arabic, and
other right-to-left languages. With the TLF, this has also been made
simple. Create a new TLF text field that fills the Stage, set the
orientation to Horizontal, change the Rotation back to 0, and change
the font to Adobe Arabic. Open the sampleText.txt file and
copy-and-paste the Arabic text into the text field. Select Show
Right-to-Left Options from the flyout menu at the top of the Properties
panel. Now in the Paragraph section, you can change the Direction
property to Right to Left.
11 HIGHLIGHTING TEXT
Another frequent request that Adobe received from designers was
that they wanted the ability to highlight certain pieces of text with a
different background color, similar to the way you can do it in
programs such as Microsoft Word. Create a new TLF text field and enter
in some text. Now use the Text tool to select one of the words you
typed. In the Properties panel, under the Character section, you can
change the Highlight color to anything you like. You can also change the
selection color as well, but that requires writing some ActionScript
code.
12 TLF WITH ACTIONSCRIPT
There are times that you'll need the ability to change TLF
properties dynamically at runtime using ActionScript. Create a new TLF
text field on the Stage and paste in some text. Give the text field an
Instance Name of "tf" at the top of the Properties panel. Select the
first frame of the Text layer and open the Actions panel
(Window>Actions). As an example, you can change the number of columns
in the text field simply by setting the columnCount property as shown
in the screen shot (test the movie to see the results). Most of the
other properties can be set just as easily.
Integration with Adobe InDesign
For those of you who use Adobe InDesign, you may have noticed the similarities between the TLF and the text capabilities found in InDesign. This is no coincidence, as the InDesign team is the one who developed this amazing new text engine for Flash. There's such fine-tune control available over text, that most Flash designers won't ever want or need to use them all. But for designers who are trying to create beautiful reading experiences for new-generation devices like tablets, they'll be able to faithfully translate the printed page into Flash.
InDesign CS5 also has the ability to export text layouts directly to Flash FLA files using the TLF. This means that designers can do their entire layouts for Flash directly in InDesign where they may be more comfortable. They can then export to an FLA file and pass it to the Flash developer. InDesign CS5 also has some new animation capabilities that allow designers to create basic interactive projects without even needing to open Flash. As publishers move to get their printed publications onto digital devices, InDesign combined with Flash, will be a vital workflow to make that happen.
