|
by
kirupa |
4 May 2011
Have questions? Discuss this Flash / ActionScript tutorial
with others on the forums.
One of the things introduced in the recent versions of
Flash is support for the Text Layout Framework (TLF) library. This library makes working with the new text
features introduced in Flash Player 10 easier. Because this
was basically an ActionScript library, using it without
writing code was impossible. Fortunately, visual support for
using the library followed.
Flash CS4 and onwards support the TLF to allow you
to visually add and edit text just like you had in the past.
The difference is that you now have more bells and whistles
to create sophisticated text layouts.
A big bell and/or whistle is the ability to easily columnize your text:
In the past, doing something like this would have
required you to have a text field for each column and
carefully breaking your text apart to make sure the contents
of the columns were balanced. If the text you wanted to show
in the columns was dynamic, to borrow a great line from
Donnie Brasco,
forget about it.
In this short tutorial, you will learn how to use the new
TLF features in Flash CS4 and beyond to easily create text
that wraps multiple columrns.
Launch
Flash CS4 (or something more recent) and create a new
ActionScript 3.0 project:
[ create a new AS3 project ]
Once you have created your new project, draw a text field
using the Text Tool. Make sure your text field is large
enough to happily show several columns of text:
[ draw a text field large enough to display text ]
After you have created the text field, make sure it
is selected and look over in your Properties panel:
[ make sure your text type is set to TLF Text ]
Make sure the drop-down below the < Instance Name
> field says TLF Text instead of Classic. Your
Properties Panel should look a bit similar to what you see
in the above screenshot. By having your text field be in TLF
Text mode, you get to do all of the cool things that you
couldn't do before.
Let's first add some text that we can put into columns. The
text I used in the example you saw is from the
Declaration of Independence. Use whatever text you want
to, but make sure it is substantial enough to be displayed
in at least two columns:
The way you insert text is pretty straightforward - just
double click on the text field and paste your contents. You
can use the standard text formatting tools to adjust your
font size, font, and other visual awesometies. Once you have
your text just the way you like it, let's look into making
it into columns.
Before we proceed, I should confess that I don't know if
columnizing (defined by me as putting things into columns) is even
a real word. If it is, awesome. If it isn't a real world, it
is a shame that it isn't. To columnize text, look in your
Properties panel and find the Container and Flow
category:
[ this category is all about...containers and flow ]
This category, as its name applies, is all about
specifying how your text is laid out. One of the options you
can specify is the number of columns you can divide your
text into:
[ the columns property specifies the number of columns ]
By default, the value will say 1. Change that value from
1 to 2 to specify two columns. Once you
have done this, you will notice that your text now appears
in two columns:
[ eureka - two columns of text! ]
If you change the value from 2 to 3, you will see your
text now spanning three columns:
[ it's getting crazy over here! ]
Of course, you don't want to go overboard, so I'm going
to return to having just 2 columns like I had before. The
final thing I am going to cover is adjusting the space
between the columns. That is defined by the gutters property
found to the right of the columns property you used earlier:
[ specify the size of the gutters between the columns here ]
Adjust the pixel values to set the space between the
columns. The larger the number, the more space there will be
between the columns.
Well, that's
all there is to putting your text into multiple columns. One
thing to note is that Flash currently is only supports
version 1.0 of the Text Layout Framework (TLF). This means
that some really cool features like inserting images and
having text wrap around them are missing in the current
version. You'll have to wait for a future Flash authoring
tool release to hopefully do more with your columns.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
|
