VirtualMV/Flash12 (CS6)/Journal/Content/TLF Features

From WikiEducator
Jump to: navigation, search

CS5 Introduces some exciting new ways to use Text. The Text Layout Framework gives greater control and functionality to the contents of a text box.

VmvIcon Objective.png

By the end of this exercise you should be able to:

  • Use the new features of TLF Text.

Linking Text Boxes

Flash CS5 allows you to link and overflow the text of multiple text boxes. Open a new Actionscript 3 FLA. On the stage, draw a text box. TLF text will be selected by default. Several options are also available, Selectable Text, ReadOnly or Editable.

Type or paste in some text. In this case, a few paragraphs of Lorem Ipsum. If there is more text that space available, the text is hidden, but can be revealed by enlarging the textbox area. Make the textbox a size you like, and position on the stage.

Sd tlftext.png

Create a new textbox and position on the stage. Now comes the exciting bit - linking the textboxes and overflowing the text into the second box. With the first text box selected, you will notice at the bottom right a small red crossed square. Click on it, you will notice your mouse pointer turns into a chain link - then click into the second textbox you made.

Sd secondtlf.png

You have now overflowed the text from the first textbox and into the second. You can drag and position these boxes around the stage and they will be forever linked until you decide to unlink them. Add another text box, click on the red crossed square of the second and then into the third. Your text will keep overflowing until such time as the end of the text is reached.

Sd thirdtlf.png

Unlinking the Textboxes

Unlinking a textbox is simply just a matter of doubleclicking in the top left hand connection of the textbox you wish to disconnect. The overflow is removed.

Advanced Character Capabilities

Using TLF text offers some advanced features over and above the legacy text engine. Note that these features are only available when using ActionScript 3 and Flash Player Version 10 and above.

The screenshots shows the Character and Advanced Character Palettes. The new features of Flash CS5 are outlined below:

Character Palette
Sd character.png
Advanced Character Palette
Sd advancedchar.png


  • Tracking: Increases and reduces the spread of Text, both the characters and the spacing.
  • Case: Highlighting the text allows you to choose to alter the case - to all upper, all lower, Caps to small caps and lower to small caps.
  • Digit Case and Digit width: Allows change to alignment to the baseline of the text and the width.
  • Ligatures refers to how the text itself links with each other - very common in printed works where letters such as f and l will run into each other to create a single glyph.
  • The break option allows several line break options - you can now convert your horizontal text to vertical text with a break between each letter with one click. Returning the text to horizontal is as easy as resetting this option to auto.
  • The alignment and justification options will be familiar to anyone with a word processing background and offers greater aligning, indenting and spacing options than previous versions.
  • Direction offers Left to Right, and now Right to Left as an option.

At the top right hand corner of the text Properties panel, click the dropdown icon to reveal additional options that enable the Right to Left option as well as Advanced Paragraph options:

Sd advancedpara.png

Check both of these to enable.

Containers and Flow

The Container and Flow panel gives some new and useful features. You can colour the text box background without having to add a shape behind the text box. You can alter the text box padding, L, R, Top and Bottom - as one by enabling the link icon, or individually by altering the relative pixel setting.

The columns icon allows you to create columns within a single textbox. Set the number of columns you need, set the cell spacing, and start entering text. Your text will fill nicely into however many columns you have specified. In this example, 3 columns and a 20px spacing.

Sd columns.png