Macromedia FLASH 8-USING COMPONENTS User Manual
Using Components
Trademarks
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder,
Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit,
Studio MX, UltraDev, and WebHelp are either registered trademarks or trademarks of Macromedia, Inc. and may be registered in
the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases
mentioned within this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and
may be registered in certain jurisdictions including internationally.
Third-Party Information
This guide contains links to third-party websites that are not under the control of Macromedia, and Macromedia is not
responsible for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your
own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia
endorses or accepts any responsibility for the content on those third-party sites.
Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com).
Sorenson™ Spark™ video compression and decompression technology licensed from
Sorenson Media, Inc.
Opera ® browser Copyright © 1995-2002 Opera Software ASA and its suppliers. All rights reserved.
Macromedia Flash 8 video is powered by On2 TrueMotion video technology. © 1992-2005 On2 Technologies, Inc. All Rights
Reserved. http://www.on2.com.
Visual SourceSafe is a registered trademark or trademark of Microsoft Corporation in the United States and/or other countries.
Copyright © 2005 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced,
translated, or converted to any electronic or machine-readable form in whole or in part without written approval from
Macromedia, Inc. Notwithstanding the foregoing, the owner or authorized user of a valid copy of the software with which
this manual was provided may print out one copy of this manual from an electronic version of this manual for the sole
purpose of such owner or authorized user learning to use such software, provided that no part of this manual may be
printed out, reproduced, distributed, resold, or transmitted for any other purposes, including, without limitation,
commercial purposes, such as selling copies of this documentation or providing paid-for support services.
Acknowledgments
Project Management: Sheila McGinn
Writing: Bob Berry, Jen deHaan, Peter deHaan, David Jacowitz, Wade Pickett
Managing Editor: Rosana Francescato
Lead Editor: Lisa Stanziano
Editing: Mary Ferguson, Mary Kraemer, Lisa Stanziano
Production Management: Patrice O’Neill, Kristin Conradi, Yuko Yagi
Media Design and Production: Adam Barnett, Aaron Begley, Paul Benkman. John Francis, Geeta Karmarkar, Masayo Noda,
Paul Rangel, Arena Reed, Mario Reynoso
Special thanks to Jody Bleyle, Mary Burger, Lisa Friendly, Stephanie Gowin, Bonnie Loo, Nivesh Rajbhandari, Mary Ann Walsh,
Erick Vera, the beta testers, and the entire Flash and Flash Player engineering and QA teams.
First Edition: September 2005
Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103
Contents
Intended audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
System requirements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
About the documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Terms used in this manual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Chapter 1: About Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Installing components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Where component files are stored . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Modifying the component files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Benefits of using components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Component categories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
About version 2 component architecture . . . . . . . . . . . . . . . . . . . . . . . . . 17
Version 2 component features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
About compiled clips and SWC files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Accessibility and components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Chapter 2: Creating an Application with Components
(Flash Professional Only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
About the Fix Your Mistake tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Build the main page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Bind data components to display gift ideas . . . . . . . . . . . . . . . . . . . . . . 29
Display gift details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Create the checkout screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Test the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47
Viewing the completed application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47
3
Chapter 3: Working with Components. . . . . . . . . . . . . . . . . . . . . .49
The Components panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50
Adding components to Flash documents . . . . . . . . . . . . . . . . . . . . . . . .50
Components in the Library panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Setting component parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Sizing components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Deleting components from Flash documents . . . . . . . . . . . . . . . . . . . . . 57
Using code hints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Creating custom focus navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Managing component depth in a document . . . . . . . . . . . . . . . . . . . . . .59
Components in Live Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60
Using a preloader with components . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60
About loading components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Upgrading version 1 components to version 2 architecture. . . . . . . . . 62
Chapter 4: Handling Component Events . . . . . . . . . . . . . . . . . . . .63
Using listeners to handle events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Delegating events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
About the event object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Using the on() event handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Chapter 5: Customizing Components . . . . . . . . . . . . . . . . . . . . . . 81
Using styles to customize component color and text . . . . . . . . . . . . . . 82
About skinning components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
About themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Combining skinning and styles to customize a component . . . . . . . . .118
Chapter 6: Creating Components. . . . . . . . . . . . . . . . . . . . . . . . . 125
Component source files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Overview of component structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Building your first component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Selecting a parent class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Creating a component movie clip. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Creating the ActionScript class file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Incorporating existing components within your component . . . . . . . 173
Exporting and distributing a component . . . . . . . . . . . . . . . . . . . . . . . . 182
Final steps in component development . . . . . . . . . . . . . . . . . . . . . . . . . 185
4Contents
Chapter 7: Collection Properties . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Defining a collection property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .188
Simple collection example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189
Defining the class for a collection item . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Accessing collection information programmatically . . . . . . . . . . . . . . . 191
Exporting components that have collections to SWC files. . . . . . . . .194
Using a component that has a collection property . . . . . . . . . . . . . . . .194
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Contents 5
6Contents
Introduction
Macromedia Flash Basic 8 and Macromedia Flash Professional 8 are the standard authoring
tools for producing high-impact web experiences. Components are the building blocks for the
Rich Internet Applications that provide these experiences. A component is a movie clip with
parameters that are set during authoring in Macromedia Flash, and with ActionScript
methods, properties, and events that allow you to customize the component at runtime.
Components are designed to allow developers to reuse and share code, and to encapsulate
complex functionality that designers can use and customize without using ActionScript.
Components are built on version 2 of the Macromedia Component Architecture, which
allows you to easily and quickly build robust applications with a consistent appearance and
behavior. This book describes how to build applications with version 2 components. The
related Components Language Reference describes each component’s application programming
interface (API). It includes usage scenarios and procedural samples for using the Flash version
2 components, as well as descriptions of the component APIs, in alphabetical order.
You can use components created by Macromedia, download components created by other
developers, or create your own components.
This chapter contains the following sections:
Intended audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
System requirements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
About the documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Terms used in this manual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
7
Intended audience
This book is for developers who are building Flash applications and want to use components
to speed development. You should already be familiar with developing applications in Flash
and writing ActionScript.
If you are less experienced with writing ActionScript, you can add components to a
document, set their parameters in the Property inspector or Component inspector, and use
the Behaviors panel to handle their events. For example, you could attach a Go To Web Page
behavior to a Button component that opens a URL in a web browser when the button is
clicked without writing any ActionScript code.
If you are a programmer who wants to create more robust applications, you can create
components dynamically, use ActionScript to set properties and call methods at runtime, and
use the listener event model to handle events.
For more information, see Chapter 3, “Working with Components,” on page 49.
System requirements
Macromedia components do not have any system requirements in addition to Flash.
Any SWF file that uses version 2 components must be viewed with Flash Player 6 (6.0.79.0)
or later, and must be published for ActionScript 2.0 (you can set this through File > Publish
Settings, in the Flash tab).
About the documentation
This document explains the details of using components to develop Flash applications. It
assumes that you have general knowledge of Macromedia Flash and ActionScript. Specific
documentation about Flash and related products is available separately.
This document is available as a PDF file and as online help. To view the online help, start
Flash and select Help > Using Components.
For information about Macromedia Flash, see the following documents:
■ Using Flash
■ Learning ActionScript 2.0 in Flash
■ ActionScript 2.0 Language Reference
■ Components Language Reference
8Introduction
Typographical conventions
The following typographical conventions are used in this book:
■ Italic font indicates a value that should be replaced (for example, in a folder path).
■ Code font indicates ActionScript code, including method and property names.
■ Code font italic indicates a code item that should be replaced (for example, an
ActionScript parameter).
■ Bold font indicates a value that you enter.
Terms used in this manual
The following terms are used in this manual:
at runtime When the code is running in Flash Player.
while authoring While you are working in the Flash authoring environment.
Additional resources
For the latest information on Flash, plus advice from expert users, advanced topics, examples,
tips, and other updates, see the Macromedia DevNet website at www.macromedia.com/
devnet, which is updated regularly. Check the website often for the latest news on Flash and
how to get the most out of the program.
For TechNotes, documentation updates, and links to additional resources in the Flash
Community, see the Macromedia Flash Support Center at www.macromedia.com/support/
flash.
For detailed information on ActionScript terms, syntax, and usage, see Learning ActionScript
2.0 in Flash and the ActionScript 2.0 Language Reference.
For an introduction to using components, see the Macromedia On Demand Seminar, Using
UI Components at www.macromedia.com/macromedia/events/online/ondemand/
index.html.
Additional resources 9
10 Introduction
CHAPTER 1
About Components
Macromedia Flash components are movie clips with parameters that allow you to modify
their appearance and behavior. A component can be a simple user interface control, such as a
radio button or a check box, or it can contain content, such as a scroll pane; a component can
also be non-visual, like the FocusManager that allows you to control which object receives
focus in an application.
Components enable you to build complex Macromedia Flash applications, even if you don’t
have an advanced understanding of ActionScript. Rather than creating custom buttons,
combo boxes, and lists, you can drag these components from the Components panel to add
functionality to your applications. You can also easily customize the look and feel of
components to suit your design needs.
Components are built on version 2 of the Macromedia Component Architecture, which
allows you to build robust applications, easily and quickly, with a consistent appearance and
behavior. The version 2 architecture includes classes on which all components are based, styles
and skins mechanisms that allow you to customize component appearance, a broadcaster/
listener event model, depth and focus management, accessibility implementation, and more.
NOTE
When publishing version 2 components, you must set your publish settings to publish for
ActionScript 2.0 (File > Publish Settings, Flash tab). The version 2 components will not
run correctly if published using ActionScript 1.0.
1
Each component has predefined parameters that you can set while authoring in Flash. Each
component also has a unique set of ActionScript methods, properties, and events, also called
an API (application programming interface), that allows you to set parameters and additional
options at runtime.
For a complete list of components included with Flash Basic 8 and Flash Professional 8, see
“Installing components” on page 12. You can also download components built by members of
the Flash community at the Macromedia Exchange at www.macromedia.com/cfusion/
exchange/index.cfm.
11
This chapter contains the following sections:
Installing components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Where component files are stored . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Modifying the component files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Benefits of using components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Component categories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
About version 2 component architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Version 2 component features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
About compiled clips and SWC files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Accessibility and components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Installing components
A set of Macromedia components is already installed when you start Flash for the first time.
You can view them in the Components panel.
Flash Basic 8 includes the following components:
■ Button component
■ CheckBox component
■ ComboBox component
■ Label component
■ List component
■ Loader component
■ NumericStepper component
■ ProgressBar component
■ RadioButton component
■ ScrollPane component
■ TextArea component
■ Tex t I n p u t c o m p on e n t
■ Window component
12 About Components
Flash Professional 8 includes the Flash Basic 8 components plus the following additional
components and classes:
■ Accordion component (Flash Professional only)
■ Alert component (Flash Professional only)
■ Data binding classes (Flash Professional only)
■ DateField component (Flash Professional only)
■ DataGrid component (Flash Professional only)
■ DataHolder component (Flash Professional only)
■ DataSet component (Flash Professional only)
■ DateChooser component (Flash Professional only)
■ FLVPlayback Component (Flash Professional Only)
■ Form class (Flash Professional only)
■ Media components (Flash Professional only)
■ Menu component (Flash Professional only)
■ MenuBar component (Flash Professional only)
■ RDBMSResolver component (Flash Professional only)
■ Screen class (Flash Professional only)
■ Slide class (Flash Professional only)
■ Tree component (Flash Professional only)
■ WebServiceConnector component (Flash Professional only)
■ XMLConnector component (Flash Professional only)
■ XUpdateResolver component (Flash Professional only)
To view the Flash Basic 8 or Flash Professional 8 components:
1. Start Flash.
2. Select Window > Components to open the Components panel if it isn’t already open.
3. Select User Interface to expand the tree and view the installed components.
You can also download components from the Macromedia Exchange at
www.macromedia.com/exchange. To install components downloaded from the Exchange,
download and install the Macromedia Extension Manager at www.macromedia.com/
exchange/em_download/
Any component can appear in the Components panel in Flash. Follow these steps to install
components on either a Windows or Macintosh computer.
Installing components 13
To install components on a Windows-based or a Macintosh computer:
1. Quit Flash.
2. Place the SWC or FLA file containing the component in the following folder on your
hard disk:
■ In Windows: C:\Program Files\Macromedia\
Flash 8\language\Configuration\Components
■ On the Macintosh: Macintosh HD/Applications/Macromedia Flash 8/Configuration/
Components (Macintosh)
3. Start Flash.
4. Select Window > Components to view the component in the Components panel if it isn’t
already open.
Where component files are stored
Flash components are stored in the application-level Configuration folder.
NOTE
For information about these folders, see “Configuration folders installed
with Flash” in Getting Started with Flash.
Components are installed in the following locations:
■ Windows 2000 or Windows XP: C:\Program Files\Macromedia\
Flash 8\language\Configuration\Components
■ Mac OS X: Macintosh HD/Applications/Macromedia Flash 8/Configuration/
Components
14 About Components
Modifying the component files
The source ActionScript files for components are located in:
■ Windows 2000 or Windows XP: C:\Program Files\Macromedia\Flash 8\language\
First Run\Classes\mx
■ Mac OS X: Macintosh HD/Applications/Macromedia Flash 8/First Run/Classes/mx
The files in the First Run directory are copied to your Documents and Settings path when
Flash is first lunched. The Documents and Settings paths are:
■ Windows 2000 or Windows XP: C:\Documents and Settings\username\Local
settings\Application Data\Macromedia\Flash 8\language\Configuration\Classes\mx
■ Mac OS X: Username/Library/Application Support/Macromedia/Flash 8/language/
Configuration/Classes/mx
When Flash starts, if a file is missing from the Document and Settings path, Flash copies it
over from the First Run directory to your Documents and Settings path.
NOTE
If you want to modify the source ActionScript files, modify the ones in the Documents
and Settings path. If any of your modifications “break” a component, Flash will restore
the original functionality when you close and relaunch Flash by copying the functional file
from the First Run directory. However if you modify the files in the First run directory and
that “breaks” a component, then you may need to reinstall Flash to restore the source
files back to the functional ones.
If you’ve added components, you’ll need to refresh the Components panel.
To refresh the contents of the Components panel:
■ Select Reload from the Components panel menu.
To remove a component from the Components panel:
■ Remove the MXP or FLA file from the Configuration folder.
Modifying the component files 15
Benefits of using components
Components enable you to separate the process of designing your application from the
process of coding. They also let you to reuse code, either in components that you create, or by
downloading and installing components created by other developers.
Components allow coders to create functionality that designers can use in applications.
Developers can encapsulate frequently used functionality into components and designers can
customize the look and behavior of components by changing parameters in the Property
inspector or the Component inspector.
Flash developers can use the Macromedia Exchange at www.macromedia.com/go/exchange to
exchange components. By using components, you no longer need to build each element in a
complex web application from scratch. You can find the components you need and put them
together in a Flash document to create a new application.
Components that are based on the version 2 architecture share core functionality such as
styles, event handling, skinning, focus management, and depth management. When you add
the first version 2 component to an application, there is approximately 25K added to the
document that provides this core functionality. When you add additional components, that
same 25K is reused for them as well, resulting in a smaller increase in size to your document
than you may expect. For information about upgrading components, see “Upgrading version
1 components to version 2 architecture” on page 62.
Component categories
Components included with Flash fall into the following five categories (the locations of their
ActionScript source files roughly correspond to these categories as well and are listed in
parentheses):
■ Data components (mx.data.*)
Data components allow you to load and manipulate information from data sources; the
WebServiceConnector and XMLConnector components are data components.
NOTE
The source files for the data components aren’t installed with Flash. However, some
of the supporting ActionScript files are installed.
■ FLVPlayback component (mx.video.FLVPlayback)
The FLVPlayback component lets you readily include a video player in your Flash
application to play progressive streaming video over HTTP, from a Flash Video Streaming
Service (FVSS), or from Flash Communication Server (FCS).
16 About Components
■ Media components (mx.controls.*)
Media components let you play back and control streaming media; MediaController,
MediaPlayback, and MediaDisplay are media components.
■ User interface components (mx.controls.*)
User interface components (often referred to as “UI Components”) allow you to interact
with an application; for example, the RadioButton, CheckBox, and TextInput
components are user interface controls.
■ Managers (mx.managers.*)
Managers are nonvisual components that allow you to manage a feature, such as focus or
depth, in an application; the FocusManager, DepthManager, PopUpManager,
StyleManager, and SystemManager components are manager components.
■ Screens (mx.screens.*)
The screens category includes the ActionScript classes that allow you to control forms and
slides in Flash.
For a complete list of components, see Components Language Reference.
About version 2 component architecture
You can use the Property inspector or the Component inspector to change component
parameters to make use of the basic functionality of components. However, if you want
greater control over components, you need to use their APIs and understand a little bit about
the way they were built.
Flash components are built with version 2 of the Macromedia Component Architecture.
Version 2 components are supported by Flash Player 6 (6.0.79.0) and later, and ActionScript
2.0. These components are not always compatible with components built using version 1
architecture (all components released before Flash MX 2004). Also, the original version 1
components are not supported by Flash Player 7. For more information, see “Upgrading
version 1 components to version 2 architecture” on page 62.
NOTE
Flash MX UI components have been updated to work with Flash Player 7 or later. These
updated components are still based on version 1 architecture. You can download them
from the Macromedia Flash Exchange at www.macromedia.com/go/v1_components.
Version 2 components are included in the Components panel as compiled clip (SWC)
symbols. A compiled clip is a component movie clip whose code has been compiled.
Compiled clips cannot be edited, but you can change their parameters in the Property
inspector and Component inspector, just as you would with any component. For more
information, see “About compiled clips and SWC files” on page 19.
About version 2 component architecture 17
Version 2 components are written in ActionScript 2.0. Each component is a class and each
class is in an ActionScript package. For example, a radio button component is an instance of
the RadioButton class whose package name is mx.controls. For more information about
packages, see “About packages” in Learning ActionScript 2.0 in Flash.
Most UI components built with version 2 of the Macromedia Component Architecture are
subclasses of the UIObject and UIComponent classes and inherit all properties, methods, and
events from those classes. Many components are also subclasses of other components. The
inheritance path of each component is indicated in its entry in the Components Language
Reference.
NOTE
The class hierarchy is also available as a FlashPaper file in the installation location: Flash
8\Samples and Tutorials\Samples\Components\arch_diagram.swf.
All components also use the same event model, CSS-based styles, and built-in themes and
skinning mechanisms. For more information on styles and skinning, see Chapter 5,
“Customizing Components,” on page 81. For more information on event handling, see
Chapter 3, “Working with Components,” on page 49.
For a detailed explanation of the version 2 component architecture, see Chapter 6, “Creating
Components,” on page 125.
Version 2 component features
This section outlines the features of version 2 components (compared to version 1
components) from the perspective of a developer using components to build Flash
applications. For detailed information about the differences between the version 1 and version
2 architectures for building components, see Chapter 6, “Creating Components,” on
page 125.
The Component inspector allows you to change component parameters while authoring in
Macromedia Flash and Macromedia Dreamweaver. (See “Setting component parameters”
on page 55.)
The listener event model allows listeners to handle events. (See Chapter 4, “Handling
Component Events,” on page 63.) Flash doesn’t have a
Property inspector, as there was in Flash MX; you must write ActionScript code to
handle events.
Skin properties let you load individual skins (for example, up and down arrows or the check
for a check box) at runtime. (See “About skinning components” on page 96.)
CSS-based styles allow you to create a consistent look and feel across applications. (See
“Using styles to customize component color and text” on page 82.)
clickHandler parameter in the
18 About Components
Themes allow you to drag a predesigned appearance from the library onto a set of
components. (See “About themes” on page 108.)
The Halo theme is the default theme that the version 2 components use. (See “About themes”
on page 108.)
Manager classes provide an easy way to handle focus and depth in a application. (See
“Creating custom focus navigation” on page 58 and “Managing component depth in a
document” on page 59.)
The base classes UIObject and UIComponent provide core methods, properties, and events
to components that extend them. (See “UIComponent class” and “UIObject class” in the
Components Language Reference.)
Packaging as a SWC file allows easy distribution and concealable code. See Chapter 6,
“Creating Components,” on page 125.
Built-in data binding is available through the Component inspector. For more information,
see “Data Integration (Flash Professional Only)” in Using Flash.
An easily extendable class hierarchy using ActionScript 2.0 allows you to create unique
namespaces, import classes as needed, and subclass easily to extend components. See Chapter
6, “Creating Components,” on page 125 and the ActionScript 2.0 Language Reference.
NOTE
Flash 8 has several features that are not supported by the v2 components, including 9slice (sometimes referred to as “scale-9”), FlashType, and bitmap caching.
About compiled clips and SWC files
A compiled clip is a package of precompiled Flash symbols and ActionScript code. It’s used to
avoid recompiling symbols and code that will not be changed. A movie clip can also be
“compiled” in Flash and converted to a compiled clip. For example, a movie clip with a lot of
ActionScript code that doesn’t change often could be converted to a compiled clip. The
compiled clip behaves just like the movie clip from which it was compiled, but compiled clips
appear and publish much faster than regular movie clips. Compiled clips can’t be edited, but
they do have properties that appear in the Property inspector and the Component inspector.
Components included with Flash are not FLA files—they are compiled clips (that have been
packaged into compiled clip (SWC) files. SWC is the Macromedia file format for distributing
components; it contains a compiled clip, the component’s ActionScript class file, and other
files that describe the component. For details about SWC files, see “Exporting and
distributing a component” on page 182.
About compiled clips and SWC files 19
When you place a SWC file in the First Run/Components folder, the component appears in
the Components panel. When you add a component to the Stage from the Components
panel, a compiled clip symbol is added to the library.
To compile a movie clip:
■ Right-click (Windows) or Control-click (Macintosh) the movie clip in the Library panel,
and then select Convert to Compiled Clip.
To export a SWC file:
■ Select the movie clip in the Library panel and right-click (Windows) or Control-click
(Macintosh), and then select Export SWC File.
NOTE
Flash Basic 8 and Flash Professional 8 continue to support FLA components.
Accessibility and components
A growing requirement for web content is that it should be accessible; that is, usable for
people with a variety of disabilities. Visual content in Flash applications can be made
accessible to the visually impaired with the use of screen reader software, which provides a
spoken audio description of the contents of the screen.
When a component is created, the author can write ActionScript that enables communication
between the component and a screen reader. When a developer uses that component to
build an application in Flash, the developer uses the Accessibility panel to configure each
component instance.
Most components built by Macromedia are designed for accessibility. To find out whether a
component is accessible, see its entry in the Components Language Reference. When you’re
building an application in Flash, you’ll need to add one line of code for each component
(
mx.accessibility.ComponentNameAccImpl.enableAccessibility();), and set the
accessibility parameters in the Accessibility panel. Accessibility for components works the
same way as it works for all Flash movie clips.
Most components built by Macromedia are also navigable by the keyboard. Each component’s
entry in the Components Language Reference indicates whether you can control the component
with the keyboard.
20 About Components
CHAPTER 2
Creating an Application with Components (Flash Professional Only)
Components are prebuilt Flash elements that you can use when creating Macromedia Flash
applications. Components include user interface controls, data access and connectivity
mechanisms, and media-related elements. Components save you work when building a Flash
application by providing you with elements and behavior that you would need to create from
scratch otherwise.
This chapter contains a tutorial that shows you how to build a Flash application using
components that are available in Macromedia Flash Professional 8. You will learn how to work
with components in the Flash authoring environment and also learn how to make them
interactive with ActionScript code.
About the Fix Your Mistake tutorial
This tutorial takes you through the steps to create a basic online shopping application for the
“Fix Your Mistake” gift service. This service helps a user select an appropriate gift to make
amends to someone whom the user has offended. The application filters a list of gifts to those
choices that match the severity of the user’s offense. From that list the user can add items to
the shopping cart and then proceed to the checkout page to provide billing, shipping, and
credit card information.
This chapter contains the following sections:
About the Fix Your Mistake tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Build the main page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23
Bind data components to display gift ideas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Display gift details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Create the checkout screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Test the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Viewing the completed application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
2
21
The application uses the ComboBox, DataGrid, TextArea, and Button components, as well as
others, to create the application interface. The main page of the interface looks like this:
The application uses the ActionScript WebService class to connect dynamically to a web
service to retrieve the list of offenses (problems.xml) that appear in the combo box. It also uses
ActionScript to handle the user’s interactions with the application.
The application uses data components to connect the interface to another data source. It uses
the XMLConnector component to connect to an XML data file (products.xml) for the list of
gifts and it uses the DataSet component to filter the data and present it to the data grid.
The tutorial requires some familiarity with the Flash authoring environment and some
experience with ActionScript. In the authoring environment, you should have some
experience using panels, tools, the timeline, and the library. All the ActionScript needed for
creating the sample application is provided here within the tutorial. To understand the
scripting concepts and create your own applications, however, you will need additional
experience writing ActionScript.
To see a working version of the completed application, see “Viewing the completed
application” on page 47
Keep in mind that the sample application is for demonstration purposes and therefore is not
as complete as a real-world application.
22 Creating an Application with Components (Flash Professional Only)
Build the main page
Follow these steps to create the application’s main page by adding components to a skeletal
starter page. Then add ActionScript code to customize the components, import the
ActionScript classes that allow you to manipulate the application’s components, and access a
web service to populate the combo box with a list of offenses. The code populates the combo
box by setting its
1. Open the first_app_start.fla file, which you can find at one of the following locations:
■ In Windows: install drive:\Program Files\Macromedia\Flash 8\Samples and
Tutorials\Samples\Components\ComponentsApplication
■ On the Macintosh: Macintosh HD/Applications/Macromedia Flash 8/Samples and
Tutorials/Samples/Components/ComponentsApplication
The file contains a start page that looks like the following:
dataProvider property to receive the results from the web service.
The start_app.fla file contains three layers: a background layer with a black background
image and text titles, a text layer with text labels for sections of the application, and a
labels layer with labels on the first frame (Home) and the tenth frame (Checkout).
2. Select File > Save As. Rename the file and save it to your hard disk.
3. In the Timeline, select the Labels layer and click the Add Layer button to add a new layer
above it. Name the new layer Form. You will place the component instances in this layer.
Build the main page 23
4. Make sure the Form layer is selected. In the Components panel (Window > Components),
locate the ComboBox component in the User Interface tree. Drag an instance of
ComboBox onto the Stage. Place it below the What Did You Do? text. In the Property
inspector (Window > Properties > Properties), enter problems_cb for the instance name.
Enter 400 (pixels) for the width. Enter 76.0 for the x location and 82.0 for the y location.
NOTE
The ComboBox component symbol is added to the library (Window > Library). When
you drag an instance of a component to the Stage, the compiled clip symbol for the
component is added to the library. As with all symbols in Flash, you can create
additional instances of the component by dragging the library symbol onto
the Stage.
5. Drag an instance of the DataGrid component from the User Interface tree in the
Components panel onto the Stage. Place it below the Gift Ideas text. Enter products_dg
for the instance name. Enter 400 (pixels) for the width and 130 for the height. Enter 76.0
for the x location and 128.0 for the y location.
6. Drag an instance of the DataSet component from the Data tree in the Components panel
onto the side of the Stage. (The DataSet component does not appear in the application at
runtime. The DataSet icon is simply a placeholder that you work with in the Flash
authoring environment.) Enter products_ds for the instance name.
Drag an instance of the XMLConnector component from the Data tree in the
Components panel to the side of the Stage. (Like the DataSet component, the
XMLConnector component does not appear in the application at runtime.) Enter
products_xmlcon for the instance name. Click the Parameters tab in the Property
inspector, and enter www.flash-mx.com/mm/firstapp/products.xml for the
URL property.
Click the value for the direction property to activate the combo box, click the down-arrow
and select
NOTE
receive from the list.
You can also use the Component inspector (Window > Component Inspector) to set
parameters for components. The Parameters tab in the Property inspector and the
Component inspector work in the same way.
The URL specifies an external XML file with data about the products that appear in the
Gift Ideas section of the application. Later in the tutorial you will use data binding to bind
the XMLConnector, DataSet, and DataGrid components together; the DataSet
component filters data from the external XML file, and the DataGrid component will
display it.
7. Drag an instance of the Button component from the User Interface tree in the Components
panel onto the Stage. Place it in the lower-right corner of the Stage. Enter checkout_button
for the instance name. Click the Parameters tab and enter Checkout for the
label
property. For the x and y coordinates, enter 560.3 and 386.0, respectively.
24 Creating an Application with Components (Flash Professional Only)
Import the component classes
Each component is associated with an ActionScript class file that defines its methods and
properties. In this section of the tutorial, you will add ActionScript code to import the classes
associated with the application’s components. For some of these components, you have
already added instances to the Stage. For others, you will add ActionScript later in the tutorial
to create instances dynamically.
The import statement creates a reference to the class name and makes it easier to write
ActionScript for the component. The import statement enables you to refer to the class by its
class name rather than its complete name, which includes the package name. For example,
after you create a reference to the ComboBox class file with an import statement, you can
refer to instances of the combo box with the syntax
instanceName:mx.controls.ComboBox.
A package is a directory that contains class files and resides in a designated classpath directory.
You can use a wild card character to create references to all the classes in a package: for
example, the syntax
mx.controls.* creates references to all classes in the controls package.
(When you create a reference to a package with a wild card, the unused classes are dropped
from the application when it is compiled, so they don’t add any extra size.)
For the application in this tutorial, you need the following packages and individual classes:
UI Components Controls package This package contains classes for the user interface
control components, including ComboBox, DataGrid, Loader, TextInput, Label,
NumericStepper, Button, and CheckBox.
UI Components Containers package This package contains classes for the user interface
container components, including Accordion, ScrollPane, and Window. As with the controls
package, you can create a reference to this package by using a wild card.
DataGridColumn class This class lets you add columns to the DataGrid instance and
control their appearance.
WebService class This class populates the ComboBox instance with a list of problems or
offenses. For this class, you will also need to import the WebServiceClasses item from the
Classes common library. This item contains compiled clip (SWC) files that you will need in
order to compile and generate the SWF file for your application.
Cart class A custom class provided with this tutorial, the Cart class defines the functioning
of the shopping cart that you will create later. (To examine the code in the Cart class file, open
the cart.as file located in the component_application folder with the application FLA and
SWF files).
instanceName:ComboBox, rather than
Build the main page 25
To import these classes, you will create an Actions layer and add the ActionScript code to the
first frame of the main timeline. All the code that you will add to the application in the
remaining steps of the tutorial should be placed in the Actions layer.
1. To import the WebServiceClasses item from the Classes library, select Window > Common
Libraries > Classes.
2. Drag the WebServiceClasses item from the Classes library into the library for
the application.
Importing an item from the Classes library is similar to adding a component to the
library: it adds the SWC files for the class to the library. The SWC files need to be in the
library in order for you to use the class in an application.
3. In the Timeline, select the Form layer and click the Add New Layer button. Name the new
layer Actions.
4. With the Actions layer selected, select Frame 1 and press F9 to open the Actions panel.
5. In the Actions panel, enter the following code to create a stop() function that prevents the
application from looping during playback:
stop();
With Frame 1 in the Actions layer still selected, add the following code in the Actions panel
6.
to import the classes:
// Import necessary classes.
import mx.services.WebService;
import mx.controls.*;
import mx.containers.*;
import mx.controls.gridclasses.DataGridColumn;
// Import the custom Cart class.
import Cart;
26 Creating an Application with Components (Flash Professional Only)
Set the data types of component instances
Next you will assign data types to each of the component instances you dragged to the Stage
earlier in the tutorial.
ActionScript 2.0 uses strict data typing, which means that you assign the data type when
you create a variable. Strict data typing makes code hints available for the variable in the
Actions panel.
■ In the Actions panel, add the following code to assign data types to the four component
instances that you already created.
/* Data type instances on the Stage; other instances might be added at
runtime from the Cart class.*/
var problems_cb:ComboBox;
var products_dg:DataGrid;
var cart_dg:DataGrid;
var products_xmlcon:mx.data.components.XMLConnector;
NOTE
The instance names you specify here must agree with the instance names that you
assigned when you dragged the components to the Stage.
Customize the appearance of components
Each component has style properties and methods that let you customize its appearance,
including highlight color, font, and font size. You can set styles for individual component
instances, or set styles globally to apply to all component instances in an application. For this
tutorial you will set styles globally.
■ Add the following code to set styles:
// Define global styles and easing equations for the problems_cb
ComboBox.
_global.style.setStyle("themeColor", "haloBlue");
_global.style.setStyle("fontFamily", "Verdana");
_global.style.setStyle("fontSize", 10);
_global.style.setStyle("openEasing",
mx.transitions.easing.Bounce.easeOut);
This code sets the theme color (the highlight color on a selected item), font, and font size
for the components, and also sets the easing for the ComboBox—the way that the dropdown list appears and disappears when you click the ComboBox title bar.
Build the main page 27
Display offenses in the combo box
In this section you will add code to connect to a web service that contains the list of offenses
(Forgot to Water Your Plants, and so on). The web service description language (WSDL) file
is located at www.flash-mx.com/mm/firstapp/problems.cfc?WSDL. To see how the WSDL is
structured, browse to the WSDL location.
The ActionScript code passes the web service results to the ComboBox instance for display. A
function sorts the offenses in order of severity. If no result is returned from the web service
(for example, if the service is down, or the function isn’t found), an error message appears in
the Output panel.
■ In the Actions panel, add the following code:
/* Define the web service used to retrieve an array of problems.
This service will be bound to the problems_cb ComboBox instance. */
var problemService:WebService = new WebService("http://www.flash-mx.com/
mm/firstapp/problems.cfc?WSDL");
var myProblems:Object = problemService.getProblems();
/* If you get a result from the web service, set the field that will be
used for the column label.
Set the data provider to the results returned from the web service. */
myProblems.onResult = function(wsdlResults:Array) {
problems_cb.labelField = "name";
problems_cb.dataProvider = wsdlResults.sortOn("severity",
Array.NUMERIC);
};
/* If you are unable to connect to the remote web service, display the
error messages in the Output panel. */
myProblems.onFault = function(error:Object) {
trace("error:");
for (var prop in error) {
trace(" "+prop+" -> "+error[prop]);
}
};
TIP
Press Control+S to save your work and then Control+Enter (or select Control > Test
Movie) to test the application. The combo box should be populated with a list of
offenses at this point and you should see the empty data grid that you created for Gift
Ideas, along with the checkout button.
28 Creating an Application with Components (Flash Professional Only)
Bind data components to display gift ideas
In the beginning of the tutorial, you added instances of the DataGrid, DataSet, and
XMLConnector components to the Stage. You set the
instance, named products_xmlcon, to the location of an XML file containing product
information for the Gift Ideas section of the application.
Now you will use data binding features in the Flash authoring environment to bind the
XMLConnector, DataSet, and DataGrid components together to use the XML data in the
application. For general information on working with data binding and other features of the
Flash data integration architecture, see Chapter 16, “Data Integration (Flash Professional
Only)” in Using Flash.
When you bind the components, the DataSet component filters the list of products in the
XML file according to the severity of the offense that the user selects in the What Did You
Do? section. The DataGrid component will display the list.
Use schema to describe the XML data source
When you connect to an external XML data source with the XMLConnector component,
you need to specify a schema—a schematic representation which describes the structure of the
XML document. The schema tells the XMLConnector component how to read the XML
data source. The easiest way to specify a schema is to import a copy of the XML file that
you’re going to connect to, and use that copy as a schema.
1. Open your web browser and go to www.flash-mx.com/mm/firstapp/products.xml (the
location you set for the XMLConnector URL parameter).
2. Select File > Save As.
3. Save products.xml to the same location as the FLA file that you’re working on.
4. Select Frame 1 in the main Timeline.
5. Select the products_xmlcon (XMLConnector) instance beside the Stage.
6. In the Component inspector, click the Schema tab. Click the Import button (on the right
side of the Schema tab, above the scroll pane). In the Open dialog box, locate the
products.xml file that you imported in step 3, and click Open. The schema for the
products.xml file appears in the scroll pane of the Schema tab.
In the top pane of the Schema tab, select the
and change the value from <empty> to String. Repeat this step for the description
type
element.
image element. In the bottom pane, select data
URL property for the XMLConnector
Bind data components to display gift ideas 29
Filter the gift ideas to match the offense
You will use the Binding tab in the Component inspector to bind the XMLConnector,
DataSet, and DataGrid component instances to one another.
For information on working with data binding, see “Data Integration (Flash Professional
Only)” in Using Flash.
1. With the products_xmlcon (XMLConnector) instance selected on the Stage, click the
Bindings tab in the Component inspector.
2. Click the Add Binding button.
3. In the Add Binding dialog box, select the results.products.product array item and
click OK.
4. In the Bindings tab, click the Bound To item in the Binding Attributes pane (the bottom
pane, showing attribute name-value pairs).
5. In the Value column for the Bound To item, click the magnifying glass icon to open the
Bound To dialog box.
6. In the Bound To dialog box, select the DataSet <products_ds> instance in the
Component Path pane. Select
Click OK.
7. In the Bindings tab, click the Direction item in the Binding Attributes pane. From the pop-
up menu in the Value column, select Out.
This option means that the data will pass from the
products_ds instance (rather than passing in both directions, or passing from the
DataSet instance to the XMLConnector instance).
8. On the Stage, select the products_ds instance. In the Bindings tab of the Component
inspector, notice that the component’s data provider appears in the Binding List (the top
pane of the Bindings tab). In the Binding Attributes pane, the Bound To parameter
indicates that the
products_ds instance is bound to the products_xmlcom instance, and
the binding direction is In.
In the next few steps you will bind the DataSet instance to the DataGrid instance so that
the data that is filtered by the data set will be displayed in the data grid.
9. With the products_ds instance still selected, click the Add Binding button in the
Bindings tab.
10. In the Add Binding dialog box, select the dataProvider: array item and click OK.
11. In the Bindings tab, make sure the dataProvider: array item is selected in the
Binding List.
12. Click the Bound To item in the Binding Attributes pane.
dataProvider:array in the Schema Location pane.
products_xmlcon instance to the
30 Creating an Application with Components (Flash Professional Only)
Loading...