What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

How to Work with Components in Flash

 

Working with Components

Using code hints

The Components panel

Creating custom focus navigation

Adding components to Flash documents

Managing component depth in a document

Components in the Library panel

Components in Live Preview

Setting component parameters

Using a preloader with components

Sizing components

About loading components

Deleting components from Flash documents

Upgrading version 1 components to version 2 architecture

Working with Components

TOP

In this chapter, you'll use several Macromedia Flash (FLA) files and ActionScript class files to learn how to add components to a document and set their properties. This chapter also explains a few advanced topics such as using code hints, creating custom focus navigation, managing component depth, and upgrading version 1 components to version 2 of the Macromedia Component Architecture.

The files used in this chapter are TipCalulator.fla and TipCalculator.swf. The files are installed in the following locations on your hard disk:

The Components panel

TOP

All components in the user-level configuration/Components directory are displayed in the Components panel. (For more information about this directory, see Where component files are stored.)

To display the Components panel:

Select Window > Components.



To display components that were installed after Flash starts:

  1. Select Window > Components.

  2. Select Reload from the Components panel pop-up menu.

Adding components to Flash documents

TOP

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.

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

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. Select Window > Components.

  2. Do one of the following:

    • Drag a component from the Components panel to the Stage.

    • Double-click a component in the Components panel.

  3. 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.

  4. Select the component on the Stage.

  5. Select Window > Properties > Properties.

  6. In the Property inspector, enter an instance name for the component instance.

  7. 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 (installed at Flash 8/Samples and Tutorials/Samples/Components/TipCalculator).

    For more information, see Setting component parameters.

  8. 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 Components Language Reference.

  9. 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().

    • 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.

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

  11. Apply a theme (see About themes).

  12. Edit a component's skins (see About skinning components).

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 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 Flash.

You can use ActionScript methods to set additional parameters for dynamically added components. For more information, see 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.

  2. 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.

  3. Select the frame in the Timeline where you want to add the component.

  4. Open the Actions panel if it isn't already open.

    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"});

Components in the Library panel

TOP

When you add a component to a document, it is displayed as a compiled clip (SWC file) symbol in the Library panel.

A ComboBox component in the Library panel

You can add more instances of a component by dragging the component icon from the library to the Stage.

For more information about compiled clips, see About compiled clips and SWC files.
 

Setting component parameters

TOP

Each component has parameters that you can set to change its appearance and behavior. A parameter is a property that appears in the Property inspector and Component inspector. The most commonly used properties appear as authoring parameters; others must be set with ActionScript. All parameters that can be set during authoring can also be set with ActionScript. Setting a parameter with ActionScript overrides any value set during authoring.

All version 2 User Interface (UI) components inherit properties and methods from the UIObject and UIComponent classes; these are the properties and methods that all components use, such as UIObject.setSize(), UIObject.setStyle(), UIObject.x, and UIObject.y. Each component also has unique properties and methods, some of which are available as authoring parameters. For example, the ProgressBar component has a percentComplete property (ProgressBar.percentComplete), and the NumericStepper component has nextValue and previousValue properties (NumericStepper.nextValue, NumericStepper.previousValue).

