Flash CS3 Component Development Tutorial

Tutorials | Component Development

"Tutorial description":
Cheng Open and so on friend's request, I today the component development process tidy up, writes this tutorial. With this tutorial you can get a general idea of the overall development of the Flash component and hope to help friends who want to develop flash components themselves. This time I mainly develop flash code components, and even other flash components, you can study or discuss with me.

"Prerequisites":
1. Installed the flash CS3 software;
2. Install the Adobe Extension Manager 1.8 Extension Manager, if not please download here first;

"Development Tutorial":
1. First prepare a 18x18 PNG image, used to make the Flash component icon. (I will provide a PNG image in the packaged file below)
2. Write a stringutilcomponent component class, my components do not inherit the System component Class (UIComponent), but directly inherit the sprite class.

Package Com.klstudio.components {

Import flash.display.*;

Import Com.klstudio.util.StringUtil;

namespaces;
Use namespace klstudio_internal;

Set the component icon;
[IconFile ("Stringutilicon.png")]

public class Stringutilcomponent extends sprite{
Define the component display box;
The existing display elements in the component must begin with a namespace;
klstudio_internal var boundingbox_mc:movieclip;
Define the LRC parser;
private Var Util:stringutil;
Public Function lrcparsercomponent () {
Remove the component display box;
Boundingbox_mc.visible = false;
AddChild (BOUNDINGBOX_MC);
BOUNDINGBOX_MC = null;
}
}
}

This component uses the Stringutil class, which I have previously provided "[As3]stringutil class". Notice here that the display elements contained within the component must be prefixed with namespaces (that is, "use namespace klstudio_internal;"). Code), define the variables in the namespace below. If you do not add, you can not directly to the BOUNDINGBOX_MC display element operations (this point and the original Flash component development of different places, the original can be used directly), otherwise compile will be an error.

/**
* ...
* @author Kinglong
* @version 0.1
*/
Package Com.klstudio.components {
Public namespace klstudio_internal = http://www.klstudio.com/;
}

3. Create a Stringutil.fla file, the type of course is to select "Flash file (ACTIONSCRIPT3)."

4. Create a MovieClip element named "Stringutil", and then set the class path as shown in the following figure.

5. Create a new MovieClip element, named "BOUNDINGBOX_MC", to make a component display box.

6. Then place the BOUNDINGBOX_MC in the MovieClip element called "Stringutil" and set the name to "BOUNDINGBOX_MC" as shown in the image below.

7. The next step is to define the components, setting the class classpath, prompting information, and more. Then click on the component icon to select the PNG image before.

8. If the icon can not be as shown in the following image, please confirm it by the 4th step.

9. The Stringutil component is then packaged into a SWC file (in fact, a zip-compressed file format).

10. To the 9th step if the component is successful, but to be published to others, you can pack the SWC file into a MXP file, and before packaging to configure the first Stringutil.mxi file (this file is the XML file format), the contents are as follows:

<macromedia-extension
Name= "Stringutil"
version= "1.0"
Type= "Flash component" > <!--Describe The author
<author name= "Kinglong"/>
<!--List the Required/compatible products-
<products>
<product name= "Flash" version= "9" primary= "true"/>
</products>
<!--Describe the extension
<description>
<![ cdata[
Stringutil class <br>
for string tool classes.
]]>
</description>
<!--Describe where the extension shows in the UI of the product;
<ui -access>
<![ cdata[
This stringutil Component are accessed by choosing Window > Components > Stringutil.
]
</ui-access>
<!--Describe The files that comprise the extension
<files>
< File Name= "STRINGUTIL.SWC" destination= "$flash/components"/>
</files>
</macromedia-extension "

Official information on MXI file format description:mxi_file_format.pdf

11. If you have installed the Adobe Extension Manager 1.8 Extension Manager, you can directly double-click the Stringutil.mxi file to generate STRINGUTIL.MXP files. Or you open the Adobe Extension Manager 1.8 Extension Manager to select "File"-"Package the expansion ...", select the Stringutil.mxi file, and then generate the STRINGUTIL.MXP, here's the Hershey you, your flash CS3 Component Development Complete!