Creating Multi-Column Text in Flash
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:

example of multi-column 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.

Getting Started
Launch Flash CS4 (or something more recent) and create a new ActionScript 3.0 project:

as3 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:

create a large sized text field

[ 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.

Adding and Columnizing Text
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:

single column of text

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:

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:

columns emphasis

[ 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:

your text is now two columns again

[ eureka - two columns of text! ]

If you change the value from 2 to 3, you will see your text now spanning three columns:

text spans 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:

columns and spacing value

[ 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!

Kirupa's signature!

SUPPORTERS:'s fast and reliable hosting provided by Media Temple.