Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using the new Text Layout Framework (TLF)

From: Flash Professional CS5 New Features

Video: Using the new Text Layout Framework (TLF)

Flash Player 10 supports the Text Layout Framework. Up until now, the Text Layout Framework was not built into Flash. Flash CS5 offers many features of the Text Layout Framework through easy-to-use menus. In this movie, we'll look at how to use the Text Layout Framework in your applications. Again, the Text Layout Framework requires Flash Player 10 or above, so if you need to use 9 and below, you're going to have to use the legacy text engine. Let's take a look at how the Text Layout Framework works. I'm going to select a block of text on the stage.

Using the new Text Layout Framework (TLF)

Flash Player 10 supports the Text Layout Framework. Up until now, the Text Layout Framework was not built into Flash. Flash CS5 offers many features of the Text Layout Framework through easy-to-use menus. In this movie, we'll look at how to use the Text Layout Framework in your applications. Again, the Text Layout Framework requires Flash Player 10 or above, so if you need to use 9 and below, you're going to have to use the legacy text engine. Let's take a look at how the Text Layout Framework works. I'm going to select a block of text on the stage.

You'll notice, in the Properties panel, that it's TLF Text. Of course, it stands for Text Layout Framework. That's the dropdown menu you use to change to Classic text, which is the Legacy engine. TLF text has three different types: Read Only, Selectable and Editable. These do what you would expect. Read Only is not selectable or editable. Selectable text is not editable. Editable text is selectable and it can be read, but it can also be changed in the Flash Player. The Text Layout Framework supports Right-to-Left and Asian text.

You could make sure those options show through the Options area of the Properties panel. Like previous versions, you can control Horizontal or Vertical text. Text Layout Framework gives you the new option to control tracking between letters and words. You have precise control over characters with the Text Layout Framework. For example, you can adjust the casing of the text. You can even adjust the casing of numbers through the Digit case and Digit width options.

Digit case refers to how the digits align with the baseline of the text and Digit width refers to the spacing between different numbers. You can adjust the baseline and you can control ligatures. This is more obvious, if I zoom in. I'm going to click and drag with the Zoom tool, zoom into this text field and watch the f and the l on flavor as I change the ligatures. So I go from Minimum to Common. Some ligatures are added. And then I go to Uncommon. More ligatures are added and the Exotic setting has the most ligatures.

I'll go back to Minimum and continue moving down the list. The Break option allows you to set where line breaks appear in your text. So let's say you wanted text to appear at the side of this ad, and where it says basil, with the text I have selected, let's say I wanted that to be on the left side of a bottle of basil oil. So I could put the text field over there, and then I could change the break setting to All, expand the text field vertically and I have vertical text with a break between each character, and I don't have to enter those breaks manually.

The advantage to that is that if I ever want to go back to standard horizontal text, I'll just turn off the break and there it is. So I'll move that text to back where it was. The new Paragraph options also allow you to control the justification of text. If I select this paragraph and choose to justify the text, you can choose whether the space in a justified line of text is made up with letters or words.

So Letter Spacing adds space between the letters, and Word Spacing adds space between the words. I'll just go back to Center Alignment. In the Advanced Paragraph setting, you have options for Asian languages and for Leading. So anything that moves up and down or right-to-left is very well supported using the Text Layout Framework. You could also control the vertical alignment of a paragraph. So I can have the paragraph start at the top, or vertically aligned to the center of the paragraph, or the bottom, or spread out between the top and bottom.

I can also add columns to the text and control spacing between those columns. So now I have two columns here in this text field, and I can control the spacing using this slider. I'll return to a one-column text field. With Padding, you can control the space from the edge of the text field, so if I lock the Padding values and I click and drag, the text fields will update.

By linking the Padding values, the space between the text and the border of the text field will remain even for each side: Top, Left, Bottom and Right. You could unlink them to increase the space between one side at a time. So I can control the Padding on just the left, or just the right, however I wish. I'll just reset the setting back to 0. You can also control, in the Text Layout Framework, the border of the text field as well as the background color, set those back to 0. You can control the 1st Line's Offset, so you can move it down a little bit using Line Height, or you can have it attach the Ascent to the text.

You can set the text to be Right to Left or Left to Right, and you can change the Locale for the language that you're using. So using the Text Layout Framework, you have much more detailed control in working with your text. Again, you need to use Flash Player 10 or above. Let's take a look at one more feature of the Text Layout Framework. This is called Multi-Column text. With the Text Layout Framework, you can actually have one block of text flow through multiple text fields. Let's take an example of how that works. On the stage here, I have a block of text, and at the bottom-right, you'll see a red box.

That indicates that there is text that's not showing, because there is not enough room to show it. So what we want to do is have this text field flow into another text field. So, on the stage, I have three empty text fields that also use the Text Layout Framework. So to link them, I just click in that red box, and then I click into a box that I want it to flow to. So I'll click in this box here, and the flow is established. So I can repeat that step to establish the flow until the end of the text.

You can tell how text fields flow by following the bottom-right and top-left corners of the text field. So this one all the way on the left, if you follow from the bottom-right, up to the top-left of the next field, you can see that it flows to there. Then that text field flows to the one to the right of it and finally ends with the one all the way on the right. To unlink text fields, to disconnect that flow, you simply double-click the top-left corner of the text field that you want to disconnect. So I double-click there, and I've disconnected the text field, double-click there and disconnected that text field.

Finally, I double-click here to disconnect the final text field. It's important to note that this feature even carries across different layers in the same frame. So text fields could be on different layers, and you could still continue the flow between the different fields. So using the new features of the Text Layout Framework in Flash CS5, you have more detailed control over your text fields, and you can link them together to create more complex layouts than you ever could before.

Show transcript

This video is part of

Image for Flash Professional CS5 New Features
Flash Professional CS5 New Features

27 video lessons · 11824 viewers

Todd Perkins
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Flash Professional CS5 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.