Formatting the Text in Text Fields

We've already gone over the interface, so you know how to make changes to text manually, but now we will go over how to change the formatting of the text with ActionScript.

We will start out with the built-in object that Flash has for formatting text fields, called the TextFormat object.

The TextFormat Object

Before you can start creating these TextFormat objects, you should know that when you create a text field with ActionScript, a default TextFormat object is applied to it with these values:

• font-"Times New Roman"

• size-12

• color-0x000000 (black)

• bold-false

• italic-false

• underline-false

• url-"" (empty string)

• target-"" (empty string)

• align-"left"

• leftMargin-0

• rightMargin-0

• indent-0

• leading-0

• bullet-false

• letterSpacing-null

• tabStops-[] (an empty array)

Notice that the textColor property in the TextField object does the same thing as the color property of the TextFormat object, so if all you want to do is change the color of the text, the TextFormat object is overkill; just use the textColor property of the TextField object.

To create a new TextFormat object, you basically create a variable and set it to a new TextFormat object like this:

 var myFormat_fmt:TextFormat = new TextFormat(); 

Now we can start setting properties of this new TextFormat object like this:

 myFormat_fmt.align = "center"; myFormat_fmt.bold = true; myFormat_fmt.color = 0x00ff00; 

We still have to apply the format we want to a text field before it can be rendered. There are two options for applying TextFormats to text fields. The first one is setTextFormat(), which has several different ways of being used:

• textField.setTextFormat(textFormat) This way sets the textField to the textFormat.

• textField.setTextFormat(index,textFormat) This way sets the textFormat to the character at index.

• textField.setTextFormat(startIndex, endIndex, textFormat) This way sets the textFormat to all characters from startIndex to endIndex.

It is also important to know that this method can only be applied after the text field has text in it. Also note that indexing strings start at 0, not 1. So the first character in any string has an index of 0.

Let's go over a few examples of how to use this method.

In the first example, we are going to put a small phrase in a text field, and then format that text field to look nice.

1.

Star by creating a new Flash document.

2.

In the first frame, open the Actions panel, and put these actions in: //this will create the text field this.createTextField("phrase_txt",1,0,0,100,50); //this will set the text field to multiline, and wrap words phrase_txt.wordWrap = true; //here we put text in the text field phrase_txt.text = "Every cloud has a silver lining"; //now create the text format object and set some of its properties var myFormat_fmt:TextFormat = new TextFormat(); myFormat_fmt.color = 0x0000ff; myFormat_fmt.bold = true; myFormat_fmt.align = "center"; //now apply the format phrase_txt.setTextFormat(myFormat_fmt);

Now test the movie, and you should see your text formatted similar to Figure 15.7.

Figure 15.7. Using the TextFormat object can produce great results.

In the next example, we are going to use the same method, but change it a bit, and use a loop to gradually change the characters to the format.

1.	Using the preceding example, go back into the actions on the first frame and remove the last two lines, including the comment.
2.	Now put these actions in at the bottom. //this variable is for our loop var i:Number = 0; //this is the looping function that we will use this.onEnterFrame=function(){ if(i < phrase_txt.text.length){ phrase_txt.setTextFormat(i, myFormat_fmt); i++; }else{ //this will get rid of the looping function delete this.onEnterFrame; } }

Now when you test the movie this time, it will gradually change over to the format instead of all at once as it did before.

The final example of using the setTextFormat() method will set the text format to just one word.

1.	Still building on the preceding example, remove all of the code up to myFormat_fmt.bold = true.
2.	Now add these actions at the bottom: //this will set the text format to the word "silver" phrase_txt.setTextFormat(18,24,myFormat_fmt);

This time when you test the movie, it will look like Figure 15.8.

Figure 15.8. You can format just certain words in text using the setTextFormat() method.

As I mentioned earlier, there are two ways to set a TextFormat object to a text field, and the second way is using the setNewTextFormat() method, which is applied only one way, like this:

 textField.setNewTextFormat(textFormat); 

The difference between this method and the preceding one is that this method will work now and forever on text fields. Basically that means that unlike the setTextFormat() method where it has to be used only after text has been placed inside a text field, any text put in after that will not only not have the text format, but will also clear the text format back to default values. But if you use the setNewTextFormat() method, all text from then on will use that format.

Here is an example to help:

1.

Start a new Flash document.

2.

