Components Learning Guide for Flash: Examining ActionScript 3 components

The ActionScript 3 components in Adobe Flash Professional CS5 consist of a set of user interface components, a set of video components, and a new component designed to integrate Flash content with the Adobe Flex framework. The user interface components provide building blocks for creating the user interface for your application. These building blocks include buttons, check boxes, labels, lists, combo boxes, data grids, and more. The video components consist of the FLVPlayback 2.5 (video player) component, the FLVPlayback custom UI components, which allow you to add custom playback controls to the video player, and the FLVPlaybackCaptioning component, which allows you to add closed captions to your FLV files. The FlexComponentBase component allows you to create components or containers that are compatible with the Adobe Flex framework.

Read About ActionScript 3 components in the Using ActionScript 3 Components online documentation for an introduction to the types of ActionScript 3 components that are available in the Components panel. Also learn about the benefits of using components.

Components can be accessed in the Components panel while a FLA file is open in Flash Professional. To add a component to your file, open the Components panel (Window > Components) and drag a copy of the component to the Stage. This step copies the component to the document library and places an instance in view for editing.

This short video illustrates the basic process of adding a component to your application and customizing its appearance while authoring with Flash. (Even though it was recorded for Flash CS3, it still applies to Flash Professional CS5. The FLVPlayback 2.5 component and the FlexComponentBase are the two updates to the Components panel in Flash CS5.)

Once you add a component to your application, you can tailor it by setting parameters and properties. You can also interact with it by handling events. An event occurs when a user interacts with the component or when something significant, such as the completion of loading, happens to it. ActionScript 3 event handling model in the Using ActionScript 3 Components online documentation provides an introduction to the ActionScript 3 event handling model and an example of an ActionScript 3 event handler. This short video demonstrates how to create a simple application that adds data to a List component and handles events that occur when a user selects an item in the list or clicks a button to remove an item.

Getting started with Flash user interface components provides an introduction to the ActionScript 3 user interface components and shows you how to create a simple shopping cart application with components. The Greetings tutorial in the Using ActionScript 3 Components online documentation takes you step by step through the process of building a basic application using components.

As you begin to work with each of the user interface components, you can get an introduction on how to use it and some basic examples in Using the UI components, in Using ActionScript 3 Components, which you can find either in the Flash Help system or in the online Flash documentation. You can find a definition of each component's ActionScript 3 class—including its properties, methods, styles and events—in the ActionScript 3 Reference for the Adobe Flash Platform.

Other articles provide insights into using and working with the ActionScript 3 DataGrid and TileList components:

• Creating, populating, and resizing the DataGrid component
• Customizing and sorting the DataGrid component
• Filtering and formatting data in the DataGrid component
• Displaying images with the TileList component

Find additional ActionScript 3 guides, tutorials, and samples ›

The FLVPlayback 2.5 component lets you easily include a video player in your SWF application. The FLVPlayback component plays progressively downloaded Flash Video (FLV) files over HTTP and streaming FLV files from Adobe Flash Media Server or from Flash Video Streaming Service (FVSS). The ActionScript 3 FLVPlayback component has the following new features:

• Support for full-screen size
• Live preview on the Stage during authoring
• Ability to select color, alpha values, and control groups for predesigned skins
• Layout properties to keep the component centered during resizing
• Ability to add closed captioning to an FLV file with the FLVPlaybackCaptioning component
• Improved parameter and cue point workflow using the Properties panel

For an introduction to the FLVPlayback component, including learning how to use live preview and implement full-screen support, see Getting started with the ActionScript 3 FLVPlayback component.

For a more comprehensive introduction to the FLVPlayback component and how to use it, read Using the FLVPlayback component in the online documentation. To find out how to add closed captions to your FLV file with the FLVPlaybackCaptioning component, read Using the FLVPlaybackCaptioning component in the online documentation.

You can find definitions of the ActionScript 3 FLVPlayback and FLVPlaybackCaptioning classes—which provide properties, methods, styles and events that you can access to interact with these components—in the ActionScript 3 Reference for the Adobe Flash Platform.

For a comprehensive overview of using FLV video, read the Video Learning Guide for Flash. This guide covers several topics that arise when you consider adding video to your web page, including capturing and encoding video and adding video syncronization and captioning.

Note: The FLVPlayback component also supports H.264-compatible formats in Adobe Flash Player 9,0,115 and later.

You can use Flash Professional to create custom components and containers for Flex. You can use the options in the Commands menu or add the FlexComponentBase component directly to your Document library. The process involves creating a movie clip symbol, activating its Export for ActionScript option, and then assigning the Flex UIMovieClip class or ContainerMovieClip class to the Base Class field in the Symbol Properties dialog box (see Figure 1). You can export a SWC file that can be added to a Flex project using the Export SWC option under the Flash tab in the Publish Settings dialog box.

Note: Using the Convert Symbol to Flex Component and Convert Symbol to Flex Container commands automatically generates the configuration steps mentioned above.

You could consider the default appearance of ActionScript 3 user interface components to be a theme in the sense that ActionScript 2 components employ themes, but in ActionScript 3 the skins are physically built into the component. The ActionScript 3 user interface components do not support the external theme files that the ActionScript 2 components do. Rather, the ActionScript 3 user interface components are FLA-based (FLA) files with built-in skins that you can access for editing by double-clicking the component on the Stage or by double-clicking the skin in the Assets folder in the Library. The component's skins and other assets are placed on frame 2 of the Timeline and when you double-click the component, Flash automatically jumps to frame 2 and opens a palette of the component's skins. You can then edit the skins like you would any other symbol. Read about how to customize each of the user interface components in Customizing the UI components in the online documentation.

The ActionScript 3 FLVPlayback 2.5 component provides a set of prebuilt skins from which you can select one and apply it as you can with the ActionScript 2 FLVPlayback component. The ActionScript 3 component, however, lets you select color and alpha properties for these skins as a separate process. If you prefer to create and customize a unique set of playback controls, you can select and customize individual controls from the set of FLVPlayback Custom UI controls in the Components panel. Or you can create your own skins. For an overview and examples of each of these options, read Skinning the ActionScript 3 FLVPlayback component. You can also read about how to select and customize skins for the FLVPlayback component in Customizing the FLVPlayback component in the online documentation.

• Video: Using components
• Video: Creating a simple application with components
• Using ActionScript 3 components
• ActionScript 3 Reference for the Adobe Flash Platform
• ActionScript 3 samples for Flash Professional