At first glance, the Button component is just another button symbol, but the two shouldn't be confused. As discussed in Chapter 3, button symbols have a specialized timeline, made of Up, Over, Down, and Hit frames. As such, button symbols are very flexible: Over artwork can be made to spill over the button's Up shape, paving the way for quick-and-dirty tooltips and other tricks. Hit artwork can make the button invisible—but still clickable—if it is the only frame with content. In contrast, the Button component has no discernable timeline. It's a self-contained component and is much more conservative (at first glance) than its wild, partying cousin. Figure 11-1 shows an example of the Button component.

Figure 11.1. The Button component—pretty conservative, even without the tie

myButton.toggle = true;
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(evt:MouseEvent):void {
  trace("By George, I've been clicked!");
}

function clickHandler(evt:MouseEvent):void {
  if (myButton.selected == true) {
    guru.buttonMode = true;
  } else {
    guru.buttonMode = false;
  }
};

btn1.addEventListener(MouseEvent.CLICK, clickHandler1);
btn2.addEventListener(MouseEvent.CLICK, clickHandler2);
btn3.addEventListener(MouseEvent.CLICK, clickHandler3);

function clickHandler1(evt:MouseEvent):void {
  output.text = btn1.label;
};
function clickHandler2(evt:MouseEvent):void {
  output.text = btn2.label;
};

function clickHandler3(evt:MouseEvent):void {
  output.text = btn3.label;
};

btn1.addEventListener(MouseEvent.CLICK, clickHandler);
btn2.addEventListener(MouseEvent.CLICK, clickHandler);
btn3.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(evt:MouseEvent):void {
  output.text = evt.target.label;
};

Changing the Button component's appearance

What you're about to see can be achieved with most of the UI components, not just Button. (Some components have little or no visual element, so there are exceptions.) This is good news, because it means you'll get the basic gist right off the bat.

There are two ways to alter a UI component's appearance:

• Skinning, which generally deals with the material substance of the component, such as the shape of the clickable surface of a button or the drag handle of a scrollbar

• Styling, which generally deals with text, dressing, and padding

Skinning

Before Flash CS3, the practice of skinning UI components was an exercise in alchemy. Only the wisest and purest of wizards would trust themselves to toss mysterious ingredients into the frothing cauldron. All of that changed when the components were rewritten for ActionScript 3.0, and the improvement remains intact in Flash CS4. In fact, it couldn't get much easier. Here's how:

1. Create a new Flash document and drag an instance of the Button component to the stage. Double-click the button and you'll see a convenient "buffet table" of the various visual states available to the button, as shown in Figure 11-6.

   

   Figure 11.6. Skinning UI components is really easy.

2. The up skin is the button's default appearance. Double-click that, and you'll come to the symbol that represents the up skin for this component, complete with 9-slice scaling, as shown in Figure 11-7. This particular skin happens to be made of three layers.

   

   Figure 11.7. A mere two levels in, and you're ready to change the appearance of the button.

3. Select an area in one of these layers and change the button's appearance, perhaps like Figure 11-8—but the choice is yours. Make sure that the existing shapes, or any new ones, align to the upper left (0,0) of the symbol's registration point. Adjust the 9-slice guides as necessary. See Button03.fla in this chapter's Complete folder for an example with minor changes to the up and over skins.

   

   Figure 11.8. Adjust the existing shapes or create new ones.

4. Select Edit

   

5. Drag another copy of the Button component from the library to the stage. Test your movie to see that your alteration appears, for both buttons, as the new up skin in the published SWF. Click either button to verify that the remaining skins (for example, down) function as before.

Note

To reskin a component completely, every skin symbol must be edited or replaced.

Styling components

As you've seen, components are easy enough to customize, even if a complete job takes some effort. You may have noticed an important omission, however, while poking around the skin symbols. Even though the Button component features a text label, none of the skins contains a text field. What if you want a different font in there, or at least a different color? ActionScript to the rescue.

