| Creating Formatted Text |
| Return to the Tutorials page |
| |
|
Goal: Create dynamic text fields, apply formatting styles and place the text fields in specific stage locations.
Imported classes: flash.display.Sprite, flash.text.TextField,
flash.text.TextFormat and flash.text.TextFieldAutoSize and
RectanglesSquare (custom class).
Methods: setTextFormat() and addChild()
Flash version: Flash 9 Professional
Download final version
The ActionScript 3.0 Foundation Elements can be found in the Members' Section.
In this tutorial we will create text fields and apply custom text formats. Then just for fun, we will import the squares and rectangles we
created previously in RectanglesSquare.as so we can place text labels over them!
|
Open Flash 9 and select a new Flash file (ActionScript 3.0). Name it FormattedText and save it inside the FlasherAS3_PartI
folder. In the Document Class box of the Properties panel, type FormattedText and then save the changes.
Open a new ActionScript file, name it FormattedText and then save it inside the Code folder.
You now have eighteen separate files on your computer:
In the FlasherAS3_PartI folder -
LineAndCurve.fla, Triangles.fla, RectanglesSquare.fla, CircleEllipse.fla, Sprites.fla, MovieClips.fla,
Filters.fla, InheritingClasses.fla and FormattedText.fla.
In the Code subfolder -
LineCurve.as, Triangles.as, RectanglesSquare.as, CircleEllipse.as, Sprites.as, MovieClips.as, Filters.as,
InheritingClasses.as and FormattedText.as.
Keep both FormattedText files open as we will be working with both of them simultaneously.
|
|
Return to FormattedText.fla and set the Classpath to the Code subfolder inside the FlasherAS3_PartI folder. Save
your changes.
|
|
Return to FormattedText.as and type in the following code:
Line 01: package
Line 02: {
Line 03: public class FormattedText extends Sprite
Line 04: {
Line 05: public function FormattedText()
Line 06: {
Line 07: }
Line 08: }
Line 09: }
Save the changes.
|
|
This tutorial will require the Sprite, TextField,
TextFormat and TextFieldAutoSize classes so let's import them now.
Place your cursor at the end of line 2 and press Return/Enter.
On line 3 type: import flash.display.Sprite;
Press Return/Enter.
On line 4 type: import flash.text.TextField;
Press Return/Enter.
On line 5 type: import flash.text.TextFormat;
Press Return/Enter.
On line 6 type: import flash.text.TextFieldAutoSize;
Press Return/Enter to add a blank line on line 7.
Place your cursor at the end of line 11 and press Return/Enter.
All of our text code will be placed between the constructor function's opening & closing curly braces.
Save the changes. The set up is done; let's create some formatted text!
|
|
There are three steps required to place a text field on the stage:
- Declare a variable (myText), set the data type to TextField and then instantiate a new TextField.
- Using the text property, set the text content (a text string) to I love to Flash!.
A Text Field can accept several property types. The most important property is text as it accepts
string content that will be placed inside the field.
- Using the addChild() method, place the text field on the stage.
On line 12 type: var myText:TextField = new TextField();
Press Return/Enter.
On line 13 type: myText.text = "I love to Flash!";
Press Return/Enter.
On line 14 type: addChild(myText);
Your code should look like this: [ view code ]
Save the changes and test the movie. In the upper left corner of the stage you will see the short sentence: I love to Flash!.
Well done!
Now let's add some formatting to make it more eye catching...
|
|
Creating a Text Format begins by declaring a variable (myFormat), setting the data type to TextFormat and then
instantiating a new TextFormat. Sound familiar? It should. You will find that ActionScript 3.0 uses a similar pattern for instantiation
new objects.
Place your cursor at the end of line 14 and press Return/Enter twice.
On line 16 type: var myFormat:TextFormat = new TextFormat();
The TextFormat class accepts 18 different properties. In this example we will be utilizing five of them: font,
color, size, bold and underline.
First, let's set the font type to the Verdana font. Press Return/Enter.
On line 17 type: myFormat.font = "Verdana";
Next add the color (red - #FF0000) and set the font size (15). Press Return/Enter.
On line 18 type: myFormat.color = 0xFF0000;
Press Return/Enter.
On line 19 type: myFormat.size = 15;
Press Return/Enter.
Now let's make the text bold. The bold property is a Boolean (true / false).
On line 20 type: myFormat.bold = true;
The underline property is a Boolean as well. Press Return/Enter.
On line 21 type: myFormat.underline = true;
Your code should look like this: [ view code ]
Save the changes and test the movie. And our text looks...
...exactly the same. What happened? We created a text format but we haven't told Flash to apply it to anything yet. Let's do that now...
|
|
|
Using the setTextFormat() method, apply the myFormat text format to the myText text field.
Place your cursor at the end of line 21 and press Return/Enter.
On line 22 type: myText.setTextFormat(myFormat);
Your code should look like this: [ view code ]
Save the changes and test the movie. This time our text has Verdana font, is red, size 15, bold and
underlined. How easy was that?
The only part of the text field that is visible is I love to Fla. Now we could set a manual width to this text field but that would
mean we would need to change the width amount everytime the text increased or decreased. A much more efficient solution is provided through
the TextFieldAutoSize class which we imported on line 6.
The TextFieldAutoSize class accepts four Constants variable strings: CENTER, LEFT, RIGHT,
NONE. We will be using LEFT which ensures that the text is to be treated as left-justified text
(the left side of the text field remains fixed and any resizing of a single line is on the right side).
Place your cursor at the end of line 13 and press Return/Enter.
On line 14 type: myText.autoSize = TextFieldAutoSize.LEFT;
Your code should look like this: [ view code ]
Save the changes and test the movie. Drumroll please...
...and yes! Our text field has automatically adjusted to fit the length of the text string.
Let's see how far we can take this...Return to line 13 and add three more I love to Flash! sentences to the text string.
Line 13 should look like this: myText.text = "I love to Flash!I love to Flash!I love to Flash!I love to Flash!";
Save the changes, test the movie and...
...yes indeed, the text field has automatically adjusted itself to incorporate the additional text length. This is such a simple method to use
but it really going to come in handy as time goes on!
|
|
Okay, time for the fun part! Let's import the rectangle and square shapes from RectanglesSquare.as and place them on the stage. In the next
section we'll put text labels on each shape but first let's reaquaint ourselves with the RectanglesSquare files.
Open RectanglesSquare.as and take a quick look at the code. This custom class creates four shapes (two rectangles & two squares) and places
them on the stage. We will need to import this class into FormattedText.as so take note of the class name. The class name is
RectanglesSquare, which matches the file name. Close RectanglesSquare.as.
Return to FormattedText.as. Time to import the RectanglesSquare custom class. Place your cursor at the end of line 6
and press Return/Enter.
On line 7 type: import RectanglesSquare;
Now that the class is imported, it is time to apply the code inside it through inheritance. On line 9 change
extends Sprite to extends RectanglesSquare.
Line 9 should now look like this: public class FormattedText extends RectanglesSquare
Your code should look like this: [ view code ]
Save the changes, test the movie and now our movie contains four shapes on the stage in addition to the text line at the top.
Hey, you're becoming a whiz at this! On to the labels...
|
|
Our goal is to place four text labels "inside" each of the four shapes.
(Note: the text fields will appear to be inside the shapes but they are actually sitting on another layer on the stage.)
Each of the shapes has a strong fill color so black text isn't going to show up very well. Let's create a Text Format that contains
Arial text that is set to white (#FFFFFF), set the font size to 15 and then make it bold. Give the format a
variable name of labelFormat.
Place your cursor at the end of line 24 and press Return/Enter twice.
Beginning on line 26, type the following:
Line 26: var labelFormat:TextFormat = new TextFormat();
Press Return/Enter.
Line 27: labelFormat.font = "Arial";
Press Return/Enter.
Line 28: labelFormat.color = 0xFFFFFF;
Press Return/Enter.
Line 29: labelFormat.size = 15;
Press Return/Enter.
Line 30: labelFormat.bold = true;
Press Return/Enter.
Your code should look like this: [ view code ]
Well done! Now we're ready to create our four text labels...
|
|
The first text label will be placed over the yellow rectangle. Place your cursor at the end of line 30 and press Return/Enter twice.
Step 1: Declare a variable (textYellow), set the data type to TextField and then instantiate a new TextField.
On line 32 type: var textYellow:TextField = new TextField();
Press Return/Enter.
Step 2: Set the text string to YELLOW.
On line 33 type: textYellow.text = "YELLOW";
Press Return/Enter.
Step 3: Set the autoSize property to left alignment using the
TextFieldAutoSize() method.
On line 34 type: textYellow.autoSize = TextFieldAutoSize.LEFT;
Press Return/Enter.
Step 4: Using the addChild() method, place the text field on the stage.
On line 35 type: addChild(textYellow);
Press Return/Enter.
Step 5: Place the text field at 25 horizontally and 75 vertically.
Where did those values come from? In RectanglesSquares.as on line 13, the x and y coordinates for the yellow rectangle are
listed as 25 and 75.
On line 36 type: textYellow.x = 25;
Press Return/Enter.
On line 37 type: textYellow.y = 75;
Press Return/Enter.
Step 6: Using the setTextFormat() class, apply the format (labelFormat) to the text field
(textYellow).
On line 38 type: textYellow.setTextFormat(labelFormat);
Your code should look like this: [ view code ]
Save the changes and then test the movie. A white text label that reads YELLOW sits over the upper left corner of the
yellow rectangle on the stage.
|
|
The second text label will be placed over the purple square. Place your cursor at the end of line 38 and press Return/Enter twice.
Step 1: Declare a variable (textPurple), set the data type to TextField and then instantiate a new
TextField.
On line 40 type: var textPurple:TextField = new TextField();
Press Return/Enter.
Step 2: Set the text string to PURPLE.
On line 41 type: textPurple.text = "PURPLE";
Press Return/Enter.
Step 3: Set the autoSize property to left alignment using the
TextFieldAutoSize() method.
On line 42 type: textPurple.autoSize = TextFieldAutoSize.LEFT;
Press Return/Enter.
Step 4: Using the addChild() method, place the text field on the stage.
On line 43 type: addChild(textPurple);
Press Return/Enter.
Step 5: Place the text field at 250 horizontally and 35 vertically.
Where did those values come from? In RectanglesSquares.as, on line 20, the x and y coordinates for the purple square
are listed as 250 and 35.
On line 44 type: textPurple.x = 250;
Press Return/Enter.
On line 45 type: textPurple.y = 35;
Press Return/Enter.
Step 6: Using the setTextFormat() class, apply the format (labelFormat) to the text field
(textPurple).
On line 46 type: textPurple.setTextFormat(labelFormat);
Your code should look like this: [ view code ]
Save the changes and then test the movie. A white text label that reads PURPLE sits over the upper left corner of the purple square.
|
|
Try the next one yourself! Repeat the same steps for the third label. The third text label will be placed over the green rectangle.
Place your cursor at the end of line 46 and press Return/Enter twice.
- Step 1: Declare a variable (textGreen), set the data type to TextField and then instantiate a new TextField.
(Line 48)
Press Return/Enter.
- Step 2: Set the text string to GREEN. (Line 49)
Press Return/Enter.
- Step 3: Set the autoSize property to left alignment using the
TextFieldAutoSize() method. (Line 50)
Press Return/Enter.
- Step 4: Using the addChild() method, place the text field on the stage. (Line 51)
Press Return/Enter.
- Step 5: Place the text field at 25 horizontally and 255 vertically.(Lines 52 & 53)
Where did those values come from? In RectanglesSquares.as on line 27, the x and y coordinates for the purple square are
listed as 25 and 255.
Press Return/Enter.
- Step 6: Using the setTextFormat() class, apply the format (labelFormat) to the text field (textGreen). (Line 54)
Your code should look like this: [ view code ]
Save the changes and then test the movie. A white text label that reads GREENsits over the upper left corner of the green rectangle.
|
|
Finally, repeat the same steps for the fourth label. The fourth text label will be placed over the blue square.
Place your cursor at the end of line 54 and press Return/Enter twice.
- Step 1: Declare a variable (textBlue), set the data type to TextField and then instantiate a new TextField.
(Line 56)
Press Return/Enter.
- Step 2: Set the text string to BLUE. (Line 57)
Press Return/Enter.
- Step 3: Set the autoSize property to left alignment using the
TextFieldAutoSize() method. (Line 58)
Press Return/Enter.
- Step 4: Using the addChild() method, place the text field on the stage. (Line 59)
Press Return/Enter.
- Step 5: Place the text field at 250 horizontally and 280 vertically. (Lines 60 & 61).
Where did those values come from? In RectanglesSquares.as on line 34, the x and y coordinates for the purple square are
listed as 250 and 280.
Press Return/Enter.
- Step 6: Using the setTextFormat() class, apply the format (labelFormat) to the
text field (textBlue). (Line 62)
Your code should look like this: [ view code ]
Save the changes and then test the movie. A white text label that reads BLUE sits over the upper left corner of the blue square.
|
|
The steps are:
- Create a Text Field and place it on the stage
- Create a Text Format and then apply the format to the Text Field.
In the next tutorial learn how to place load text from an external source!
[ Load External Text tutorial ]
|
