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() {