Each component has its own list of styled elements. Many overlap, but you can see the definitive list for each in the class entry for that component. For example, find the Button class entry in the ActionScript 3.0 Language and Components Reference, then browse the Styles heading, as shown in Figure 11-9. Don't forget to click the Show Inherited Styles hyperlink to see the full listing. Remember, the Button class gives you details on the Button component; the SimpleButton class gives you details on button symbols.

Components that include text elements, such as the Button component, support the inherited UIComponent.textFormat style, which lets you make changes to the button's text label. Other button styles include the inherited LabelButton.icon, which lets you specify an optional image for the button in addition to text.

Figure 11.9. UI component styles are listed under the class entry for each component in the documentation.

For this sort of styling, ActionScript allows you to affect the following:

• All components in a document

• All components of a certain type (for example, all Button components)

• Individual component instances

Let's see it in action:

1. Open the Button04.fla file in the Chapter 11 Exercise folder. You'll see three instances of the Button component and one of the CheckBox component, as shown in Figure 11-10. Note that each has its own label.

   

   Figure 11.10. Styling is about to change these components.

2. Click once in the first frame of the scripts layer. Open the Actions panel and type the following ActionScript into frame 1 of the scripts layer:

   import fl.managers.StyleManager;
   import fl.controls.Button;

   var fmt1:TextFormat = new TextFormat();
   fmt1.bold = true;
   fmt1.color = 0xFF0000;
   
   var fmt2:TextFormat = new TextFormat();
   fmt2.bold = false;
   fmt2.color = 0x0000FF;
   
   StyleManager.setStyle("textFormat", fmt1);
   StyleManager.setComponentStyle(Button, "textFormat", fmt2);
   btn2.setStyle("icon", "star");

3. Test the movie.

You'll notice the following changes:

• The check box's label is red and bold.

• The buttons' labels are blue and not bold.

• The second button contains an icon.

Chapter 6 discusses the TextFormat class in detail, but there are a few twists here that deserve some clarification.

First up are the opening two lines, which use the import statement. We've been sidestepping this one so far because the import statement isn't often necessary in timeline code. In ActionScript 3.0 class files—that is, code written outside Flash altogether—the import statement is not only more prevalent, it's actually required in order let the compiler know which other classes you intend to use. In contrast, Flash takes care of this for you—for the most part—in keyframe scripts. This just happens to be an exception. Without those first two lines, Flash will get confused about what you mean later when you mention StyleManager and Button directly.

Note

These hierarchical class arrangements are called packages. To find the package for other components, so that you can carry the preceding styling knowledge to other scenarios, look up the component's class in the ActionScript 3.0 Language and Components Reference. When you're looking at the component's class entry, you'll see a number of headings immediately beneath the name of the class, including Package, Class, and Inheritance. The Package heading is the one you want. Most components, including Button, belong to the fl.controls package. As an example of the oddball, ScrollPane belongs to the fl.containers package. In keyframe scripts, you only need to import classes outside the flash package, such as fl.managers, fl.controls, fl.containers, and the like.

Two variables, fmt1 and fmt2, are declared and set to instances of the TextFormat class, and each is given its own styling. Here's where it gets interesting. The StyleManager class has two methods you can use to apply styling to components. Both methods are static, which means they're invoked on the class itself, rather than an instance. The first of these, StyleManager.setStyle(), applies formatting to all components. In this case, we're setting the TextFormat style of all components—specifically, all components that have a TextFormat property—to the fmt1 instance of the TextFormat class. We programmed this style to make text red (0xFF0000) and bold, and it is indeed applied to all three buttons and the check box. You can specify any styling you like, and the TextFormat style is common to many components.

