The UI and Video components have been rewritten from the ground up in ActionScript 3.0, which lets them benefit from the same performance enhancements recounted throughout this book (in particular, see Chapter 4). This also means you can’t mix and match the components with those that were written for ActionScript 2.0. Fortunately, the Components panel automatically updates its choices depending on the version of ActionScript selected for the current FLA file. If you start in one version of ActionScript, add components to the stage or library, and then change the FLA file’s publish settings to ActionScript 3.0—or vice versa—you’ll see warning messages when you try to compile the SWF file, and the compile will fail.

The performance improvement for ActionScript 3.0 components is substantial and can be demonstrated with a simple for loop, using practically the same code for a side-by-side comparison between ActionScript 2.0 and 3.0 components.

In addition to working more efficiently, the components tend to add significantly less weight to SWF files than their ActionScript 2.0 counterparts. Table 9-1 shows a comparison of the components shared by both languages.

It’s important to realize that these file sizes aren’t cumulative. In both ActionScript 2.0 and 3.0, each component shares its common framework with other components in the component set for that language. The biggest penalty comes with the first component’s file size; additional components add only a small increase because they share most of the programming framework already provided by the first component. For example, the combined weight of the ActionScript 3.0 versions of Button and CheckBox is only 17KB—not the 30KB you might expect—which is only 2KB more than either component alone.

In ActionScript 2.0 documents, components are generally stored in the Library as discrete entities. In ActionScript 3.0 documents, the introduction of even a single component creates a new library folder named Component Assets. This folder contains movie clip symbols used by the components’ skins, and must not be deleted unless respective components are purposefully removed from the FLA file (skinning is discussed in greater detail in the sections “Styling Components with Code” and “Skinning Components Manually” in this chapter). Figure 9-2 shows the same three components—Button, CheckBox, and ComboBox—as dragged into an ActionScript 2.0 FLA file (left side) versus an ActionScript 3.0 FLA file (right side). Note the Component Assets folder on the right, and note also that the ActionScript 3.0 version of ComboBox carries with it a copy of List and TextInput, whose respective weights are already included in the total file size for ComboBox.

Figure 9-2. The same three components displayed in the libraries of an ActionScript 2.0 document (left) and an ActionScript 3.0 document (right)

You can configure all components in the Component Inspector panel (Window→Component Inspector), as shown in Figure 9-3. Just select the component on the stage and arrange the settings as you please. In ActionScript 3.0 documents, the Bindings and Schema tabs of the Component Inspector panel are clickable, but their panes are disabled, as they apply only to data components, which are not compatible with ActionScript 3.0.

Figure 9-3. ComboBox component parameters, as displayed in the Component Inspector panel

Because of the general event handling changes in ActionScript 3.0, the components are programmed somewhat differently from the ActionScript 2.0 set. For details, see the section Changes in Writing Code for Components later in this chapter.

Although it has an application programming interface (API) and can be fully programmed like any other component, the ActionScript 3.0 FLVPlayback component has been updated so that its composition can be customized without any need for code.

Figure 9-4. Customizing the FLVPlayback component without code

