Flash Assignment 6 – Working with Text

Photo credit: Stacey Lynn Baum, uploaded via Flickr, Creative Commons License

6.1 Understanding Flash Text:

The Flash text properties panel.

• 6.1.1 Understanding Text Field Types:  In this introductory section, we cover the various types of so-called classic text field types in Flash.  Text fields of this type may assume one of three forms:
• Static text, or what might be called a label, is text that will not be modified during the execution of the Flash movie.
• Input text describes a text field where a user might enter some information, such as a user name or password.  This type of text may be read and used in the execution of Action Script code within the Flash movie.
• Dynamic text is what might be termed output-text.  This is text that may be generated and displayed by processes executed within the Flash movie.

When creating text fields in Flash, regardless of type, we note that the properties panel affords us a rich variety of formatting options on par with what one might expect in a full-fledged word processing application.

• 6.1.2 Understanding Text Layout Format:  In addition to the so-called classic text type discussed in the previous section, Flash CS5 introduces a new type of text known as Text Layout Format (TLF).  Text designated as TLF has many more formatting options, going beyond that found in most word processing apps.  The formatting options for TLF text are in fact more akin to those found in desktop publishing and typography apps, allowing for granular control over elements such as leading (spacing between successive lines), tracking (character spacing), multi column layout, and so forth. 

Particularly noteworthy is that when using TLF text, one may elect to have the chosen display font baked right into the compiled Flash SWF, so it is not incumbent on the user to have a particular font installed on her system in order to view the content as envisioned by the designer.  Good stuff!

6.2 Working with Text:

• 6.2.1 Creating Text Fields:  Here we review some of the material we covered earlier in our primer on text boxes.  We note that we can create expandable text boxes with our text tool by simply clicking anywhere on our stage and beginning to type.  We know that we are working with an expandable text box by the circular handle present at the upper right corner of the box.  This type of text box will continue to widen as we continue to enter text therein.

A second type of text box is the fixed-width variety.  We create a fixed-width box by using our text tool to click and drag a rectangular shape until we reach our desired width.  When we begin typing in this type of box, our text will automatically wrap when the fixed width has been reached, continuing to push the lower bounds of the box downward as we add more text.  The fixed-width text box is readily identifiable by the presence of the square handle at the upper right corner of the box.

A noteworthy property of the above-reference shaped handles on these text boxes is that they can be used to alter the text box type.  For instance, one may grab the circular handle on the expanding box, and drag it to any desired width.  This will size the text box accordingly, and convert it to a fixed-width box.  Similarly, double-clicking on the square handle of a fixed-width box will unwrap the text therein and size the box width to accommodate the existing text.  At that point, the box will be converted to an expandable box, continuing to grow as more text is added.

We note here that when creating input text fields, we do not have the click-and-type option available to create expanding text fields.  However, once a fixed width input field is defined, we can still convert it to an expandable field in the conventional manner.  Also remarkable with respect to input fields is the enabling of the show border around text button in the character section of the properties panel.  Selecting this option gives the field the appearance of the familiar input box, replete with white background and black border.

• 6.2.2 Advanced Text Formatting:  Perhaps this section less than aptly named; this is a bit of review on the subject of text formatting.  Herein, we experiment with adjusting font style, size, character spacing, leading, and alignment.  These are important skills to master if one will be doing much work with text. 

• 6.2.3 Using Text Rendering Methods:  As noted earlier, Flash enables one to embed specific font data into one’s published SWF file, ensuring that the text will render as intended regardless of whether or not the desired font is installed on the user’s system.  However, in this exercise, we experiment with this type of embedding and note its effects on the resultant file size of the SWF.  Of course, larger file sizes are less desirable than smaller ones, so this technique should be used sparingly. 

We also examine other options for rendering our text in the published SWF.  The most efficient of these is simply instructing Flash to use the device fonts, which means that Flash will search the user’s system for the specified font, and use it if available, or some other reasonable alternative if the specified font is not installed.

Another option is to instruct Flash to create bitmap shapes of the character outlines.  This can be more efficient space-wise than embedding the font definitions, but results in a lower quality approximation of the desired font.  This effect can be mitigated somewhat by opting for the application of anti-aliasing filters to the bitmapped characters.  This results in a better quality image than a purely bitmapped approximation of the typeface.  The resulting SWF is somewhat larger than a bitmapped version, but still smaller than a SWf with the specified font data baked-in.  Note that there are a few options for applying anti-aliasing filters, so it might be worth experimenting with them to see which works best for one’s particular application.  As always, your mileage may vary.

6.3 Advanced Text Techniques:

• 6.3.1 Adding Filters to Text:  In this section, we examine some the powerful graphic filters that Flash can apply to our text.  We have used some of these filters previously in our tutorials on working with artwork, so these are not wholly unfamiliar. 