"Wait a minute, guys," you may be saying. "Only the check box is red!" This is true. The reason for this is the other method, StyleManager.setComponentStyle(). That one applies styling to all components of a certain type, which explains the fact that it accepts three parameters. Here, we've specified Button, and then set the TextFormat style of all Button instances to fmt2. This overrides the red, bold formatting of fmt1 applied in the previous line. Comment out the second StyleManager line:

StyleManager.setComponentStyle(Button, "textFormat", fmt2);

And now test your movie again to prove it.

A good way to tell which style will take effect is to remember this: the more specific the style—for example, Button components vs. all components—the higher priority it takes. If you holler to everyone in the room (StyleManager.setStyle()), giving instructions to wear green scarves, then everyone will do so. If you holler a second time, telling only the tall people to change their scarves to purple (StyleManager.setComponentStyle()), then only the tall people will comply. The instruction you've given the tall people is more specific—it only applies to people over six feet in height—and because of that, you can rest assured that, given the choice between two sets of instruction, the tall folks will follow the more specific set and wear purple.

This precedence goes a step further: the UIComponent.setStyle() method is invoked directly and specifically on a particular instance of the Button class—in this case, the component whose instance name is btn2. It works just like StyleManager.setStyle() in that it accepts two parameters: the style to change and its new setting. Here, the LabelButton.icon style, which Button inherits, is set to "star", which refers to the linkage class of the star asset in the library. Right-click (Ctrl-click) the star asset and choose Properties to verify this.

And now you've had a quick tour of the lobby and one of the rooms here at the UI Component Hotel. There are other rooms, of course, some more elaborate than others, but the layout for each is basically the same.

You met CheckBox briefly in the "Button component" section, but let's take a closer look. This component is essentially a toggle button with its label on the side. Click the box or its label, and the box gets a check mark, as shown in Figure 11-11. Click again, and the check mark goes away.

Figure 11.11. The CheckBox component is essentially a toggle button with its label on the side.

The Parameters tab of the Component Inspector panel is fairly light for CheckBox:

Double-click any CheckBox instance to change the skinning for all. Styling works as described in the "Button component" section.

Let's take a look at how to interact with check boxes via ActionScript:

ColorPicker is a fun component, because nothing like it exists in the realm of HTML—at least, not without a swarm of complicated JavaScript! But of course, color pickers are common in applications like Microsoft Word, Adobe Photoshop, and even Flash itself. In a nutshell, the ColorPicker component is a clickable color chip that reveals an assortment of colors when selected, as shown in Figure 11-12. It allows the user to choose one of the presented colors or optionally to type in a hexadecimal value, and then the chosen color is available for use.

Figure 11.12. The ColorPicker component lets users choose from a range of colors.

Double-clicking a ColorPicker instance inside the authoring environment makes its skins editable, and styling works the same as it does for the Button component. The palette of colors displayed by this component is also editable, but requires just a bit of ActionScript, as shown in the following example.

Note that in the Parameters tab of the Component Inspector panel, the color palette's text field can be hidden by setting the showTextField parameter to false. You'll also see that you can set the component's selectedColor property as a parameter.

The ComboBox component is very like the <select> element in HTML, except that it doesn't have the <select> element's optional size and multiple attributes. ComboBox gives users the ability to make one selection at a time from a drop-down list, as shown in Figure 11-13. In addition, the component can be made editable, which lets the user manually type in a custom selection.

Figure 11.13. ComboBox lets users make one selection at a time from a drop-down list.

ComboBox skinning is a little more complicated than Button skinning, but the basic approach is the same. The complexity stems from the fact that the ComboBox combines two other components: List and TextInput (which are described later in this chapter).

Adding a ComboBox instance to your movie puts three components into your library—ComboBox, List, and TextInput—plus the Component Assets folder used by all UI components. Double-clicking a ComboBox instance in the authoring environment opens the first tier of skins (see the left image in Figure 11-14). Double-clicking the List element in this tier opens the skins for the embedded List component (the right image in Figure 11-14).

