Flash CS5 for Designers: TLF and ActionScript + Win 1 of 3 Signed Copies!

A lot has changed between how text was handled in Flash CS4 and Flash CS5. We think now is a good time to pull up a stool, sit down, and review, in very broad terms, what one needs to know about TLF before “wiring up” an exercise or project using ActionScript.

Introduction

With the new TextLayoutFramework (TLF), text is found in these things called containers. They either can be physically drawn on the stage using the Text tool and given an instance name or, as is more common, can be created at runtime. You also know that the text can be formatted and manipulated using the Properties panel. The neat thing here is the word properties. If there is a property in the panel, its counterpart is found in ActionScript. The bad news is, ActionScript is stone, cold stupid. It doesn’t have a clue, for example, what a container is until you tell it to create one. It won’t format text until you tell it what to do. It won’t even put the text on the stage until it is told to do so.

Most projects will start with you telling Flash to create a Configuration() object, which is used to tell Flash there is a container on the stage and how to manage the Text Layout Framework for the stuff in the container. The actual appearance is handled by the TextFlow() class, which takes its orders, so to speak, from the Configuration() object.

Naturally, being stupid, the Configuration() object needs to be told exactly how to manage the text in the container. The default format is set through a property of the Configuration class called textFlowInitialFormat. To change it, you simply use the TextlayoutFormat () class to set the fonts, colors, alignment, and so on, and then tell the boss—Configuration ()—that its textFlowInitialFormathas changed to the ones you set using TextLayoutFormat().The boss will get that, but he isn’t terribly bright, so you next need to tell him to hand the actual work to another member of the management team, the TextFlow() class. This class has overall responsibility for any words in a container. Being just as dim as the boss, TextFlow() needs to be told what a paragraph is (ParagraphElement), how wide the paragraph is (SpanElement), whether any graphics are embedded in the paragraph (InLineGraphicElement), whether any of the text contains links (Link Element), and so on. Not only that, but it needs to be told what text is being added to the container so it can handle the line length and to add any children (addChild) that contain that formatting so the user can actually see it.

The TextFlow() class, again not being too terribly bright, will then hand the job over to another member of the management team, the IFlowComposer() class, whose only job is to manage the layout and display of the text flow within or among the containers. The flow composer finishes the process by deciding how much text goes into a container and then adds the lines of text to the sprite. This is accomplished through the use of the addController() method, which creates a ContainerController() object whose parameters identify the container and its properties.

The usual last step is to tell the FlowComposer to update the controllers and put the text on the stage according to how the other members of the team have told the Configuration() object how their piece of the project is to be managed.

With this information in hand, let’s move on to working with TLF in ActionScript. We’re going to create a column of text with ActionScript.

Step 1: New Document

Open a new Flash ActionScript 3.0 document, rename Layer 1 to actions, select the first frame of the actions layer, and open the Actions panel.

Step 2: ActionScript

Click once in the Script pane, and enter the following:

var myDummyText:String = "The introduction of the Adobe CS5 product line puts some powerful typographic tools in your hands—notably, a new API (Application Programming Interface) called Type Layout Framework (TLF)—and with as more tools in the Adobe line up nudge closer to a confluence point with Flash, the field of typographic motion graphics on the Web is about to move into territory that has yet to be explored. To start that exploration, you need understand what type is in Flash and, just as importantly, what you can do with it to honor the communication messengers of your content.";

You need some text to add to the stage. This string is the third paragraph of this chapter. Now that you have the text to go into the container, you need to load the class that will manage it.

Step 3: Configuration()

Press the Enter (Windows) or Return (Mac) key, and add the following line of code:

var config:Configuration = new Configuration();

As you may have noticed, as soon as you created the Configuration() object, Flash imported the class—flashx.textLayout.elements.Configuration —whose primary task is to control how TLF behaves. The next code block tells TLF how the text will appear on the stage.

Step 4: TextLayoutFormat Class

Press the Enter (Windows) or Return (Mac) key twice, and enter the following:

var charFormat:TextLayoutFormat = new TextLayoutFormat();
   charFormat.fontFamily = "Arial, Helvetica, _sans";
   charFormat.fontSize = 14;
   charFormat.color = 0x000000;
   charFormat.textAlign = TextAlign.LEFT;
   charFormat.paddingLeft =100;
 charFormat.paddingTop = 100;

The TextLayoutFormat class, as we said earlier, is how the text in a container is formatted. The properties in this class affect the format and style of the text in a container, a paragraph, or even a single line of text. In this case, we are telling Flash which fonts to use, the size, the color, how it is to be aligned (note the uppercase used for the alignment), and the padding that moves it off the edges of the container.

