3 March 10 – Text

CSM ActionScript Class Lecture 3 March 10: Text from Cody Tolmasoff on Vimeo.

Screencast of lecture from College of San Mateo ActionScript class from 3/3/10

Tonight’s lecture is based upon Chapter 10 in the book “Learning ActionScript 3.0″.

Assignment:

  1. Show a text field displaying dynamic text with text field attributes set
    (i.e. text color, border color, background color, multiline, etc…)
  2. Dynamic text in a text field showing 2 different text formats
    (i.e. selecting the font, font size, leading, indentation, etc…)
  3. Dynamic HTML Text in a text field using CSS formatting

Lecture:

  • Creating Text Fields
  • Setting Text Field Characteristics
  • Formatting Text
  • Formatting with CSS and HTML
  • Triggering ActionScript from HTML Links
  • Loading HTML and CSS

Selecting the text tool, drawing a text field on the stage, and either pasting text from an outside source or typing it in yourself is pretty easy. However this static text generation (although useful) is not typically how we display text in a flash project. A good amount of the time we get text from some other source that we load at the time our project is viewed, or possibly generated from somewhere else in our project. Knowing how to prepare an text area for supporting this dynamic text is pretty important in a production environment.

Now just because we are learning this today doesn’t mean that you should never type static text into a project again, you need to make the determination of what is the right tool for the project (or part of the project) you have at hand. This is just another still to put into your tool box.

Some simple display of dynamic text:
Open a new Flash file and save it somewhere you can find it later. With the first keyframe selected open the Actions Panel, it should say Actions-Frame at the very top.

Lets write the shell for a some functions for 3 text fields we are going to display:

//text field initialization stuff
var myTextField:TextField = new TextField();
myTextField.x = myTextField.y = 100;
myTextField.width = 250;
//
//initilize text field(s)
//makeTextField();
//makeDynamicTextField();
//makeInputTextField();
//
//add text field to the stage
addChild(myTextField);
//
function makeTextField() {
    //code to make the text field
}
function makeDynamicTextField():void {
    //code to make the dynamic text field
}
function makeInputTextField():void {
    //code to make the input text filed
}

The above code is the shell for our project. At the top we have a basic text field initialization (some var equals new text field, add that new text field to the stage). We also have 3 function definitions (makeTextField(), makeDynamicTextField(), and makeInputTextField()) that we will fill in momentarily to create content for these text fields. Notice that the calls to these functions (at the top) are commented out. After we write the function bodies, we will uncomment these functions one at a time.

function makeTextField()


This one is pretty simple, we are going to take the text field we already created and populate it with some text:

myTextField.text = "Yo, I'm text in a text field!";

Uncomment the call to

makeTextField();

and test your movie, you should see this text displayed.

function makeDynamicTextField()


Re-comment out your call to

makeTextField();

and uncomment the call to

makeDynamicTextField();

. Find the function definition for

makeDynamicTextField()

.

In the function body, lets add a quick for statement to make some quick content:

for (var i:Number = 0; i < = 25; i++) {
        myTextField.appendText("item #" + i + ", ")
    }

Note: textField.appendText(“your text string”) is similar to textField.text += “your text string”; however it offers us two really important things. First appendText() is rendered much faster than +=. Second if you set any formatting before you appendText(), appendText() will continue this formatting, whereas += will not.