In turn, the skins for List include a third tier for scrollbars. In spite of this nesting, individual skins are nothing more than symbols, usually with 9-slice guides, such as the up and over skins for the Button component. Styling works the same as it does for the Button component.

Figure 11.14. ComboBox skins (left) include nested elements, such as List skins (right).

Let's experiment with ComboBox:

This is pretty straightforward! The other parameters in the Parameters tab are just as intuitive:

The DataGrid component is the most complex component in the UI arsenal. Its purpose falls almost entirely in the realm of ubergeek interface programmers, but we're going to give you a cursory look, including a basic sample file. In short, the DataGrid component gives you a spreadsheet-like, sortable display for tabular data, as shown in Figure 11-17.

Figure 11.17. DataGrid displays scrollable, sortable tabular data.

Open the DataGrid.fla file in this chapter's Exercise folder for a working demonstration. Click into frame 1 of the scripts layer to see the ActionScript. Here's a bird's-eye view of that code:

dg.addColumn("num");
dg.addColumn("eng");
dg.addColumn("ger");
dg.addColumn("fre");

These first lines reference the DataGrid component's instance name, dg, and instruct the component to add four columns. These column names are arbitrary and, here, represent a column for numbers, and then their English, German, and French equivalents.

dg.addItem({num:1, eng:"one", fre:"un", ger:"eins"});
dg.addItem({num:2, eng:"two", fre:"deux", ger:"zwei"});
dg.addItem({num:3, eng:"three", fre:"trois", ger:"drei"});
dg.addItem({num:4, eng:"four", fre:"quatre", ger:"vier"});
dg.addItem({num:5, eng:"five", fre:"cinq", ger:"fünf"});
dg.addItem({num:6, eng:"six", fre:"six", ger:"sechs"});
dg.addItem({num:7, eng:"seven", fre:"sept", ger:"sieben"});
dg.addItem({num:8, eng:"eight", fre:"huit", ger:"acht"});
dg.addItem({num:9, eng:"nine", fre:"neuf", ger:"neun"});
dg.addItem({num:10, eng:"ten", fre:"dix", ger:"zehn"});

You cannot populate the DataGrid from the Parameters tab of the Component Inspector panel, and we're sure you can see why. It's much easier to type in the data in the relatively spacious environs of the Actions panel. Here's how to give each column a name:

dg.getColumnAt(0).headerText = "Numeric";
dg.getColumnAt(1).headerText = "English";
dg.getColumnAt(2).headerText = "German";
dg.getColumnAt(3).headerText = "French";

These lines make the header text a bit more "friendly" to the eye.

Test the movie to see how it all comes together. Click the headers to sort each column. When you sort the Numeric column, you'll see something odd. By default, sorting is alphabetical, which puts the numbers 1 and 10 right next to each other. To fix that for columns that contain numerical data, remove the comment (//) from the final line of ActionScript, so that it looks like this:

dg.getColumnAt(0).sortOptions = Array.NUMERIC;

Label is something of an oddball in the UI components collection. Unless you're an avid programmer, we're almost certain you'll want to forego Label in favor of a simple dynamic text field (covered in Chapter 6). Why? Practically speaking, from a designer's point of view, Label doesn't really do anything that can't be accomplished with a dynamic text field—and besides, by using a text field, you'll save the 14KB that an instance of label would have brought to the table.

Labels don't really have skins, and double-clicking an instance will tell you as much. Styling works the same as for Button, but again, trust us on this one . . . just use a dynamic text field. If you still want to see a Label component in action, check out Label.fla in the Exercise folder.

The List component is akin to the <select> element in HTML when its optional size and multiple attributes are specified. This component is basically a ComboBox component without the drop-down aspect—it's always dropped down—and it allows multiple selections, as shown in Figure 11-18.

Figure 11.18. The List component is scrollable and optionally allows multiple selections.

Like ComboBox, the List component has nested skins, so when you double-click an instance in the authoring environment, the skins become available for editing in tiers. Styling is handled the same way as described in the "Button component" section.

