User Guide
Table Of Contents
- Contents
- Working with Flash MX 2004
- Creating Basic Components in Flash MX 2004
- Creating Advanced Components in Flash MX 2004
- Contents
- About Creating components
- Writing the component’s ActionScript code
- Simple example of a class file
- General process for writing a class file
- Selecting a parent class
- Identifying the class, symbol, and owner names
- About the component instantiation life cycle
- Writing the constructor
- Specifying clip parameters
- Implementing the constructObject2() method
- Implementing the init() method
- Implementing the createChildren() method
- Implementing the commitProperties() method
- Implementing the measure() method
- Implementing the layoutChildren() method
- Implementing the draw() method
- Defining getters and setters
- Component metadata
- Defining component parameters
- Handling events
- Using the Event metadata
- About invalidation
- Skinning custom controls
- Adding styles
- Making components accessible
- Improving component usability
- Best practices when designing a component
- Using the ModalText example
- Troubleshooting
- Index
24 Chapter 2: Creating Basic Components in Flash MX 2004
Orange Circle Create a component that exists in a package. By developing this component, you
learn how to work in a namespace that uses packaged classes.
Blue Button Create a component that extends an existing visual component.
These components illustrate the basic concepts of component creation. Building the components
also shows you the minimum requirements for creating a custom visual component in Flash for
use in Flex. For detailed information about building more complex components, see Chapter 3,
“Creating Advanced Components in Flash MX 2004,” on page 45.
Creating the Green Square
Creating the Green Square is similar to creating a Hello World component, but because this is
Flash, the simplest example creates a visual component rather than printing the words "Hello
World".
The Green Square component prints a shape on the screen. The shape is green and square.
To create the Green Square:
1.
Set up the Flash environment by adding the Flex components and class files. For more
information, see “Adding Flex classes and components to the Flash IDE” on page 8.
2.
In Flash, create a new FLA file.
3.
Edit the FLA file’s local classpath settings to include the following two classpath entries:
■ $(LocalData)/Flex Classes
■ . (the dot)
For more information, see “Changing the Flash classpath” on page 10.
4.
Draw a green square on the Stage. Make sure that the origin indicator (or registration point) is
at the top left corner.
5.
Save the FLA file as greensquare.fla.
6.
Open a text editor and create a file called greensquare.as. Save the ActionScript file in the same
directory as the greensquare.fla file. This should be a directory that is not in the web
application’s directory structure, since these are source files for your eventual component.
Furthermore, it cannot be the same directory into which you deploy the SWC file and the
MXML file.
7.
Add the following code to the greensquare.as file:
class greensquare extends mx.core.UIObject {
static var symbolName:String="greensquare";
static var symbolOwner:Object = greensquare;
var className:String = "greensquare";
function greensquare() { //empty constructor
}
function init() {