Before you move on, you need you to do something. There is a coding issue. Scroll up to the import statements. If you see this line—import flashx.textLayout.elements.TextAlign;—proceed to the next code block. If you don’t, delete this line in the code block just entered: charFormat.textAlign = TextAlign.LEFT;. Reenter charFormat.textAlign =. Type in the first two letters of the class (Te), press Ctrl+spacebar, and the code hint should appear. Find TextAlign, and double-click it. This should add the missing import statement. To preserve your sanity, we will be providing a list of the import statements that should appear at the end of each exercise. We strongly suggest that you compare your list of import statements against the list presented and, if you are missing any, add them into your code.

Now that you know how the text will be formatted, you need to tell the Configuration() object to use the formatting. If you don’t, it will apply whatever default setting it chooses.

Step 5: textFlowInitialFormat

Press the Enter (Windows) or Return (Mac) key twice, and enter the following:

config.textFlowInitialFormat = charFormat;

Step 6: TextFlow ()

Press the Enter (Windows) or Return (Mac) key, and enter the following code block:

var textFlow:TextFlow = new TextFlow( config );
   var p:ParagraphElement = new ParagraphElement();
   var span:SpanElement = new SpanElement();
   span.text = myDummyText;
   p.addChild( span );
 textFlow.addChild( p );
 

The TextFlow () object needs to be here because its job is to manage all the text in the container. The constructor—TextFlow (config)—lets TLF know that it is to use the config object created earlier so it now knows how to format the contents of the container and even the container itself.
The next constructor—ParagraphElement()—essentially tells Flash how a paragraph is to be handled. There is only one here, so it really doesn’t need a parameter.

The final step is to get all the formatting and layout into the container on the stage.

Step 7: ContainerController

Press the Enter (Windows) or Return (Mac) key, and add these final two lines:

textFlow.flowComposer.addController( new ContainerController( this, 500, 350 ) );
 textFlow.flowComposer.updateAllControllers();

The first line adds the ContainerController and tells Flash the container being managed is the current DisplayObject (this), which currently is the stage, and to set its dimensions to 500 pixels wide by 350 pixels high.

Step 8: Test

Save the project, and test the movie. The text, as shown below, appears using the formatting instructions you set.

Import Statements for this Exercise

These are the import statements for this exercise:

   import flashx.textLayout.elements.Configuration;
   import flashx.textLayout.formats.TextLayoutFormat;
   import flashx.textLayout.formats.TextAlign;
   import flashx.textLayout.elements.TextFlow;
   import flashx.textLayout.elements.ParagraphElement;
   import flashx.textLayout.elements.SpanElement;
   import flashx.textLayout.container.ContainerController;

Using ActionScript to create and format the container and its text

Though this coding task may, at first, appear to be a rather convoluted process, we can assure it isn’t; it will become almost second nature as you start using ActionScript to play with text in the containers.

With the introduction of the Text Layout Format, your ability to create text, format text, put it in columns, and generally manipulate it using ActionScript has greatly expanded your creative possibilities. Before you get all excited about this, you need to know that the word Framework is there for a reason.

Any TLF text objects you create will rely on a specific TLF ActionScript library, also called a runtime shared library (RSL). When you work on the stage in the Flash interface, Flash provides the library. This is not the case when you publish the SWF and place it in a web page. It needs to be available, much like Flash Player, on the user’s machine. When the SWF loads, it is going to hunt for the Library in three places:

• The local computer: Flash Player looks for a copy of the library on the local machine it is playing on. If it is not there, it heads for Adobe.com.
• Adobe.com: If no local copy is available, Flash Player will query Adobe’s servers for a copy of the library. The library, like the Flash Player plug-in, has to download only once per computer. After that, all subsequent SWF files that play on the same computer will use the previously downloaded copy of the library. If, for some reason, it can’t grab it there, it will look in the folder containing the SWF.
• In the folder containing the SWF: If Adobe’s servers are not available for some reason, Flash Player looks for the library in the web server directory where the SWF file resides. To provide this extra level of backup, manually upload the library file to the web server along with your SWF file. We provide more information around how to do this in Chapter 15.

  When you publish a SWF file that uses TLF text, Flash creates an additional file named textLayout_X.X.X.XXX.swz (where the Xs are replaced by the version number) next to your SWF file. You can optionally choose to upload this file to your web server along with your SWF file. This allows for the rare case where Adobe’s servers are not available for some reason. If you open the file where you saved this exercise, you will see both the SWF and, as shown in Figure 6-25, the SWZ file.

The .swz file contains the Text Layout Framework.

The Giveaway!

We’re running this giveaway a little differently since Adam from Aetuts+ pushed Wildfire my way.. Wildfire is a brilliant promotion builder and makes entering competitions a piece of cake! If you’d like to be in with a chance of winning one of three signed copies of “Foundation Flash CS5 for Designers”, just enter!

How do I Enter?

1. Send a tweet from the entry page. For every Twitter follower that enters through your link you get an extra entry.
2. Fill in your details once you’ve done so. That’s it!

The three winners will be announced on Monday 6th September. Good luck!