Flash component application and development detailed explanation

Components are movie clips with parameters that you can use to modify the appearance and behavior of a component. Each component has predefined parameters, and they can be set. Each component also has a set of its own methods, properties, and events, which are called application-path interfaces (application programming Interface,api). With the component, it can separate the design from the software interface and improve the reusability of the code. The components contained in Flash MX 2004 or Flash MX Professional 2004 are not FLA files, but SWC files. SWC is the Macromedia file format used for components. Movie clips in a library item can be precompiled into a SWF file. This can shorten the execution time of the movie test and publication. When you copy the SWC file to the Run\components directory, the component appears in the Components panel.

Flash's self-contained components are located in the Mx.controls package. The component inherits directly or indirectly from the UIComponent class, and the UIComponent class extends the UIObject class, and the UIObject class is a subclass of the MovieClip class. The MovieClip class does not belong to any package, and the definition file is located in the Flashinstaldir\en\first run\classes directory. Both the UIComponent class and the UIObject class are located in the Mx.core package, and the definition file is located in the Flashinstaldir\en\first Run\classes\mx\core directory.

The UIObject class encapsulates the MovieClip class, and all flash V2 components can share its methods, properties, and events. The UIObject class enables components to be implemented on styles, events, and scaling adjustments. It provides a way to dynamically create a delete component:

CreateObject method: Call the Attachmovie function directly, returning a reference to a MovieClip type.

Createclassobject Method: Calls the CreateObject method, creates a component instance of the specified class, and returns a reference to the component that was created.

Createemptyobject Method: Creates an empty UIObject instance.

Destroyobject Method: Use the DELETE statement to delete a component instance that has already been created.

UIObject also encapsulates a number of other methods, including:

Redraw method: Redraw the component in the current frame.

Invalidate method: marks the component so that it is redrawn at the next frame interval.

Move Method: Moves the component to the specified location.

SetSize Method: Sets the component size.

Setskin Method: Sets the component skin.

GetStyle method: Gets the style information.

The properties of the UIObject class, except ScaleX and ScaleY, are read-only and need to be noted when used. So if you want to adjust the appearance of the component at run time, you must use the method of the UIObject class. Assignment to a read-only property is not valid, even if the assignment to a read-only property sometimes results in a component's appearance errors. The UIObject class also defines a series of events, including load events (load), uninstall events (unload), move events (moves), redraw events (draw), and resizing events (resize).

Using the component creation method of the UIObject class, you can create a component instance at run time.

The UIComponent class inherits from the UIObject class and is not a visual component. As with the UIObject class, all flash V2 components can share its methods and properties. It implements focus acquisition for the component, keyboard input, disabling and enabling of components, and automatic resizing of components by layout.

The main methods of the UIComponent class are:

GetFocus Method: Use the Focus Manager (Selection) to return a reference to the object that is currently getting focus.

SetFocus method: Causes the component to get focus.

The Enabled property of the UIComponent class specifies whether the component instance is available, and the TabIndex property specifies the order in which the component's focus is fetched. The UIComponent class also defines a series of focus and keyboard events: Focus Fetch events (Focusin), Focus transfer Events (Focusout), keyboard press events (KeyDown), and keyboard release events (KEYUP).

The Flash MX 2004 and Flash MX Professional 2004 come with a set of components called Flash V2 components that are upgraded from the V1 component of Flash MX, and V1 components and V2 components are not used together to avoid some errors. The V2 component supports live preview, allowing developers to see the component's appearance in an edited state. Developers can save computer resources by setting whether they need real-time previews and real-time previews of the patterns. In the Controlàenable Live Preview menu Set whether to use Live preview, select Preview Mode on the Viewàpriview mode menu. The component is essentially a compiled movie clip formatted as SWC. The SWC file is similar to a zip file and can be decompressed to view its contents using a general decompression program. Movie clips can be published directly as components in an editing environment, or you can directly compile component files stored in SWC format for other developers to use. Similarly, developers can import components from outside.

