Development of Flash MX Professional-V2 component

In Flash MX Professional 2004, developers can create new V2 components themselves in a project. Before you start developing the V2 component, you should first understand the MovieClip class, the UIObject class, and the UIComponent class, because they are the base class for the Flash V2 component, and all of the Flash's self-contained components are their direct or indirect subclasses. Developing a component can inherit from the original parent class, extending the existing component classes so that the components that are created are extended further on the basis of the parent class. Alternatively, you can create a component without a parent class to implement some additional functionality. Here you will focus on how to extend the existing component classes. Extending an existing component class typically includes the following steps:

1. Components are created first as a movie clip (MovieClip), creating two layers in the movie clip for component interface elements and scripts, respectively. Then select Component Defination in the library's Drop-down menu, and in the AS2.0 class in the dialog box, enter the fully qualified name of the class to which the component is associated. When the interface element definition is complete, you can create the component's properties, events, and methods in the external file, and of course, the component's interface elements can be created dynamically in the class using code.

2. When defining a component class file, you must first import the required classes, as already mentioned, the MovieClip class, the UIObject class, and the UIComponent class are the base classes for the V2 component, so if the currently created component is extended from any component of the V2 component, then you must understand the three base classes , and the related component classes under it. For a component's features, you can view the component dictionaries published by the Macromedia Company or view the class file code directly in the Flashinstaldir\en\first run\classes directory.

3. After determining the classes to be extended by the component, write the constructor (constructor) for the component class. In general, the constructor suggests to be empty, so that object properties can be defined with the object's property interface. In addition, depending on the sequence of initialization calls, sometimes setting a property in a constructor causes the default value to be overridden.

4, the next thing to do is to add the component version information, if the current development of components as part of the package, then you can put the version information in another external file. When you define version information, you can inherit the static string property version of the UIObject class. You also need to define three more important attributes: Symbolname,symbolowner and classname; they all inherit from the component base class. Symbolname is defined as a static string variable that specifies the name of the component symbol, Symbolowner defined as the static object type, and is a fully qualified name of the class that will be used in an internal call to the Createclassobject () method ; ClassName defines the component class name.

5. When all this is done, you will begin to define the properties and methods associated with the component's functionality. In the case of attributes and method definitions, it is preferable to determine the access characteristics of each property and method, so that the component provides a good application interface (API) to the user. So when defining properties and methods, you use private and public to declare the accessibility of the property and use the setter and getter functions to set and get the value of the property. This makes it much better to encapsulate the components so that users do not need to know the internals of the components.

All components must implement two core methods: The method of initiation and sizing. If you do not overwrite two methods in the custom component's class file, Flash Player may produce an error. Flash invokes the initialization method when the class is created. The initialization method should call the initialization method of the parent class, because width, height, and other movie clip parameters can be correctly set only after this method is called.

function init (void): void

{

Calling the initialization method of the parent class

Super.init ();

Add the initialization code associated with this component here

}

The sizing method is similar to the initialization method:

function size (void): void