In the first frame, open the Actions panel and place these actions in: //create the text field, and put some text in it this.createTextField("phrase_txt",1,0,0,150,20); phrase_txt.text = "Every dog has"; //create the text format object and set some properties var myFormat_fmt:TextFormat = new TextFormat(); myFormat_fmt.color = 0xff0000; myFormat_fmt.underline = true; //now set the format to the text field phrase_txt.setNewTextFormat(myFormat_fmt); //now add more text to it phrase_txt.text += " his day";

Now when you test it, you won't see anything terrificit will have just done what you had done before, but this time, you added text to the text field after you applied the format. That would have caused the loss of the format if you had used setTextFormat instead of setNewTextFormat. To see what it is meant by that, go back to the line that we set the format on, and change it:

 phrase_txt.setTextFormat(myFormat_fmt); 

Now when you test, it looks as if the format was never applied, but in actuality it was applied and then it was cleared when you added text.

Now you've seen how to format text inside text fields using the TextFormat object, but there are two more ways to format text. One is to use HTML (which we discuss later in this chapter) and the other way is to use Cascading Style Sheets.

Cascading Style Sheets

Cascading Style Sheets (CSS) are not new to the Web, but since Flash can use them, it makes setting formats to text fields completely dynamic because you can actually create the style sheets in a text editor, save them as .css files, and load them in at runtime. Another great thing about their being dynamic is that you can have an HTML site and a Flash site all formatted with the same CSS.

For those of you who are new to CSS, it was designed to help keep content and design separate in HTML. What that means is that you can create content, label the type of content it is (title, body, footnote, and so on), and then create a CSS to format those particular types of content and set the CSS to the content. That way, whenever you want to update content, you don't have to worry about it not being in the right format, and if you want to update the format, the content does not have to be touched.

An example of this would be a newspaper. There is tons of content in a newspaper ranging from headlines, text body, writers' names, and even comments. But if there were no way of telling which was which, it would make the newspaper almost impossible to read with the title of the story, the writer's name, and the story itself all the exact same size and format. But the writers do not have time to set up format while they are writing the articles; they simply say this section is a headline, and that section is the body.

Taking that concept over to cascading style sheets, the CSS is the formatter, and all it needs is definitions. So let's take a look at setting up some CSS inside ActionScript.

The first thing you have to do is create a new StyleSheet object like this:

 var myStyle:TextField.StyleSheet = new TextField.StyleSheet(); 

Now that you have your StyleSheet, it's time to make some definitions for it using the setStyle() method like this:

 styleSheet.setStyle(styleName, theStyle); 

In this method, the first parameter is the name of the specific style (which we will go into when we start implementing the style sheets) and the second is an object that has style properties set. There are two ways of implementing this.

The first way is to create the style name and add attributes of that style all in the same method like this:

 myStyle.setStyle("title", {color: "#ff0000", fontSize: "20px"}); 

And the second way to implement the same method is to create a generic object, set the properties of the object the same way you would set style properties, and then pass the entire object to the style, like this:

 var tempStyle:Object = new Object(); tempStyle.color = "#ff0000"; tempStyle.fontSize = "20px"; //now pass the object to our already created StyleSheet myStyle.setStyle("title",tempStyle); //get rid of the temporary style object delete tempStyle; 

Both of these implementations will work with our style sheet, so whichever you feel more comfortable using is what you should go with. Just remember, if you create temporary objects to hold your style properties, get rid of them when you are done to regain memory.

Now that you've seen how to create the style sheet objects and how to set some styles to them, let's look at how to set them to our text, and how our text should be formatted to accept the styles.

There are several different ways of setting text to the StyleSheet. The first one we will cover will use already supported tags such as <p> and <span>. You can use their built-in class attribute to set each class to an already specified style class like this.

 <p >This is<span > small </span></p> 

And here is an example pulling the StyleSheet and the text together:

 //create the text field this.createTextField("phrase_txt",1,0,0,150,20); //set the html property to true phrase_txt.html = true; //create the StyleSheet object var myStyle:TextField.StyleSheet = new TextField.StyleSheet(); //create 2 style classes and set them to myStyle myStyle.setStyle(".title",{color: "#397dce", fontSize: "16px"}); myStyle.setStyle(".body",{color: "#000000", fontSize: "10px"}); //set the text field to the StyleSheet phrase_txt.styleSheet = myStyle; //set the text phrase_txt.htmlText="<p class='title'>This is<span class='body'> small </span> </p>"; 

