Flash CS Custom Components

2012 time, did some research, can not go to tidy up later, did not go to use the project inside, now put these things to commemorate, also give the need of people as reference.

Basic knowledge:

Basics of flash using basic knowledge with ActionScript 3.0

Principle Description:

The component of this project is to extend the fl-component from Flash CS, extend the related classes, or replace their skins with custom skins.

Precautions:

Before you develop your custom components, remember to release management of Mycomponent.fla and MYCOMPONENTSHIM.FLA.

Development process

1. Open Mycomponent.fla, create a new symbol in it, select the type as movie clip, select Export as ActionScript, fill in the class name, such as:

2. According to the class name filled in, new component class alignment for editing, if you want to extend the existing components, then directly inherit the existing components of the class as a base class, if you want to add a type of component, we recommend extending UIComponent. This can enjoy the convenience of the Stylemanager and Focusmanager of the uicomponent components;

3. After completing the custom class, open the Properties panel of the custom component, and click the Hook button after the class to test whether the class corresponding to the component can be inspected. If it is not checked, the class of the component is misplaced.

4. Double-click into the custom component to begin editing the custom component.

5. Rename the default first layer to Avatar, which is used to store the avatar image of the component, here (0,0) position to draw a no fill, border shape to replace the custom component display on the stage avatar, remember that the dimensions must be the same size as the component will show to the stage, such as:

6. Import the footage required by the custom component into the library, create a new folder, make the imported footage into a movie clip symbol, and export the movie clip's naming convention: Custom Component name + state name + "_skin:", especially to remove the option to export these movie clips in the first frame , Such as:

7. Add a new layer named assets, add a second frame, the first frame is left blank frame, the custom component will use all the skins are pulled here to the following:

8. Add a layer, named asset name, which is the main function of describing the elements inside the asset layer information, this layer is remembered as a guide layer, such as:

9. Add a layer, called Component Shim, where the main place is the Componentshim file inside the library, and later specify

After completing the above steps, the component has a preliminary prototype, the next part of the work to be done is:

Custom parameters for making components

LivePreview to make components

Componentshim to make components

Custom parameters

The first need to perfect the component of the custom class, if you want to let the component in flash directly set his related parameters, you need to use the Inspectable original tag, in the custom parameter setter or getter above the inspectable tag can be added;

After perfecting the custom component class, bring up the component definition panel, fill in the full path of the custom component class into the text field after the class label, fill 2 in the Edit Frame text field below to ensure that the component is edited at the second frame, click OK, the IDE needs a little response time to parse the component class. After parsing is complete, reopen the component definition panel and you will see that the parameters added with the inspectable tag appear in the Parameters panel above, and when the component Inspector is opened, there are also these parameters;

Subsequent updates to the component custom class, you need to click here to confirm the update;

Making LivePreview

There are two ways to make LivePreview:

Method 1. Right-click the custom component in the library, select Export as SWC, unzip the SWC using the Unzip tool, and then you will get a library.swf file renamed to Xxxpreview.swf,xxx is the name of your custom component.

Method 2. Create a new Xxxpreview.fla file, write a document class for this document, the document class must inherit Fl.livepreview.LivePreviewParent, and the document class must have a public setSize (width: Number,height:number): Void method, as follows:

Package com.good.controls{

Import fl.livepreview.LivePreviewParent;

public class Closebuttonpreview extends livepreviewparent{

Public Function SetSize (width:number,height:number): void{

}

}

}

The size of the. FLA is set to the size dimensions of the custom component, and then the xxxpreview.swf generated by the debug movie is the preview of the custom component, as follows:

After making the preview.swf, open the component definition panel for the custom component in the library, set up Live preview, select the real-time preview of the. swf file embedded in the. fla file in the pop-up Live Preview dialog box, then fill in the full xxxpreview.swf name below and click OK.

Making Componentshim

Create a new FLA file, Named Componentshim.fla (Mycomponentshim.fla for this project), if the custom component is useful to the contents of the FL component, remember to drag the Componentshim in FL, create a new component in the library, link the class name to the new custom component's class name, as follows:

Add a movie clip in the library named Xxxcomponent Shim, export the class name to the relevant directory of the package for the custom component class, then export the symbol as a movie clip, copy the exported movie clip into the custom component's folder, and replace the default Componentshim file As follows:

Then go to the component shim layer in each custom component to update the component shim, and drag the new component shim to the 10,10 position on the stage.

Place the new custom component's FLA in the Flash CS installation directory:

The comman/configuration/components/directory is ready.

Open Flash CS, open the palette, select Reload to update the new components.

Added 2012-06-28:

Custom component classes Note the notation

1. If you are extending an existing component, you can refer to the inheritance tree of the component, choose the appropriate parent class for inheritance, or, if you are creating a new component, inherit the uicomponent directly;
2. In order for the custom skin to take effect, the override Getstyledefinition method is required, which is used to obtain the skin data. The current practice is to define a private static variable within the class Defaultstyles store the state and name of the custom skin, returning directly to Uicomponent.megerstyle (Defaultstyles) inside the Getstyledefinition ;

There are two key methods to note: Configui () and Draw (), the draw method is generally used for the rendering of the failure mode, Cofigui is generally used to deal with the persistence of things, For example, the addition of Labelbutton TextField is carried out in Configui.

Sample Download

Flash CS Custom Components