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

 

What is Collection Properties in Flash

Collection Properties

Defining a collection property

Simple collection example

Defining the class for a collection item

Accessing collection information programmatically

Accessing collection information in a component class (AS) file

Accessing collection items at runtime in a Flash application

Exporting components that have collections to SWC files

Using a component that has a collection property

 

Collection Properties

TOP

When you create a new custom component in Macromedia Flash, you can make property values available for editing by the user. These properties are called collection properties. The property values can be edited by the user in the Values dialog box (opened from a text box within the Parameters tab for your component).

Components usually include functionality for a specific task, while remaining flexible for a range of requirements by the component user. For a component to be flexible, the properties within the component need to be flexible (in other words, for some components, the properties can be changed by the component user, as well as by the property values).

Collection properties enable you to create an indeterminate number of editable properties in an object model. Flash provides a Collection class to help you manage those properties through the Component inspector.

Specifically, the Collection class is a helper class used to manage a group of related objects, each called a collection item. If you define a property of your component as a collection item and make it available to users through the Component inspector, they can add, delete, and modify collection items in the Values dialog box while authoring.

You define collections and collection items as follows:

  • Define a collection property using the Collection metadata tag in a component's ActionScript file. For more information, see About the Collection tag.

  • Define a collection item as a class in a separate ActionScript file that contains its own inspectable properties.

In Flash, Collections make it easier for you to manage groups of related items programmatically. (In previous versions of Flash, component authors managed groups of related items through multiple programmatically synchronized arrays).

In addition to the Values dialog box, Flash provides the Collection and Iterator interfaces to manage Collection instances and values programmatically. See Collection interface (Flash Professional only) and Iterator interface (Flash Professional only) in the Components Language Reference.

This chapter contains the following sections:

  • Defining a collection property

  • Simple collection example

  • Defining the class for a collection item

  • Accessing collection information programmatically

  • Exporting components that have collections to SWC files

  • Using a component that has a collection property

 

Defining a collection property

TOP

You define a collection property by using the Collection tag in a component's ActionScript file. For more information, see About the Collection tag.

NOTE : This section assumes that you know how to create components and inspectable component properties.

To define a collection property:

  1. Create a FLA file for your component. See Creating a component movie clip.

  2. Create an ActionScript class. See Creating the ActionScript class file.

  3. In the ActionScript class, insert a Collection metadata tag. For more information, see About the Collection tag.

  4. Define get and set methods for the collection in the component's ActionScript file.

  5. Add the utilities classes to your FLA file by selecting Windows > Other Panels > Common Libraries > Classes and dragging UtilsClasses into the component's library.

    UtilsClasses contains the mx.utils.* package for the Collection interface.

    NOTE : Because UtilsClasses is associated with the FLA file, not the ActionScript class, Flash throws compiler errors when you check syntax while viewing the component's ActionScript class.

  6. Code a class that contains the collection item properties.

 

Simple collection example

TOP

The following is a simple example of a component class file called MyShelf.as. This example contains a collection property along with a minimal set of imports, methods, and declarations for a component that inherits from the UIObject class.

If you import mx.utils.* in this example, the class names from mx.utils no longer need to be fully qualified. For instance, mx.utils.Collection can be written as Collection.

import mx.utils.*;

// standard class declaration

class MyShelf extends mx.core.UIObject

{

// required variables for all classes

static var symbolName:String = "MyShelf";

static var symbolOwner:Object = Object(MyShelf);

var className:String = "MyShelf";

// the Collection metadata tag and attributes

[Collection(variable="myCompactDiscs",name="My Compact Discs",collectionClass="mx.utils.CollectionImpl", collectionItem="CompactDisc", identifier="Title")]

// get and set methods for the collection

public function get MyCompactDiscs():mx.utils.Collection

{

return myCompactDiscs;

}

public function set MyCompactDiscs(myCDs:mx.utils.Collection):Void

{

myCompactDiscs = myCDs;

}

// private class member

private var myCompactDiscs:mx.utils.Collection;

// You must code a reference to the collection item class

// to force the compiler to include it as a dependency

// within the SWC

private var collItem:CompactDisc;

// You must code a reference to the mx.utils.CollectionImpl class

// to force the compiler to include it as a dependency

// within the SWC

private var coll:mx.utils.CollectionImpl;

// required methods for all classes

function init(Void):Void {

super.init();

}

function size(Void):Void {

super.size();

}

}

To create a FLA file to accompany this class for testing purposes:

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

  2. Select Insert > New Symbol. Give it the name, linkage identifier, and AS 2.0 class name MyShelf.

  3. Deselect Export in First Frame and click OK.

  4. Select the MyShelf symbol in the library and choose Component Definition from the Library options menu. Enter the ActionScript 2.0 class name MyShelf.

  5. Select Window > Common Libraries > Classes, and drag UtilClasses to the library of MyShelf.fla.

  6. In the MyShelf symbol's Timeline, name one layer Assets. Create another layer and name it Actions.

  7. Place a stop() function on Frame 1 in the Actions layer.

  8. Select Frame 2 in the Assets layer and select Insert > Timeline > Keyframe.

  9. Open StandardComponents.fla from the Configuration/ComponentFLA folder, and drag an instance of UIObject to the Stage of MyShelf in Frame 2 of the Assets layer.

    You must include UIObject in the component's FLA file because, as you can see in the above class file, MyShelf extends UIObject.

  10. In Frame 1 of the Assets layer, draw a shelf.

    This can be a simple rectangle; it's just a visual representation of the MyShelf component to use for learning purposes.

  11. Select the MyShelf movie clip in the library, and select Convert to Compiled Clip.

