Week 11: Dynamic Text

Announcement:

I will be moving my office hours to Thursday for the remainder of the semester. I will be available in room 1102, Thursday 11:30 – 12:30. Please take advantage of this time as we near the end of the semester!

Topics:

• Project Brief and Process Flow Review
• Using Dynamic Text Fields
• Classic Text
• TLF Text
• Embedding Fonts
• Reading and Writing to Text Field Contents with ActionScript
• Using Keyboard and Focus Events

Using Dynamic Text Fields

There are methods for dynamically manipulating the properties of text fields with code, but this requires understanding the different types of text in Flash. I’m going to tell you about both types today, but I recommend that you use Classic Text as the TLF engine remains buggy.

Classic Text vs TLF Text

Pre-CS5, there was only one kind of text framework in Flash, what is now referred to as “Classic Text”. If you are using a CS4, this is the kind of text you will be using. If you are making an AS2 application, you will also use Classic Text. Other than that, you will probably want to stick to TLF text, although remember that you will be limited to OpenType and TrueType fonts.

Classic Text Types

• Static: Non-editable or selectable by user, not readable or writable by actionscript
• Dynamic: Selectable by user, readable and writable by actionscript
• Input: Selectable and editable by user, readable and writable by actionscript

TLF Text Types

• Read only: Same as Static
• Selectable: Same as Dynamic
• Editable: Same as Input

Font Embedding

When you are working with dynamic text of any kind, and using anything besides standard Web fonts, you need to “embed” the font in your Flash file. Otherwise, if the viewer doesn’t have that font installed, they will see a system default font. To embed a font, select the text field and click the embed button in the Character section of the properties panel.

In the Font Embedding panel that pops up, you name give the font a name and choose which characters to embed with your file. When you embed a font, it increases the file size of your swf, so you should only embed the characters you need. I usually choose Basic Latin to cover the bases but not load more characters than I need.

Reading and Writing to Text Field Contents with Code

All dynamic text fields have a property called “text” that holds the, well, text.

To access the current text in a text field:

myTextField.text;

To set the text of the text field:

myTextField.text = "some other text";

Make sure you put the text in double quotes!

Keyboard Events

>> Capturing Keyboard Input

You can respond to a user pressing and releasing key on the keyboard just as you can with mouse events. These are called keyboard events. There are two events you can listen for KEY_DOWN and KEY_UP:

//Keyboard Event Listens
addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
addEventListener(KeyboardEvent.KEY_UP, onKeyUp);

These events include the information about what key was pressed. This comes in two forms, the keyCode and the charCode. Each of these are numbers that are mapped to characters, but they are a little bit different from each other – a key code value represents a particular key on the keyboard (the 1 on a keypad is different than the 1 in the top row, but the key that generates “1” and the key that generates “!” are the same key) and the character value represents a particular character (the R and r characters are different). Which one you will use will depend on what you are using it for.

function onKeyDown(evt:KeyboardEvent):void {
  trace("onKeyDown: " + evt.keyCode);
  trace("ctrlKey: " + evt.ctrlKey);
  trace("keyLocation: " + evt.keyLocation);
  trace("shiftKey: " + evt.shiftKey);
  trace("altKey: " + evt.altKey);
}

function onKeyUp(evt:KeyboardEvent):void {
            trace("keyUpHandler: " + evt.keyCode);
}

Now, this doesn’t do you much good if you don’t know what numbers correspond to what keys, there’s a list on this page.

Focus Events

A focus event happens when an a user switches between one object and another … like clicking in a text field. You set these up just like any other event, with a listener and a handler.

Homework

Using what you learned about text fields today, make a “MadLib” where a user types in words on one screen, and then reads the Madlib on the next. It should function something like this, although you don’t need as many words to input (10 should do it) and you don’t need the “send” functionality.

Final Project: Storyboards/Interface Designs – Due in Two Weeks

Take your process flow and turn everything that is represented there into a fully designed interface for each step represented there. Design these in whatever tool you are most comfortable with (Photoshop, Illustrator, Flash itself, a combination) but turn the storyboards into a single PDF that you will present to the class in two weeks. You should be able to fully walk us through the functionality of your Flash application with these storyboards. They should represent the near final design of your application. The more time you put into this step, the more time you will have for animation and coding. You are going to need it!