The Parameters tab in the Component Inspector panel is relatively hefty for the List component, as shown in Figure 11-19. Most of the choices pertain to scrolling (the distance to scroll horizontally and vertically, whether scrolling should be automatic or constant, and so on). The important parameters are allowMultipleSelection and dataProvider.

Figure 11.19. The data and the labels are added in the dataProvider area.

To populate your user's choices in a given List instance, double-click the right column of the dataProvider row and use the Values dialog box, as described in the "ComboBox component" section. Setting showMultipleSelection to true (the default is false) lets your users hold down Ctrl (Cmd) while they click in order to select more than one of the listed choices (this is like the multiple attribute in HTML).

To see how List works, open the List.fla file in this chapter's Exercise folder. Note that the instance name for the List instance is List, which works only because ActionScript is a case-sensitive language—you couldn't call it List, because that's the name of the class that defines this object. In your own work, you'll want to use an instance name that describes the list's use (in this case, that might be the word ingredients). Note that the dynamic text field, next to the List instance, has the instance name output.

Click into frame 1 of the scripts layer and type the following ActionScript:

list.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(evt:Event):void {
  var str:String = "The secret ingredient(s): ";
  for (var i:uint = 0; i < list.selectedItems.length; i++) {
    str += list.selectedItems[i].data;
    if (i < list.selectedItems.length - 1) {
      str += ", ";
    } else {
      str += ".";
    }
  }
  output.text = str;
};

This one may look more complicated than it actually is, so let's break it down. As always, we're using addEventListener() to associate a custom function with an event. In this case, the event is Event.CHANGE, and the function, named changeHandler(), does three things.

The net result is that List selections populate a dynamic text field with the ingredients of Kraft Cucumber Ranch dressing.

For extra credit, add the following line after the existing ActionScript:

list.addItem({label:"Ingredient 11", data:"natural flavor"});

This shows that it's also possible to populate a List instance programmatically.

NumericStepper is a compact little gadget that lets the user specify a numeric value, either by typing it in or by clicking up and down arrow buttons, as shown in Figure 11-20. You, as a designer, can specify your own desired minimum and maximum values, as well as the size of each increment (count by ones, by twos, by tens, and so on). These values can be set via the Parameters tab of the Component Inspector panel.

Figure 11.20. The NumericStepper component

NumericStepper's skins can be edited by double-clicking an instance, and styling can be applied as described in the "Button component" section. This component carries with it the TextInput component, so you'll see both in your library if you add NumericStepper to your movie.

Let's play with the NumericStepper component:

The MovieClip.height property of mercury is set to the value of NumericStepper.value, as referenced in terms of the ns instance. The mercury movieclip is nested inside thermometer, which explains the matching hierarchical reference thermometer.mercury.

Used often for preloading, the ProgressBar component gives you a rising thermometer-style animation to display load progress when loading files of known size, and a barber-pole–style animation to indicate that the user must wait (for example, for files of unknown size to load or for processes to finish). Figure 11-22 shows an example.

This component doesn't have a whole lot to skin, but you can access what's there by double-clicking a ProgressBar instance. Styling works as it does for the Button component, but ProgressBar doesn't even have text, so your styling choices are fairly slim. (Yes, Figure 11-22 shows text, but that's an example of a separate Label component.)

Figure 11.22. The ProgressBar component indicates load progress (top), and also presents a "waiting" animation (bottom).

Here's an exercise designed to show you how the ProgressBar component works:

The ProgressBar component features a percentComplete property, which we're using here. The add EventListener() method is invoked against the pb instance, listening for a ProgressEvent.PROGRESS event. The function it performs sets the output text field's text property to a rounded-down string version of the progress percentage, with the percent sign tacked onto the end for good measure.

