Week 11 Topics

Chapter 12 - Working with Text

There are three different types of text fields in Flash MX - Static Text, Dynamic Text, and Input Text. Text blocks also differ in whether they are defined (indicated by a square corner handle) or extending (indicated by a circle corner handle). The corner handle type (round or square) and the position of the handle (which corner of the rectangle) indicates the type of text block -- see chart on pp. 455. You can change the text type from extended to defined and back by double clicking on the handle. There are a variety of text attributes (see table on pp. 457-459) that can be set in the Property Inspector.

Exercise 1 - Working with Static Text and Device Fonts (using staticText.fla)

Open the file. Using the Arrow tool, select the left text block and notice in the Property Inspector that the Font setting is _serif. Click on the right text block and notice the setting is the same. Choose Control>Test Movie and notice that the two text blocks look the same. In the next few steps, we will modify the right block of text to use a device font while leaving the left with the default, which is an embedded font.
Select the left text block. In the Property Inspector, notice that the box "Use Device Fonts" is unchecked -- this is the default setting when you create a Static Text block. Click on the right text block and check the "Use Device Fonts" box. Choose Control>Test Movie and notice that the text on the right is sharper. Save and close the file.

When you select a font for a text block, Flash MX takes all the font information and embeds it in the exported movie -- this is an embedded font. This is an advantage because you don't need to worry about whether the particular font is on the user's machine. The disadvantages are the increase in file size and some fonts cannot be exported with the movie becuase Flash MX does not recognize the font's outline. Sometimes you will see a warning about missing fonts.

Device fonts are special fonts to get around these problems. They are not embedded in the movie; instead, Flash MX displays the closest font on the user's machine. At font sizes below 10 point, they are normally easier to read. The drawback is that if the user may see something quite different than you intend. Flash MX includes three built-in device fonts: _sans, _serif, and _typewriter.

Exercise 2 - Loading Dynamic Text Fields Using External Files (using textFileLearning.txt and dynamicText.fla) - Use of a dynamic text field, a variable, and an external file that holds text permits Flash to display dynamic content.

In Windows Explorer or My Computer, double click on the .txt file to open it and insert content= at the top of the file. This assigns the text to the variable content. A variable is something that holds content. Open the .fla file in Flash and add a new layer named holder.
Select the Text tool -- in the Property Inspector, choose Dynamic Text in the drop down on the left, Multiline in the drop down in the middle, set the Font Color to black, the font to Verdana, the point size to 10pt, and click on the "Show Border Around Text" button below the font size dropdown. With the holder layer selected, click and drag on the Stage to create a box. After you draw you can use the handle to resize it.
In the Property Inspector, enter the word content in the variable field in the textbox on the right. Note that this is the same name as you assigned to the text in the text file. In the Main Timeline, add a layer, naming it actions and placing it above the other layers. In the first frame, select the btnUp button and open the Actions panel (Window>Actions or F9).
Choose Actions>Browser/Network and double click on the loadVariables option. In the dialog box, enter textFileLearning.txt for URL -- this is a relative reference so in the absence of a folder name, this means that the .txt file is in the same folder as the .swf file that will be created from the .fla file. Use the default values for the other variables.
Choose Control>Test Movie You should see text in the box. If you don't, select the text box and make sure the stroke color can be seen against the background. If you don't enter the file name correctly, you should get a message saying "error opening file". Save the file and leave it open for the next exercise.

Exercise 3 - Working with Dynamic Text and HTML -- In this exercise, we will change one setting in the Dynamic Text field to allow Flash MX to display the text using HTML applied to the content in the external text file. Flash MX recognizes the following HTML tags: <a>

Open the .txt file from the previous exercise and add a before "Renting the Board" and put a after it. Add a to "lift ticket, rental, and lessons", an to "reduced", along with appropriate closing tags. Save and close this file.
In the fla file, select the dynamic text field on the stage, and in the Property Inspector click the "Render text as HTML button" which is immediately to the left of the "Show Border Around Text" button you used in exercise 2. Choose Control>Test Movie to see the formatting. Save the file and leave it open for the next exercise.

Exercise 4 - Scrollable Dynamic Text Fields