{

Super.size ();

Add the resizing code associated with this component here

6, in order for the properties to be visible in the development panel, you must also declare the associated metadata (Metadata) for the property. Metadata tokens can define component properties, data-binding properties, and events. Flash can interpret these statements and update the development environment accordingly. Metadata is associated with a class declaration or a single data field. The metadata statement is bound to the next line of the script. For example, when you define a component property, you add a metadata token to the previous line of the property declaration. When you define a component event, you add a metadata token outside of the class definition to bind the event to the entire class. For attributes, there are two more important meta data: inspectable and Inspectablelist.

The inspectable metadata defines the properties of the component that is displayed to the user in the Component Inspector (Component Inspector) panel. The syntax is as follows:

[Inspectable (Value_type=value [, Attribute=value,...])]

Property_declaration Name:type;

The inspectable metadata also includes several metadata tokens:

Name: type string (optional), the display name of the property in the development panel.

Type: Type is string (optional) to specify the type of the property. If omitted, the type of the property is used. The following are acceptable values: Array, Object, List, String, number, Boolean, Font Name, Color.

defaultvalue: type can be string or number (required). Specifies the default value for the property.

enumeration: Type is string (optional). Specifies a comma-delimited list of property legal values.

Category: Type is string (optional). Divides the property into a specific subcategory in the property inspector.

The inspectablelist metadata keyword is used to specify exactly which subset of the check parameters should be displayed in the property inspector. You can use a combination of inspectablelist and inspectable to hide the inherited properties of a child class component. If you do not add a inspectablelist metadata keyword to a component's class, all of the verifiable parameters, including the verifiable parameters of the component's parent class, are displayed in the property inspector. Its syntax is as follows:

[Inspectablelist ("attribute1" [,...])]

Class definition

The Inspectablelist keyword must be defined immediately next to the class and before it, because it applies to the entire class.

7, define the components of the event, first of all to use the event metadata keyword declaration events. The event metadata keyword is used to define component events. The syntax is as follows:

[Event ("Event_Name")]

The Event statements must be added to the class definition in the class file to bind them to a class and not to a specific member of the class. First, the component class inherits the base class event. If the base class for the currently defined component is uicomponent, then 28 events of the MovieClip class, UIObject class, and UIComponent class are already included in the component. But in fact, these 28 events are not all available. The reason for this is simple because the component can have its constituent structure, and there may be components or other component instances inside the component. To provide a unified interface for the user, a component must extract certain events from its internal structure and define them as events for the component, which is an event that is based on the internal composition of the component. For example, the component includes two text boxes T1 and T2, at which point the T1 change event can be published as the component's PP event according to the function of the component, while the T2 Change event is published as the component's UU event, of course, the name of the component event can be defined by the component developers themselves.

So how exactly do you define a new event for a component? For the example above, you can define the following:

Import class

Import mx.core.UIComponent;

Declaring component events with Meta data

[Event ("PP")]

[Event ("UU")]

Indicates that the class inherits from UIComponent

Class T_t extends UIComponent

{

There are two input text (input text) already created in the editing environment, and their references are known in the class.

var T1:textfield;

var T2:textfield;

Defining constructors

function t_t ()

{

Publish a T1 Change event in a constructor

T1.onchanged=function ()

{//Create an event object that holds information related to the event

var eventObj = new Object ();

Define the name of the event type

Eventobj.type = "PP";

An object that indicates the event broadcast (occurs)

Eventobj.target = _parent;

To publish an event as an event for a component

_parent.dispatchevent (EVENTOBJ);

}

Publish a T2 Change event in a constructor

T2.onchanged=function ()

{

var eventObj = new Object ();

Eventobj.type = "UU";

Eventobj.target =_parent;

_parent.dispatchevent (EVENTOBJ);

}

}

In the above code, the two events of the component, UU and PP, are declared with the metadata, and then the change events of T1 and T2 are defined in the constructor of the component class, with _parent.dispatchevent (EVENTOBJ) in their change events; Statement to publish a Chang event as a component event. The Dispatchevent () method requires an event object of type Object as a parameter that holds information related to the event: target indicates the object that the event broadcasts (occurs), and type defines the name of the event type-or the event name. The following code can be used in event scripts to respond to events in a way that is consistent with general event handling methods:

Responding to a component's PP event

On (PP)

{Trace ("PP");}

Responding to a component's UU event

On (UU)

{Trace ("UU");}

Changes to the properties of a component can also be published as events, such as:

private Var tm:string;

Events that publish components in a setter

Public function set TTm (val:string)

{

Tm=val;

var eventObj = new Object ();

Eventobj.type = "KK";

Eventobj.target =this;

This.dispatchevent (EVENTOBJ);

Of course, you also use event metadata to declare events for your component. In reality, however, event components that do not have an event metadata declaration can also respond. The event metadata declaration seems to be just one more code hint. So metadata simply provides a more user-friendly user interface for components, making it easier for developers to use components.

You can also customize an icon for a group before you publish the component. The icon size requires x 18 pixels and is saved in PNG format. Its Alpha transparency must be 8 bits, and the pixel in the upper-left corner is transparent to support the mask. You also need to define add metadata declarations in the component class file:

[IconFile ("Component_name.png")]

The declaration, like an event declaration, must be placed before the class definition, so that the declaration acts on the component class. Finally, save the image to the same directory as the FLA file. When you export a SWC file, Flash will automatically include the image.

When the component definition is complete and the test is passed, the component can be published for use by other developers. Flash MX 2004 Exports components as component packages (SWC files). When you publish a component, you only need to provide SWC files to other developers. This file contains all the code, SWF files, images, and metadata associated with the component, so other developers can easily put it into their own flash development environment.

This paper discusses the development of Flash V2 component. In specific development, the component's properties, events, and methods should be described in detail according to the functional characteristics of the component, and the user interface with well-defined metadata is declared. If the component is a visual component, you also need to make a graphical element of the component interface for the component.