Radio buttons are gregarious. They belong in groups, and courteously defer to each other as each takes the spotlight. What are we talking about? We're talking about a component identical in functionality to radio buttons in HTML. Groups of RadioButton components are used to let the user make a single selection from a multiple-choice set, as shown in Figure 11-23.

Figure 11.23. The RadioButton component lets the user make a single selection from a multiple-choice set.

Double-clicking a RadioButton instance provides access to its skins, which you can edit as described in the "Button component" section. Styling works the same way.

To see RadioButton components in action, open the RadioButton.fla file in this chapter's Exercise file. Because radio buttons work in groups, the Parameters tab of the Component Inspector panel has a "collective consciousness" parameter we haven't seen with other components: groupName. Select each of the three radio buttons in turn and verify that each belongs to the same group, stooges, even though each has its own distinct label: Moe, Curly, and Larry (see Figure 11-24). Note also the empty dynamic text field whose instance name is output. You're about to wire up the radio buttons to that text field.

Figure 11.24. RadioButton instances must be associated with a group name.

Click into frame 1 of the scripts layer and type the following very condensed but interesting ActionScript:

rb1.group.addEventListener(Event.CHANGE,
changeHandler);
function changeHandler(evt:Event):void {
  output.text = rb1.group.selection.label;
};

What makes this interesting? In most of the event-handling samples in this chapter, you've invoked the addEventListener() method on an object that you personally gave an instance name. Here, that might have been rb1, but that's not the focal point in this case. You're not adding an event listener to a particular radio button, but rather to the group to which these buttons belong. The RadioButton class provides a group property, which means that each instance knows to which group it belongs. It's the group that dispatches the Event.CHANGE event, which occurs when any one of these radio buttons is clicked.

It doesn't matter which radio button's group property you use, because all of them point to the same RadioButtonGroup instance. The associated function updates the output text field by sending it the selected button in this group—in particular, that button's label property, which is either Moe, Curly, or Larry.

The ScrollPane component lets you have eyes bigger than your stomach. If you want to display a super-large image—so large that you'll need scrollbars—ScrollPane is your component; Figure 11-25 shows it in action.

Figure 11.25. ScrollPane provides optional scrollbars to accommodate oversized content.

ScrollPane has nested skins because of its scrollbars, so double-clicking an instance during authoring will open its skin elements in tiers. Styling works the same as described in the "Button component" section, although with no text elements, most of your customization work will probably center around skins.

In this example, there's no need for ActionScript.

The Slider component is conceptually the same thing as NumericStepper, except that instead of clicking buttons to advance from one number to the next, the user drags a knob along a slider, as shown in Figure 11-26. You, as designer, are responsible for setting the minimum and maximum values, and this component lets you specify whether sliding is smooth or snaps to increments specified by you.

Figure 11.26. Slider lets the user drag a handle back and forth to specify a value.

Slider has no text elements, so styling is fairly light. What's there works as it does for the Button component. Skinning also works as it does for Button: double-click a Slider instance in the authoring environment to change the knob and track skins.

To see how the Slider component works, open the Slider.fla file in this chapter's Exercise folder. Note that the instance name for the Slider instance is slider, which works only because ActionScript is a case-sensitive language. You couldn't call it slider, because that's the name of the class that defines this object. Also note the instance names circle1 and circle2 on the two circles. You're about to wire up the Slider component to adjust their width and height.

Click into frame 1 of the scripts layer and type the following ActionScript:

slider.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(evt:Event):void {
  circle1.scaleX = slider.value / 100;
  circle2.scaleY = slider.value / 100;
};

When the Event.CHANGE event is dispatched—this happens as the knob moves along the track—the slider's value property is used to update scaling properties of the Circle movieclips. Why divide by 100? In movieclip scaling, 0% is 0 and 100% is 1. Because the Slider instance happens to have its maximum parameter set to 100, the division puts value into the desired range, as shown in Figure 11-27.

Figure 11.27. A single Slider instance can adjust many objects. Hey, that looks like a face!