Figure 9-5. The FLVPlayback component and video-related UI components collaborate, even without ActionScript (theremin performance by Peter Pringle, http://PeterPringle.com, used with permission)

The ColorPicker component displays a clickable color chip that expands into a configurable color palette that lets you select a color or type in a color (Figure 9-7). Assuming a ColorPicker component on the stage with the instance name myColorPicker and a movie clip with the instance name myMovieClip,the following ActionScript handles the selection of a color from the component’s configurable color palette:

import fl.events.ColorPickerEvent;

var myColor:ColorTransform = new ColorTransform();

myColorPicker.addEventListener(ColorPickerEvent.CHANGE, ¬
     changeHandler);
function changeHandler(evt:ColorPickerEvent):void {
    myColor.color = myColorPicker.selectedColor;
    myMovieClip.transform.colorTransform = myColor;
}

Figure 9-7. The ColorPicker component allows the user to specify colors

The ColorPickerEvent class must be imported, even in a frame script, because it isn’t part of the flash package. A myColor variable is declared and set to an instance of the ColorTransform class, waiting to be used in response to a change event from the component. The operative code here is the addEventListener() method, which associates the ColorPickerEvent.CHANGE event constant with a custom changeHandler() function.

The changeHandler() function sets the color property of the myColor instance to the currently selected color, and is then assigned to the colorTransform property of a movie clip with the instance name myMovieClip. All DisplayObject objects, including movie clip symbols and sprites, support color transformation in this way.

The color palette of the ColorPicker component is fully customizable, and can display up to 1,024 colors. To have the myColorPicker instance display red, white, and blue, simply assign an array of hexadecimal values to the ColorPicker.colors property:

myColorPicker.colors = new Array(0xFF0000, 0xFFFFFF, 0x0000FF);

The Slider component provides a slider with a draggable knob that optionally snaps to a configurable range of values (Figure 9-8).

Figure 9-8. The Slider component lets users select from a range of values

As Figure 9-9 indicates, the Slider component can be displayed horizontally, but is easily set to a vertical orientation by a change to the direction parameter (the first entry in the Name column). Numerous other parameters are available. The liveDragging parameter determines how often Slider dispatches its change event. When liveDragging is set to true, SliderEvent.CHANGE is dispatched while the knob is dragged, as often as the Slider.value property updates. When set to false, the SliderEvent.CHANGE event is dispatched only when you release the knob.

Figure 9-9. The Slider component parameters

The maximum and minimum parameters define the component’s range of selectable values, and snapInterval determines the rate at which snapping should occur. The tickInterval parameter determines the distribution of visible tick marks, and value determines the starting position of the knob.

The following ActionScript shows the Slider component as a volume slider, assuming its range is set from 0 to 1. The volume setting is taken from the Slider.value property (see code in bold):

import fl.events.SliderEvent;

var mySound:Sound = new Sound();
mySound.load(new URLRequest("sampleSong.mp3"));
var myChannel:SoundChannel = mySound.play();
var myTransform:SoundTransform = new SoundTransform();

mySlider.addEventListener(SliderEvent.CHANGE, changeHandler);
function changeHandler(evt:SliderEvent):void {
    myTransform.volume = mySlider.value;
    myChannel.soundTransform = myTransform;
}

A Sound instance is associated with a SoundChannel instance, which makes it available to volume transformations. Here again, the actual event handler is very simple: the SliderEvent.CHANGE event is associated with a custom changeHandler() function, which invokes the Slide.value property on the mySlider instance in order to update the volume property of a SoundTransform instance that, in turn, updates the volume of the Sound instance.

The TileList component is comparable in some ways to an HTML table or a simplified version of the DataGrid component. In a nutshell, it provides a grid of rows and columns to display images (Figure 9-10).

Figure 9-10. The TileList component displays a grid of images

Like the Slider component, the properties of TileList are easy to configure in the Component Inspector panel (Figure 9-11). The columnCount and rowCount parameters determine the number of columns and rows in the grid, respectively, while columnWidth and rowHeight determine their dimensions. The direction parameter specifies whether images progress sequentially across or down the grid before wrapping. Scrolling is configured with scrollPolicy parameter, which you can set to auto, on, or off.

Figure 9-11. The TileList component parameters

The following ActionScript produces the 2 by 2 grid shown in Figure 9-10:

myTileList.addItem({label:"Sandmen", source:"sandmen.jpg"});
myTileList.addItem({label:"Braids", source:"braids.jpg"});
myTileList.addItem({label:"Jumping", source:"jumping.jpg"});
myTileList.addItem({label:"Crazy", source:"crazy.jpg"});

myTileList.addEventListener(Event.CHANGE, changeHandler);

function changeHandler(evt:Event):void {
    trace(myTileList.selectedItem.label);
}

Note that the change event for this component comes directly from the Event class, which means no import directive is necessary in frame scripts that handle TileList events.

Video subtitles and captions have been possible for several releases of Flash, but until the FLVPlaybackCaptioning component, introduced in Flash CS3, they required custom programming. In ActionScript 3.0 documents, you can now add captioning to your videos without code. You do need an XML document that adheres to the World Wide Web Consortium’s (W3C) specification for TimedText (TT) documents (http://www.w3.org/AudioVideo/TT/). The CaptionButton component selects and deselects captioning. Here’s an example of a TimedText XML document:

<?xml version="1.0" encoding="iso-8859-1"?>
<tt xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
    <styling>
        <style id="1" tts:textAlign="left"
            tts:fontFamily="Arial" />
        <style id="2" tts:textAlign="center"
            tts:fontFamily="Arial" />
    </styling>
</head>
<body>
    <div>
        <p begin="00:00:09.50" dur="1000ms" style="1">
            Okay, action!</p>
        <p begin="00:00:11.00" dur="2800ms" style="2">
            Twinkle, twi ... le</p>
        <p begin="00:00:15.50" dur="1500ms" style="1">
            Okay, action!</p>
        <p begin="00:00:17.50" dur="4600ms" style="2">
            Twink ... le ... tink [hiccup]!  Oh!</p>
        <p begin="00:00:22.75" dur="2100ms" style="1">
            Okay, action!</p>
        <p begin="00:00:25.75" end="00:00:29.25" style="2">
            Twinkle, twinkle, little star</p>
        <p begin="00:00:29.75" end="00:00:32.50" style="2">
            how I wonder what you are</p>
        <p begin="00:00:33.00" end="00:00:36.00" style="2">
            bup bup bup ... world so high,</p>
        <p begin="00:00:36.50" end="00:00:39.00" style="2">
            like a diamond in the sky,</p>
        <p begin="00:00:39.50" end="00:00:40.00" style="2">
            Oh!</p>
        <p begin="00:00:41.25" end="00:00:41.75" style="2">
            Oh dear.</p>
        <p begin="00:00:42.25" end="00:00:43.25" style="1">
            Action!</p>
        <p begin="00:00:43.50" end="00:00:47.00" style="2">
            [sproing! sproing! sproing!]</p>
        <p begin="00:00:48.00" end="00:00:53.00" style="2">
            How I wonder what you are.  Bup!</p>
        <p begin="00:00:54.00" end="00:00:55.50" style="2">
            Buh buh buh, oh ...</p>
        <p begin="00:00:56.00" end="00:00:57.00" style="2">
            Buh buh, oh ...</p>
        <p begin="00:00:57.50" end="00:00:58.50" style="2">
            Nooo!</p>
    </div>
</body>
</tt>

Note that a <styling> element, nested in the <head> element, allows for the declaration of styles—here, left- and center-alignment—that can be referenced by an id attribute later in the body of the document. Note, also, the alternate ways to specify the duration of a caption, including collaborative begin and dur attributes, such as begin="00:00:09.50" dur="1000ms", and collaborative begin and end pairings, such as begin="00:00:25.75" end="00:00:29.25". Once a TimedText document is prepared, the process of captioning is trivial.

Drag a copy of the FLVPlayback and FLVPlaybackCaptioning components to the stage. Neither component needs an instance name. FLVPlaybackCaptioning becomes invisible at runtime. Position it where you like.

Use the Component Inspector panel to configure the skin parameter of the FLVPlayback component to None or to one of the skins with the word “Under” in the name, like SkinUnderPlaySeekCaption (this is important because skins with “Over” in the name obscure the captioning text field). Set the source parameter to a video file that correlates with the TimedText document.

Select the FLVPlaybackCaptioning component, and then set its source parameter to the location of the TimedText document, as shown in Figure 9-12.

Figure 9-12. Configuring the source parameter

At runtime, captions are automatically transferred from XML format to visual display, as seen in Figure 9-13. The CaptionButton component is built-in to any skin whose name contains the word “Caption” and allows the user to select and deselect captions. If no skin is selected, captions are displayed by default. The CaptionButton component can also be used on its own, apart from any skin, in the same manner described in the FLVPlayback exercise in the Feature Changes of this chapter.

Figure 9-13. The FLVPlaybackCaptioning component provides video captions without ActionScript (“Andréa” character created by Chris Georgenes, http://mudbubble.com, used with permission)

The FullScreenButton component exists as a built-in element of several of the provided skins for the FLVPlayback component, as well as a standalone component used with FLVPlayback. Ultimately, the FullScreenButton component is just a button that invokes the FLVPlayback.enterFullScreenDisplayState() method. To demonstrate its use, you have to view the SWF file and video content in a properly configured browser window.

Figure 9-15. A video displayed in full-screen mode

Figure 9-16. A video in full-screen mode with video UI components (theremin performance by Peter Pringle, http://PeterPringle.com, used with permission)

The StyleManager class lets you reference special styling properties—called styles—for each component. For example, in the Help menu’s ActionScript 3.0 Language and Components Reference, if you consult the class entry for the Button component, you find that in addition to Public Properties, Public Methods, and Events summaries, the Button class also features a summary for Styles, as seen in Figure 9-17. Make sure to always click “Show Inherited Styles” to see them all.

Figure 9-17. Style properties of the Button class

One of these styles (not shown in Figure 9-17) is called textFormat, which makes a quick and useful demonstration of two StyleManager methods.

Figure 9-20. Formatting focused on one specific instance of a component

The textFormat style isn’t the only property available, of course. Many components feature an icon style, for example, that lets you incorporate a small image into the component’s display. Consult the class entry of the component(s) in question, and have fun experimenting!

It goes without saying that some design choices are more successful when implemented manually. Changing the actual make-up of a component’s skin—that is, redrawing or manipulating the actual movie clips that comprise a component’s features—is called skinning, and from a designer’s standpoint, it couldn’t be any more intuitive than the following steps.

Figure 9-21. The default skin of the Button component, ready for editing

Figure 9-22. The over state of the Button component, showing 9-slice scaling lines