You should see some items displayed on the stage, but not all 24 of them. Lets add some text field attributes so we can see them (note these typically affect the text field as a whole.

    myTextField.border = true;
    myTextField.borderColor = 0xFF0000;
    myTextField.background = true;
    myTextField.backgroundColor = 0xCCCCCC;
    myTextField.textColor = 0x3366FF;
    myTextField.selectable = false;
    myTextField.multiline = true;
    myTextField.wordWrap = true;
    myTextField.autoSize = "left";
    //
    for (var i:Number = 0; i < = 25; i++) {
        myTextField.appendText("item #" + i + ", ")
    }

Test your movie, you should now be able to see this formatting. Try commenting out various lines above and see how your text field changes.

Formatting a text field as a whole is quick and easy, and comes in handy for a lot of stuff. However it's necessary at times to format only sections of text a certain way. In a few minutes we will look at how to apply text formats which give us greater control over our text fields.

function makeInputTextField()


Re-comment out your call to

 makeDynamicTextField();

and uncomment the call to

 makeInputTextField();

. Find the function definition for

makeInputTextField()

.

Add the following to the body of the

function makeInputTextField()
    myTextField.height = 20;
    myTextField.border = true;
    myTextField.background = true;
    myTextField.type = "input";
    myTextField.maxChars = 10;
    myTextField.restrict = "0-9";
    myTextField.displayAsPassword = true;
    stage.focus = myTextField;

Test your movie, you should now be able to see this formatting. Try commenting out various lines above and see how your text field changes.

Formatting Text
Often times formatting the text field as a whole is not specific enough to do what we want. When we want to format text 2 (or more) different ways in a text field, we might use a defined text format to accomplish this.

In a new flash file (saved somewhere you can find later), select the first keyframe and open the actions panel. Add the following initial code:

var myTextField:TextField = new TextField();
var firstTextFormat:TextFormat = new TextFormat();
var secondTextFormat:TextFormat = new TextFormat();
//
//firstTextFormatting();
populateTextField();
//secondTextFormatting();
//add text field to the stage
addChild(myTextField);
//initial population and attributes of text field
function populateTextField():void {
    //code for initial text field formatting,
//and populating with some text
}
function firstTextFormatting():void {
    //our first text format definition
}
function secondTextFormatting():void {
    //our second text format definition,
//and application
}

function populateTextfield()


Find the function definition. For the body of this function add the following code:

    myTextField.x = myTextField.y = 50;
    myTextField.width = 450;
    myTextField.border = myTextField.background = true;
    myTextField.multiline = myTextField.wordWrap = true;
    myTextField.autoSize = "left";
    myTextField.defaultTextFormat = firstTextFormat;
    myTextField.text = "";

These attributes for a text field should feel a little familiar by this point.

Lorem Ipsum
for the last line of the above code

myTextField.text = "";

we need to add some text. I'm sure from other classes you are familiar with Lorem Ipsum. Go find your favorite Lorem Ipsum text and place it between the quotation marks.

Test your movie and you should see the text show up in a text field in your movie.

function firstTextFormatting()


Uncomment the function call at the top

firstTextFormatting()

. Find the

function firstTextFormatting()

definition. Add the following code to the function body:

    firstTextFormat.font = "Verdana";
    firstTextFormat.color = 0xCC0000;
    firstTextFormat.size = 18;
    firstTextFormat.leading = 5;
    firstTextFormat.leftMargin = 5;
    firstTextFormat.rightMargin = 5;
    firstTextFormat.indent = 25;

function secondTextFormatting()


Uncomment the function call at the top

secondTextFormatting()

. Find the

function secondTextFormatting()

definition. Add the following code to the function body:

    secondTextFormat.color = 0x0000CC;
    secondTextFormat.bold = true;
    secondTextFormat.underline = true;
    myTextField.setTextFormat(secondTextFormat, 0, 5);

Notice the last line sets the text format of your text field to the secondTextFormat, and it starts at character 0, and ends at character 5 (This counts like an array would, starting with 0 instead of 1).

CSS and HTML Text Formatting
Dynamic text in Flash supports some HTML and CSS formatting. Don't expect everything HTML and CSS has to offer, and at times this can be a little buggy, however being able to use these mainstream techniques to format can save you a lot of development and integration time. Consult pages 206 and 207 for a full list of supported HTML tags and CSS attributes.

In this example we will define our CSS stylesheet and HTML text internally, however there is a good example in the book on loading these documents from an external source.

In a new flash document (saved to someplace you can find later) select the first keyframe and open the actions panel. We need to start by defining our stylesheet, then apply it to the text field before we populate it with text.

//css styling
var myCSS:StyleSheet = new StyleSheet();
var theBody:Object = new Object();
theBody.fontFamily = "Verdana";
theBody.fontSize = 18;
theBody.color = "#CC0000";
var theTitle:Object = new Object();
theTitle.fontSize = 25;
theTitle.fontWeight = "bold";
theTitle.color = "#0000CC";
theTitle.fontStyle = "italic";
theTitle.textAlign = "right";
myCSS.setStyle("body", theBody);
myCSS.setStyle(".theTitle", theTitle);

Now I don't have time to go into a lesson on CSS in this class, however instead of using HTML default styling, CSS allows you to customize styles you can then apply in an HTML document.

Above you see a stylesheet defined (myCSS) and two Objects that hold CSS attributes. In the last two lines you see the stylesheet setting the style of the two objects defined above. The first parameter in quotes is how we will refer to the css style in the HTML text. The second attribute is the name of the object from above. Feel free to try some other styles mentioned in the book on pages 206-7.

Now lets define our text field and apply the CSS style.

//the text field and
//the HTML text with
//the CSS applied
var myTextField:TextField = new TextField();
myTextField.x = myTextField.y = 50;
myTextField.width = 450;
myTextField.multiline = true;
myTextField.wordWrap = true;
myTextField.autoSize = "left";
myTextField.styleSheet = myCSS;

Most of these attributes should feel familiar by this point, note the last one however:

myTextField.styleSheet = myCSS;

This applies our previously defined style sheet to our text field. Now any text we populate into our text field will be able to apply these styles.

Note: you must first apply the stylesheet before you populate text into the text field, otherwise these styles will not get applied.

Now lets populate the text field with text:

myTextField.htmlText = "<body>";
myTextField.htmlText += "<span class='theTitle'>Lorem Ipsum Text</span><br />";
myTextField.htmlText += "Lorem ipsum dolor sit amet...";
myTextField.htmlText += "</body>";

And finally add the text field to the display list:

addChild(myTextField);