Be sure to experiment with the parameters in the Component Inspector panel's Parameters tab. Most of them are intuitive, but liveDragging and snapInterval might not be. The liveDragging parameter tells Slider whether or not to update its value property as the knob moves, as opposed to when it is released. When you set liveDragging to false, the circles will resize only after you reposition the knob and then release it. The snapInterval parameter tells Slider how often to update its value property. To demonstrate, set liveDragging to true, and then change snapInterval to a small number, such as 1. When you drag the knob, you'll see the circles resize smoothly. Change snapInterval to 10 and test again, and the circles resize less smoothly, because you're asking value to count by tens.

You may be surprised to find a direction parameter (its values are horizontal and vertical). Why not just use the Free Transform tool to rotate this slider? Well, try it. We'll wait . . . Kind of weird, right? It doesn't work. Components are a sophisticated phenomenon, even though they look so simple.

Now, what if you want a slanted slider, not horizontal or vertical? Here's a trick: select the Slider instance, convert it to a movieclip (Modify

sliderClip.slider.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(evt:Event):void {
  circle1.scaleX = sliderClip.slider.value / 100;
  circle2.scaleY = sliderClip.slider.value / 100;
};

Chapter 6 introduced you to text fields. Consider the TextArea component a text field in a tux. It has an attractive, slightly beveled border, lets you limit how many characters can be typed into it (like input text fields), and is optionally scrollable (see Figure 11-28). This component is akin to the <textarea> element in HTML.

Figure 11.28. TextArea is the James Bond of text fields.

TextArea is skinnable, but the parts are few. You'll see a nested skin for the scrollbars when you double-click an instance in the authoring environment. More likely, you'll want to style its text contents, which works as described in the "Button component" section.

Open the TextArea.fla file in this chapter's Exercise folder to see an example of populating a TextArea instance with text. (We figured it would be cruel to make you type in a lengthy bit of sample text on your own.) Note that the TextArea component can display HTML text, as shown in the sample file, or plain text. Use the component's htmlText or text property accordingly.

Notice that the Parameters tab of the Component Inspector panel shows only a text parameter for supplying text. We can't imagine anyone using that tiny space to enter more than a sentence, so reference that parameter as a property in your ActionScript. Assuming ta is the TextArea component's instance name:

ta.htmlText = "<p>HTML text here, with <b>styling</b>.</p>";

or

ta.text = "Plain text content here.";

The TextInput component is the single-line kid brother of TextArea. For this reason, to trump it up, we'll show it displaying one of the shortest short stories in the world, attributed to Ernest Hemingway (see Figure 11-29).

Figure 11.29. TextInput is a singe-line component, mainly used for user input.

TextInput is primarily used to collect typed user input, like HTML-based "contact us" forms, and can even be set to display password characters as asterisks (see the displayAsPassword parameter). The component is skinnable—just double-click an instance in the authoring environment—but there's not much to skin. Styling works as described in the "Button component" section.

To see the TextInput component in action, open the TextInput.fla file that accompanies this chapter. Note the two TextInput instances, with instance names input (top) and output (bottom). Select each component in turn and look at the Parameters tab of the Component Inspector panel as you do. For the top TextInput instance, the displayAsPassword and editable parameters are set to true. For the bottom one, both of those parameters are set to false. You're about to make the upper component reveal its password to the lower one.

Click into frame 1 of the scripts layer and type the following ActionScript:

input.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(evt:Event):void {
  output.text = input.text;
};

As text is typed into the upper TextInput instance, the Event.CHANGE handler updates the lower instance's text content with that of the upper instance's content. Because of the parameter settings, the text content is hidden above but clearly displayed below.

TileList is not unlike the ScrollPane component. Both load files for display, optionally with scollbars, but TileList displays numerous files—JPGs, SWFs, and so on—in the tiled arrangement shown in Figure 11-30.