You can set parameters for a component instance using the Component inspector or the Property inspector (it doesn't matter which panel you use).

To enter an instance name for a component in the Property inspector:

  1. Select Window > Properties > Properties.

  2. Select an instance of a component on the Stage.

  3. Enter an instance name in the text box under the word Component.

    It's a good idea to add a suffix to the instance name that indicates what kind of component it is; this makes it easier to read your ActionScript code. In this example, the instance name is states_cb because the component is a combo box that lists the U.S. states.

To enter parameters for a component instance in the Component inspector:

  1. Select Window > Component Inspector.

  2. Select an instance of a component on the Stage.

  3. To enter parameters, click the Parameters tab.

  4. To enter or view bindings or schemas for a component, click their respective tabs. For more information, see Data Integration (Flash Professional Only) in Using Flash.
     

Sizing components

TOP

Use the Free Transform tool or the setSize() method to resize component instances.

Resizing the Menu component on the Stage with the Free Transform tool

You can call the setSize() method from any component instance (see UIObject.setSize()) to resize it. The following code resizes the TextArea component to 200 pixels wide and 300 pixels high:

myTextArea.setSize(200, 300);

NOTE If you use the ActionScript _width and _height properties to adjust the width and height of a component, the component is resized but the layout of the content in the component remains the same. This might cause the component to be distorted in movie playback.

A component does not resize automatically to fit its label. If a component instance that has been added to a document is not large enough to display its label, the label text is clipped. You must resize the component to fit its label.

A clipped label for the CheckBox component

For more information about sizing components, see their individual entries in the Components Language Reference.

Deleting components from Flash documents

TOP

To delete a component's instances from a Flash document, you must delete the component from the library by deleting the compiled clip icon. It isn't enough to delete the component from the Stage.

To delete a component from a document:

  1. In the Library panel, select the compiled clip (SWC) symbol.

  2. Click the Delete button at the bottom of the Library panel, or select Delete from the Library options menu.

  3. In the Delete dialog box, click Delete to confirm the deletion.

Using code hints

TOP

When you are using ActionScript 2.0, you can use strict typing for a variable that is based on a built-in class, including component classes. If you do so, the ActionScript editor displays code hints for the variable. For example, suppose you type the following:

import mx.controls.CheckBox;

var myCheckBox:CheckBox;

myCheckBox.

As soon as you type the period after myCheckBox, Flash displays a list of methods and properties available for CheckBox components, because you have designated the variable as type CheckBox. For more information, see About assigning data types and strict data typing and Using code hints in Learning ActionScript 2.0 in Flash.

Creating custom focus navigation

TOP

When a user presses the Tab key to navigate in a Flash application or clicks in an application, the FocusManager class determines which component receives input focus (for more information see FocusManager class in the Components Language Reference). You don't need to add a FocusManager instance to an application or write any code to activate the Focus Manager.]

If a RadioButton object receives focus, the Focus Manager examines that object and all objects with the same groupName value and sets focus on the object with the selected property set to true.

Each modal Window component contains an instance of the Focus Manager, so the controls on that window become their own tab set. This prevents a user from inadvertently navigating to components in other windows by pressing the Tab key.

To create focus navigation in an application, set the tabIndex property on any components (including buttons) that should receive focus. When a user presses the Tab key, the FocusManager class looks for an enabled object whose tabIndex value is greater than the current value of tabIndex. After the FocusManager class reaches the highest tabIndex property, it returns to 0. For example, in the following code, the comment object (probably a TextArea component) receives focus first, and then the okButton instance receives focus:

var comment:mx.controls.TextArea;

var okButton:mx.controls.Button;

comment.tabIndex = 1;

okButton.tabIndex = 2;

You can also use the Accessibility panel to assign a tab index value.

If nothing on the Stage has a tab index value, the Focus Manager uses the depth levels (z-order). The depth levels are set up primarily by the order in which components are dragged to the Stage; however, you can also use the Modify > Arrange > Bring to Front/Send to Back commands to determine the final z-order.

To give focus to a component in an application, call focusManager.setFocus().

To create a button that receives focus when a user presses Enter (Windows) or Return (Macintosh), set the FocusManager.defaultPushButton property to the instance of the desired button, as in the following code:

focusManager.defaultPushButton = okButton;

The FocusManager class (API) overrides the default Flash Player focus rectangle and draws a custom focus rectangle with rounded corners.

For more information about creating a focus scheme in a Flash application, see FocusManager class in the Components Language Reference.

element.

Managing component depth in a document

TOP

If you want to position a component in front of or behind another object in an application, you must use the DepthManager class in the Components Language Reference. The methods of the DepthManager class allows you to place user interface components in an appropriate relative order (for example, a combo box drops down in front of other components, insertion points\

appear in front of everything, dialog boxes float over content, and so on).

The Depth Manager has two main purposes: to manage the relative depth assignments within any document, and to manage reserved depths on the root timeline for system-level services such as the cursor and tooltips.'

To use the Depth Manager, call its methods.

The following code places the component instance loader at a lower depth than the button component (and in the published SWF file it will appear "below" the button, if they overlap):

loader.setDepthBelow(button);

NOTE You can also manage relative depths using Layers and the Modify > Arrange menu options within your document. Components adhere to the same rules for runtime depth management using layers and arrangement as do movie clips.

Components in Live Preview

TOP

The Live Preview feature, enabled by default, lets you view components on the Stage as they will appear in the published Flash content; the components appear at their approximate size. The live preview reflects different parameters for different components. For information about which component parameters are reflected in the live preview, see each component entry in the Components Language Reference.

A Button component with Live Preview enabled



A Button component with Live Preview disabled


Components in Live Preview are not functional. To test component functionality, you can use the Control > Test Movie command.

To turn Live Preview on or off:

  • Select Control > Enable Live Preview. A check mark next to the option indicates that it is enabled.

Using a preloader with components

TOP

Preloading involves loading some of the data for a SWF file before the user starts interacting with it. By default, components and classes are set to export in the first frame of the document that contains components. Because the components and classes are the first data to load, you might have problems implementing a progress bar or loading animation. Specifically, the components and classes might load before the progress bar, but you want the progress bar to reflect the loading progress of all data (including classes). Therefore, you should load the classes after other parts of the SWF file, but before you use components.

To do this, when you create a custom preloader for an application containing components, set the file's publish settings to export all the classes to the frame containing your components. To see a list of all the components in the Halo and Sample themes that have their assets set to Export in First Frame, see Changing export settings.

To change the export frame for all your classes:

  1. Select File > Publish Settings.

  2. In the Flash tab of the Publish Settings dialog box, make sure the ActionScript version is set to ActionScript 2.0.

  3. Click the Settings button to the right of the ActionScript version.

  4. In ActionScript 2.0 Settings, change the number for the Export Frame for Classes text box to the frame where your components first appear.

You cannot use any classes until the playhead reaches the frame you choose to load them into. Because components require classes for their functionality, you must load components after the frame specified for loading classes. If you export your classes to Frame 3, you cannot use anything from those classes until the playhead reaches Frame 3 and loads the data.

If you want to preload a file that uses components, you must also preload the components in the SWF file. To accomplish this, you must set your components to export for a different frame in the SWF file.

To change the frame into which components are exported:

  1. Select Window > Library to open the Library panel.

  2. Right-click (Windows) or Control-click (Macintosh) the component in the library.

  3. Select Linkage from the context menu.

  4. Deselect Export in First Frame.

  5. Click OK.

  6. Select File > Publish Settings.

  7. Select the Flash tab and click the Settings button.

  8. Enter a number into the Export Frame for Classes text box and click OK. The classes will load into this frame.

  9. Click OK to close the Publish Settings dialog box.

If components do not load on the first frame, you can create a custom progress bar for the first frame of the SWF file. Do not reference any components in your ActionScript or include any components on the Stage until you load the classes for the frame you specified in Step 7.

NOTE Components must be exported after the ActionScript classes that they use.

About loading components

TOP

If you load version 2 components into a SWF file or into the Loader component, the components may not work correctly. These components include the following: Alert, ComboBox, DateField, Menu, MenuBar, and Window.

Use the _lockroot property when calling loadMovie() or loading into the Loader component. If you're using the Loader component, add the following code:

myLoaderComponent.content._lockroot = true;

If you're using a movie clip with a call to loadMovie(), add the following code:

myMovieClip._lockroot = true;

If you don't set _lockroot to true in the loader movie clip, the loader only has access to its own library, but not the library in the loaded movie clip.

The _lockroot property is supported by Flash Player 7. For information about this property, see _lockroot (MovieClip._lockroot property) in the ActionScript 2.0 Language Reference.

Upgrading version 1 components to version 2 architecture

TOP

The version 2 components were written to comply with several web standards (regarding events [www.w3.org/TR/DOM-Level-3-Events/events.html], styles, getter/setter policies, and so on) and are very different from their version 1 counterparts that were released with Macromedia Flash MX and in the DRKs that were released before Macromedia Flash MX 2004. Version 2 components have different APIs and were written in ActionScript 2.0. Therefore, using version 1 and version 2 components together in an application can cause unpredictable behavior. For information about upgrading version 1 components to use version 2 event handling, styles, and getter/setter access to the properties instead of methods, see Creating Components.

Flash applications that contain version 1 components work properly in Flash Player 6 and Flash Player 7, when published for Flash Player 6 or Flash Player 6 (6.0.65.0). If you want to update your applications to work when published for Flash Player 7, you must convert your code to use strict data typing. For more information, see Writing custom class files in Learning ActionScript 2.0 in Flash.

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash