12.1. The Built-in Components The components that ship with Flash are generic, customizable elements that fall into three main categories: -
Data components . These components let you transfer data from your Flash animation to a server (such as a Web server). You'll want to use data components if you're creating a Flash data-entry form, an ecommerce Web site, a tutorialany situation in which you need to capture information from your audience (in Flash) and then examine or process that information (on the back end, using a program on your server). -
Playback components . These components let you add as many or as few playback controls to your animation as you like. Examples of playback controls include the Mute, Pause, and Play buttons . -
User Interface components . Similar to HTML components, Flash User Interface components include buttons, checkboxes, lists, text fields and windowseverything you need to create a Flash form and collect data from your audience.
Note: This chapter focuses on the User Interface components for two reasons: They're by far the most popular Flash components, and they're the only components that come standard with both Flash Basic and Flash Professional. For detailed descriptions and examples of the Data and Playback components, check out Flash Help in the Appendix.
To see the components described in the following sections, select Window  Components to display the Components panel. 12.1.1. Data Components If all you want to do is create a simple, noninteractive Flash animation, you don't need to bother with data components (Window Components, then choose Data). Data components come into play only when you want to capture information in Flash and then send it to another program (such as a database) running on a server. Data components bridge the gap, so to speak, between your Flash animation and your back end. For example, imagine you're using Flash to create a Web site for a retail store. The store wants to be able to accept credit card orders online and then send the collected order information to its order entry system for processing and shipping. The actual steps you need to take to transfer Flash data to an order entry system depend on the specifics of the computer hardware and programs that make up the retail store's back end. The two major steps, however, are always the same: -
Use Flash's interface components (Section 12.1.3.6) to create a Flash form that accepts order information. -
Use one or more of the data components you find in Table 12-1along with ActionScript in your Flash program as well as various server-side technologiesto transfer Flash data to your server-side program in a form that program can use. Server-side technologies include Java servlets, ColdFusion components, SQL databases, and XML data files.
Note: Because creating data components is both programming- intensive and completely dependent on the server-side program to which you want to transfer data, it's beyond the scope of this book. For more information on data components and the related data binding and Web service ActionScript classes that work with them, check out Flash Help in the Appendix.
Table 12-1. Flash Data Components (Flash Professional Only) | Component | Description | | DataHolder | Lets you tell Flash to watch certain data values and let you know when they change. | | DataSet | Lets you work with other component data ( sort component data, search it, filter it, and so on) as well as data pulled in from a serverside program. | | RDBMSResolver | You use this component in conjunction with the DataSet component to save the data you collect (or generate) in Flash to a relational database running on a server. (You're responsible for parsing the XML code that this component generates into the server-side SQL statements necessary to populate your database.) | | WebService Connector | Lets you access remote (server-side) APIs that conform to the industry-standard Simple Object Access Protocol from inside a running Flash animation. | | XMLConnector | Lets you hook up Flash components with external XML data sources by letting you read and write XML documents. | | XUpdateResolver | Works with the DataSet component to let you save the data you collect (or generate) in Flash to an external XUpdate-supporting data source, such as an XML database. |
12.1.2. Playback Components Flash's playback components (Window Components) let you give your audience control over how and when they play the audio and video clips youve added to your animation. Giving your audience the ability to pause, mute, restart, and otherwise control media playback makes good sense. Say, for example, that your animation contains a long video clip, so it takes a while to download. The person using your Web site runs out to grab a cup of coffee. Now imagine she's waylaid at the water cooler . By the time she makes it back to her seat, your animation and video have finished downloading and playing. If you didn't include playback controls, your audience has no choice but to go through the whole process again (or, more likely, surf to a more user-friendly Web site). You get playback components only as part of Flash Professional 8; Flash Basic 8 doesn't come with them. Table 12-2 describes the playback components; Figure 12-2 shows you an example of one of the components (the streaming video player FLVPlayback) in action.
Note: To find out more about embedding audio, video, and other non-Flash media files into your animation, see Chapter 8.
Table 12-2. Flash Playback Components (Flash Professional Only) | Component Group | Components | Notes | | FLVPlaybackPlayer 8 | FLVPlayback | New in Flash 8, this component lets you add progressive streaming video to your animation through a video player (Figure 12-2) that contains a full set of playback controls. You can choose a skin for this component to customize its look and feel. (For more on skinning, check out the box on Section 12.1.3.) | | FLVPlayback Custom UI | BackButton, BufferingBar, ForwardButton, MuteButton, PauseButton, PlayButton, Play-PauseButton, SeekBar, Stop-Button, VolumeBar | Let you add video playback controls individually (useful if you're planning to create your own skin). | | MediaPlayer 6-7 | MediaController, MediaDisplay, MediaPlayback | Use these older playback components if you're targeting an earlier version of the Flash Player (Version 6 or 7; earlier versions don't support playback components). The Media- Display component lets your audience play video and audio, but not control the playback. The MediaController component (when you use it in conjunction with either the MediaDisplay or MediaPlayback component) lets your audience control media playback. The MediaPlayback component is a combination of the MediaController and Media-Display components. |
Note: Each component comes with different parameters you can set to customize the component. For example, you can set the Button component's label parameter to tell Flash what text to display on the button, and the Window component's contentPath parameter to tell Flash which image (or animation) file you want to load into the window. Find out more in the section "Customizing Components" later in this chapter. For a complete rundown of each and every parameter for each and every component, search Flash Flash Help for "types of components."
UP TO SPEED
More Than One Way to Skin a Component | | In computer parlance, a skin is a set of visual characteristics you can apply to a feature (such as the FLVPlayback component shown in Figure 12-2 with three different skins applied). Skins don't affect how the feature works, just how it looks. Flash includes a few dozen skins you can apply to the FLVPlayback component. You can change its color and transparency as well as how many playback controls appear. To apply a skin: -
On the Stage, select the instance of FLVPlayback you want to skin. -
Open the Component Inspector (Window Component Inspector). -
Click in the Value column next to skin; then click the magnifying glass icon that appears to display the Select Skin dialog box. -
In the Select Skin dialog box, choose a skin (such as ClearOverAll.swf) from the drop-down list. Flash automatically previews the skin for you right there in the dialog box. -
When you're happy with the way your component looks, click OK. Because Flash skins are nothing more or less than published animation (.swf) files that you add to your main animation, you can create your own skins if you don't find one you like in the Select Skin dialog box. For help in creating a skin, search for "creating a new skin" in Flash Help (Section A.4). To specify a custom skin, in the Select Skin dialog box, choose Custom Skin URL; then type the file name of your custom skin.  |
12.1.3. User Interface Components Similar to HTML form components, Flash's popular user interface components (Figure 12-3) let you interact with your audience and gather information. Examples of user interface components include buttons, checkboxes, text fields, and drop-down lists.
Note: Some user interface components are available only in Flash Professional 8, not in Flash Basic 8. The following sections tell you which are which.
Figure 12-3. To see the User Interface components that come with Flash, display the Components panel (Window Components) and then click User Interface. If youre running Flash Basic 8, you don't see as many components as this section describes. 
12.1.3.1. Accordion (Flash Professional 8 only.) The Accordion component (Figure 12-4) is a clickable menu to display different Flash content (such as multiple movie clips) in the same space-saving frame. An example of when you might want to use the accordion component: You're creating a Flash Web site and you want to display three different customer formssay, for billing address, ship-to address, and credit card infodepending on which menu option someone clicks. Figure 12-4. Clicking a frame title (such as Billing Address, shown here) tells Flash to display the content for that frame. Similar to HTML frames , the Accordion component lets your audience see lots of different content without having to surf to lots of different Web pages. Because people always sees the same background page when you use the Accordion component, they're less likely to become confused . 
12.1.3.2. Alert (Flash Professional 8 only.) Similar to the JavaScript alert() dialog boxes that seem to spring out of nowhere while you're innocently clicking around the Web, the Alert component is a pop-up message to communicate with your audience. For example, if you're creating a Flash form, you can use the Alert component to let people know when they've typed in an invalid email address. 12.1.3.3. Button You see an example of the clickable Button component in Figure 12-5. Typically, you want to use a Button component when you're creating a Flash form. If you need a fancier button, you can either create your own button symbol, or check out Flash's button symbols (Section 7.1.4). Figure 12-5. Similar to HTML buttons, Button components are straightforward, no- nonsense , clickable buttons you hook up to scripts. For example, you can customize a Button component's label to read Submit, as shown here, and then write the ActionScript code necessary to submit Flash form data to your Web server every time someone clicks Submit. 
12.1.3.4. Checkbox The CheckBox component lets you offer folks an easy way to choose multiple options, as shown in Figure 12-6. Figure 12-6. Unlike RadioButtons (Section 12.1.3.15), checkboxes let you offer multiple choices. 
12.1.3.5. ComboBox As Figure 12-7 shows, the ComboBox component lets you display a drop-down list of options. You use this component when you want to offer people an easy way to choose a single option (such as which animation they want to play, or which Web page they want to hop to) from a predefined list. Figure 12-7. Flash automatically adds a scrollbar to your ComboBox component if you create a long list (over six options). Short list or long, the ComboBox lets your audience choose only one option. If you want to offer people a list from which they can Shift-click or Control-click multiple options, use the List component (Section 12.1.3.9). 
12.1.3.6. DataGrid (Flash Professional 8 only.) The DataGrid component lets you display a table containing multiple rows and columns of data. Typically, you use this component when you want to transfer data from your server (for example, product names , descriptions, and prices) and display it in Flash in table form. But you can also use it to display the data you collect (or create) in your Flash animation. 12.1.3.7. DateChooser (Flash Professional 8 only.) Presenting your audience with the clickable calendar Flash calls a DateChooser component (Figure 12-8) makes it easy for people to select a datemuch easier than making them guess what format you want, and then type a date from scratch. This component comes in handy when, for example, you're putting together an online event scheduler and you want people to be able to click different dates to see a list of the events your company's scheduled for each date. Figure 12-8. When your audience clicks the left and right arrows, the DateChooser component automatically scrolls to the previous and next months, respectively. You can customize the way the calendar looks (see "Customizing Components", Section 12.3). For example, you can specify blackout days or display Monday as the first day of the week instead of Sunday. 
12.1.3.8. DateField (Flash Professional 8 only.) A combination of the DateChooser component (see above) and a text field, the DateField component visually reinforces a person's choice by filling a text field with the date he selects (Figure 12-9). Figure 12-9. Left: Clicking the calendar icon next to the text field
Middle: displays a calendar someone can scroll through to pick a date. Once she clicks a date to select it
Right: Flash hides the calendar and types the selected date into the text field. 
12.1.3.9. Label A Label component lets you add a single line of noneditable, nonclickable text to your Flash creation. As shown in Figure 12-10, many folks find this component useful for adding short descriptions of other user interface components. Figure 12-10. The more direction you can give people, the easier they'll find it to fill out your Flash forms. Most components (such as the ComboBox shown here) stand to benefit from the descriptive text you can add with the Label component. 
12.1.3.10. List You use the List component (Figure 12-11) to create a clickable, scrollable list from which someone can Shift-click to select multiple options. Figure 12-11. The List component is similar to multiple checkboxes (see above) in that both let your audience select multiple options (once you customize the List component by setting multipleSelection to true in the Property Inspector). But because list components are scrollable, they tend to take up less screen real estate than checkboxes, and so they're helpful when your Stage is already packed with graphics and other components. 
12.1.3.11. Loader A Loader component is a nonscrollable window that lets you display an animation or bitmap image along with your main animation. By customizing the Loader component (Section 12.3), you can show the animation or bitmap full- size or modify it to match the Loader dimensions you set. Figure 12-12 shows you an example of using the Loader component to display a small, thumbnail version of an animation in the corner of your main animation. Figure 12-12. You can create all kinds of nifty effects with the Loader component, such as this thumbnail animation inset in the upper-left corner of the main animation. You can even create recursive animations (loading the same animation into itself). Because Flash keeps track of when it loads each animation or bitmap image, you can use ActionScript to tie an action (such as stopping all sounds) to a successfully loaded file. 
12.1.3.12. Menu (Flash Professional 8 only.) The Menu component is useful if you're creating a full-fledged program in Flash and want to let your audience navigate your program by choosing from familiar drop-down menus. The menus you create using the Menu component are similar in style and function to the File and Edit menus in Flash (and many other software programs), although you do have to have quite a bit of ActionScript knowledge under your belt to customize and use them. 12.1.3.13. MenuBar (Flash Professional 8 only.) The MenuBar component is a horizontal bar of clickable button-like menu options. This component's handy if, for example, you're creating a complex Web site in Flash and you want to display an identical, space-saving menu bar at the top of each Web page (see Figure 12-13). Figure 12-13. The MenuBar component is an easy way to create compact rows of buttons. Mousing over a button tells Flash to automatically highlight the option. That's the beauty of components: For drag-and-drop effort, you get sophisticated behavior. (You do still have to tell Flash what you want it to do when your audience clicks each button, as described on Section 11.3.3.) 
12.1.3.14. NumericStepper You use the NumericStepper component to create the clickable list of numbers shown in Figure 12-14. Simpler for people to use than a type-in -your-own-number text field, this component makes it easy for you to limit your audience's choices to a predefined set of valid numbers . Figure 12-14. When you use the NumericStepper component, your audience gets an easy way to specify a number, and you don't have to use ActionScript to examine the number and see whether it's valid (the way you would if you let them type any number they want). 
12.1.3.15. ProgressBar The horizontal ProgressBar component, shown in Figure 12-15, is a visual indicator of how long Flash expects to take to complete a process (such as loading a file). Figure 12-15. This component is useful when you want to give people a visual indication of how long they have left to wait for an animation (or a Web page) to load. 
12.1.3.16. RadioButton When you want to make sure your audience chooses just one of several mutually exclusive options, use a group of RadioButton components (Figure 12-16). Figure 12-16. RadioButton components let you offer your audience mutually exclusive options, so you never use just one; you always use RadioButton components in groups of two or more. (If you think you want a single RadioButton, you probably want a checkbox.) Turning on one radio button tells Flash to turn off all the other radio buttons. 
12.1.3.17. ScrollPane Similar to the Loader component (Section 12.1.3.9), the ScrollPane component lets you include an additional animation or bitmap imagine in your main animation. But unlike the Loader component, the ScrollPane component includes scrollbars your audience can use to control the content they see. Figure 12-17 shows you the ScrollPane component in action. Figure 12-17. When you display an animation or image using the ScrollPane component, Flash automatically tacks on scrollbars people can use to choose which part of the animation they want to see through the window. 
12.1.3.18. TextArea The TextArea component (Figure 12-18, top) is a multiline, scrollable text field that's useful when you want your audience to be able to type a long comment, or any other information longer than a few words. Figure 12-18. Top: The TextArea and TextInput components both let your audience type text, but the TextArea component (shown here) lets them type a lot of text. Flash automatically adds scrollbars if someone types in more text than the TextArea component's dimensions can display.
Bottom: People can type as much text as they like into a TextInput component, but only a single line of text (based on the dimensions you set) appears. This component is most useful when you want to limit people to a few words or less. 
12.1.3.19. TextInput The TextInput component (Figure 12-18, bottom) lets you create a single-line text field. Using this component lets you give your audience a freeform text field just long enough to type what you want them to type (for example, a name, phone number, or email address). 12.1.3.20. Tree (Flash Professional 8 only.) Similar to the List component (Section 12.1.3.9), the Tree component displays information (such as the contents of a folder) in a hierarchical fashion. This component's useful if, for example, you're creating a complex Web site and you want to add a site map option that shows your audience the hierarchical view of your site, from the home page down. 12.1.3.21. UIScrollBar The UIScrollBar component is a fancy, color-customizable scrollbar you can add to a TextInput or TextArea field to make your text fields match your overall color scheme. 12.1.3.22. Window The Window component (Figure 12-19) is a movable, titled window to display an animation or a bitmap file. You might want to use this when you're creating a tutorial in Flash and you want to display each how-to animation in a separate window so that your audience can reposition each window and close it easily when they're ready to move on to the next topic. Figure 12-19. The Window component shown here is similar to the Loader and ScrollPane components. The main differences are control (your audience can reposition and close a Window component) and familiarity (Window components look and act like standard display windows , so there's a good chance people will know how to interact with them). 
|
