Flash CS3 Documentation

Using ActionScript 2.0 Components > Creating Components > Creating a component movie clip

Creating a component movie clip

To create a component, you must create a movie clip symbol and link it to the component's class file.

The movie clip has two frames and two layers. The first layer is an Actions layer and has a stop() global function on Frame 1. The second layer is an Assets layer with two keyframes. Frame 1 contains a bounding box or any graphics that serve as placeholders for the final art. Frame 2 contains all other assets, including graphics and base classes, used by the component.

Inserting a new movie clip symbol

All components are MovieClip objects. To create a new component, you must first insert a new symbol into a new FLA file.

To add a new component symbol:

1. In Flash, create a blank Flash document.
2. Select Insert > New Symbol.

   The Create New Symbol dialog box appears.

3. Enter a symbol name. Name the component by capitalizing the first letter of each word in the component (for example, MyComponent).
4. Select the Movie Clip behavior.
5. Click the Advanced button to display the advanced settings.
6. Select Export for ActionScript and deselect Export in First Frame and Export in First Frame.
7. Enter a linkage identifier.
8. In the AS 2.0 Class text box, enter the fully qualified path to the ActionScript 2.0 class.

   The class name should be the same as the component name that appears in the Components panel. For example, the Button component's class is mx.controls.Button.

   NOTE

   Do not include the filename's extension; the AS 2.0 Class text box points to the packaged location of the class and not the file system's name for the file.

   If the ActionScript file is in a package, you must include the package name. This value can be relative to the classpath or can be an absolute package path (for example, mypackage.MyComponent).

9. In most cases, you should deselect Export in First Frame (it is selected by default). For more information, see Component development checklist.
10. Click OK.

    Flash adds the symbol to the library and switches to symbol-editing mode. In this mode, the name of the symbol appears above the upper-left corner of the Stage, and a cross hair indicates the symbol's registration point.

    You can now edit the symbol to create a component. See Editing the movie clip.

Editing the movie clip

After you create the new symbol and define the linkages for it, you can define the component's assets in the symbol's Timeline.

A component's symbol should have two layers. This section describes what layers to insert and what to add to those layers.

To edit the movie clip:

1. Rename Layer 1 Actions and select Frame 1.
2. Open the Actions panel and add a stop() function, as follows:

   stop();
   

   Do not add any graphical assets to this frame.

3. Add a Layer named Assets.
4. On the Assets layer, select Frame 2 and insert a blank keyframe.

   There are now two blank keyframes in this layer.

5. Do one of the following:
   • If the component has visual assets that define the bounding area, drag the symbols into Frame 1 and arrange them appropriately.
   • If your component creates all its visual assets at runtime, drag a BoundingBox symbol to the Stage in Frame 1, size it correctly, and name the instance boundingBox_mc. The symbol is located in the library of the StandardComponents.fla that is located in the Configuration/ComponentFLA folder.

     
     
     

6. If you are extending an existing component, place an instance of that component and any other base classes in Frame 2 of the Assets layer.

   To do this, select the symbol from the Components panel and drag it to the Stage. If you are extending a base class, open StandardComponents.fla from the Configuration/ComponentFLA folder and drag the class from the library to the Stage.

   NOTE

   When you drag UIComponent to the component library, the folder hierarchy in the library is changed. If you plan to use your library again, or use it with other groups of components (such as the version 2 components), you should restructure the folder hierarchy to match the StandardComponents.fla library so that it's organized well and you avoid duplicate symbols.

7. Add any graphical assets used by this component on Frame 2 of your component's Assets layer.

   Any asset that a component uses (whether it's another component or media such as bitmaps) should have an instance placed in the second frame of the Assets layer.

8. Your finished symbol should look something like this:

   
   
   

Defining the movie clip as a component

The movie clip symbol must be linked to an ActionScript class file in the Component Definition dialog box. This is how Flash knows where to look for the component's metatags. (For more information about metatags, see Adding component metadata.) There are other options you can select in the Component Definition dialog box as well.

To define a movie clip as a component:

1. Select the movie clip in the library and select Component Definition from the Library context menu (Windows: Right-click; Mac: control-click).
2. You must enter an AS 2.0 class.

   If the class is part of a package, enter the full package name.

3. Specify other options in the Component Definition dialog box, if desired:
   • Click the Plus (+) button to define parameters.

     This is optional. The best practice is to use the metadata Inspectable tag in the component's class file to specify parameters. When an ActionScript 2.0 class is not specified, define the parameters for the component here.

   • Specify a custom UI.

     This is a SWF file that plays in the Component inspector. You can embed it in the component FLA file or browse to an external SWF.

   • Specify a live preview.

     This is an external or embedded SWF file. You don't need to specify a live preview here; you can add a bounding box to the component movie clip, and Flash creates a live preview for you. See Creating a component movie clip.

   • Enter a description.

     The Description field was deprecated in Flash MX 2004 because the Reference panel has been removed. This field is provided for backward compatibility when you save FLA files in the Flash MX format.

   • Choose an icon.

     This option specifies a PNG file to use as an icon for the component. If you specify an IconFile metadata tag in the ActionScript 2.0 class file (best practice), this field is ignored.

   • Select or deselect Parameters Are Locked in Instances.

     When this option is unselected, users can add parameters to each component instance that differ from the component's parameters. Generally, this setting should be selected. This option provides backward compatibility with Flash MX.

   • Specify a tooltip that appears in the Components panel.

Flash CS3