A couple of things to notice in the preceding example; first, "styleSheet" beginning with a lowercase "s" is a property of the text field, and "StyleSheet" beginning with an uppercase "s" is an object class, so don't get those confused. And when we create style classes, we put a "." in front of the name and when we use them in our string, we don't need the period. Also, span tags are used inside the paragraph tag, and therefore must be closed before the paragraph tag.

Here we used classes of styles, but we can also style an entire HTML tag so that anything residing in that tag will inherit the style we apply.

Table 15.1 lists HTML tags in Flash that support having styles applied to them.

Table 15.1. Supported HTML Tags in Flash

Style Name	Supported Tag
p	All <p> tags.
body	All <body> tags, but the <p> tag will override this setting.
li	All <li> list item (bullet) tags.
a	All <a> anchor tags.
a:link	All <a> anchor tags, after the a style.
a:hover	All <a> anchor tags when the mouse is hovering over it, after the a and a:link styles have been applied. It will go back when the mouse goes off hover.
a:active	All <a> anchor tags when they are clicked on, after the a and a:link styles have been applied. When the mouse is released, the style will be removed.

Here is an example using the a style name.

 //create the text field this.createTextField("link_txt",1,0,0,100,20); //set the html property to true link_txt.html = true; //create the StyleSheet object linkStyle = new TextField.StyleSheet(); //set the styles of the style sheet linkStyle.setStyle("a:link",{color: "#ff0000"}); linkStyle.setStyle("a:hover",{color: "#0000ff"}); linkStyle.setStyle("a:active",{color: "#00ff00"}); //set the StyleSheet to the text field link_txt.styleSheet = linkStyle; //set the text to the text field link_txt.htmlText = "<a href='http://www.sams.com' target='_blank'> Sams Publishing</a>"; 

Now you have seen how to format classes of tags as well as how to format the entire class. You can of course mix them together. For instance, you can define the entire <p> tag, and then define classes so that the main <p> tag acts more like a default setting.

You can even create your own tags, and have them formatted to your own style names, as you will see in this next example.

[View full width]
 //create the text field this.createTextField("news_txt",1,0,0,200,80); //set some of the properties news_txt.html = true; news_txt.wordWrap = true //create the StyleSheet object var myStyle:TextField.StyleSheet = new TextField.StyleSheet(); //define the styles myStyle.setStyle("title", {color: "#ff0000", fontSize: "20px"}); myStyle.setStyle("body",{color: "#000000", fontSize: "12px"}); //set the StyleSheet to the text field news_txt.styleSheet = myStyle; //now set the text news_txt.htmlText="<title>This just in</title><br><body> Flash supports CSS in text fields< /body>"; 

So far in CSS we have talked about creating the styles inside ActionScript, but that really isn't the point. The whole idea is to create the CSS files and store them outside of the Flash file to be loaded in. The method of StyleSheet used to load external files is the load() method, and when the CSS has been loaded, it triggers the onLoad event, which we will also be using in the following example.

1.	The first thing you want to do is create a new Flash document, and save it somewhere called CSSTest.fla.
2.	After that, open up your favorite text editor, Notepad, or SciTe and put this text in it: title { color: #000000 font-size: 20px; display: block; textDecoration: italic; } body { color: #397dce; font-size: 12px; } emphasized { color: #ff0000; display: inline; }
3.	When the text is in, save the file to the same directory as the Flash file you just saved as myCSS.css.
4.	Go back into Flash, and in the first frame open up the Actions panel and place these actions within it: [View full width] //create the text field this.createTextField("news_txt",1,0,0,200,80); //set some of the properties news_txt.html = true; news_txt.wordWrap = true //create the StyleSheet object var myStyle:TextField.StyleSheet = new TextField.StyleSheet(); //create the event for when the CSS is loaded myStyle.onLoad = function(done){ if(done){ news_txt.styleSheet = myStyle; news_txt.htmlText = "<title>Read all about it </title><br><body>Can you <emphasized>believe </emphasized>this<body>"; }else{ trace("there was an error"); } } //now load the CSS myStyle.load("myCSS.css");

We have covered a lot of different ways to format a text field (and we will cover one more in the HTML section later in this chapter). We have even covered how to keep content and design separate from one another using Cascading Style Sheets and loading them in from outside our Flash file.

In this next section, we are going to cover how to manipulate the position using scroll properties, and we are going to cover the Mouse event that will make scrolling a lot easier.