Using ActionScript 2.0 Components 

 Previous    Next
 
Creating Components > Incorporating existing components within your component > Creating the LogIn Flash (FLA) file
 

Creating the LogIn Flash (FLA) file

Start by creating a Flash (FLA) file that will hold our component symbol.

To create the LogIn FLA file:

  1. In Flash, select File > New and create a new document.
  2. Select File > Save As and save the file as LogIn.fla.
  3. Create Select Insert > New Symbol. Name it LogIn, and select the Movie clip type radio button.

    If the Linkage section of the Create New Symbol dialog isn't open, click the Advanced button to reveal it.

  4. Select Export for ActionScript and deselect Export in First Frame.
  5. Enter a linkage identifier.

    The default linkage identifier is LogIn. The rest of these steps assume you use the default value.

  6. Enter LogIn in the AS 2.0 Class text box. This value is the component class name.

    If you put the class in a package, enter the entire package name. For example, mx.controls.CheckBox denotes the CheckBox class in the mx.controls package.

  7. Click OK.

    Flash opens in symbol-editing mode.

  8. Insert a new layer. Name the top layer Actions and the bottom layer Assets.
  9. Select Frame 2 in the Assets layer and insert a keyframe (F6).

    This is the structure of the component movie clip: an Actions layer and an Assets layer. The Actions layer has 1 keyframe and the Assets layer has 2 keyframes.

  10. Select Frame 1 in the Actions layer and open the Actions panel (F9). Enter a stop() global function.

    This prevents the movie clip from proceeding to Frame 2.

  11. Select File > Import > Open External Library and select the StandardComponents.fla file from the Configuration/ComponentFLA folder.
    • In Windows: \Program Files\Adobe\Adobe Flash CS3\language\Configuration\ComponentFLA\StandardComponents.fla.
    • On the Macintosh: HD/Applications/Adobe Flash CS3/Configuration/ComponentFLA/StandardComponents.fla

    NOTE

    For information about folder locations, see "Configuration folders installed with Flash" in Using Flash.
  12. Select Frame 2 in the Assets layer. From within the StandardComponents.fla library, browse to the Flash UI Components 2 folder. Drag a Button, Label and TextInput component symbol to Frame 2 of the Assets layer.

    Asset dependencies for these components are automatically copied to your LogIn.fla library.

    All the component assets are added to Frame 2 of the Assets layer. Because there is a stop() global function on Frame 1 of the Actions layer, the assets in Frame 2 will not be seen as they are arranged on the Stage.

    You add assets to Frame 2 for two reasons:

    • So that all assets are automatically copied into the library and are available to instantiate dynamically and access their methods, properties, and events.
    • Placing assets in a frame ensures they are loaded more smoothly as the movie is streamed, so you do not need to set the assets in the library to be exported before the first frame. This method prevents an initial data transfer spike that could cause download delays or long pauses.

      Using the button component symbol

    Dragging a Button component symbol from the library in StandardComponents.fla to Frame 2 of the Assets layer of LogIn.fla


  13. Close the StandardComponents.fla library.
  14. In the Assets layer, select Frame 1. Drag the BoundingBox movie clip from the LogIn.fla library (inside the Component Assets folder) to the Stage.
  15. Name the BoundingBox instance boundingBox_mc.
  16. Use the Info panel to resize the BoundingBox to the size of the LogInFinal movie clip (340, 150), and position it at 0, 0.

    The BoundingBox instance is used to create the component's live preview and allow the user to handle resize the component during authoring. You must set the size of the bounding box so that it can enclose all the graphical elements in your component.

    NOTE

    If you are extending a component (including any version 2 component) you must keep instance names already in use by that component as its code will refer to those instance names. For example, if you include a version 2 component that is already using the instance name boundingBox_mc, do not rename it. For your own components, you can choose any instance name that is unique and that does not conflict with an existing name within the same scope.
  17. Select the LogIn movie clip in the library, and select Component Definition from the Library context menu (Windows: Right-click, Mac: control-click).
  18. In the AS 2.0 Class text box, enter LogIn.

    This value is the name of the ActionScript class. If the class is in a package, the value is the full package. For example, mx.controls.CheckBox denotes the CheckBox class in the mx.controls package.

  19. Click OK.
  20. Save the file.

 

 Previous    Next

View comments on LiveDocs