Double-click a TileList instance to edit its skins. You'll see a second tier of skins for the scrollbars. Styling may be accomplished as described in the "Button component" section.

Figure 11.30. TileList displays a tiled arrangement of content, optionally scrolling as necessary.

There are quite a few parameters listed in the Parameters tab of the Component Inspector panel for this component, but they're all easy to grasp. For example, there are settings for the width and number of columns, height and number of rows, direction or orientation (horizontal or vertical), and scrolling settings (on, off, and auto, the last of which makes scrollbars show only as necessary). The dataProvider parameter is the most important, because that's where you define the content to show. It works the same as the dataProvider for ComboBox, except that instead of label and data properties, TileList expects label and source.

If you find the Parameters tab a bit confining, you can always use ActionScript to add items to the TileList. To try this, open the TileList.fla file in the Chapter 11 Exercise folder. Note that the TileList instance has the instance name tl, and the dynamic text field below it has the instance name output.

Click into frame 1 of the scripts layer and type the following ActionScript:

tl.addItem({label:"Mug 6", source:"Mug06.jpg"});
tl.addItem({label:"Mug 7", source:"Mug07.jpg"});
tl.addItem({label:"Mug 8", source:"Mug08.jpg"});

tl.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(evt:Event):void {
  output.text = tl.selectedItem.label;
};

The first three lines use practically the same approach we used for adding an additional item to the ComboBox instance in that section of the chapter. Mugs 1 through 5 are specified in the Component Inspector panel. Here, these three lines of code give us a few more mug shots (heh, mug shots—we love that joke). In the event handler, the changeHandler() function updates the output text fields' text property with the label value of the TileList's selected item.

If the Flash CS4 UI components all went to a Halloween party, UILoader would show up as the Invisible Man (see Figure 11-31).

Figure 11.31. Practically speaking, UILoader has no visual elements (and yes, this figure is empty; it tickled us to include it).

So what's the point? Ah, but UILoader is such a selfless, giving component! Its purpose is to load and display content other than itself. This lets you avoid using the Loader class (as described in Chapter 14), just in case the thought of ActionScript makes you feel like you discovered half a worm in your apple. Simply enter a file name into the source parameter of the Component Inspector panel's Parameters tab, and you're set (see Figure 11-32).

Figure 11.32. Just enter in the name of a supported file format, and Flash will load it.

Here's a UILoader component exercise:

If you read any other sections of this chapter, you've probably already been introduced to the UIScrollBar component. This component is a humble but useful member of the team, as it allows other components to have scrollbars. UIScrollBar is skinnable by double-clicking any instance in the authoring environment. Styling doesn't make much sense, but it is possible as described in the "Button component" section.

So as to avoid repeating ourselves, we'll direct your attention to the "Your Turn: Scrollable text" section in Chapter 6 to see this component in action.

In this chapter, you've learned the following:

In the next chapter, we'll show you how to use CSS to format text in a Flash movie. This may seem a bit odd, because the Text tool has a lot of settings in the Property inspector and a whole chapter in this book shows you how to use them. But one of the adages we live by is this: there are six million ways of doing everything in digital media and the best way is the one you pick. When it comes to text, that rule really comes into play, but an even stronger one supersedes it:

Let the software do the work.

Clients are fickle. One day the black Times Roman they asked for is fabulous, and the next day it "just has to be" green Helvetica Narrow. This can be a huge waste of time. You can spend hours opening Flash files and physically making the change, or pawing through ActionScript looking for code that formats text. Is there an easier way? You betcha. CSS to the rescue. Flash gives you the ability to put your styling into a CSS document. This means it's all in one place, and when the client wants the green Helvetica Narrow changed to orange Franklin Book, you can grumble to the client about the hours it is going to take to make the change, and then open the style sheet and spend 5 minutes, not hours, carrying it out.

It isn't as dry as it sounds, because you can do some pretty interesting things with CSS-formatted text in Flash CS4. What are they? Turn the page to find out.