With components, you must drag the components required in the palette to the stage (Stage) so that the components appear in the library panel. This allows the component to be used just like a regular library item. With scripts, you can dynamically create component instances, and there are three ways to create components at run Time: CreateObject (), Creatclassobject (), and Attachmovie (). Attachmovie () is a method of MovieClip classes, CreateObject () and Creatclassobject () are UIObject class methods, but in fact they are both direct and indirect calls to Attachmovie ().

When a component is added, you can set the parameters of the component directly in the properties or Parameters panel. Also, the simplest way to define an event for a component is to use on (EventName) to define it. You can also use the listener and event handler functions to define how the component events are handled. The event definition of a component is more flexible, and the way in which it is defined depends on the habits and preferences of the individual. When an event occurs, the component broadcasts an object-type event parameter that includes information about the event occurrence object and event type. In addition, you can use Depth Manager (Depthmanager) to manage your components in depth.

The biggest feature of flash components is that developers can customize components, especially the customization of interface elements, making them more appealing. The V2 component has its own set of default interface schemes, called Themes (Theme). Topics include two aspects: styles (style) and appearance (Skin). The SetStyle () and GetStyle () methods of the UIObject class can get and set the style of the component. The style is simple to set up, mainly in the following three ways:

• Set properties directly:

t.color=0xff5567;

• Custom styles using a simple SetStyle () Name value method:

Instancename.setstyle ("Property", value);

• Use the Style object in conjunction with the SetStyle () method to customize the style:

Create a Style object

var styleobj = new Mx.styles.CSSStyleDeclaration;

Portray style details

......

Styleobj.fontsize = 18;

To apply a style to a component instance

B.setstyle ("StyleName", styleobj);

The level of the style includes 4 levels: Global style, applied to all components, the default style of the component class, the component that is applied to a class, the custom style, and the properties of the component instance directly. For different levels of style flash applies these styles to the component in a certain order.

First, Flash looks at the style properties on the component instance, and if no style is set directly on the instance, Flash looks at the StyleName property of the instance and determines whether the style declaration has been assigned to it. If the StyleName property is not assigned a style declaration, Flash looks for the properties on the default class style declaration. If there is no class style declaration and the property does not inherit its value, the _global style declaration is checked. If the property is not defined in the _global style declaration, the property is undefined.

In addition, if there is no class style declaration, but the property does inherit its value, Flash looks for properties on that instance's parent. If the property is not defined on the parent instance, Flash checks the StyleName property of the parent instance, and if this property is not defined, Flash continues to view the parent instance until the _global level. If the property is not defined in the _global style declaration, the property is undefined.

On the other hand, to better use components, you need to modify or redefine the appearance of the component. The visual definition file for Flash V2 is located under the Flashinstraldir\en\first Run\componentfla folder. When you modify the appearance, you need to import the original skin definition file as an external library (Fileàopen External Library) and drag a Skin definition library item from the external library to the library of the current document, which is usually a movie clip (MovieClip). Each component Skin Definition Library project folder contains a states folder that defines the appearance of the components in different states, each of which specifies a link name (linkagename) as a script reference, and if this name is modified, Causes an error in the appearance loading of the component in that state. In the component's class file, each state uses a string property to specify the link name of its appearance library item, and if you want to redefine the appearance of the component in a state, just modify the value of the string property in the script, and of course you must first have a new appearance library item that can be chained.

Once you understand the appearance of such a component, changes in the appearance of the component become very simple. The key is to modify or redefine a new set of appearance library items and to specify their link names, and then modify the properties of the component's class file that specify the appearance of the component. The developer can modify the appearance of the component instance in the initialization event (initialize) of the component instance. There are many ways to fix the appearance of all instances of a component, such as the first frame of _root using classname. Prototype.statename=value statement, which can also be used directly in #initclip and #endinitclip code blocks, and you can also use class inheritance to specify new values for component skin link properties when component initialization, and you need to use the #initclip, #endinitclip代码块. #initclip和 #endinitclip is a Flash compiler command that acts as the start and end tag of the initialization code block. As long as the sign (symbol) is defined, the initialization code is executed before the first frame and executed once. So in this code block, you can specify the appearance of different states for the entire component class.

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, the associated metadata (Metadata) must also be declared for the attribute. 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.