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:

In Flash, select File > New and create a new document.

Select File > Save As and save the file as LogIn.fla.

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.

Select Export for ActionScript and deselect Export in First Frame.

Enter a linkage identifier.

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

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.

Click OK.

Flash opens in symbol-editing mode.

Insert a new layer. Name the top layer Actions and the bottom layer Assets.

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.

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.

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.

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.

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

Close the StandardComponents.fla library.

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.

Name the BoundingBox instance boundingBox_mc.

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.

Select the LogIn movie clip in the library, and select Component Definition from the Library context menu (Windows: Right-click, Mac: control-click).

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.

Click OK.

Save the file.

Flash CS3

Comments

stauciuc said on Dec 27, 2007 at 8:57 AM :

I found this:

"# 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.
# Name the BoundingBox instance boundingBox_mc. "

here:
http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00002520.html
,through a Google search.

My question is: "BoundingBox" instance?! Am I missing something or was this doc made for a beta version? Or is it not clear/accurate enough?

No screen name said on Feb 5, 2008 at 12:50 PM :

um.... wha???

In this demo, I don't understand where they are getting boundingBox_MC from. I don't have one in my component Asset folder (or anywhere that I can see) I've been searching for an hour thinking I must be losing my vision, and there are no indications of where to find this, if it doesn't show anywhere.

Also lower down in this demo it says to Select Component Definition from the Library context menu, and again I have no idea what they are referring to.

Where is Component Definition? And where is Library Context Menu?

This is not clear.

adbe_paul said on Feb 7, 2008 at 10:36 AM :

boundingBox_MC is a symbol you create (steps 14-15)

To open the Component Definition dialog, right-click (or ctrl-click on mac) the symbol in the library panel, and choose "Component Definition" from the context menu that appears.

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/9.0/main/00002518.html