Using ActionScript 2.0 Components 

 Previous    Next
 
Working with Components > Adding components to Flash documents
 

Adding components to Flash documents

When you drag a component from the Components panel to the Stage, a compiled clip (SWC) symbol is added to the Library panel. After a SWC symbol is added to the library, you can drag multiple instances to the Stage. You can also add that component to a document at runtime by using the UIObject.createClassObject() ActionScript method. For more information, see the ActionScript 2.0 Components Language Reference.

NOTE

The Menu and Alert components are two exceptions, and cannot be instantiated using UIObject.createClassObject(). They use the show() method instead.

Adding components during authoring

You can add a component to a document by using the Components panel, and then add additional instances of the component to the document by dragging the component from the Library panel to the Stage. You can set properties for additional instances in the Parameters tab of the Property inspector or in the Parameters tab in the Component inspector.

To add a component to a Flash document by using the Components panel:

  1. Set your publish settings to publish for ActionScript 2.0.

    (Select File > Publish Settings > Flash tab and select ActionScript 2.0 in the ActionScript dropdown menu.)

  2. Select Window > Components.
  3. Do one of the following:
    • Drag a component from the Components panel to the Stage.
    • Double-click a component in the Components panel.
  4. If the component is a FLA file (all installed version 2 components are SWC files) and if you have edited skins for another instance of the same component, or for a component that shares skins with the component you are adding, do one of the following:
    • Select Don't Replace Existing Items to preserve the edited skins and apply the edited skins to the new component.
    • Select Replace Existing Items to replace all the skins with default skins. The new component and all previous versions of the component, or of components that share its skins, will use the default skins.
  5. Select the component on the Stage.
  6. Select Window > Properties > Properties.
  7. In the Property inspector, enter an instance name for the component instance.
  8. Click the Parameters tab and specify parameters for the instance.

    The following illustration shows the Property inspector for the TextInput component that is in the TipCalculator.fla sample file. To access the TipCalculator.fla sample file, see the Flash Samples pages at www.adobe.com/go/learn_fl_samples.

    The parameters panel

    For more information, see Setting component parameters.

  9. Change the size of the component as desired by editing the values for the width and height.

    For more information on sizing specific component types, see the individual component entries in ActionScript 2.0 Components Language Reference.

  10. If you want to change the color and text formatting of a component, do one or more of the following:
    • Set or change a specific style property value for a component instance by using the setStyle() method, which is available to all components. For more information, see UIObject.setStyle() in the ActionScript 2.0 Components Language Reference.
    • Edit multiple properties in the global style declaration assigned to all version 2 components.
    • Create a custom style declaration for specific component instances.

    For more information, see Using styles to customize component color and text.

  11. If you want to customize the appearance of the component, do one of the following:

Adding components at runtime with ActionScript

The instructions in this section assume an intermediate or advanced knowledge of ActionScript.

Use the createClassObject() method (which most components inherit from the UIObject class) to add components to a Flash application dynamically. For example, you could add components that create a page layout based on user-set preferences (as on the home page of a web portal).

Version 2 components that are installed with Flash reside in package directories. (For more information, see About packages in Learning ActionScript 2.0 in Adobe Flash. If you add a component to the Stage during authoring, you can refer to the component simply by using its instance name (for example, myButton). However, if you add a component to an application with ActionScript (at runtime), you must either specify its fully qualified class name (for example, mx.controls.Button) or import the package by using the import statement.

For example, to write ActionScript code that refers to an Alert component, you can use the import statement to reference the class, as follows:

import mx.controls.Alert;
Alert.show("The connection has failed", "Error");

Alternatively, you can use the full package path, as follows:

mx.controls.Alert.show("The connection has failed", "Error");

For more information, see About importing class files in Learning ActionScript 2.0 in Adobe Flash.

You can use ActionScript methods to set additional parameters for dynamically added components. For more information, see ActionScript 2.0 Components Language Reference.

NOTE

To add a component to a document at runtime, it must be in the library when the SWF file is compiled. To add a component to the library, drag the component icon from the Components panel to the library. Furthermore, if you are loading a movie clip containing a dynamically instantiated (using ActionScript) component into another movie clip, the parent movie clip must have the component in the library when the SWF file is compiled.

To add a component to your Flash document using ActionScript:

  1. Drag a component from the Components panel into the library for the current document.

    NOTE

    Components are set to Export in First Frame by default (right-click for Windows, or control-click for Macintosh, and select the Linkage menu option to see the Export in First Frame setting). If you want to use a preloader for an application containing components, you need to change the export frame, see Using a preloader with components for instructions.
  2. Select the frame in the Timeline where you want to add the component.
  3. Open the Actions panel if it isn't already open.
  4. Call createClassObject() to create the component instance at runtime.

    This method can be called on its own, or from any component instance. The createClassObject() method takes the following parameters: a component class name, an instance name for the new instance, a depth, and an optional initialization object that you can use to set properties at runtime.

    You can specify the class package in the class name parameter, as in the following example:

    createClassObject(mx.controls.CheckBox, "cb", 5, {label:"Check Me"});

    Alternatively, you can import the class package, as in the following example:

    import mx.controls.CheckBox;
createClassObject(CheckBox, "cb", 5, {label:"Check Me"});

    For more information, see Handling Component Events and the UIObject.createClassObject() in ActionScript 2.0 Components Language Reference.

 

 Previous    Next

View comments on LiveDocs