Using the .fla file from the previous exercise, select the Dynamic Text field on the Stage and in the Property Inspector, type learnText in the Instance Name box. You will need the instance name so that ActionScripting on the Buttons can conrol the text field. The variable name is needed to load the text from the external text file into the Dynamtic Text field.
Lock the holder level and insert a new layer, naming it buttons, and positioned below the actions layer.
Open the library (F11) and drag an instance of each button onto the Stage to the right of the textbox with the down button under the up button and press F9 to open the Actions panel.
In the Actions panel, choose Objects>Movie>TextField>Properties and doubleclick on the scroll property to add it to the Script pane. In the Expressions box, put your cursor before .scroll and type the instance name of the Dynamic Text Field: learnText. After the scroll, type -=1. The -= is used in programming languages as a shorthand. a-=1 is the same as writing a = a - 1.
Repeat this for the btnDown button, except you will enter +=1. The += is also a shorthand: a+=1 is equivalent to writing a = a + 1. Control>Test Movie -- notice that when you are at the top, the scroll up button has no effect. Save and close the file.

Exercise 5 - Working with Text Input (using inputText.fla)

Open the file. Click the insert layer button 5 times, and name the new layers, from bottom to top, as follows: static text, input text, enter btn, labels, and actions. Select the static text layer and select the Text tool and set the font color to white, and add three Static Text boxes: "Welcome Please enter your name and password", "username", and "password". Lock the static text layer.
Click on the input text layer to select it and select the Text tool. In the Property Inspector, choose Input Text for the Text Type. Create a text box to the right of username: In the Property Inspector, select black for the Font Color and Single Line for the Line Type. [Choosing Input Text creates a textbox with a white background so one wants a font color that contrasts with that] Click the "Show Border Around Text" button.. Enter name in the var field. The default is that there is no restriction on the number of characters that can be typed.
Create another Input Text box, this time to the right of "password:" This time choose Password for the Line Type and enter password as the variable name. Lock the input text layer and select enter btn layer. Open the Library and drag an instance of the btnEnter onto the Stage. Lock the layer.
On the labels and actions layer, add a keyframe at frames 10 and 20. Select Frame 10 on the labels layer. In the Property Inspector, type pass in the Frame Label box. Select frame 20 and type fail in the Frame Label box.
On the actions layer, add a Stop frame action (Actions>Movie Control>stop) to Frames 1, 10, and 20. Lock both layers. Select Frame 20 on the background layer and press F5 to add frames so that you will be able to see the background for all the frames.
Unlock the static text layer and add a blank keyframe (F7) to Frames 10 and 20. In frame 10, create a Static Text box saying "Correct". In frame 20, create a Static text box saying "Incorrect". Lock the static text layer.
Unlock the enter btn layer and add a blank keyframe to Frames 10 and 20. On frame 20, drag an instance of the btnTryAgain button onto the Stage.
Click on the Enter button on the Stage in frame 1 to select it. Open the Actions panel and choose Actions>Movie Control and double click on the on action. Select the events Release and KeyPress. Click in the empty field next to the keypress option and press Enter to add this to the empty field.
Choose Actions>Conditions/Loops and double click on the if action. In the condition field, type the following condition: (name=="kymberlee") && (password=="gotSnow"). = assigns a value to a variable, whereas == tests for equality
Choose Actions>Movie Control and doubleclick on the goto action. For type, select Frame Label, for Frame select pass from the drop down menu, and select Goto and Stop.
Choose Actions>Conditions/Loops and double click on the else to add it to the Script pane. Then choose Actions>Movie Control and double click on the goto to add it to the Script pane. For type, choose Frame Label, for frame, type fail, and select Goto and Stop.
In Frame 20 on the enter btn layer, select the Try Again? button. In the Actions Panel, choose Actions>Movie Control and double click on the on action. Select the event Release. Choose Actions>Movie Control and double click on the goto action. For type, select Frame Number, for Frame, enter 1, and select Goto and Stop. This tells Flash when the user clicks this button to go to frame 1 and stop. Select Control>Test Movie.

inputText.fla on website shows a version that works.

Revised: April 7, 2006. Comments to William Pegram, wpegram@nvcc.edu