ptg Adding and Modifying Components Introduction Components are building blocks that you can use to create interactive, dynamic Flash documents. Think of a component as a movie clip with modifiable parameters, which are set during the design of a Flash document, and ActionScript APIs (APIs allow you to customize the component at runtime). Since components are reusable, they give developers the ability to share code between projects. You can use compo- nents created by Adobe, download components created by other developers or, with a bit of practice create your own components. Since components are rooted in ActionScript code, Flash comes with a set of components for ActionScript 2.0 and another one for ActionScript 3.0, and you cannot mix components in the same Flash document. Suppose you want to create a list of options from which a visitor would be able to click and choose. You can open the Actions panel, and then create the list by typing in about forty or more lines of script, or you can use Flash's built-in component to create the list. The difference is not in the qual- ity of the list, but the amount of time it took to create it. Spending less time on creating dynamic, interactive Flash elements gives you more time to concentrate on design fea- tures. To a Flash visitor, it's not about the code or how long it took you to create it, it's about the design, and it will always be about the design. 18 18 What You’ll Do Understand Basic Components Add a Text Input Add a Combo Text Box Add a Check Box Add a Radio Button Add a Text Area Add a Button Add a List Add a Label Add a Data Grid Use a Local Data Provider Add a Loader Add a Numeric Stepper Add a Progress Bar Add a Scroll Pane Create and Modify Bindings Modify Schema Modify Component Attributes Use Components to Build a Form 427 From the Library of Wow! eBook ptg 428 Chapter 18 Components are composed of two elements: a movie clip and parameters, allowing you to modify the components’ appearance and behavior. Components run the gamut from a radio button to a scroll pane. Components equalize the designer's playing field, enabling anyone to build complex applications, even if they do not have a complete understanding of the ActionScript language. As easy as it is to simply drag the component you need from the Components panel onto the Stage, it is just as easy to customize the look and feel of components to suit your design needs. Components let you easily and quickly build strong applications with a consistent appearance and behavior. Each component comes with predefined parameters, located in the Property Inspector ( New!), which let you Understanding Basic Components control how the object looks and operates. Each component also includes a set of API (application programming interface) methods and properties that allows you to set parame- ters and additional options at runtime. This is typically accomplished by adding the scripts to Frame 1 in the Flash Timeline. It is said that Flash components finally allow for the separation of coding and design. Using the Components Panel Components are added to the Stage using the Components panel. To add a component to the Stage, you open the Components panel, expand the Components list, and then drag a component icon onto the Stage. Since com- ponents are based on ActionScript code, Flash comes with a set of components for Flash Components Components panel Available Settings Loader component in the Property Inspector From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 429 Accessibility panel ActionScript 2.0 and another one for ActionScript 3.0, and you cannot mix compo- nents in a Flash document. You specify the components type by selecting an ActionScript version in the Publishing Settings dialog box. There are three categories of components for ActionScript 2.0—user interface, media, and video—and three categories of compo- nents for ActionScript 3.0—Flex, user interface and video. ActionScript 3.0 provides similar components as ActionScript 2.0. However, the parameters associated with a component may vary. User interface components allow you to interact with an application (RadioButton, Checkbox, and TextInput). Video components allow you to add video playback controls, such as FLVPlayback, FLVPlayback with cap- tioning, Back, Forward, Mute, Pause, Play, Play/Pause, Seek Bar, Stop, and Volume Bar. Media components (ActionScript 2.0) allow you to play back and control streaming media (MediaController, MediaPlayback, and MediaDisplay). After you add an instance of a component to a Flash document (drag a component to the Stage), you can give the component a unique instance name using the Property Inspector and then use the Component Inspector panel to set and view information for the instance. Using the Component Inspector Once the component is on the Stage, it is con- trolled through the Component Inspector panel. The Component Inspector panel has three tabs: Parameters, Bindings, and Schema. Each tab gives you modifiable ele- ments to help control the look and functional- ity of the component.The Parameters tab (now moved to the Property Inspector ( New!)) lists the most commonly used properties; oth- ers parameters can be added using the ActionScript panel. The Bindings tab gives you a way to bind, or link two or more compo- nents together. For example, you can bind an external database to a display component for on-screen viewing of the data. The Schema tab contains a list of a component's bindable properties, data types, internal structure, and other special attributes. Using the Accessibility Panel When you work with Flash components, you can create Flash content that is accessible to users with disabilities using Flash accessibly features. As you design accessible Flash applications, consider how your users will interact with the content. Visually impaired users might rely on additional technology, such as screen readers, while hearing- impaired users might read text and captions in the document. To make a Flash Component accessible, click the Window menu, point to Other Panels, and then click Accessibility to open the Accessibility panel. For more infor- mation on creating accessible compliant doc- uments, open your browser and visit www.w3.org/WAI/ , or for information on Flash, open your browser and visit www.adobe.com/ , go to the Flash Exchange, and then type the word "accessibility" in the keyword field. From the Library of Wow! eBook ptg 430 Chapter 18 The power of a component is its ability to change. Components can be modified directly in the Component Inspector panel, or they can be modified dynamically, as the Flash movie runs. The Component Inspector panel has three areas to modify a component— Parameters, Bindings, and Schema. These three tabs allow you to attach components to data files, change or modify the text on a but- ton, or create drop-down menus and lists. Setting Parameters Options After adding an instance of a component to a Flash document, you can name the instance at the top of the Property Inspector, and then specify the parameters for the instance using the options and fields under Component Parameters in the Property Inspector ( New!). Each component has parameters that you can set to change the instance’s appearance and behavior. A parameter is a property or method that appears in the Property Inspector. The most commonly used proper- ties and methods appear as authoring param- eters; others can be set using ActionScript. Authoring parameters represent common things such as the label attached to a Button component, or items displayed when using the List component. If you set a parameter using ActionScript, it will override any value set while authoring. Understand that each component will have its own unique parameters, and changing parameters in the Property Inspector only changes the selected instance. Parameters include the ability to change an instance's Working with the Component Inspector Component Parameters in the Property Inspector Bindings tab From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 431 that the Bindings tab needs in order to handle your data correctly. For example, you can click the Schema tab, define the binding compo- nent (DataGrid), and then use the Bindings tab to link the DataGrid component to the external XML file. The top portion of the Schema tab dis- plays bindable properties associated with the selected component, while the bottom portion of the Schema tab displays detailed informa- tion about the selected schema item (selected from the top portion of the Schema tab), and gives you the ability to view or edit them. font, color, and size. You can add additional parameters by selecting the instance on the Stage and typing the script into the Actions panel. If you add the script to Frame 1 in the Timeline, you can create global changes to instance parameters. Setting Binding Options Data Binding is a concept where the property of one component can be bound to the property of another component: if the prop- erty of the one component changes, so will the property of the other component or com- ponents. The Bindings tab defines a link between two endpoints, a source (external data file, movie clip, graphic) and a destina- tion component (DataGrid, Loader, Label). It listens for changes to the source endpoint and copies the changed data to the destina- tion endpoint each time the source changes. Setting Schema Options Schemas are important because they help create a communication link between other components, using the Bindings tab. A com- ponent's schema simply represents the prop- erties and fields that are available for data binding. Each property or field contains set- tings that control validation, formatting, type conversion, and other features that affect how data binding and the data management com- ponents handle the data of a field. The Schema tab lets you view the schema for the selected component. Schema is basi- cally a list of the component's binding proper- ties, their data types, their internal structure, and other special attributes, depending on the selected component. This is the information Schema tab From the Library of Wow! eBook ptg 432 Chapter 18 The TextInput component works with the ActionScript TextField object. Once a TextInput component is added to the Stage, you can use styles to customize the font, size, and color. A TextInput component can be formatted using HTML, or even as a password field that disguises the text. When a TextInput field has focus, visitors can use the arrow keys to move through information in the field, and they can use the tab key to move the focus to the next object, or Shift+Tab to move to the previ- ous object. TextInput fields can be used to hold information. For exam- ple, you could use a group of TextInput components as the basis for creating an interactive form for fields such as: name, address, city, state, and zip code. Adding a Text Input Add a TextInput Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the TextInput component onto the Stage, and then select the component. Open the Properties panel, and then click the Component Parameters arrow to expand it. Select from the following Text Input parameters: ◆ editable. When you select the check box, the field can be edited. If you select false, the field can be selected but not edited. ◆ password (2.0) or display AsPassword (3.0). When you select the check box, text entered into the field appears as dots. If you select false, text typed into the field appears as typed. ◆ text. Click the Value field, and then enter the text that will appear in the field when the Flash document opens. 5 4 3 2 1 1 2 3 From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 433 ◆ maxChars. Click the Value field, and then enter a numerical value indicating the max characters allowed in the TextInput field. ◆ restrict. Click the Value field, and then enter any characters that cannot be entered into the TextInput field. ◆ enabled. When you select the check box, the field can be edited. If you select false, the field appears grayed out and is not selectable or editable. ◆ visible. When you select the check box, the field can be viewed. If you select false, the field is invisible. ◆ minHeight (2.0). Click the Value field, and then enter a minimum height for the TextInput box. ◆ minWidth (2.0). Click the Value field, and then enter a minimum width for the TextInput box. Click the Control menu, point to Test Movie, and then click Test. IMPORTANT Although you can change the size of any component using the Free Transform tool, since the TextInput component is a single-line component, changing its height does not impact how many lines of text you can type. 6 Tex tIn put component 5 4 From the Library of Wow! eBook . component icon onto the Stage. Since com- ponents are based on ActionScript code, Flash comes with a set of components for Flash Components Components panel Available Settings Loader component. and view information for the instance. Using the Component Inspector Once the component is on the Stage, it is con- trolled through the Component Inspector panel. The Component Inspector panel. a set of components for ActionScript 2.0 and another one for ActionScript 3.0, and you cannot mix components in the same Flash document. Suppose you want to create a list of options from which