This allows you to drag the MyShelf SWF file (the compiled clip that's added to the library) into the MyShelf.fla file to test the component. Whenever you recompile the component, a Resolve Library Conflict dialog box appears, because an older version of the component already exists in the library. Choose to replace existing items.

NOTE : You should have already created the CompactDisc class; otherwise, you'll get compiler errors when converting to a compiled clip.
 

Defining the class for a collection item

TOP

You code the properties for a collection item in a separate ActionScript class, which you define as follows:

  • Define the class such that it does not extend UIObject or UIComponent.

  • Define all properties using the Inspectable tag.

  • Define all properties as variables. Do not use get and set (getter/setter) methods.

The following is a simple example of a collection item class file called CompactDisc.as.

class CompactDisc{

[Inspectable(type="String", defaultValue="Title")]

var title:String;

[Inspectable(type="String", defaultValue="Artist")]

var artist:String;

}

 

Accessing collection information programmatically 

TOP

Flash provides programmatic access to collection data through the Collection and Iterator interfaces. The Collection interface lets you add, modify, and remove items in a collection. The Iterator interface allows you to loop through the items in a collection.

There are two scenarios in which to use the Collection and Iterator interfaces:

  • Accessing collection information in a component class (AS) file

  • Accessing collection items at runtime in a Flash application

 

Accessing collection information in a component class (AS) file

TOP

In a component's class file, you can write code that interacts with collection items defined during authoring or at runtime.

To access collection item information in a component class file, you can use any of the following approaches.

  • The Collection tag includes a variable attribute, for which you specify a variable of type mx.utils.Collection. Use this variable to access the collection, as shown in this example:

[Collection(name="LinkButtons", variable="__linkButtons", collectionClass="mx.utils.CollectionImpl", collectionItem="ButtonC", identifier="ButtonLabel")]

public var __linkButtons:mx.utils.Collection;

  • Access the Iterator interface for the collection items by calling the Collection.getIterator() method, as shown in this example:

    var itr:mx.utils.Iterator = __linkButtons.getIterator();

  • Use the Iterator interface to step through the items in the collection. The Iterator.next() method returns an Object, so you must define the type of your collection item, as shown in this example:

    while (itr.hasNext()) {

    var button:ButtonC = ButtonC(itr.next());

    ...

    }

  • Access collection item properties, as appropriate for your application, as shown in this example:

    item.label = button.ButtonLabel;

    if (button.ButtonLink != undefined) {

    item.data = button.ButtonLink;

    }

    else {

    item.enabled = false;

    }

 

Accessing collection items at runtime in a Flash application

TOP

If a Flash application uses a component that has a collection property, you can access the collection property at runtime. This example adds several items to a collection property using the Values dialog box and displays them at runtime using the Collection and Iterator APIs.

To access collection items at runtime:

  1. Open the MyShelf.fla file that you created earlier.

    See Simple collection example.

    This example builds on the MyShelf component and CompactDisc collection.

  2. Open the Library panel, drag the component onto the Stage, and give it an instance name.

    This example uses the instance name myShelf.

  3. Select the component, open the Component inspector, and display the Parameters tab. Click the line that contains the collection property, and click the magnifying glass to the right of the line. Flash displays the Values dialog box.

  4. Use the Values dialog box to enter values into the collection property.

  5. With the component selected on the Stage, open the Actions panel and enter the following code (which must be attached to the component):

    onClipEvent (mouseDown) {

    import mx.utils.Collection;

    import mx.utils.Iterator;

    var myColl:mx.utils.Collection;

    myColl = _parent.myShelf.MyCompactDiscs;

    var itr:mx.utils.Iterator = myColl.getIterator();

    while (itr.hasNext()) {

    var cd:CompactDisc = CompactDisc(itr.next());

    var title:String = cd.Title;

    var artist:String = cd.Artist;

    trace("Title: " + title + " Artist: " + artist);

    }

    }

    To access a collection, use the syntax componentName.collectionVariable; to access an iterator and step through the collection items, use componentName.collectionVariable.getIterator().

  6. Select Control > Test Movie and click the shelf to see the collection data in the Output panel.

     

Exporting components that have collections to SWC files 

TOP

When you distribute a component that has a collection, the SWC file must contain the following dependent files:

  • Collection interface

  • Collection implementation class

  • Collection item class

  • Iterator interface

Of these files, your code typically uses the Collection and Iterator interfaces, which marks them as dependent classes. Flash automatically includes dependent files in the SWC file and output SWF file.

However, the collection implementation class (mx.utils.CollectionImpl) and component-specific collection item class are not automatically included in the SWC file.

To include the collection implementation class and collection item class in the SWC file, you define private variables in your component's ActionScript file, as the following example shows:

// collection item class

private var collItem:CompactDisc;

// collection implementation class

private var coll:mx.utils.CollectionImpl;

 

Using a component that has a collection property 

TOP


When you use a component that includes a collection property, you typically use the Values dialog box to establish the items in the collection.

To use a component that includes a collection property:

  1. Add the component to the Stage.
  2. Use the Property inspector to name the component instance.
  3. Open the Component inspector and display the Parameters tab.
  4. Click the line that contains the collection property, and click the magnifying glass to the right of the line.

    Flash displays the Values dialog box.

  5. Click the Add (+) button and define a collection item.
  6. Click the Add (+), Delete (-), and arrow buttons to add, modify, move, and delete collection items.
  7. Click OK.

 

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