Sử dụng flash 8

tatic v { barCo track borde butto color dateH dateR disab fillC highl scrol selec shado strok symbo symbo symbo symbo symbo theme today shado borde focus shape }; Register the as follows: mx.skins.C The color ca shown here: shape.setSing a new style name created a new style name and it is a color style, add the new name to the s object in the StyleManager.as file (First \mx\styles\StyleManager.as). This example adds the shapeColor style: ize set of inheriting color styles ar colorStyles:Object = lor: true, Color: true, rColor: true, nColor: true, : true, eaderColor: true, ollOverColor: true, ledColor: true, olor: true, ightColor: true, lTrackColor: true, tedDateColor: true, wColor: true, eColor: true, lBackgroundColor: true, lBackgroundDisabledColor: true, lBackgroundPressedColor: true, lColor: true, lDisabledColor: true, Color:true, IndicatorColor: true, wCapColor:true, rCapColor:true, Color:true, Color:true new style name to the circle and square skins on Frame 1 of each skin movie clip, oloredSkinElement.setColorStyle(this, "shapeColor"); n be changed with the new style name by setting the style on the instance, as tyle("shapeColor",0x00ff00);ng Components Incorp your c In this sectio and Button incorporated The comple examples fo ■ In Wind Tutorial ■ On the M Samples The LogIn c LogIn has tw name and p when the us ■ “Creatin ■ “The Lo ■ “Testing Creatin Start by crea To create 1. In Flash 2. Select Fi 3. Create S radio bu If the Li button t 4. Select E 5. Enter a l The defa default vorating existing components within omponent n, you will build a simple LogIn component that incorporates Label, TextInput components. This tutorial demonstrates how existing components are in new components by adding their uncompiled Flash (FLA) library symbols. ted component files, LogIn.fla, LogIn.as and LogIn.swf are located in the lder on your hard disk: ows: the C:\Program Files\Macromedia\Flash 8\Samples and s\Samples\Components\Login folder. acintosh: HD/Applications/Macromedia Flash 8/Samples and Tutorials/ /Components/Login folder. omponent provides an interface for entering a name and password. The API for o properties, name and password for setting and getting the string values in the assword TextInput fields. The LogIn component also dispatches a “click” event er clicks a button labeled LogIn. g the LogIn Flash (FLA) file” on page 173 gIn class file” on page 176 and exporting the LogIn component” on page 180 g the LogIn Flash (FLA) file ting a Flash (FLA) file that will hold our component symbol. the LogIn FLA file: , select File > New and create a new document. le > Save As and save the file as LogIn.fla. elect Insert > New Symbol. Name it LogIn, and select the Movie clip type tton. nkage section of the Create New Symbol dialog isn’t open, click the Advanced o reveal it. xport for ActionScript and deselect Export in First Frame.Incorporating existing components within your component 173 inkage identifier. ult linkage identifier is LogIn. The rest of these steps assume you use the alue. 174 Creati 6. Enter Lo If you pu mx.cont 7. Click O Flash op 8. Insert a 9. Select Fr This is t The Act 10. Select Fr global fu This pre 11. Select Fi from the ■ In W 8\lan ■ On t Com 12. Select Fr browse t compon Asset de library. All the c stop() seen as t You add N O T EgIn in the AS 2.0 Class text box. This value is the component class name. t the class in a package, enter the entire package name. For example, rols.CheckBox denotes the CheckBox class in the mx.controls package. K. ens in symbol-editing mode. new layer. Name the top layer Actions and the bottom layer Assets. ame 2 in the Assets layer and insert a keyframe (F6). he structure of the component movie clip: an Actions layer and an Assets layer. ions layer has 1 keyframe and the Assets layer has 2 keyframes. ame 1 in the Actions layer and open the Actions panel (F9). Enter a stop() nction. vents the movie clip from proceeding to Frame 2. le > Import > Open External Library and select the StandardComponents.fla file Configuration/ComponentFLA folder. indows: \Program Files\Macromedia\Flash guage\Configuration\ComponentFLA\StandardComponents.fla. he Macintosh: HD/Applications/Macromedia Flash 8/Configuration/ ponentFLA/StandardComponents.fla ame 2 in the Assets layer. From within the StandardComponents.fla library, o the Flash UI Components 2 folder. Drag a Button, Label and TextInput ent symbol to Frame 2 of the Assets layer. pendencies for these components are automatically copied to your LogIn.fla omponent assets are added to Frame 2 of the Assets layer. Because there is a global function on Frame 1 of the Actions layer, the assets in Frame 2 will not be hey are arranged on the Stage. assets to Frame 2 for two reasons: For information about folder locations, see “Configuration folders installed with Flash” in Using Flash.ng Components ■ So th insta ■ Placi strea first dow Drag Fram 13. Close th 14. In the A library ( 15. Name that all assets are automatically copied into the library and are available to ntiate dynamically and access their methods, properties, and events. ng assets in a frame ensures they are loaded more smoothly as the movie is med, so you do not need to set the assets in the library to be exported before the frame. This method prevents an initial data transfer spike that could cause nload delays or long pauses. ging a Button component symbol from the library in StandardComponents.fla to e 2 of the Assets layer of LogIn.fla e StandardComponents.fla library. ssets layer, select Frame 1. Drag the BoundingBox movie clip from the LogIn.fla inside the Component Assets folder) to the Stage. e BoundingBox instance boundingBox_mc. Incorporating existing components within your component 175 176 Creati 16. Use the I 150), an The Bou user to h boundin 17. Select th Library 18. In the A This valu full pack mx.cont 19. Click O 20.Save the The Lo The followin comments i elements of To create th Save the file You can cop LogIn.as file element of t /* Import from th import mx. import mx. import mx. import mx. // Event m [Event("ch N O T E If y kee ins usi com connfo panel to resize the BoundingBox to the size of the LogInFinal movie clip (340, d position it at 0, 0. ndingBox instance is used to create the component’s live preview and allow the andle resize the component during authoring. You must set the size of the g box so that it can enclose all the graphical elements in your component. e LogIn movie clip in the library, and select Component Definition from the context menu (Windows: Right-click, Mac: control-click). S 2.0 Class text box, enter LogIn. e is the name of the ActionScript class. If the class is in a package, the value is the age. For example, mx.controls.CheckBox denotes the CheckBox class in the rols package. K. file. gIn class file g code is the ActionScript class for the LogIn component. Please read the n the code for a description of each section. (For detailed information on the a component class file, see “Overview of a component class file” on page 144). is file, you can create a new ActionScript file in Flash, or use any other text editor. as LogIn.as in the same folder as the LogIn.fla file. y or type the following LogIn component ActionScript class code into your new . Typing rather than copying the code will help you become familiar with each he component code. the packages so they can be referenced is class directly. */ ou are extending a component (including any version 2 component) you must p instance names already in use by that component as its code will refer to those tance names. For example, if you include a version 2 component that is already ng the instance name boundingBox_mc, do not rename it. For your own ponents, you can choose any instance name that is unique and that does not flict with an existing name within the same scope.ng Components core.UIComponent; controls.Label; controls.TextInput; controls.Button; etadata tag ange")] [Event("cl class LogI { /* Compo compo static v static v var clas // The c private private private private private private private /* Priva These private private /* Const While the c All i metho function } /* Initi The i in tu The i function super bound bound bound } /* Creat The c exten public f name_ name_ name_ name_ick")] n extends UIComponent nents must declare these member variables to be proper nents in the components framework. */ ar symbolName:String = "LogIn"; ar symbolOwner:Object = LogIn; sName:String = "LogIn"; omponent's graphical representation. var name_label:MovieClip; var password_label:MovieClip; var name_ti:MovieClip; var password_ti:MovieClip; var login_btn:MovieClip; var boundingBox_mc:MovieClip; var startDepth:Number = 10; te member variables available publicly through getter/setters. represent the name and password InputText string values. */ var __name:String; var __password:String; ructor: required for all classes, v2 components require ontstructor to be empty with zero arguments. nitialization takes place in a required init d after the class instance has been constructed. */ LogIn() { alization code: nit method is required for v2 components. It must also rn call its parent class init() method with super.init(). nit method is required for components extending UIComponent. */ init():Void { .init(); ingBox_mc._visible = false; ingBox_mc._width = 0; ingBox_mc._height = 0; e child objects needed at start up: reateChildren method is required for componentsIncorporating existing components within your component 177 ding UIComponent. */ unction createChildren():Void { label = createObject("Label", "name_label", this.startDepth++); label.text = "Name:"; label._width = 200; label._x = 20; 178 Creati name_ name_ this.sta name_ name_ name_ /* Se No in th name_ name_ this.sta name_ passw this.sta passw passw passw passw login this.sta login login login size( } /* The d It is inval This than to mo function super } /* The s chang The s function super // Calabel._y = 10; ti = createObject("TextInput", "name_ti", rtDepth++,{_width:200,_heigh:22,_x:20,_y:30}); ti.html = false; ti.text = __name; ti.tabIndex = 1; t this text input field to have focus. te: Make sure to set select Control > Disable Keyboard Shortcuts the Flash Debugger if it is not already selected, otherwise e focus may not set when testing. */ ti.setFocus(); label = createObject("Label", "password_label", rtDepth++,{_width:200,_heigh:22,_x:20,_y:60}); label.text = "Password:"; ord_ti = createObject("TextInput", "password_ti", rtDepth++,{_width:200,_heigh:22,_x:20,_y:80}); ord_ti.html = false; ord_ti.text = __password; ord_ti.password = true; ord_ti.tabIndex = 2; _btn = createObject("Button", "login_btn", rtDepth++,{_width:80,_heigh:22,_x:240,_y:80}); _btn.label = "LogIn"; _btn.tabIndex = 3; _btn.addEventListener("click", this); ); raw method is required for v2 components. invoked after the component has been idated by someone calling invalidate(). batch’s up the changes into one redraw, rather doing them all individually. This approach leads re efficiency and better centralization of code. */ draw():Void { .draw();ng Components ize method is invoked when the component's size es. This is an opportunity to resize the children, ize method is required for components extending UIComponent. */ size():Void { .size(); use a redraw in case it is needed. inval } /* Event Calle Since this public f // Up __nam __pas // Di dispa } /* This The [ in th to be and f [Bindabl [ChangeE [Inspect function __nam inval } function retur } [Bindabl [ChangeE [Inspect function __pas inval } function retur } }idate(); Handler: d by the LogIn button when it receives a mouse click. we want this event to be accessible outside of the scope of component, The click event is dispatched using dispatchEvent. */ unction click(evt){ date the member variables with the input field contents. e = name_ti.text; sword = password_ti.text; spatch a click event when the button fires one. tchEvent({type:"click"}); is the getter/setter for the name property. Inspectable] metadata makes the property appear e Property inspector and allows a default value set. By using a getter/setter you can call invalidate orce the component to redraw when the value is changed. */ e] vent("change")] able(defaultValue="")] set name(val:String){ e = val; idate(); get name():String{ n(__name); e] vent("change")] able(defaultValue="")] set password(val:String){ sword=val; idate(); get password():String{ n(__password);Incorporating existing components within your component 179 180 Creati Testing You’ve creat class file tha the compon Ideally, you file. The fas use it in the When you’r information To test the 1. In the L to Comp control- A compi movie cl section t 2. Drag Lo main Ti You can Inspecto before th the defa accordin To test t and add // Crea createT myLogin // Even event functio /* Here N O T E If y tim Exi and exporting the LogIn component ed the Flash file that contains the graphical elements, the base classes and the t contains all the functionality of the LogIn component. Now it’s time to test ent. would test the component as you work, especially while you’re writing the class test way to test as you work is to convert the component to a compiled clip and component’s FLA file. e completely finished creating a component, export it as a SWC file. For more , see “Exporting and distributing a component” on page 182. LogIn component: ogIn.fla file, select the LogIn movie clip in the library and select Convert iled Clip from the Library context menu (Windows: Right-click, Mac: click). led clip is added to the library with the name LogIn SWF. You are compiling the ip to test it, only. Otherwise, you would follow the instructions later in this o export the LogIn movie clip. gIn SWF to the Stage in frame 1 of the main Timeline (make sure you’re in the meline, Scene 1, not the movie clip timeline). set the name and password property in the Parameters tab or the Component r. This is useful if you want default text such as “Enter your name here” to appear e user has entered anything. When you set its name and/or password property, ult text in the name and password InputText sub-components will change gly at runtime. he value property at runtime, name the LogIn instance on the Stage myLogin the following code to Frame 1 in the main Timeline: tes a text field in which to view the login values. extField("myLoginValues",10,10,10,340,40) ou’ve already created a compiled clip (for example, if this is the second or third e you’re testing), a Resolve Library Conflict dialog box appears. Select Replace sting Items to add the new version to the document.ng Components Values.border = true; t handler for the login component instance’s dispatched click . n click(evt){ is where authentication would occur. For e which and/o myLog myLog myLog } myLogin 3. Select C To export 1. In the L Definiti 2. Check th 3. Click O 4. In the L SWC Fi 5. Select a If you sa reload th Compon The com N O T E Sin wa com doc N O T E Fo Flaxample the name and password would be passed to a web service authenticates the name and password and returns a session ID r permission roles attributed to the user. */ inValues.text = "Processing...\r"; inValues.text += "Name: " + myLogin.name + " Password: " + in.password; .addEventListener("click",this); ontrol > Test Movie to test the component in Flash Player. the LogIn component: ogIn.fla file, select the LogIn movie clip in the library and select Component on from the Library context menu (Windows: Right-click, Mac: control-click). e Display in Components panel. K. ogIn.fla file, select the LogIn movie clip in the library, again, and select Export le from the Library context menu (Windows: Right-click, Mac: control-click). location to save the SWC file. ve it to the Components folder in the user-level configuration folder, you can e Components panel without restarting Flash and the component appears in the ents panel. ce you are testing this component within your original document, you may see a rning message about having the same linkage identifier for two symbols. The ponent will still work. In practice, you will use the new component within another ument in which case the linkaged identifier should be unique. r information about folder locations, see “Configuration folders installed with sh” in Getting Started with Flash.Incorporating existing components within your component 181 pleted LogIn component 182 Creati Expo Flash export distributed a www.macro for informat The best wa contain all t SWC files a application SWC files c Dreamweav Whether yo important to problems ca This section Unders A SWC file generated by The followin File catalog.xml ActionScrip (AS) files SWF filesrting and distributing a component s components as component packages (SWC files). Components may be s SWC files or as FLA files. (See the article on Macromedia DevNet at media.com/support/flash/applications/creating_comps/creating_comps12.html ion about distributing a component as a FLA.) y to distribute a component is to export is as a SWC file, because SWC files he ActionScript, SWF files, and other optional files needed to use the component. re also useful if you are working at the same time on a component and the that uses the component. an be used to distribute components for use in Macromedia Flash 8, Macromedia er MX 2004, and Macromedia Director MX 2004. u’re developing a component for someone else’s use, or for your own, it’s test the SWC file as an ongoing part of component development. For example, n arise in a component’s SWC file that don’t appear in the FLA file. describes a SWC file and explains how to import and export SWC files in Flash. tanding SWC files is a zip-like file (packaged and expanded by means of the PKZIP archive format) the Flash authoring tool. g table describes the contents of a SWC file: Description (Required) Lists the contents of the component package and its individual components, and serves as a directory to the other files in the SWC file. t If you create the component with Flash Professional 8, the source code is one or more ActionScript files that contain a class declaration for the component. The compiler uses the source code for type checking when a component is extended. The AS file is not compiled by the authoring tool because the compiled bytecode is already in the implementing SWF file. The source code may contain intrinsic class definitions that contain no function bodies and are provided purely for type checking. (Required) SWF files that implement the components. One or more ng Components components can be defined in a single SWF file. If the component is created with Flash 8, only one component is exported per SWF file. You can opt environmen want users t Macromedia SWC files ar file name to Export Flash provid exporting a application. There are tw ■ To distri ■ To test d Exportin You can exp other option Live Previe SWF files SWD file PNG file Property inspector SWF file Fileionally include other files in the SWC file, after you generate it from the Flash t. For example, you might want to include a Read Me file, or the FLA file if you o have access to the component’s source code. To add additional files, use the Extension Manager (see www.macromedia.com/exchange/em_download/). e expanded into a single directory, therefore each component must have a unique prevent conflicts. ing SWC files es the ability to export SWC files by exporting a movie clip as a SWC file. When SWC file, Flash reports compile-time errors as if you were testing a Flash o reasons to export a SWC file: bute a finished component uring development g a SWC for a completed component w (Optional) If specified, these SWF files are used for live preview in the authoring tool. If omitted, the SWF files that implement the component are used for live preview instead. The Live Preview SWF file can be omitted in nearly all cases; it should be included only if the component’s appearance depends on dynamic data (for example, a text field that shows the result of a web service call). (Optional) A SWD file corresponding to the implementing SWF file that allows you to debug the SWF file. The filename is always the same as that of the SWF file, but with the extension.swd. (Optional) A PNG file containing the 18 x 18, 8-bit-per-pixel icon that you use to display a component icon in the authoring tool user interfaces. If no icon is supplied, a default icon is displayed. (See “Adding an icon” on page 185.) (Optional) A SWF file that you use as a custom Property inspector in the authoring tool. If you omit this file, the default Property inspector is displayed to the user. DescriptionExporting and distributing a component 183 ort components as SWC files that contain all the ActionScript, SWF files, and al files needed to use the component. 184 Creati To export 1. Select th 2. Right-cl 3. Select E 4. Save the Testing At different test it in an level Config restarting Fl To test a S 1. Select th 2. Right-cl 3. Select E 4. Browse t Configu 5. Save the 6. Select R The com 7. Drag the Importi When you d instructions To import 1. Copy th 2. Restart F The com N O T E Fo wita SWC file for a completed component: e component movie clip in the Flash library. ick (Windows) or control-click (Mac) to open the Library context menu. xport SWC File from the Library context menu. SWC file. a SWC during development stages of development, it’s a good idea to export the component as a SWC and application. If you export the SWC to the Components folder in your user- uration folder, you can reload the Components panel without quitting and ash. WC during development: e component movie clip in the Flash library. ick (Windows) or control-click (Mac) to open the Library context menu. xport SWC File from the Library context menu. o the Components folder in your user-level configuration folder. ration/Components SWC file. eload from the Components panel’s options menu. ponent appears in the Component panel. component from the Component panel into a document. ng component SWC files into Flash istribute your components to other developers, you can include the following so that they can install and use them immediately. a SWC file: r information about the location of the folder, see “Configuration folders installed h Flash” in Getting Started with Flash.ng Components e SWC file into the Configuration/Components directory. lash. ponent’s icon should appear in the Components panel. Final After you cr tip. To make developmen Adding You can add authoring en To add an 1. Create a The ima be 8-bit masking 2. Add the class def [IconFi 3. Add the includes Adding Tooltips app Component You define a from the Lib component’ To add a t 1. With th (Window 2. Click th The Lib icon of t 3. Select thsteps in component development eate the component and prepare it for packaging, you can add an icon and a tool sure you completed all the necessary steps, you can also refer to the “Component t checklist” on page 186. an icon an icon that represents your component in the Components panel of the Flash vironment. icon for your component: new image. ge must measure 18 pixels square, and you must save it in PNG format. It must with alpha transparency, and the upper left pixel must be transparent to support . following definition to your component’s ActionScript class file before the inition: le("component_name.png")] image to the same directory as the FLA file. When you export the SWC file, Flash the image at the root level of the archive. a tooltip ear when a user rolls the mouse over your component name or icon in the s panel of the Flash authoring environment. tooltip in the Component Definition dialog box. You can access this dialog box rary options menu (Windows: Right-click, Mac: control-click) of the s FLA file. ooltip in the Component Definition dialog box: e FLA file of your component open in Flash, make sure the Library is visible > Library menu). e Library options menu (Windows: Right-click, Mac: Control-click).Final steps in component development 185 rary options menu is on the right side of the Library title bar, and appears as an hree lines and a down triangle. e Component Definition option. 186 Creati 4. In the C Compon The Too 5. Enter th 6. Click O Compo When you d ■ Keep the ■ Make yo ■ Use the draw bo Reference ■ Use tag- ■ Define t ■ Assume settings when th ■ When d absolute applicati its paren consider the purp ■ Avoid m ■ Always i Super.s ■ Avoid ab ■ Use cre ■ Use inv calling d ■ When in movie sy Configuomponent Definition dialog box, under Options, select Display in the ents Panel. l tip text box becomes editable. e tooltip text for your component in the Tool tip text box. K to save the changes. nent development checklist esign a component, use the following practices: file size as small as possible. ur component as reusable as possible by generalizing functionality. RectBorder class (mx.skins.halo.RectBorder) rather than graphical elements to rders around objects. (See “RectBorder class” in the Components Language .) based skinning. he symbolName, symbolOwner, and className variables. an initial state. Because style properties are now on the object, you can set initial for styles and properties so your initialization code does not have to set them e object is constructed, unless the user overrides the default state. efining the symbol, do not select the Export in First Frame option unless ly necessary. Flash loads the component just before it is used in your Flash on, so if you select this option, Flash preloads the component in the first frame of t. The reason you typically do not preload the component in the first frame is for ations on the web: the component loads before your preloader begins, defeating ose of the preloader. ultiple frame movie clips (except for the two-frame Assets layer). mplement init() and size() methods and call Super.init() and ize() respectively, but otherwise keep them lightweight. solute references, such as _root.myVariable. ateClassObject() instead of attachMovie(). alidate() and invalidateStyle() to invoke the draw() method instead of ng Components raw() explicitly. corporating Flash components into your component, use their uncompiled mbols located in the library of the StandardComponents.fla file from the ration/ComponentFLA folder. CHAPTER 7 Coll When you c values availa property val within the P Component range of req within the c properties ca Collection p an object m through the Specifically, each called a and make it modify colle7 ection Properties reate a new custom component in Macromedia Flash, you can make property ble for editing by the user. These properties are called collection properties. The ues can be edited by the user in the Values dialog box (opened from a text box arameters tab for your component). s usually include functionality for a specific task, while remaining flexible for a uirements by the component user. For a component to be flexible, the properties omponent need to be flexible (in other words, for some components, the n be changed by the component user, as well as by the property values). roperties enable you to create an indeterminate number of editable properties in odel. Flash provides a Collection class to help you manage those properties Component inspector. the Collection class is a helper class used to manage a group of related objects, collection item. If you define a property of your component as a collection item available to users through the Component inspector, they can add, delete, and ction items in the Values dialog box while authoring.187 188 Collec You define c ■ Define a ActionS ■ Define a inspecta In Flash, Co programmat related item In addition manage Col Professional Language Re This chapte Defining a Simple col Defining th Accessing Exporting c Using a co Defin You define a file. For mo To define 1. Create a on page 2. Create a 3. In the A “About 4. Define g N O T E This se compoollections and collection items as follows: collection property using the Collection metadata tag in a component’s cript file. For more information, see “About the Collection tag” on page 157. collection item as a class in a separate ActionScript file that contains its own ble properties. llections make it easier for you to manage groups of related items ically. (In previous versions of Flash, component authors managed groups of s through multiple programmatically synchronized arrays). to the Values dialog box, Flash provides the Collection and Iterator interfaces to lection instances and values programmatically. See “Collection interface (Flash only)” and “Iterator interface (Flash Professional only)” in the Components ference. r contains the following sections: collection property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 lection example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 e class for a collection item . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191 collection information programmatically . . . . . . . . . . . . . . . . . . . . . . . . . . .191 omponents that have collections to SWC files . . . . . . . . . . . . . . . . . . . . 194 mponent that has a collection property . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 ing a collection property collection property by using the Collection tag in a component’s ActionScript re information, see “About the Collection tag” on page 157. a collection property: FLA file for your component. See “Creating a component movie clip” 138. n ActionScript class. See “Creating the ActionScript class file” on page 143. ction assumes that you know how to create components and inspectable nent properties. tion Properties ctionScript class, insert a Collection metadata tag. For more information, see the Collection tag” on page 157. et and set methods for the collection in the component’s ActionScript file. 5. Add the Classes a UtilsCla 6. Code a c See “De Simp The followin contains a co for a compo If you impo fully qualifie import mx. // standar class MySh { // require static v static v var clas // the Col [Colle Discs",c collecti // get and public f { retur } public f { myCom } // priva private N O T E Be Fla Ac utilities classes to your FLA file by selecting Window > Common Libraries > nd dragging UtilsClasses into the component’s library. sses contains the mx.utils.* package for the Collection interface. lass that contains the collection item properties. fining the class for a collection item” on page 191. le collection example g is a simple example of a component class file called MyShelf.as. This example llection property along with a minimal set of imports, methods, and declarations nent that inherits from the UIObject class. rt mx.utils.* in this example, the class names from mx.utils no longer need to be d. For instance, mx.utils.Collection can be written as Collection. utils.*; d class declaration elf extends mx.core.UIObject d variables for all classes ar symbolName:String = "MyShelf"; ar symbolOwner:Object = Object(MyShelf); sName:String = "MyShelf"; lection metadata tag and attributes ction(variable="myCompactDiscs",name="My Compact ollectionClass="mx.utils.CollectionImpl", onItem="CompactDisc", identifier="Title")] set methods for the collection unction get MyCompactDiscs():mx.utils.Collection n myCompactDiscs; unction set MyCompactDiscs(myCDs:mx.utils.Collection):Void cause UtilsClasses is associated with the FLA file, not the ActionScript class, sh throws compiler errors when you check syntax while viewing the component’s tionScript class.Simple collection example 189 pactDiscs = myCDs; te class member var myCompactDiscs:mx.utils.Collection; 190 Collec // You mus // to forc // within private // You mus // to forc // within private // requi function super } function super } } To create 1. In Flash 2. Select In name M 3. Deselect 4. Select th Library 5. Select W MyShelf 6. In the M it Action 7. Place a s 8. Select Fr 9. Open St an instan You mus above cl 10. In Fram This can to use fo 11. Select tht code a reference to the collection item class e the compiler to include it as a dependency the SWC var collItem:CompactDisc; t code a reference to the mx.utils.CollectionImpl class e the compiler to include it as a dependency the SWC var coll:mx.utils.CollectionImpl; red methods for all classes init(Void):Void { .init(); size(Void):Void { .size(); a FLA file to accompany this class for testing purposes: , select File > New and create a Flash document. sert > New Symbol. Give it the name, linkage identifier, and AS 2.0 class yShelf. Export in First Frame and click OK. e MyShelf symbol in the library and choose Component Definition from the options menu. Enter the ActionScript 2.0 class name MyShelf. indow > Common Libraries > Classes, and drag UtilClasses to the library of .fla. yShelf symbol’s Timeline, name one layer Assets. Create another layer and name s. top() function on Frame 1 in the Actions layer. ame 2 in the Assets layer and select Insert > Timeline > Keyframe. andardComponents.fla from the Configuration/ComponentFLA folder, and drag ce of UIObject to the Stage of MyShelf in Frame 2 of the Assets layer. t include UIObject in the component’s FLA file because, as you can see in the ass file, MyShelf extends UIObject. tion Properties e 1 of the Assets layer, draw a shelf. be a simple rectangle; it’s just a visual representation of the MyShelf component r learning purposes. e MyShelf movie clip in the library, and select Convert to Compiled Clip. This allo library) compon compon Defin You code th as follows: ■ Define t ■ Define a ■ Define a The followin class Comp [Inspec var tit [Inspec var art } To view the Acce progr Flash provid interfaces. T The Iterator There are tw ■ “Accessin ■ “Accessin Advanced d programmat in the Comp N O T E Yo comws you to drag the MyShelf SWF file (the compiled clip that’s added to the into the MyShelf.fla file to test the component. Whenever you recompile the ent, a Resolve Library Conflict dialog box appears, because an older version of the ent already exists in the library. Choose to replace existing items. ing the class for a collection item e properties for a collection item in a separate ActionScript class, which you define he class such that it does not extend UIObject or UIComponent. ll properties using the Inspectable tag. ll properties as variables. Do not use get and set (getter/setter) methods. g is a simple example of a collection item class file called CompactDisc.as. actDisc{ table(type="String", defaultValue="Title")] le:String; table(type="String", defaultValue="Artist")] ist:String; CompactDisc.as class file, see “Simple collection example” on page 189. ssing collection information ammatically es programmatic access to collection data through the Collection and Iterator he Collection interface lets you add, modify, and remove items in a collection. interface allows you to loop through the items in a collection. o scenarios in which to use the Collection and Iterator interfaces: g collection information in a component class (AS) file” on page 192 u should have already created the CompactDisc class; otherwise, you’ll get piler errors when converting to a compiled clip.Accessing collection information programmatically 191 g collection items at runtime in a Flash application” on page 193 evelopers can also create, populate, access, and delete collections ically; for more information, see “Collection interface (Flash Professional only)” onents Language Reference. 192 Collec Access class (A In a compon during auth To access co following ap ■ The Col mx.utils [Collec colle ident public ■ Access th Collect var itr ■ Use the Iterato collectio while ( var b ... } ■ Access c example item.la if (but item. } else { item. }ing collection information in a component S) file ent’s class file, you can write code that interacts with collection items defined oring or at runtime. llection item information in a component class file, you can use any of the proaches. lection tag includes a variable attribute, for which you specify a variable of type .Collection. Use this variable to access the collection, as shown in this example: tion(name="LinkButtons", variable="__linkButtons", ctionClass="mx.utils.CollectionImpl", collectionItem="ButtonC", ifier="ButtonLabel")] var __linkButtons:mx.utils.Collection; e Iterator interface for the collection items by calling the ion.getIterator() method, as shown in this example: :mx.utils.Iterator = __linkButtons.getIterator(); Iterator interface to step through the items in the collection. The r.next() method returns an Object, so you must define the type of your n item, as shown in this example: itr.hasNext()) { utton:ButtonC = ButtonC(itr.next()); ollection item properties, as appropriate for your application, as shown in this : bel = button.ButtonLabel; ton.ButtonLink != undefined) { data = button.ButtonLink; enabled = false;tion Properties Access Flash a If a Flash ap collection pr the Values d To access 1. Open th See “Sim This exa 2. Open th This exa 3. Select th Click th right of 4. Use the 5. With th code (wh onClipE impor impor var m myCol var i while va va va tr } } To acces iterator compone 6. Select C Output ing collection items at runtime in a pplication plication uses a component that has a collection property, you can access the operty at runtime. This example adds several items to a collection property using ialog box and displays them at runtime using the Collection and Iterator APIs. collection items at runtime: e MyShelf.fla file that you created earlier. ple collection example” on page 189. mple builds on the MyShelf component and CompactDisc collection. e Library panel, drag the component onto the Stage, and give it an instance name. mple uses the instance name myShelf. e component, open the Component inspector, and display the Parameters tab. e line that contains the collection property, and click the magnifying glass to the the line. Flash displays the Values dialog box. Values dialog box to enter values into the collection property. e component selected on the Stage, open the Actions panel and enter the following ich must be attached to the component): vent (mouseDown) { t mx.utils.Collection; t mx.utils.Iterator; yColl:mx.utils.Collection; l = _parent.myShelf.MyCompactDiscs; tr:mx.utils.Iterator = myColl.getIterator(); (itr.hasNext()) { r cd:CompactDisc = CompactDisc(itr.next()); r title:String = cd.Title; r artist:String = cd.Artist; ace("Title: " + title + " Artist: " + artist); s a collection, use the syntax componentName.collectionVariable; to access an and step through the collection items, use ntName.collectionVariable.getIterator().Accessing collection information programmatically 193 ontrol > Test Movie and click the shelf to see the collection data in the panel. 194 Collec Expo collec When you d following de ■ Collectio ■ Collectio ■ Collectio ■ Iterator Of these file them as dep output SWF However, th specific colle To include t you define p example sho // collect private va // collect private va For more in Using prope When you u dialog box t To use a c 1. Add the 2. Use the 3. Open th 4. Click th right of Flash disrting components that have tions to SWC files istribute a component that has a collection, the SWC file must contain the pendent files: n interface n implementation class n item class interface s, your code typically uses the Collection and Iterator interfaces, which marks endent classes. Flash automatically includes dependent files in the SWC file and file. e collection implementation class (mx.utils.CollectionImpl) and component- ction item class are not automatically included in the SWC file. he collection implementation class and collection item class in the SWC file, rivate variables in your component’s ActionScript file, as the following ws: ion item class r collItem:CompactDisc; ion implementation class r coll:mx.utils.CollectionImpl; formation on SWC files, see “Understanding SWC files” on page 182. a component that has a collection rty se a component that includes a collection property, you typically use the Values o establish the items in the collection. omponent that includes a collection property: component to the Stage.tion Properties Property inspector to name the component instance. e Component inspector and display the Parameters tab. e line that contains the collection property, and click the magnifying glass to the the line. plays the Values dialog box. 5. Click th 6. Click th collectio 7. Click O For informa runtime in ae Add (+) button and define a collection item. e Add (+), Delete (-), and arrow buttons to add, modify, move, and delete n items. K. tion on accessing a collection programmatically, see “Accessing collection items at Flash application” on page 193.Using a component that has a collection property 195 196 Collection Properties Inde Numer 9-slice not su A accessibility 2 ActionScript audience for B best practices Binding tab, bitmap cachin broadcaster 6 C class file about 144 example 1 class keyword 146 class style sheets 82 classes and comp creating re creating. S defining 1 extending importing selecting a UICompo UIObject className va code hints, tr collection item defining 159 inspectable 151 setting 55 viewing 55onent inheritance 18 ferences to (tutorial) 25 ee creating components 46 See also individual component names components 143 ActionScript class 143x ics pported 19 0 class files 143 this document 8 for component development 186 in sample application (tutorial) 30 g not supported 19 4 43, 189 collection properties accessing programmatically 191 defining 188 defining classes 191 example 189 exporting components 194 using 194 Collection tag 157 colors customizing 82 setting style properties 92 columns adding (tutorial) 31 compiled clips about 19 in Library panel 54 component class file. See class file Component inspector Binding tab 30 setting parameters 55 component parameters about 55197 137 146 parent class 136 nent 137 137 riable 147 iggering 58 191 adding an icon 185 adding at runtime 52 adding to Flash documents 50 adding tooltips 185 architecture 17 assigning skins 168 available in Flash MX editions 12 categories, described 16 198 Index class file ex class overv className common e creating m creating su defining d defining in defining p defining si defining v deleting 5 developme dispatchin editing mo events 63 example o example o exporting exporting exporting extending Flash Play getter/sett importing inheritanc installing invalidatio loading 6 metadata t metadata, preloading previewing registering selecting a selecting s source file structure o styles 169 symbolOw testing SW using in an See also ind Components ComponentT JavaScript createClassO CSSStyleDec customizing text 82 customizing cample 143 iew 144 variable 147 vents 167 ovie clips 138 bobjects 162 raw() method 165 it() method 162 arameters 159 ze() method 165 ariables 148 7 nt checklist 186 g events 166 vie clips 139 f building a component 127, 173 f class file with collection 189 and distributing 182 component as SWC 183 SWC files 183 classes 137 er support 17 er methods 148 SWC files 184 e 18 12 n, about 166 2 ags 149 ComponentTask tag 158 60 60 skins to styles 169 parent class 136 ymbol names 147 s 125 f 126 ner variable 147 C files 184 application (tutorial) 21 ividual component names panel 50 ask tag (JSFL) 158 bject() method 162 D data binding, with XML file (tutorial) 29 data grids. See DataGrid component data types, setting for instances (tutorial) 27 DataGrid component adding columns (tutorial) 31 binding to DataSet (tutorial) 29 DataSet component, binding to XMLConnector and DataGrid (tutorial) 29 defaultPushButton property 59 Delegate class (tutorial) 73 deleting components 57 DepthManager class, overview 59 Dial component 127, 173 dispatcher (event broadcaster) 64 dispatching events 166 documentation guide to terminology 9 overview 8 draw() method, defining 165 E event listeners. See listeners Event metadata tag 153 events about 63 common 167 delegating scope 73 dispatching 166 event object 77 handler functions 63 metadata 153 See also individual component names exporting components 182 extending classes 137 F Flash JavaScript (JSFL), ComponentTask tag 158 Flash MX editions and available components 12 Flash Player and components 17 support 62 FlashType not supported 19 FocusManager class, creating focus navigation for 58laration 86, 87 olor and text, using style sheets 82 G getter/setter m global style d grids. See Dat H Halo theme handleEvent handler funct I icon, for a co import statem inheritance, i init() method inspectable p installing com instances setting sty style decla invalidate() m L Label compo tutorial 4 library compiled Library pa StandardC linkage identi listeners about 64 functions objects 65 scope 71 using with using with Live Preview loading, comethods 148 eclarations 86 aGrid component 108 callback function 68 ions 63 mponent 185 ent 146 n version 2 components 18 , defining 162 arameters 151 ponents 12 les on 84 rations 82 ethod 166 nent 0 clips in 54 nel 54 omponents 139 fiers for skins 96 69 component instances (tutorial) 37 components (tutorial) 32 feature 60 ponents 62 M metadata about 149 Collection tag 157 ComponentTask tag 158 Event tag 153 Inspectable tag 151 tags, list of 150 movie clips creating 138 defining as component 141 MovieClip class, extending 138 O on() event handler 78 P packages 18 parameters. See component parameters parent class, selecting 136 preloading components 60 previewing components 60 Property inspector 55 prototype 106 R resources, additional Macromedia 9 S Sample theme 108 screen readers, accessibility 20 ScrollPane component tutorial 40 size() method, defining 165 skin properties changing in the prototype 106 setting 96 skinning components 96 skins applying to components 101 applying to subcomponents 103Index 199 creating variables for 168 editing 99 linkage identifiers 96 See also individual component names 200 Index StandardCom style declarati custom 8 default cla global 86 setting cla style properti style sheets class 82 custom 8 styles about 82 creating co determinin setting 82 setting cus setting glo setting on using (tuto See also ind subclasses, us subcomponen subobjects, cr superclass key SWC files about 19 and comp exporting exporting file format importing testing 18 symbolName symbolOwne system requir T tabbing 58 tags. See meta terminology i testing SWC text, customi TextInput com themes about 108 applying creating 1 tip text, addin typographicalponents library 139 ons 7 ss 89 ss 89 es, color 92 2 mponents 169 g precedence 92 tom 87 bal 86 instance 84 rial) 27 ividual component names ing to replace skins 106 ts, applying skins 103 eating 162 word 146 iled clips 19 183 collection properties 194 182 184 4 variable 147 r variable 147 ements for components 8 data n documentation 9 files 184 zing 82 ponent (tutorial) 40 U UIComponent class and component inheritance 18 overview 137 UIObject class about 137 upgrading version 1 components 62 V Values dialog box 187 variables, defining 148 version 1 components, upgrading 62 version 2 components and Flash Player 17 benefits 16 inheritance 18 W web service, connecting to (tutorial) 28 WebService class (tutorial) 28 X XMLConnector component binding to DataSet component (tutorial) 29 loading an external XML file (tutorial) 31 specifying schema (tutorial) 29113 11 g 185 conventions 9