Filters are managed in the lowest portion of the properties panel.  Selecting the add filter icon at the bottom of the filter management area opens a menu list of filter effects from which to choose.  Options include drop shadow, blur, glow, bevel, gradient glow and gradient bevel.  Once a filter is selected, further options appear in the filter management area, allowing one to tweak the filter settings as desired.  If one gets a little too crazy with filter settings and is not sure how to back-up, there is also a reset filter button, that sets the filter options back to default.  One can also choose to discard the filter altogether with the delete filter button, or simply remove its effects with the enable/disable filter button.

6.3.2 Using External Text Files:   In this exercise, we explore the process of generating text from an external text file in a SWF movie.  The example used here is a tip of the day flash movie that would be updated daily with a new passage of helpful text.  The trick here is that the tip should be able to be easily updated without having to re-edit the Flash FLA file each day.  Instead, this method will enable one to simply instruct the SWF movie to display the contents of a stand-alone text file, which itself can be easily updated daily.

We begin this process by inserting a special type of text box known as a text area from the components panel.  This text area can be dragged-and-dropped from the components panel right onto our stage, then sized and positioned on the properties panel.  Also set on the properties panel are some other behavior options, such as word wrap and scroll properties.

Next we will go to our code snippets panel and locate the item load external text located in the load and unload folder.  We will also display our actions panel in the application (recall that all of our myriad panels, if not present on our screen, can be made visible by checking them on the Window menu).  Now, with our code snippets and actions panels in view, we double click on the load external text code snippet, and note that our actions panel immediately populates with some action script code. 

We edit this generic code a bit, specifically instructing Flash to grab the tip of the day text that we want to display by specifying its path.  Also, we specify where the text should be displayed (in our text area).  In the Function segment of out action script code, we add a line with the form object.property = value, which should be familiar to those who have done some work with object oriented programming.  The object at issue here is our text area, which is a movie clip object that we gave an instance name of TipText_mc.  The property we wish to define is Text, and the value we will assign is textData, which is the variable name that Flash choose to assign to our text file.  So, in object.property = value syntax we specify:  TipText_mc.text = textData; (the semicolon being a line terminator in ActionScript syntax). 

Now, when we run our executable SWF file, the text in the plain TXT file that we specified is rendered in the text area of our Flash movie.  The beauty of this is that we may now have our minions update this text file daily, without the need for any modifying of the Flash movie.

6.4 Animating Text:

• 6.4.1 Animating Text Perspective:  In this lesson we have some fun with our 3D rotation tool in conjunction with motion tweens.  By right-clicking on various objects on our stage, text boxes in this example, we open a context menu and select create motion tween.  This inserts a 1 second timeline (by default) associated with the object’s layer, and creates a keyframe at the last frame in the timeline.  We can now manipulate the object’s appearance in the ending keyframe with any one of the tools available (such as 3D rotation, free transform, etc).  Now when we generate the SWF and play the movie, our object will gradually transform from its appearance in the first frame to the appearance in the last frame over the duration of the movie.  We can repeat this technique for each object and/or layer in the Flash movie.

As an additional exercise, we add a bit of code to prevent our flash movie from continually looping (the default behavior) by inserting a stop(); command in our actions panel.  Note that we create a new layer for the actions command, as is dictated by good practice guidelines.

• 6.4.2 Animating Text Characters:  Well, this is pretty freakin’ cool.  Here we select a text box containing some content.  From the menu we select Modify => Break Apart, and presto, each character now exists in its own text box.  Now we can manipulate each character individually.  In this example, we create key frames on every fifth frame of our movie, allowing one additional character (text box) to appear at each keyframe.  Neat!

• 6.4.3 Animating Text with a Motion Tween:  In this exercise, we do a bit more with motion tweens.  Here we reveal letters progressively as in the previous exercise, but we also add another object into the mix.  A movie clip object in the form of a pencil will follow along with the text as it is revealed, giving the illusion that the pencil is drawing the letters.  The trick here is that rather than just specifying a start and end point for the pencil, we specify a keyframe at each individual frame in the animation, so the pencil appears to trace-out the letters faithfully.  By moving the position of the pencil along the path of the letter slightly at each frame, this effect is realized.

• 6.4.4 Animating Text with a Mask:  Building on the previous exercise, we enhance the effect of the pencil drawing out the characters here by using a mask over the characters to progressively reveal the strokes as the pencil object moves along.  The clever bit here is copying the text and pasting it in place to a new layer above the text layer. Here we again choose Modify => Break Apart, which splits the newly pasted text box into individual boxes, as in the previous example.  However, if we perform the same menu command again, the individual text boxes fall away, and we are left with a graphic object that is merely a shape in the form of our text.  Right-clicking on the layer icon allows us then option to convert this shape to a mask.  Adding keyframes to this layer that correspond to the pencil keyframes allows us to reveal the mask along with the strokes of the pencil, making for more realistic animation of the pencil drawing the characters. 

Furthermore, we are introduced to the motion editor panel, which allows us to step our way through a motion tween, and refine the motion further.