Text is loaded dynamically at runtime. Thanks to the new TLF methods, the body of the text is split into separate lines. The lines are tweened in 3D and colorized creating a cool, wavy 3D effect. Moreover, fonts are embedded into TextFlow with the TextFlow.fontLookup property without TLFTextField class. Click the screen shot below or this link to open the applet in a new window:
- Download all source files corresponding to this effect: text3dfont.zip
In the zip package, you will find a fla file with well-commented Timeline code and a custom AS3 class, TextSlicer.
The TextSlicer AS3 Class and Related Tutorials
Our custom AS3 TextSlicer class is important to this effect. The class splits text into slices and places each slice in a separate Sprite container. Each container is placed in an instance of ContainerController for the same instance of the TextFlow class. Hence, the text is split up but its flow is preserved. This is possible thanks to the new TLF classes easily accessible in Flash CS5. In this example, we focus on embedding fonts.
You can find the list of properties and methods of the TextSlicer class in our earlier tutorial
Flash CS5: Double 3D Text Effect with TLF Text.
You will find the general overview of the TLF classes in the video:
New AS3 Text Layout Classes in Flash CS5 - Tour and Example.
In another tutorial:
Flash CS5: XML Markup and Runtime Loading of TLF Text with AS3
we explain how to get the correct XML markup for TLF formatting.
Embedding Fonts into TextFlow with TextFlow.fontLookup
The only TLF class that has a property 'embedFonts' that explicitly mentions embedding fonts is the TLFTextField class. We find that often using plain Sprites as ContainerControllers is more efficient than using the TLFTextField and it keeps the swf files small. The question is then how do you embed fonts? It is the TextFlow.fontLookup property whose value is set to FontLookup.embedded_CFF that makes it possible to embed font directly into TextFlow.
In our example, we code the fontLookup property in the text file, markup.txt, that contains our text together with the proper TLF markup. The file is loaded at runtime. The other attributes of the text, in particular its size are set directly in the Timeline code as it is easily done with the properties of TextSlicer. Here is the content of the markup.txt file:
<TextFlow fontFamily="Lucida Console" fontLookup="embeddedCFF" whiteSpaceCollapse="preserve" xmlns="http://ns.adobe.com/textLayout/2008"><p><span>The text here is loaded at runtime from a text file containing text marked up for TLF. Everything else is done with AS3 using new TLF classes available in Flash CS5. The text is being broken up into pieces, displayed over separate Sprites, but still considered as one whole body of text. The text is broken into pieces using our custom AS3 class TextSlicer. Each fold is a separate slice. In this example, each slice contains one line of text but you can set it to contain any number of lines. The font is embedded into TextFlow.</span></p></TextFlow>
You can see how the fontLookup property is set.
The screen would appear blank if the font Lucida Console was not embedded in the fla file, stored in the Library, and linked to AS3. Flash CS5 makes it very easy. Below we show how to do it.
Storing Embedded Fonts in the Library for AS3 Use
Here are the steps illustarted by screenshots. Go to Text menu item and click Font Embedding:
The panel opens; we show its right half on the screen shot. Select the font that you want embedded:
Select the glyphs that you want embedded and click plus highlighted in red below:
Open ActionScript panel, click Export for ActionScript, make sure that the TLF button is selected. Click OK. Click OK in the Embed Font panel. A screen appears asking you if you want to create a class for the embedded font. Click yes. You are done.