ACTIONSCRIPT 2.

0 COMPONENTS LANGUAGE REFERENCE

© 2007 Adobe Systems Incorporated. All rights reserved. ActionScript™ 2.0 Components Language Reference If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement. The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide. Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner. Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual organization.
Adobe®, Flash®, FlashHelp®, Flash® Player, JRun™, Macromedia® and Shockwave® are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Macintosh® is a trademark of Apple Computer, Inc., registered in the United States and other countries. Windows® is either a registered trademark or a trademark of Microsoft Corporation in the United States and/or other countries. All other trademarks are the property of their respective owners. Portions of this product contain code licensed from Nellymoser. (www.nellymoser.com). Sorenson Spark™ video compression and decompression technology licensed from Sorenson Media, Inc.

Flash CS3 video is powered by On2 TrueMotion video technology. © 1992-2005 On2 Technologies, Inc. All Rights Reserved. http://www.on2.com. Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA. Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

Contents

Chapter 1: ActionScript 2.0 Components . . . . . . . . . . . . . . . . . . 29 Other listings in this book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 : Accordion component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Using the Accordion component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Customizing the Accordion component . . . . . . . . . . . . . . . . . . . . . . . . . 39 Accordion class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Accordion.change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Accordion.createChild() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Accordion.createSegment() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Accordion.destroyChildAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Accordion.getChildAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Accordion.getHeaderAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57 Accordion.numChildren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Accordion.selectedChild. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Accordion.selectedIndex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Chapter 3: Alert component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63 Using the Alert component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Customizing the Alert component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Alert class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Alert.buttonHeight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74 Alert.buttonWidth. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74 Alert.CANCEL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75 Alert.cancelLabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76 Alert.click . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Alert.NO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78 Alert.noLabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79 Alert.NONMODAL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Alert.OK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Alert.okLabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Alert.show() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Alert.YES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Alert.yesLabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

3

Chapter 4: Button component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Using the Button component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Customizing the Button component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Button class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Button.icon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Button.label. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Button.labelPlacement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Chapter 5: CellRenderer API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Understanding the List class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Using the CellRenderer API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 CellRenderer.getCellIndex() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116 CellRenderer.getDataLabel() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 CellRenderer.getPreferredHeight() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 CellRenderer.getPreferredWidth() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119 CellRenderer.listOwner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 CellRenderer.owner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121 CellRenderer.setSize() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121 CellRenderer.setValue(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Chapter 6: CheckBox component . . . . . . . . . . . . . . . . . . . . . . . . 127 Using the CheckBox component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Customizing the CheckBox component. . . . . . . . . . . . . . . . . . . . . . . . . 130 CheckBox class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 CheckBox.click . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 CheckBox.label . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 CheckBox.labelPlacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141 CheckBox.selected . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Chapter 7: Collection interface . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Collection class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Collection.addItem() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Collection.contains() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Collection.clear() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Collection.getItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Collection.getIterator() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Collection.getLength() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151 Collection.isEmpty() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151 Collection.removeItem(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

4

Contents

Chapter 8: ComboBox component . . . . . . . . . . . . . . . . . . . . . . . . 155 Using the ComboBox component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Customizing the ComboBox component . . . . . . . . . . . . . . . . . . . . . . . .160 ComboBox class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164 ComboBox.addItem() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169 ComboBox.addItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 ComboBox.change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 ComboBox.close() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 ComboBox.close . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 ComboBox.dataProvider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 ComboBox.dropdown. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 ComboBox.dropdownWidth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 ComboBox.editable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 ComboBox.enter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .180 ComboBox.getItemAt(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 ComboBox.itemRollOut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 ComboBox.itemRollOver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184 ComboBox.labelField . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185 ComboBox.labelFunction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 ComboBox.length . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 ComboBox.open() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 ComboBox.open . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 ComboBox.removeAll() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .190 ComboBox.removeItemAt(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 ComboBox.replaceItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .192 ComboBox.restrict . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193 ComboBox.rowCount . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195 ComboBox.scroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196 ComboBox.selectedIndex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198 ComboBox.selectedItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199 ComboBox.sortItems() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 ComboBox.sortItemsBy(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .201 ComboBox.text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 ComboBox.textField . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 ComboBox.value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Chapter 9: Data binding classes . . . . . . . . . . . . . . . . . . . . . . . . . 207 Making data binding classes available at runtime . . . . . . . . . . . . . . . . 207 Classes in the mx.data.binding package . . . . . . . . . . . . . . . . . . . . . . . . 208 Binding class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Constructor for the Binding class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Contents

5

Binding.execute() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211 CustomFormatter class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 CustomFormatter.format() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 CustomFormatter.unformat() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 CustomValidator class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 CustomValidator.validate() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 CustomValidator.validationError() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 EndPoint class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Constructor for the EndPoint class . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222 EndPoint.component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223 EndPoint.constant. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223 EndPoint.event. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .224 EndPoint.location . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .225 EndPoint.property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226 ComponentMixins class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 ComponentMixins.getField() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .228 ComponentMixins.initComponent() . . . . . . . . . . . . . . . . . . . . . . . . . . . .229 ComponentMixins.refreshDestinations() . . . . . . . . . . . . . . . . . . . . . . . 230 ComponentMixins.refreshFromSources() . . . . . . . . . . . . . . . . . . . . . . 230 ComponentMixins.validateProperty() . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 DataType class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233 DataType.encoder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .235 DataType.formatter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .236 DataType.getAnyTypedValue() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .236 DataType.getAsBoolean(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238 DataType.getAsNumber() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238 DataType.getAsString() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239 DataType.getTypedValue() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 DataType.kind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 DataType.setAnyTypedValue() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 DataType.setAsBoolean(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243 DataType.setAsNumber() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243 DataType.setAsString() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 DataType.setTypedValue() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 TypedValue class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246 Constructor for the TypedValue class. . . . . . . . . . . . . . . . . . . . . . . . . . .246 TypedValue.type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 TypedValue.typeName. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 TypedValue.value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248

6

Contents

Chapter 10: DataGrid component . . . . . . . . . . . . . . . . . . . . . . . . 249 Interacting with the DataGrid component . . . . . . . . . . . . . . . . . . . . . . . 250 Using the DataGrid component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .251 DataGrid performance strategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Customizing the DataGrid component . . . . . . . . . . . . . . . . . . . . . . . . . 259 DataGrid class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 DataGrid.addColumn() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 DataGrid.addColumnAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 DataGrid.addItem() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 DataGrid.addItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 DataGrid.cellEdit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 DataGrid.cellFocusIn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 DataGrid.cellFocusOut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 DataGrid.cellPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 DataGrid.change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 DataGrid.columnCount . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 DataGrid.columnNames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 DataGrid.columnStretch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 DataGrid.dataProvider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 DataGrid.editable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 DataGrid.editField() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 DataGrid.focusedCell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 DataGrid.getColumnAt(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 DataGrid.getColumnIndex() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 DataGrid.headerHeight. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 DataGrid.headerRelease . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 DataGrid.hScrollPolicy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .291 DataGrid.removeAllColumns() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 DataGrid.removeColumnAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 DataGrid.replaceItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 DataGrid.resizableColumns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 DataGrid.selectable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 DataGrid.showHeaders. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 DataGrid.sortableColumns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 DataGrid.spaceColumnsEqually() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 DataGridColumn class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301 Constructor for the DataGridColumn class. . . . . . . . . . . . . . . . . . . . . . 303 DataGridColumn.cellRenderer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 DataGridColumn.columnName . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 DataGridColumn.editable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305 DataGridColumn.headerRenderer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 DataGridColumn.headerText. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 DataGridColumn.labelFunction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308

Contents

7

DataGridColumn.resizable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 DataGridColumn.sortable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 DataGridColumn.sortOnHeaderRelease . . . . . . . . . . . . . . . . . . . . . . . . .311 DataGridColumn.width. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 Chapter 11: DataHolder component . . . . . . . . . . . . . . . . . . . . . . . 313 Creating an application with the DataHolder component. . . . . . . . . . 314 DataHolder class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 DataHolder.data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 Chapter 12: DataProvider API . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 DataProvider.addItem() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 DataProvider.addItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 DataProvider.editField(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 DataProvider.getEditingData(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 DataProvider.getItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .322 DataProvider.getItemID() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .322 DataProvider.length . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323 DataProvider.modelChanged . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323 DataProvider.removeAll() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325 DataProvider.removeItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326 DataProvider.replaceItemAt(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326 DataProvider.sortItems() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327 DataProvider.sortItemsBy() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .328 Chapter 13: DateChooser component . . . . . . . . . . . . . . . . . . . . . 331 Using the DateChooser component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 Customizing the DateChooser component . . . . . . . . . . . . . . . . . . . . . .334 DateChooser class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 DateChooser.change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341 DateChooser.dayNames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .343 DateChooser.disabledDays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .343 DateChooser.disabledRanges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 DateChooser.displayedMonth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .345 DateChooser.displayedYear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .345 DateChooser.firstDayOfWeek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .346 DateChooser.monthNames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347 DateChooser.scroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .347 DateChooser.selectableRange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 DateChooser.selectedDate. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 DateChooser.showToday . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351

8

Contents

Chapter 14: DataSet component. . . . . . . . . . . . . . . . . . . . . . . . . 353 Using the DataSet component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354 DataSet class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357 DataSet.addItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 DataSet.addItem() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362 DataSet.addItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364 DataSet.addSort() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365 DataSet.afterLoaded. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368 DataSet.applyUpdates() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369 DataSet.calcFields. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370 DataSet.changesPending() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371 DataSet.clear() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372 DataSet.createItem() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 DataSet.currentItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374 DataSet.dataProvider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 DataSet.deltaPacket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376 DataSet.deltaPacketChanged . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377 DataSet.disableEvents(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377 DataSet.enableEvents() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379 DataSet.filtered. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380 DataSet.filterFunc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382 DataSet.find() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 DataSet.findFirst() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 DataSet.findLast() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388 DataSet.first() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 DataSet.getItemId() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .391 DataSet.getIterator() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392 DataSet.getLength() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394 DataSet.hasNext() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394 DataSet.hasPrevious() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 DataSet.hasSort() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396 DataSet.isEmpty() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 DataSet.items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 DataSet.itemClassName . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 DataSet.iteratorScrolled. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 DataSet.last() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .401 DataSet.length . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 DataSet.loadFromSharedObj(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 DataSet.locateById(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404 DataSet.logChanges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 DataSet.modelChanged . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 DataSet.newItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408

Contents

9

DataSet.next() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 DataSet.previous() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411 DataSet.properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412 DataSet.readOnly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412 DataSet.removeAll() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 DataSet.removeItem. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 DataSet.removeItem() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 DataSet.removeItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 DataSet.removeRange() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 DataSet.removeSort() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 DataSet.resolveDelta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 DataSet.saveToSharedObj() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .422 DataSet.schema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .423 DataSet.selectedIndex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 DataSet.setIterator() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 DataSet.setRange() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 DataSet.skip() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .426 DataSet.useSort() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 Chapter 15: DateField component . . . . . . . . . . . . . . . . . . . . . . . 429 Using the DateField component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 Customizing the DateField component . . . . . . . . . . . . . . . . . . . . . . . . .432 DateField class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .435 DateField.change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440 DateField.close() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441 DateField.close . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442 DateField.dateFormatter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444 DateField.dayNames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444 DateField.disabledDays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445 DateField.disabledRanges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445 DateField.displayedMonth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446 DateField.displayedYear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .447 DateField.firstDayOfWeek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .448 DateField.monthNames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .448 DateField.open() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 DateField.open. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450 DateField.pullDown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451 DateField.scroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 DateField.selectableRange. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454 DateField.selectedDate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455 DateField.showToday . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .456

10

Contents

Chapter 16: Delegate class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457 Delegate.create() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458 Chapter 17: DeltaItem class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 DeltaItem.argList . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460 DeltaItem.curValue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460 DeltaItem.delta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .461 DeltaItem.kind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .461 DeltaItem.message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462 DeltaItem.name. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462 DeltaItem.newValue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463 DeltaItem.oldValue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463 Chapter 18: Delta interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 Delta.addDeltaItem() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466 Delta.getChangeList() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 Delta.getDeltaPacket() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 Delta.getId() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469 Delta.getItemByName() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470 Delta.getMessage() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471 Delta.getOperation() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472 Delta.getSource(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Chapter 19: DeltaPacket interface . . . . . . . . . . . . . . . . . . . . . . . 475 DeltaPacket.getConfigInfo() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476 DeltaPacket.getIterator() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477 DeltaPacket.getSource() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478 DeltaPacket.getTimestamp(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479 DeltaPacket.getTransactionId() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480 DeltaPacket.logChanges() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .481 Chapter 20: DepthManager class. . . . . . . . . . . . . . . . . . . . . . . . 483 DepthManager.createChildAtDepth() . . . . . . . . . . . . . . . . . . . . . . . . . . 485 DepthManager.createClassChildAtDepth() . . . . . . . . . . . . . . . . . . . . . 486 DepthManager.createClassObjectAtDepth() . . . . . . . . . . . . . . . . . . . 487 DepthManager.createObjectAtDepth() . . . . . . . . . . . . . . . . . . . . . . . . 488 DepthManager.kBottom. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489 DepthManager.kCursor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489 DepthManager.kNotopmost . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490 DepthManager.kTooltip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490 DepthManager.kTop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .491

Contents

11

DepthManager.kTopmost . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491 DepthManager.setDepthAbove() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492 DepthManager.setDepthBelow() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492 DepthManager.setDepthTo() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493 Chapter 21: EventDispatcher class. . . . . . . . . . . . . . . . . . . . . . . 495 Event objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . EventDispatcher class (API) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . EventDispatcher.addEventListener() . . . . . . . . . . . . . . . . . . . . . . . . . . EventDispatcher.dispatchEvent() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . EventDispatcher.removeEventListener(). . . . . . . . . . . . . . . . . . . . . . . 495 496 496 498 499

Chapter 22: FLVPlayback Component . . . . . . . . . . . . . . . . . . . . 501 Using the FLVPlayback component . . . . . . . . . . . . . . . . . . . . . . . . . . . 503 Using cue points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510 Playing multiple FLV files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517 Streaming FLV files from a FMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519 Customizing the FLVPlayback component . . . . . . . . . . . . . . . . . . . . . 520 FLVPlayback class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .535 VideoError class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694 VideoPlayer class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .702 Using a SMIL file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707 Chapter 23: FocusManager class . . . . . . . . . . . . . . . . . . . . . . . . 717 Using Focus Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 718 Customizing Focus Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 721 FocusManager class (API) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 721 FocusManager.defaultPushButton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725 FocusManager.defaultPushButtonEnabled . . . . . . . . . . . . . . . . . . . . . 726 FocusManager.enabled . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 726 FocusManager.getFocus() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727 FocusManager.nextTabIndex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 728 FocusManager.sendDefaultPushButtonEvent() . . . . . . . . . . . . . . . . . 728 FocusManager.setFocus() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .730 Chapter 24: Form class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731 Using the Form class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 732 Form class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 733 Form.currentFocusedForm. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .739 Form.getChildForm() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739 Form.indexInParentForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .740

12

Contents

Form.numChildForms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741 Form.parentIsForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 742 Form.parentForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 742 Form.rootForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743 Form.visible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 744 Chapter 25: Iterator interface . . . . . . . . . . . . . . . . . . . . . . . . . . . 745 Iterator.hasNext() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745 Iterator.next() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 746 Chapter 26: Label component . . . . . . . . . . . . . . . . . . . . . . . . . . 749 Using the Label component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749 Customizing the Label component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 751 Label class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 753 Label.autoSize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 756 Label.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757 Label.text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 758 Chapter 27: List component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 759 Using the List component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 760 Customizing the List component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 764 List class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 768 List.addItem() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 774 List.addItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775 List.cellRenderer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 776 List.change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 776 List.dataProvider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 778 List.getItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 779 List.hPosition. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 780 List.hScrollPolicy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 781 List.iconField . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 782 List.iconFunction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 783 List.itemRollOut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 784 List.itemRollOver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 786 List.labelField . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787 List.labelFunction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 788 List.length. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789 List.maxHPosition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 790 List.multipleSelection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 791 List.removeAll(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 792 List.removeItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 793

Contents

13

List.replaceItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .794 List.rowCount . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .795 List.rowHeight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 796 List.scroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 797 List.selectable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .799 List.selectedIndex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .799 List.selectedIndices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 800 List.selectedItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 801 List.selectedItems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 802 List.setPropertiesAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 803 List.sortItems() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 804 List.sortItemsBy() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 805 List.vPosition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .807 List.vScrollPolicy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .808 Chapter 28: Loader component . . . . . . . . . . . . . . . . . . . . . . . . . . 811 Using the Loader component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 811 Customizing the Loader component. . . . . . . . . . . . . . . . . . . . . . . . . . . . 814 Loader class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 815 Loader.autoLoad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 819 Loader.bytesLoaded . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 819 Loader.bytesTotal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 820 Loader.complete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 821 Loader.content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .823 Loader.contentPath . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .824 Loader.load() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .825 Loader.percentLoaded . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .826 Loader.progress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 827 Loader.scaleContent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .829 Chapter 29: Media components . . . . . . . . . . . . . . . . . . . . . . . . . . 831 Interacting with media components . . . . . . . . . . . . . . . . . . . . . . . . . . . .832 Understanding media components . . . . . . . . . . . . . . . . . . . . . . . . . . . . .833 Using media components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .836 Media component parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .843 Creating applications with media components . . . . . . . . . . . . . . . . . . .846 Customizing media components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 847 Media class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 847 Media.activePlayControl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 851 Media.addCuePoint() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .852 Media.aspectRatio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .853

14

Contents

Media.associateController(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 853 Media.associateDisplay() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 854 Media.autoPlay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 855 Media.autoSize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 856 Media.backgroundStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 857 Media.bytesLoaded . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 858 Media.bytesTotal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 859 Media.change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 859 Media.click . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 861 Media.complete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 862 Media.contentPath. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 863 Media.controllerPolicy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 864 Media.controlPlacement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 865 Media.cuePoint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 865 Media.cuePoints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 866 Media.displayFull() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 867 Media.displayNormal() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 868 Media.getCuePoint() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 869 Media.horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 870 Media.mediaType. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 870 Media.pause() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 871 Media.play() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 872 Media.playheadChange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 873 Media.playheadTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 874 Media.playing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 874 Media.preferredHeight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 875 Media.preferredWidth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 876 Media.progress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 877 Media.scrubbing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 878 Media.removeAllCuePoints(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 879 Media.removeCuePoint() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 880 Media.setMedia() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 881 Media.stop(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 882 Media.totalTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 882 Media.volume . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 883 Media.volume . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 884 Chapter 30: Menu component . . . . . . . . . . . . . . . . . . . . . . . . . . 885 Interacting with the Menu component . . . . . . . . . . . . . . . . . . . . . . . . . . 886 Using the Menu component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 887 About menu item types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 890 About initialization object properties . . . . . . . . . . . . . . . . . . . . . . . . . . . 893

Contents

15

Menu parameters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 894 Creating an application with the Menu component . . . . . . . . . . . . . . 894 Customizing the Menu component . . . . . . . . . . . . . . . . . . . . . . . . . . . . .898 Menu class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 903 Menu.addMenuItem() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .907 Menu.addMenuItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 908 Menu.change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 910 Menu.createMenu(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 912 Menu.dataProvider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 913 Menu.getMenuItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 914 Menu.hide(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 915 Menu.indexOf() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 917 Menu.menuHide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 918 Menu.menuShow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 921 Menu.removeAll() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .923 Menu.removeMenuItem() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 924 Menu.removeMenuItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .926 Menu.rollOut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .927 Menu.rollOver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 929 Menu.setMenuItemEnabled() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 931 Menu.setMenuItemSelected() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .932 Menu.show() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 934 MenuDataProvider class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 935 MenuDataProvider.addMenuItem() . . . . . . . . . . . . . . . . . . . . . . . . . . . .936 MenuDataProvider.addMenuItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . .938 MenuDataProvider.getMenuItemAt() . . . . . . . . . . . . . . . . . . . . . . . . . . 940 MenuDataProvider.indexOf() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 941 MenuDataProvider.removeMenuItem() . . . . . . . . . . . . . . . . . . . . . . . . 943 MenuDataProvider.removeMenuItemAt() . . . . . . . . . . . . . . . . . . . . . . 945 Chapter 31: MenuBar component. . . . . . . . . . . . . . . . . . . . . . . . 947 Interacting with the MenuBar component . . . . . . . . . . . . . . . . . . . . . . 948 Using the MenuBar component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 948 Customizing the MenuBar component. . . . . . . . . . . . . . . . . . . . . . . . . . 951 MenuBar class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 953 MenuBar.addMenu() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .957 MenuBar.addMenuAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 959 MenuBar.dataProvider. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 961 MenuBar.getMenuAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .962 MenuBar.getMenuEnabledAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .963 MenuBar.labelField. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 964 MenuBar.labelFunction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 965

16

Contents

MenuBar.removeAll() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 966 MenuBar.removeMenuAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 967 MenuBar.setMenuEnabledAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 968 Chapter 32: NumericStepper component . . . . . . . . . . . . . . . . . 971 Using the NumericStepper component. . . . . . . . . . . . . . . . . . . . . . . . . 972 Customizing the NumericStepper component . . . . . . . . . . . . . . . . . . 974 NumericStepper class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 978 NumericStepper.change. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 982 NumericStepper.maximum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 983 NumericStepper.minimum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 984 NumericStepper.nextValue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 985 NumericStepper.previousValue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 986 NumericStepper.stepSize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 987 NumericStepper.value. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 988 Chapter 33: PopUpManager class . . . . . . . . . . . . . . . . . . . . . . . 989 PopUpManager.createPopUp() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 990 PopUpManager.deletePopUp() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .991 Chapter 34: ProgressBar component . . . . . . . . . . . . . . . . . . . . 993 Using the ProgressBar component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 993 Customizing the ProgressBar component . . . . . . . . . . . . . . . . . . . . . . 998 ProgressBar class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1001 ProgressBar.complete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1005 ProgressBar.conversion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1007 ProgressBar.direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1008 ProgressBar.indeterminate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1009 ProgressBar.label. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1010 ProgressBar.labelPlacement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1011 ProgressBar.maximum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1012 ProgressBar.minimum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1014 ProgressBar.mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1015 ProgressBar.percentComplete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1017 ProgressBar.progress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1018 ProgressBar.setProgress() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1020 ProgressBar.source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1022 ProgressBar.value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1023 Chapter 35: RadioButton component . . . . . . . . . . . . . . . . . . . 1025 Using the RadioButton component . . . . . . . . . . . . . . . . . . . . . . . . . . . 1026 Customizing the RadioButton component . . . . . . . . . . . . . . . . . . . . . 1028

Contents

17

RadioButton class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1031 RadioButton.click . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1036 RadioButton.data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1038 RadioButton.groupName . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1039 RadioButton.label . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1041 RadioButton.labelPlacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1042 RadioButton.selected. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1043 RadioButton.selectedData . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1044 RadioButton.selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1045 Chapter 36: RadioButtonGroup component . . . . . . . . . . . . . . . 1047 Chapter 37: RDBMSResolver component . . . . . . . . . . . . . . . .1049 Using the RDBMSResolver component . . . . . . . . . . . . . . . . . . . . . . .1050 RDBMSResolver class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1053 RDBMSResolver.addFieldInfo() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1055 RDBMSResolver.beforeApplyUpdates . . . . . . . . . . . . . . . . . . . . . . . . 1056 RDBMSResolver.deltaPacket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1057 RDBMSResolver.fieldInfo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1057 RDBMSResolver.nullValue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1058 RDBMSResolver.reconcileResults. . . . . . . . . . . . . . . . . . . . . . . . . . . .1059 RDBMSResolver.reconcileUpdates . . . . . . . . . . . . . . . . . . . . . . . . . . .1060 RDBMSResolver.tableName . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1061 RDBMSResolver.updateMode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1062 RDBMSResolver.updatePacket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1063 RDBMSResolver.updateResults. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1064 Chapter 38: RectBorder class . . . . . . . . . . . . . . . . . . . . . . . . . .1065 Using styles with the RectBorder class . . . . . . . . . . . . . . . . . . . . . . . . 1066 Creating a custom RectBorder implementation . . . . . . . . . . . . . . . . . 1068 Chapter 39: Screen class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1071 Loading external content into screens . . . . . . . . . . . . . . . . . . . . . . . . . 1072 Screen class (API). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1074 Screen.allTransitionsInDone. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1080 Screen.allTransitionsOutDone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1081 Screen.currentFocusedScreen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1081 Screen.getChildScreen() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1082 Screen.indexInParent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1083 Screen.mouseDown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1084 Screen.mouseDownSomewhere. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1085

18

Contents

Screen.mouseMove. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1085 Screen.mouseOut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1086 Screen.mouseOver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1087 Screen.mouseUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1088 Screen.mouseUpSomewhere . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1088 Screen.numChildScreens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1089 Screen.parentIsScreen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1090 Screen.parentScreen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1091 Screen.rootScreen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1091 Chapter 40: ScrollPane component. . . . . . . . . . . . . . . . . . . . . 1093 Using the ScrollPane component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1094 Customizing the ScrollPane component. . . . . . . . . . . . . . . . . . . . . . . 1096 ScrollPane class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1098 ScrollPane.complete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1103 ScrollPane.content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1104 ScrollPane.contentPath . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1106 ScrollPane.getBytesLoaded(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1107 ScrollPane.getBytesTotal() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1108 ScrollPane.hLineScrollSize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1109 ScrollPane.hPageScrollSize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1110 ScrollPane.hPosition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1111 ScrollPane.hScrollPolicy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1112 ScrollPane.progress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1113 ScrollPane.refreshPane() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1115 ScrollPane.scroll. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1116 ScrollPane.scrollDrag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1118 ScrollPane.vLineScrollSize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1119 ScrollPane.vPageScrollSize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1120 ScrollPane.vPosition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1121 ScrollPane.vScrollPolicy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1122 Chapter 41: SimpleButton class . . . . . . . . . . . . . . . . . . . . . . . . . 1125 SimpleButton.click. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1129 SimpleButton.emphasized. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1131 SimpleButton.emphasizedStyleDeclaration . . . . . . . . . . . . . . . . . . . . 1132 SimpleButton.selected . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1132 SimpleButton.toggle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1133

Contents

19

Chapter 42: Slide class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1135 Using the Slide class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1136 Slide class (API). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1137 Slide.autoKeyNav . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1144 Slide.currentChildSlide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1145 Slide.currentFocusedSlide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1146 Slide.currentSlide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1146 Slide.defaultKeydownHandler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1147 Slide.firstSlide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1149 Slide.getChildSlide() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1150 Slide.gotoFirstSlide() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1151 Slide.gotoLastSlide() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1152 Slide.gotoNextSlide() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1154 Slide.gotoPreviousSlide() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1156 Slide.gotoSlide() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1158 Slide.hideChild . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1160 Slide.indexInParentSlide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1161 Slide.lastSlide. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1162 Slide.nextSlide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1163 Slide.numChildSlides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1164 Slide.overlayChildren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1165 Slide.parentIsSlide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1166 Slide.parentSlide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1167 Slide.playHidden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1167 Slide.previousSlide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1168 Slide.revealChild . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1169 Slide.rootSlide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1170 Chapter 43: StyleManager class . . . . . . . . . . . . . . . . . . . . . . . . . 1171 StyleManager.registerColorName() . . . . . . . . . . . . . . . . . . . . . . . . . . . .1172 StyleManager.registerColorStyle() . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1173 StyleManager.registerInheritingStyle(). . . . . . . . . . . . . . . . . . . . . . . . . 1174 Chapter 44: SystemManager class . . . . . . . . . . . . . . . . . . . . . . 1175 SystemManager.screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1176 Chapter 45: TextArea component . . . . . . . . . . . . . . . . . . . . . . . 1177 Using the TextArea component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1178 Customizing the TextArea component . . . . . . . . . . . . . . . . . . . . . . . . . 1180 TextArea class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1182 TextArea.change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1187

20

Contents

TextArea.editable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1189 TextArea.hPosition. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1190 TextArea.hScrollPolicy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1191 TextArea.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1192 TextArea.length . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1193 TextArea.maxChars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1194 TextArea.maxHPosition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1195 TextArea.maxVPosition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1196 TextArea.password . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1198 TextArea.restrict . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1199 TextArea.scroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1200 TextArea.styleSheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1202 TextArea.text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1204 TextArea.vPosition. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1205 TextArea.vScrollPolicy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1206 TextArea.wordWrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1207 Chapter 46: TextInput component . . . . . . . . . . . . . . . . . . . . . . 1209 Using the TextInput component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1210 Customizing the TextInput component . . . . . . . . . . . . . . . . . . . . . . . . . 1212 TextInput class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1214 TextInput.change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1219 TextInput.editable. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1221 TextInput.enter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1222 TextInput.hPosition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1224 TextInput.length . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1225 TextInput.maxChars. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1226 TextInput.maxHPosition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1227 TextInput.password . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1228 TextInput.restrict. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1229 TextInput.text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1231 Chapter 47: TransferObject interface. . . . . . . . . . . . . . . . . . . . 1233 TransferObject.clone() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1234 TransferObject.getPropertyData() . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1235 TransferObject.setPropertyData() . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1236 Chapter 48: TransitionManager class . . . . . . . . . . . . . . . . . . . .1237 Using the TransitionManager class . . . . . . . . . . . . . . . . . . . . . . . . . . . .1237 TransitionManager class summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . 1239 TransitionManager.allTransitionsInDone . . . . . . . . . . . . . . . . . . . . . . 1240

Contents

21

TransitionManager.allTransitionsOutDone . . . . . . . . . . . . . . . . . . . . . 1241 TransitionManager.content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1243 TransitionManager.contentAppearance . . . . . . . . . . . . . . . . . . . . . . . 1243 TransitionManager.start() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1244 TransitionManager.startTransition() . . . . . . . . . . . . . . . . . . . . . . . . . . . 1246 TransitionManager.toString() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1248 Transition-based classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1249 Chapter 49: TreeDataProvider interface . . . . . . . . . . . . . . . . . . 1257 TreeDataProvider.addTreeNode() . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1258 TreeDataProvider.addTreeNodeAt() . . . . . . . . . . . . . . . . . . . . . . . . . . 1259 TreeDataProvider.attributes.data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1260 TreeDataProvider.attributes.label . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1261 TreeDataProvider.getTreeNodeAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . 1262 TreeDataProvider.removeTreeNode() . . . . . . . . . . . . . . . . . . . . . . . . . 1262 TreeDataProvider.removeTreeNodeAt() . . . . . . . . . . . . . . . . . . . . . . . 1263 Chapter 50: Tree component . . . . . . . . . . . . . . . . . . . . . . . . . . .1265 Using the Tree component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1266 Customizing the Tree component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1274 Tree class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1279 Tree.addTreeNode() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1285 Tree.addTreeNodeAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1287 Tree.dataProvider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1288 Tree.firstVisibleNode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1290 Tree.getDisplayIndex() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1291 Tree.getIsBranch() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1293 Tree.getIsOpen() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1294 Tree.getNodeDisplayedAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1295 Tree.getTreeNodeAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1296 Tree.nodeClose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1297 Tree.nodeOpen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1299 Tree.refresh() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1300 Tree.removeAll() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1302 Tree.removeTreeNodeAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1303 Tree.selectedNode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1304 Tree.selectedNodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1305 Tree.setIcon() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1306 Tree.setIsBranch(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1308 Tree.setIsOpen() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1309

22

Contents

Chapter 51: Tween class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1311 Using the Tween class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1313 Applying easing methods to components. . . . . . . . . . . . . . . . . . . . . . . 1315 Tween.continueTo(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1319 Tween.duration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1320 Tween.fforward() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1321 Tween.finish. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1322 Tween.FPS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1322 Tween.nextFrame() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1324 Tween.onMotionChanged . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1325 Tween.onMotionFinished. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1326 Tween.onMotionResumed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1327 Tween.onMotionStarted. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1328 Tween.onMotionStopped. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1329 Tween.position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1329 Tween.prevFrame() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1330 Tween.resume() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1332 Tween.rewind() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1333 Tween.start() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1334 Tween.stop() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1335 Tween.time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1336 Tween.toString(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1337 Tween.yoyo(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1338 Chapter 52: UIComponent class. . . . . . . . . . . . . . . . . . . . . . . . 1339 UIComponent class (API) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UIComponent.enabled . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UIComponent.focusIn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UIComponent.focusOut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UIComponent.getFocus(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UIComponent.keyDown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UIComponent.keyUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UIComponent.setFocus() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UIComponent.tabIndex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1340 1343 1343 1345 1346 1347 1348 1349 1350

Chapter 53: UIEventDispatcher class . . . . . . . . . . . . . . . . . . . . 1351 UIEventDispatcher.keyDown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UIEventDispatcher.keyUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UIEventDispatcher.load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UIEventDispatcher.mouseDown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UIEventDispatcher.mouseOut. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1352 1353 1353 1354 1355

Contents

23

UIEventDispatcher.mouseOver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1355 UIEventDispatcher.mouseUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1356 UIEventDispatcher.removeEventListener() . . . . . . . . . . . . . . . . . . . . 1356 UIEventDispatcher.unload. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1357 Chapter 54: UIObject class . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1359 UIObject.bottom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1362 UIObject.createClassObject(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1362 UIObject.createLabel(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1363 UIObject.createObject(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1365 UIObject.destroyObject(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1366 UIObject.doLater() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1367 UIObject.draw. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1368 UIObject.getStyle() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1369 UIObject.height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1370 UIObject.hide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1371 UIObject.invalidate() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1372 UIObject.left . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1373 UIObject.load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1373 UIObject.move . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1374 UIObject.move(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1376 UIObject.redraw() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1377 UIObject.resize. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1378 UIObject.reveal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1379 UIObject.right . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1380 UIObject.scaleX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1380 UIObject.scaleY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1381 UIObject.setSize() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1382 UIObject.setSkin(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1383 UIObject.setStyle() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1384 UIObject.top . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1386 UIObject.unload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1386 UIObject.visible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1387 UIObject.width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1388 UIObject.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1388 UIObject.y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1389 Chapter 55: UIScrollBar Component. . . . . . . . . . . . . . . . . . . . . 1391 Using the UIScrollBar component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1391 Customizing the UIScrollBar component. . . . . . . . . . . . . . . . . . . . . . . 1395 UIScrollBar class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1398

24

Contents

UIScrollBar.horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1403 UIScrollBar.lineScrollSize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1404 UIScrollBar.pageScrollSize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1405 UIScrollBar.scroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1406 UIScrollBar.scrollPosition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1409 UIScrollBar.setScrollProperties() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1411 UIScrollBar.setScrollTarget() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1412 UIScrollBar._targetInstanceName . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1413 Chapter 56: Web service classes . . . . . . . . . . . . . . . . . . . . . . . . 1415 Making web service classes available at runtime . . . . . . . . . . . . . . . . 1416 Log class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1416 Constructor for the Log class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1418 Log.getDateString(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1419 Log.logInfo() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1420 Log.logDebug(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1421 Log.level . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1422 Log.name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1423 Log.onLog(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1424 PendingCall class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1425 PendingCall.getOutputParameter() . . . . . . . . . . . . . . . . . . . . . . . . . . . 1426 PendingCall.getOutputParameterByName() . . . . . . . . . . . . . . . . . . . 1428 PendingCall.getOutputParameters() . . . . . . . . . . . . . . . . . . . . . . . . . . 1429 PendingCall.getOutputValue() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1430 PendingCall.getOutputValues() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1431 PendingCall.myCall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1432 PendingCall.onFault . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1432 PendingCall.onResult . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1434 PendingCall.request. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1435 PendingCall.response . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1435 SOAPCall class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1436 SOAPCall.concurrency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1437 SOAPCall.doDecoding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1437 SOAPCall.doLazyDecoding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1438 WebService class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1438 Supported types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1440 WebService security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1442 Constructor for the WebService class. . . . . . . . . . . . . . . . . . . . . . . . . 1443 WebService.getCall() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1445 WebService.myMethodName() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1446 WebService.onFault . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1447 WebService.onLoad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1448

Contents

25

Chapter 57: WebServiceConnector component. . . . . . . . . . . . 1451 Using the WebServiceConnector component . . . . . . . . . . . . . . . . . . 1451 WebServiceConnector class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1453 WebServiceConnector.multiple SimultaneousAllowed. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1455 WebServiceConnector.operation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1456 WebServiceConnector.params . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1457 WebServiceConnector.result . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1458 WebServiceConnector.results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1459 WebServiceConnector.send. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1460 WebServiceConnector.status . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1460 WebServiceConnector.suppress InvalidCalls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1464 WebServiceConnector.trigger(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1465 WebServiceConnector.WSDLURL . . . . . . . . . . . . . . . . . . . . . . . . . . . 1466 Chapter 58: Window component . . . . . . . . . . . . . . . . . . . . . . . . 1467 Using the Window component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1468 Customizing the Window component. . . . . . . . . . . . . . . . . . . . . . . . . . 1471 Window class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1474 Window.click . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1479 Window.closeButton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1481 Window.complete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1482 Window.content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1483 Window.contentPath . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1484 Window.deletePopUp() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1485 Window.mouseDownOutside. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1486 Window.title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1488 Window.titleStyleDeclaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1489 Chapter 59: XMLConnector component . . . . . . . . . . . . . . . . . . 1491 Using the XMLConnector component . . . . . . . . . . . . . . . . . . . . . . . . . 1491 XMLConnector class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1493 XMLConnector.direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1495 XMLConnector.ignoreWhite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1495 XMLConnector.multipleSimultaneousAllowed. . . . . . . . . . . . . . . . . . 1496 XMLConnector.params . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1498 XMLConnector.result . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1498 XMLConnector.results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1499 XMLConnector.send . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1500 XMLConnector.status . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1501

26

Contents

XMLConnector.suppressInvalidCalls. . . . . . . . . . . . . . . . . . . . . . . . . . 1503 XMLConnector.trigger() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1504 XMLConnector.URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1505 Chapter 60: XPathAPI class . . . . . . . . . . . . . . . . . . . . . . . . . . . .1507 Chapter 61: XUpdateResolver component. . . . . . . . . . . . . . . . 1509 Using the XUpdateResolver component. . . . . . . . . . . . . . . . . . . . . . . . 1510 XUpdateResolver class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1512 XUpdateResolver.beforeApplyUpdates . . . . . . . . . . . . . . . . . . . . . . . . 1513 XUpdateResolver.deltaPacket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1514 XUpdateResolver.includeDeltaPacketInfo. . . . . . . . . . . . . . . . . . . . . . 1515 XUpdateResolver.reconcileResults . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1515 XUpdateResolver.updateResults . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1516 XUpdateResolver.xupdatePacket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1517 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1519

Contents

27

28

Contents

CHAPTER 1

ActionScript 2.0 Components
The ActionScript 2.0 Components Language Reference describes each component available in the Version 2 Adobe Component Architecture, along with its application programming interface (API). To learn how to use, customize, and create version 2 components, see Using ActionScript 2.0 Components.
N OTE
■ ■ ■ ■ ■ ■ ■

1

Adobe Flash CS3 Professional includes ActionScript 2.0 components as well as ActionScript 3.0 components. You cannot mix these two sets of components. You must use one set or the other for a given application. Flash CS3 presents either ActionScript 2.0 components or ActionScript 3.0 components based on whether you open an ActionScript 2.0 or an ActionScript 3.0 file. When you create a new Flash CS3 document, you must specify either a Flash File (ActionScript 3.0) or a Flash File (ActionScript 2.0). When you open an existing document, Flash examines the Publish Settings to determine which set of components to use. For information about ActionScript 3.0 components, see Using ActionScript 3.0 Components.

In this book, each component description contains information about the following: Keyboard interaction Live preview Accessibility Setting the component parameters Using the component in an application Customizing the component with styles and skins ActionScript methods, properties, and events

Components are presented alphabetically. You can also find components arranged by category in the tables that follow. This chapter contains the following sections:
Types of components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Other listings in this book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

29

Types of components
The following tables list the different version 2 components, arranged by category.

User interface (UI) components
Component
Accordion component Alert component Button component CheckBox component ComboBox component

Description
A set of vertical overlapping views with buttons along the top that allow users to switch views. A window that presents a message and buttons to capture the user’s response. A resizable button that can be customized with a custom icon. Allows users to make a Boolean (true or false) choice. Allows users to select one option from a scrolling list of choices. This component can have an selectable text field at the top of the list that allows users to search the list. Allows users to display and manipulate multiple columns of data. Allows users to select one or more dates from a calendar. An nonselectable text field with a calendar icon. When a user clicks inside the component’s bounding box, Flash displays a DateChooser component. A non-editable, single-line text field. Allows users to select one or more options from a scrolling list. A container that holds a loaded SWF or JPEG file. A standard desktop application menu; allows users to select one command from a list. A horizontal bar of menus.

DataGrid component DateChooser component DateField component

Label component List component Loader component Menu component MenuBar component

NumericStepper component A text box with clickable arrows that raise and lower the value of a number. ProgressBar component RadioButton component ScrollPane component Displays the progress of a process, such as a loading operation. Allows users to select between mutually exclusive options. Displays movie clips, bitmaps, and SWF files in a limited area using automatic scroll bars.

30

ActionScript 2.0 Components

WebServiceConnector component XMLConnector component XUpdateResolver component Types of components 31 .services package. single-line text input field. Holds data and can be used as a connector between components. This component translates the XML that can be received and parsed by a web service. Allows you to add a scroll bar to a text field. Allows a user to manipulate hierarchical information. These classes are in the mx. A draggable window with a title bar. multiline text field. JavaBean. caption. The model for linear-access lists of data.Component TextArea component TextInput component Tree component Window component UIScrollBar Component Description An optionally editable. border. Lets you save data back to any supported data source. Reads and writes XML documents by using the HTTP GET and POST methods. servlet. Data handling Component Data binding classes DataHolder component DataProvider API DataSet component Description Classes that implement the Flash runtime data binding functionality. and Close button and content-display area. RDBMSResolver component Lets you save data back to any supported data source. A building block for creating data-driven applications. Web service classes Classes that allow access to web services that use Simple Object Access Protocol (SOAP). Provides scriptless access to web service method calls. it provides simple array-manipulation capabilities that broadcast data changes. An optionally editable. This component translates the delta packet into XUpdate. or ASP page.

MediaController component MediaDisplay component MediaPlayback component Managers Class DepthManager class FocusManager class PopUpManager class StyleManager class SystemManager class TransitionManager class Description Manages the stacking depths of objects. Handles Tab key navigation between components. from a Flash Video Streaming Service (FVSS). Lets you register styles and manages inherited styles. A combination of the MediaDisplay and MediaController components (see “Media components” on page 831). Displays streaming media in an application (see “Media components” on page 831). Also handles focus changes as users click in the application. Lets you manipulate slide presentation screens at runtime. Base class for the Slide and Form classes. Lets you manage animation effects to slides and movie clips. Lets you manage which top-level window is activated. or from Flash Media Server (FMS).Media components Component FLVPlayback Component Description Lets you include a video player in your Flash application to play progressive streaming video over HTTP. 32 ActionScript 2. Lets you create and delete pop-up windows. Controls streaming media playback in an application (see “Media components” on page 831). Screens Class Form class Screen class Slide class Description Lets you manipulate form application screens at runtime.0 Components .

Collection interface DataGridColumn class Delegate class Delta interface DeltaItem class DeltaPacket interface EventDispatcher class Iterator interface MenuDataProvider class RectBorder class SimpleButton class TransferObject interface TreeDataProvider interface Other listings in this book 33 . and ComboBox) use to manipulate and display custom cell content for each of their rows. Provides information about an individual operation performed on a transfer object. DataGrid. Describes the styles used to control component borders. Defines a set of methods that items managed by the DataSet component must implement. Lets XML instances assigned to a Menu. These classes and APIs are listed in the following table. Along with the Delta interface and DeltaItem class. Lets you manage a group of related items. Each collection item in this set has properties that are described in the metadata of the collection item class definition. Lets you step through the objects that a collection contains. Let you add and remove event listeners so that your code can react to events appropriately.dataProvider property. called collection items. lets you manage changes made to data. Item CellRenderer API Description A set of properties and methods that the list-based components (List. Allows a function passed from one object to another to be run in the context of the first object. Lets you control some aspects of button appearance and behavior. Menu. Tree.Other listings in this book This book also describes several classes and APIs that are not included in the categories of components listed in the previous section. A set of properties and methods used to create XML for the Tree. and transfer object-level changes.dataProvider property use methods and properties to manipulate their own data as well as the associated menu views. Provides access to the transfer object. Lets you create objects to use as columns of a data grid. collection.

34 ActionScript 2. and fade movie clips easily on the Stage. Provides methods. This class is mixed in to the UIComponent class. Allows components to emit certain events. The base class for all components. and events that allow components to share some common behavior.0 Components . properties. resize.Item Tween class UIComponent class UIEventDispatcher class UIObject class Description Lets you use ActionScript to move.

35 . When a user tabs into an accordion. Selects the child associated with the header that has focus. the children must also be instances of the View class. and each header belongs to the accordion—not to the child. An accordion has a vertical layout with header buttons that span the width of the component.core. most often. Moves focus to the previous child header. This includes movie clips assigned to the class mx. Clicking components that can take focus within the selected child gives them focus. Left Arrow End Enter/Space Home Description Moves focus to the next child header. you can use the following keys to control it: Key Down Arrow. children are a subclass of the View class. When a user clicks a header. the selected header displays the focus indicator.View. The transition to the new child uses a transition animation. Right Arrow Up Arrow. NOTE The Accordion component is supported only if you are working in a document that specifies ActionScript 2.0 in its Publish Settings. An accordion with no children does not accept focus. When an Accordion instance has focus. and changes the appearance of its headers to display focus. One header is associated with each child. To maintain tabbing order in an accordion’s children. the associated child is displayed below that header. Selects the first child. The children must be objects that inherit from the UIObject class (which includes all components).Accordion component 2 The Accordion component is a navigator that contains a sequence of children that it displays one at a time. An accordion with children accepts focus. Focus cycles from last to first without changing the selected child. Focus cycles from first to last without changing the selected child. An accordion creates and manages header buttons that a user can click to navigate between the accordion’s children. Selects the last child.

Moves focus to the next component. 36 Accordion component . This component may be inside the selected child. Using the Accordion component You can use the Accordion component to present multipart forms. This component may be inside the selected child. Using an accordion instead of multiple web pages minimizes server traffic and allows the user to maintain a better sense of progress and context in an application. The default value is [] (an empty array). Selection cycles from the first child to the last child. The default value is [] (an empty array). childSymbols is an array that specifies the linkage identifiers of the library symbols to be used to create the accordion’s children. it is never another header in the same accordion. The Accordion component cannot be made accessible to screen readers. childLabels is an array that specifies the text labels to use on the accordion’s headers. billing address. Accordion parameters You can set the following authoring parameters for each Accordion component instance in the Property inspector or the Component inspector (Window > Component Inspector menu option): childIcons is an array that specifies the linkage identifiers of the library symbols to be used as the icons on the accordion’s headers. The values that you enter are the instance names for the child symbols that you specify in the childSymbols parameter. or outside the accordion. Selection cycles from the last child to the first child. The default value is [] (an empty array). The default value is [] (an empty array). Selects the previous child. For example. Moves focus to the previous component. and payment information for an e-commerce transaction. or outside the accordion.Key Page Down Page Up Shift+ Description Selects the next child. childNames is an array that specifies the instance names of the accordion’s children. it is never another header in the same accordion. a three-child accordion might present forms where the user fills out her shipping address.

an application developer is building the checkout section of an online store.core. You can write ActionScript to control additional options for the Accordion component by using its properties. To add an Accordion component to an application: 1. In the Class field. and events. click the Advanced button. 6. Using the Accordion component 37 .0 coordinate of the movie clip is placed in the upper left corner of the accordion. For more information. If the advanced view is not displayed. enter mx. 2. the children must also be instances of the View class. 3. Otherwise. a billing address. The default value is true. arrange them. Select Edit > Edit Document to return to the main timeline. and click OK. and payment information. These properties can be used if you make a custom layout manager for your application. Drag components such as Label and TextInput from the Components panel onto the Stage to create a mock address form. Position the form elements in relation to 0. setting these properties in the Component inspector will have no visible effect.0). and are overridden by different components as needed. To maintain tabbing order in an accordion’s children. Select File > New and choose Flash File (ActionScript 2. Select Insert > New Symbol and name it AddressForm. The 0. Select Export for ActionScript. methods. see “Accordion class” on page 45. The shipping address and billing address forms are identical.View. and set their parameters in the Property inspector. 5.You can set the following additional parameters for each Accordion component instance in the Component inspector (Window > Component Inspector): enabled is a Boolean value that indicates whether the component can receive focus and input. They are defined in UIObject. The default value is true. visible is a Boolean value that indicates whether the object is visible (true) or not (false). Creating an application with the Accordion component In this example. N OTE The minHeight and minWidth properties are used by internal sizing routines. 4.0 (the middle) on the Stage. The design calls for an accordion with three forms in which a user enters a shipping address.

enter the instance name my_acc. This adds the component to the library so that you can dynamically instantiate it in step 6. In the Property inspector. Billing Address. Repeat steps 2-6 to create a movie clip named CheckoutForm. and CheckoutIcon. AddressForm. and checkout. enter AddressForm. 3. To use ActionScript to add children to an Accordion component: 1. enter shippingAddress. 2. Select Control > Test Movie. You must create these movie clip symbols if you want icons in the headers. ■ For the childNames property. These strings are the ActionScript names of the accordion’s children. because the shipping address form and the billing address form are identical. 8. For the childSymbols property. enter Shipping Address. Drag an Accordion component from the Components panel to add it to the Stage on the main timeline. and CheckoutForm. These strings specify the linkage identifiers of the movie clip symbols that are used as the icons on the accordion headers. AddressIcon. Enter the instance name my_acc. Drag an Accordion component from the Components panel to the Stage. In the Property inspector. For the childIcons property. billingAddress. These strings specify the names of the movie clips used to create the accordion’s children. and Checkout. Select File > New and choose Flash File (ActionScript 2. 4. ■ ■ 10.0). enter AddressIcon. 38 Accordion component . For the childLabels property. do the following: ■ ■ 9. Drag a TextInput component to the library.7. These strings are the text labels on the accordion headers. N OTE The first two children are instances of the same movie clip.

): import mx. {label: "Payment"}). Customizing the Accordion component You can transform an Accordion component horizontally and vertically during authoring and at runtime. 38).createChild("TextInput". {label: "Billing Address"}). firstNameChild_obj. // Create another child text input. select the component on the Stage and use the Free Transform tool or any of the Modify > Transform commands. below the code you entered in step 5.createChild(View. {label: "Shipping Address"}). my_acc. var firstNameChild_obj:Object = my_acc. use the setSize() method (see UIObject. 20). // Set position of text input.setSize(110. 38).createChild(View. {text: "First Name"}). Customizing the Accordion component 39 . In the Actions panel in Frame 1. "lastName". In the Actions panel in Frame 1 of the timeline.move(10.shippingAddress. Calling the setSize() method is the only way to change the bounding rectangle of an accordion. the labels are clipped. At runtime. 6.5.move(150. "payment". 20). "billingAddress". the child is clipped. lastNameChild_obj. my_acc.createChild(View. lastNameChild_obj. While authoring. var lastNameChild_obj:Object = my_acc. // Create child panels for each form to be displayed in my_acc object. "firstName". The height of the headers and the width and height of the children are not affected. {text: "Last Name"}).createChild("TextInput".core. The setSize() method and the Transform tool change only the width of the accordion’s headers and the width and height of its content area. If the headers are too small to contain their label text.shippingAddress. enter the following (this code calls the createChild() method to create its child views.setSize()). "shippingAddress".setSize(140. If the content area of an accordion is smaller than a child. my_acc. enter the following code (this code adds two TextInput component instances to the accordion’s children): // Create child text input for the shippingAddress panel.View. firstNameChild_obj. // Set position of text input.

fontSize fontStyle fontWeight 40 Accordion component . The font style for the header labels. The height of the header buttons. The default value is 10. The default value is 0x0B333C for the Halo theme and blank for the Sample theme. The default value is "normal". An Accordion component uses the following styles: Style themeColor Theme Halo Description The base color scheme of a component. but subsequent calls to getStyle() return "none". see “RectBorder class” on page 1065. The point size for the font of the header labels. This style must be set to true if fontFamily refers to an embedded font. "haloBlue". The background color. The default value is false. The color for text when the component is disabled. The default value is 22. Otherwise. The default value is "none". the embedded font is not used.Using styles with the Accordion component You can set style properties to change the appearance of the border and background of an Accordion component. This is the only color style that doesn’t inherit its value. either "none" or "bold". no text is displayed. and "haloOrange". The font weight for the header labels. in pixels. The default color is 0x848384 (dark gray). If this style is set to true and fontFamily does not refer to an embedded font. either "normal" or "italic". The Accordion component’s default border style value is "solid". A Boolean value that indicates whether the font specified in fontFamily is an embedded font. For more information. The default color is white. Possible values are "haloGreen". All components can also accept the value "normal" in place of "none" during a setStyle() call. The default value is "_sans". The text color. backgroundColor borderStyle Both Both headerHeight Both Both Both Both color disabledColor embedFonts fontFamily Both Both Both Both The font name for the header labels. The Accordion component uses a RectBorder instance as its border and responds to the styles defined on that class.

The disabled state of the header above all collapsed children. A reference to a tweening function that controls the animation. either "none" or "underline".Style textDecoration openDuration openEasing Theme Both Both Both Description The text decoration. So. An Accordion component is composed of its border. For more information.0 Components.0 Components. header buttons. background. see “Using styles to customize component color and text” in Using ActionScript 2.0 Components. To skin the buttons and title bar while authoring. Property falseUpSkin Description The up (normal) state of the header above all collapsed children. You can skin the headers with the skins listed below. see “RectBorder class” on page 1065. If the name of a style property ends in “Color”. The up (normal) state of the header above the expanded child.setStyle("fontStyle". "italic"). Default value accordionHeaderSkin falseDownSkin accordionHeaderSkin falseOverSkin accordionHeaderSkin falseDisabled accordionHeaderSkin trueUpSkin accordionHeaderSkin Customizing the Accordion component 41 . in milliseconds. The pressed state of the header above all collapsed children. see “About skinning components” in Using ActionScript 2. For more information. see “Customizing component animations” in Using ActionScript 2. for example. Defaults to sine in/out. Using skins with the Accordion component The Accordion component uses skins to represent the visual states of its header buttons. The duration. The border and background are provided by the RectBorder class by default. modify skin symbols in the Flash UI Components 2/Themes/MMDefault/Accordion Assets skins states folder in the library of one of the themes’ FLA files. The rolled-over state of the header above all collapsed children. and children. of the transition animation. For information on skinning the RectBorder class. For more information. the following code sets the style appearance of the font within an accordion instance named my_acc to italic: my_acc. it is a color style property and behaves differently than noncolor style properties.

Copy the following ActionScript to the file: import mx.core. The Halo implementation uses an extension of the RectBorder class and custom drawing API code to draw the states.RectBorder. The Sample implementation uses the same skin and the same ActionScript class as the Button skin.ext. import mx. Select File > New and choose ActionScript File.UIObjectExtensions. The following table shows the border style that is set for each skin: Property falseUpSkin falseDownSkin falseOverSkin falseDisabled trueUpSkin trueDownSkin trueOverSkin trueDisabledSkin Border style falseup falsedown falserollover falsedisabled trueup truedown truerollover truedisabled To create an ActionScript-customized Accordion header skin: 1.Property trueDownSkin Description The pressed state of the header above the expanded child. the skin can read the borderStyle style property of the skin to determine the state. The rolled-over state of the header above the expanded child. To create an ActionScript class to use as the skin and provide different states. 2. class RedGreenBlueHeader extends RectBorder { static var symbolName_str:String = "RedGreenBlueHeader". 42 Accordion component . The disabled state of the header above the expanded child.skins. Default value accordionHeaderSkin trueOverSkin accordionHeaderSkin trueDisabledSkin accordionHeaderSkin Using ActionScript to draw the Accordion header The default headers in both the Halo and Sample themes use the same skin element for all states and draw the actual graphics through ActionScript. static var symbolOwner_obj:Object = RedGreenBlueHeader.

case "falsedown": color_num = 0x77FF77. __height). 0.skinRegistry["AccordionHeaderSkin"] = true. Save the file. break. 3. 100).function size():Void { var color_num:Number. switch (borderStyle_str) { case "falseup": case "falserollover": case "falsedisabled": color_num = 0x7777FF. return true. rollover. 0. __width. beginFill(color_num. Customizing the Accordion component 43 . break. drawRect(0. and disabled states. } // required for skins static function classConstruct():Boolean { UIObjectExtensions. a green box for the normal pressed state. } static var classConstructed_bl:Boolean = classConstruct(). _global. } This class creates a square box based on the border style: a blue box for the false up. // Attribute of Accordion // Define the colors of each tab in the Accordion for each tab state. lineStyle(0. case "trueup": case "truedown": case "truerollover": case "truedisabled": color_num = 0xFF7777. } // Clear default style and draw custom style.Extensions(). 100). // Color var borderStyle_str:String = getStyle("borderStyle"). and a red box for the expanded child. endFill(). break. clear(). static var UIObjectExtensionsDependency_obj:Object = UIObjectExtensions.

Two. For example.Three] and childNames to an array of [one. Leave the Class text box blank. Save the file in the same folder as the AS file.0 class to customize the Accordion header skin.three]. 6. However. To create movie clip symbols for Accordion header skins: 1. it is simpler in this case to use different movie clip symbols as header skins. 4. and click OK. The identifier is automatically filled out with AccordionHeaderSkin. In Scene 1. set the childLabels to an array of [One. 2. Select Insert > New Symbol and name it AccordionHeaderSkin. Open the new symbol for editing. Select Export for ActionScript. and click OK. Use the drawing tools to create a box with a red fill and black line. 12. Select Export for ActionScript. drag an Accordion component to the Stage. 3. 5. Set the Class to RedGreenBlueHeader. 10. Make sure that Export in First Frame is already selected. Make 11. 8. If the advanced view is not displayed. Set 44 Accordion component . 7. 7. which is the method used by the skins provided in both the Halo and Sample themes. click the Advanced button. 6. 9. the Accordion properties so that they display several children. click the Advanced button. the border style to hairline. Set 13.0). Select File > New and choose Flash File (ActionScript 2. Set the name to RedAccordionHeaderSkin. Select File > New and choose Flash File (ActionScript 2.For this example. 5.two. Create a new symbol by selecting Insert > New Symbol. 9. Select Control > Test Movie. sure that Export in First Frame is already selected. 4. name the file RedGreenBlueHeader. 10.as. 8. because the example uses simple colored boxes.0). The identifier is automatically filled out with RedAccordionHeaderSkin. Using movie clips to customize the Accordion header skin The example above demonstrates how to use an ActionScript 2. If the advanced view is not displayed.

Click the Back button to return to the main timeline.two. 14. trueDownSkin = "BlueAccordionHeaderSkin". A child must be an instance of UIObject. falseDownSkin = "GreenAccordionHeaderSkin". A movie clip symbol automatically becomes an instance of the UIObject class when it becomes a child of an accordion.core. 12. trueOverSkin = "BlueAccordionHeaderSkin".11. falseOverSkin = "RedAccordionHeaderSkin".View so that it inherits from the View class. set its Class field to mx. 16. Repeat 13. steps 2-11 and create green and blue skins. If you use a movie clip symbol as a child. an Accordion component to the Stage.0) and has a width and height of 100.three]. The ActionScript code sizes the skin as needed. the Accordion properties so that they display several children. Select Control > Test Movie. Each child has a corresponding header button that is created when the child is created. the children must also be instances of the View class. named accordingly. Accordion class 45 . trueUpSkin = "BlueAccordionHeaderSkin".0 document. Set For example.Two. trueDisabledSkin = "BlueAccordionHeaderSkin". } 17. Accordion class Inheritance MovieClip > UIObject class > UIComponent class > View > Accordion mx. Copy the following ActionScript code to the Actions panel with the Accordion instance selected: onClipEvent(initialize) { falseUpSkin = "RedAccordionHeaderSkin". Set the box. set childLabels to an array of [One. falseDisabled = "RedAccordionHeaderSkin".containers. Drag 15.Accordion ActionScript Class Name An Accordion component contains children that are displayed one at a time. However. so that it is positioned at (0.Three] and childNames to an array of [one. to maintain tabbing order in an accordion’s children. NOT E The Accordion component is supported only if you are working in an ActionScript 2. including the border.

invalidate() Accordion component .getStyle() UIObject. To access this property. returns undefined. Creates a child for an Accordion instance.doLater() UIObject.getChildAt() Accordion.createClassObject() UIObject.methodName. use the form accordionInstance. Destroys a child at a specified index position. Destroys a component instance. Method summary for the Accordion class The following table lists methods of the Accordion class. Method Accordion. use the following code: trace(mx. Marks the object so it is redrawn on the next frame interval.Accordion. Each component class has a version property that is a class property. The parameters for this method are different from those of the createChild() method.destroyObject() Description Creates an object on the specified class. Creates a subobject on an object.containers. UIObject. Gets a reference to a child at a specified index position. NOT E 46 The code trace(my_accInstance.createObject() UIObject.version). When calling these methods from the Accordion object.createChild() Accordion. Method UIObject.getHeaderAt() Methods inherited from the UIObject class The following table lists the methods the Accordion class inherits from the UIObject class. Gets the style property from the style declaration or object.createSegment() Description Creates a child for an Accordion instance. Gets a reference to a header object at a specified index position. Calls a function when parameters have been set in the Property and Component inspectors. Class properties are available only on the class itself. Accordion.destroyChildAt() Accordion. The version property returns a string that indicates the version of the component.version).Setting a property of the Accordion class with ActionScript overrides the parameter of the same name set in the Property inspector or Component inspector.

Sets the style property on the style declaration or object. use the form accordionInstance.Method UIObject. When accessing these properties.selectedIndex Description The number of children of an Accordion instance. Sets focus to the component instance.setSkin() UIObject.setSize() UIObject. UIObject.getFocus() UIComponent.setFocus() Description Returns a reference to the object that has focus. Method UIComponent. A reference to the selected child. relative to the bottom edge of its parent. Forces validation of the object so it is drawn in the current frame. the left edge of the object.setStyle() Methods inherited from UIComponent class The following table lists the methods the Accordion class inherits from the UIComponent class. Sets a skin in the object. the position of the bottom edge of the object. Property summary for the Accordion class The following table lists properties of the Accordion class.propertyName.move() Description Moves the object to the requested position.left Accordion class 47 . in pixels. in pixels.selectedChild Accordion. Read-only.redraw() UIObject. The index position of the selected child.height UIObject.numChildren Accordion.bottom Description Read-only. When calling these methods from the Accordion object. Read-only. Resizes the object to the requested size.methodName. the height of the object. Properties inherited from the UIObject class The following table lists the properties the Accordion class inherits from the UIObject class. Property Accordion. Property UIObject. use the form accordionInstance. UIObject.

tabIndex Description Indicates whether the component can receive focus and input. the top edge of the object.visible UIObject. UIObject. Read-only.width UIObject. Property UIComponent.scaleY UIObject. Read-only. the left edge of the object.y Properties inherited from the UIComponent class The following table lists the properties the Accordion class inherits from the UIComponent class. the position of the right edge of the object. in pixels. Event Accordion. 48 Accordion component . relative to the right edge of its parent. the width of the object. relative to its parent. relative to its parent.x UIObject. in pixels.right Description Read-only.scaleX UIObject. A Boolean value indicating whether the object is visible (true) or not (false). Events inherited from the UIObject class The following table lists the events the Accordion class inherits from the UIObject class. Read-only. A number indicating the tabbing order for a component in a document. A number indicating the scaling factor in the y direction of the object.Property UIObject. in pixels.enabled UIComponent.top UIObject. A number indicating the scaling factor in the x direction of the object. Event summary for the Accordion class The following table lists an event of the Accordion class. relative to its parent. the position of the top edge of the object. Read-only. When accessing these properties.propertyName. use the form accordionInstance.change Description Broadcast to all registered listeners when the selectedIndex and selectedChild properties of an accordion change because of a user’s mouse click or keypress.

0. Broadcast when the object has moved.79. Broadcast when a key is pressed.change Availability Flash Player 6 (6. Event UIComponent. listenerObject.resize Description Broadcast when an object is about to draw its graphics.Event UIObject. Usage 2: Accordion. Broadcast when an object’s state changes from invisible to visible.0).hide UIObject. listenerObject). Broadcast when the subobjects are being unloaded. Broadcast when an object has been resized.change = function(eventObject:Object) { // Insert your code here.keyDown UIComponent.move UIObject. Usage Usage 1: var listenerObject:Object = new Object().focusOut UIComponent. Broadcast when subobjects are being created.change 49 . Accordion. }. Edition Flash MX Professional 2004.addEventListener("change".load UIObject. Broadcast when an object loses focus.draw UIObject.keyUp Description Broadcast when an object receives focus.unload Events inherited from the UIComponent class The following table lists the events the Accordion class inherits from the UIComponent class. accordionInstance.reveal UIObject. Broadcast when an object’s state changes from visible to invisible.focusIn UIComponent. UIObject. Broadcast when a key is released.

This event is broadcast before the transition animation occurs. 50 Accordion component . Components use a dispatcher/event listener model.on (change) { // Insert your code here. } Description Event. see “EventDispatcher class” on page 495. my_accListener. “Billing Address”.label. it automatically passes an event object (eventObject) to the handler. a trace statement is sent to the Output panel. broadcast to all registered listeners when the selectedIndex and selectedChild properties of an accordion change. For more information. When the change event is broadcast. When the event is triggered. You can use these properties to write code that handles the event. This event is broadcast only when a user’s mouse click or keypress changes the value of selectedChild or selectedIndex—not when the value is changed with ActionScript. and “Payment”. switch (selectedChild_str) { case "Shipping Address": trace("One was selected"). // Perform action based on selected child. break. Each event object has properties that contain information about the event.change = function() { trace("Changed to different view"). the index of the child that is about to be selected. // Assign label of child panel to variable. var selectedChild_str:String = my_acc. case "Billing Address": trace("Two was selected"). Example The following example uses an Accordion instance named my_acc containing three child panels labelled “Shipping Address”. // Create new Listener object. The Accordion change event also contains two unique event object properties: ■ ■ newValue prevValue Number. You call the addEventListener() method and pass it a reference to the handler as a parameter. The Accordion component dispatches a change event when one of its buttons is clicked and the event is handled by a function (also called a handler) on a listener object (listenerObject) that you create.addEventListener() method as the second parameter.selectedChild. var my_accListener:Object = new Object(). The code defines a handler called my_accListener and passes the handler to the my_acc. break. The event object is captured by the change handler in the eventObject parameter. the index of the child that was previously selected. Number.

Edition Flash MX Professional 2004.79. } }. Accordion. or the linkage name (a reference to the symbol to be instantiated). The class must be UIObject or a subclass of UIObject. The newly created child is added to the end of the list of children owned by the accordion. You can use the following properties: ■ ■ label icon A string that specifies the text label that the new child instance uses on its header. Accordion. initialProperties]) Parameters Either the constructor function for the class of the UIObject to be instantiated.case "Payment": trace("Three was selected"). my_accListener). my_acc.createChild() 51 . but most often it is View object or a subclass of View. A string that specifies the linkage identifier of the library symbol that the child uses for the icon on its header. initialProperties An optional parameter that specifies initial properties for the new instance. Description Method (inherited from View). The created child is an instance of the class or movie clip symbol specified in the classOrSymbolName parameter.addEventListener("change". Usage accordionInstance. You can use the label and icon properties to specify a text label and an icon for the associated accordion header for each child in the initialProperties parameter. Use this method to place views inside the accordion. classOrSymbolName instanceName The instance name of the new instance. break.createChild() Availability Flash Player 6 (6. instanceName[.createChild(classOrSymbolName. Returns A reference to an instance of the UIObject that is the newly created child. creates a child for the accordion.0).0.

"CardNumber_label".createChild(View. "billing".View.createChild(Label.core.View. var cardNumber_label:Object = child_obj. // Create text inputs as children of the view instance.controls. Add a symbol to the library with the Linkage Identifier payIcon to be the icon for the child header.createChild(Label. and also adds children to billing to provide labels and text input fields for a form: import mx. icon: "payIcon"}).controls. The following code creates a child named billing (with the label “Payment”) that is an instance of the View class: var child_obj:Object = my_acc.TextInput. {label:"Payment". "billing".createChild("PaymentForm". {label: "Payment". var child_obj:Object = my_acc.core. Or. import mx. {label: "Payment". "CardType_label". var child_obj:Object = my_acc. _y:50}). The following code also creates a child that is an instance of the View class. {_x:10. The following code creates a child that is an instance of the View class named billing.createChild(mx.Label. // Create labels as children of the view instance.createChild(View. Then drag a Label component and a TextInput component from the Components panel to the current document’s library (so that you have both a TextInput symbol and a Label symbol in the library). icon: "payIcon"}). but it uses import to reference the constructor for the View class: import mx.When each child is created. Paste the following code in the first frame of the main timeline (replacing any code from the previous examples). Example Start with an Accordion instance on the Stage named my_acc. For a more complex example. 52 Accordion component . {label: "Payment". it is assigned an index number in the order of creation and the numChildren property is increased by 1. var cardType_label:Object = child_obj. import mx. "billing". _y:100}). and the following code creates an instance of PaymentForm named billing as the child of my_acc (this approach is useful for dynamic content where you load the dynamic content into a movie clip symbol. keep the Accordion instance my_acc on the Stage. icon: "payIcon"}). {_x:10. add a movie clip symbol to the library with the Linkage Identifier PaymentForm to be the Accordion child. icon: "payIcon"}).core. "billing". and then make that symbol a child of the Accordion instance): var child_obj:Object = my_acc.View.

This parameter is optional. The created child is an instance of the class or movie clip symbol specified in the classOrSymbolName parameter. // Fill in labels. Use this method to place views inside the accordion.text = "Card Number". creates a child for the accordion.79. _y:100}).var cardTypeInput_ti:Object = child_obj.createChild(TextInput.createSegment(classOrSymbolName. Usage accordionInstance. but most often it is View or a subclass of View. icon A string reference to the linkage identifier of the library symbol that the child uses for the icon on its header. Accordion. or the linkage name of the symbol to be instantiated. label[.0). "CardType_ti".createSegment() Availability Flash Player 6 (6. {_x:150. A string that specifies the text label that the new child instance uses on its header. {_x:150. Accordion. The newly created child is added to the end of the list of children owned by the accordion. var cardNumberInput_ti:Object = child_obj. Edition Flash MX Professional 2004. Description Method.0. Returns A reference to the newly created UIObject instance. instanceName label The instance name of the new instance.text = "Card Type". This parameter is optional. The class must be UIObject or a subclass of UIObject. "CardNumber_ti". icon]]) Parameters classOrSymbolName Either a reference to the constructor function for the class of the UIObject to be instantiated. cardType_label. _y:50}).createSegment() 53 . instanceName[. You can use the label and icon parameters to specify a text label and an icon for the associated accordion header for each child. cardNumber_label.createChild(TextInput.

Then.View. var cardTypeInput_ti:Object = child_obj.Label. The following code creates a child that is an instance of the View class: var child_obj:Object = my_acc. and also adds children to billing to provide labels and text input fields for a form: import mx. The following code also creates a child that is an instance of the View class. 54 Accordion component . "CardType_label". import mx. "Payment". {_x:10. import mx.text = "Card Type". Add a movie clip symbol to the library with the Linkage Identifier PaymentForm to be the Accordion child. "payIcon"). _y:50}). _y:50}). Drag a Label component and a TextInput component from the Components panel to the current document’s library (so that you have both a TextInput symbol and a Label symbol in the library).TextInput.createSegment(View. When each child is created. "payIcon").controls.View. {_x:150. "payIcon"). "payIcon"). var child_obj:Object = my_acc. "billing". // Create text inputs as children of the view instance.createChild(TextInput.createChild(Label.The following code creates a child that is an instance of the View class named billing. var cardType_label:Object = child_obj.createSegment("PaymentForm".createSegment(mx. cardType_label. and the numChildren property is increased by 1.core. "billing". // Fill in labels. cardNumber_label. "billing". {_x:10.View.core.core.The createSegment() method differs from the createChild() method in that label and icon are passed directly as parameters. The following example creates an instance of the PaymentForm movie clip symbol named billing as the last child of my_acc with header label “Payment” and the icon in the library: var child_obj:Object = my_acc. "CardNumber_ti". // Create labels as children of the view instance. "billing". "CardType_ti".createChild(TextInput. var cardNumberInput_ti:Object = child_obj. _y:100}). var cardNumber_label:Object = child_obj. Example Start with an Accordion instance on the Stage named my_acc. "Payment".createSegment(View. "CardNumber_label". "Payment". _y:100}). but it uses import to reference the constructor for the View class: import mx. it is assigned an index number in the order of creation.controls. {_x:150. add a symbol to the library with Linkage Identifier payIcon to be the icon for the child header.text = "Card Number". var child_obj:Object = my_acc. not as properties of an initalProperties parameter. "Payment".createChild(Label.

79. "Menu Item 2"). If there is no previous child. my_acc. Edition Flash MX Professional 2004. Usage accordionInstance. my_acc. "myMainItem3". The child to be destroyed is specified by its index. "myMainItem1". it is selected. // Create child panels with instances of the View class. N OTE Calling destroyChildAt() decreases the numChildren property by 1. which is passed to the method in the index parameter. Calling this method destroys the corresponding header as well.View. Example The following code destroys the first child of my_acc when the third child is selected: import mx.0.core. "Menu Item 1"). Description Method (inherited from View). If there is no next child. Returns Nothing.destroyChildAt(index) Parameters index The index number of the accordion child to destroy. the previous child is selected.Accordion. If there is a next child. Accordion.0). destroys one of the accordion’s children.createSegment(View. "myMainItem2".destroyChildAt() 55 . If the destroyed child is selected. "Menu Item 3"). Each child of an accordion is assigned a zero-based index number in the order in which it was created.destroyChildAt() Availability Flash Player 6 (6. my_acc.createSegment(View.createSegment(View. the selection is undefined. a new selected child is chosen.

getChildAt(index) Parameters index The index number of an accordion child. Each child of an accordion is assigned a zero-based index in the order in which it was created. } }. Example The following code gets a reference to the last child of my_acc and changes the label to “Last Child”: import mx. and so on. Returns A reference to the instance of the UIObject at the specified index. my_accListener. so the first child is 0.0.// Create new Listener object. my_accListener = new Object(). // Create child panels with instances of the View class. my_accListener). the second child is 1.getChildAt() Availability Flash Player 6 (6.79.change = function() { if ("myMainItem3"){ my_acc. Each accordion child is given an index number for its position.View. 56 Accordion component .createChild() Accordion.0). Usage accordionInstance. Description Method. returns a reference to the child at the specified index. my_acc. See also Accordion.addEventListener("change". Edition Flash MX Professional 2004.core.destroyChildAt(0). This index number is zero-based.

my_acc. {label: "Billing Address"}). // Get reference for last child object.label = "Last Child". "Menu Item 3"). // Change label of object.79. and so on. Usage accordionInstance. my_acc.createSegment(View. {label: "Shipping Address"}). "myMainItem1". Description Method. my_acc. "billingAddress".createChild(View.core. Returns A reference to the instance of the UIObject at the specified index.createChild(View.createSegment(View. Accordion.0.createSegment(View. "myMainItem3".getChildAt(my_acc.numChildren .my_acc. my_acc. // Create child panels for each form to be displayed in my_acc object.View. Accordion. "Menu Item 1"). {label: "Payment"}).getHeaderAt(index) Parameters index The index number of an accordion header. This index number is zero-based. "payment". "myMainItem2". var lastChild_obj:Object = my_acc. Each header of an accordion is assigned a zero-based index in the order in which it was created.0). "Menu Item 2").getHeaderAt() 57 .createChild(View. lastChild_obj. "shippingAddress". Example The following code gets a reference to the last header of my_acc and displays the label in the Output panel: import mx. the second header is 1.1). Each accordion header is given an index number for its position.getHeaderAt() Availability Flash Player 6 (6. my_acc. so the first header is 0. returns a reference to the header at the specified index. Edition Flash MX Professional 2004.

1 is 6. and so on.core.label = "Last Child". "myMainItem2".getHeaderAt(2).createSegment(View. the last child would have the index 6.var head3:Object = my_acc. "Menu Item 2").createSegment(View. my_acc. my_acc. Edition Flash MX Professional 2004. so the value of my_acc.getChildAt(my_acc. which is the index number of the last child.numChildren Description Property (inherited from View). Each accordion child is given an index number for its position. // Get reference for last child object.createSegment(View. The numChildren property is not zero-based. Usage accordionInstance.label). The code my_acc.1). the second child is 1. "myMainItem1". The result of 7 .79. // Create child panels with instances of the View class.numChildren Availability Flash Player 6 (6.View. trace(head3. Example The following code uses numChildren to get a reference to the last child of my_acc and changes the label to “Last Child”: import mx. if there were seven children in an accordion. This index number is zerobased.0. For example. // Change label of object.numChildren would be 7. var lastChild_obj:Object = my_acc. Accordion. my_acc.numChild 1 always refers to the last child added to an accordion.0). Headers are not counted as children. indicates the number of children (of type UIObject) in an Accordion instance.numChildren . so the first child is 0. 58 Accordion component . "Menu Item 1"). "Menu Item 3"). lastChild_obj. "myMainItem3".

Accordion.0.selectedChild Description Property. my_accListener. case "Billing Address": trace("Two was selected"). the default value is undefined. // Assign label of child panel to variable var selectedChild_str:String = my_acc. break.0).label. If the accordion doesn’t have children. Setting this property to a child causes the accordion to begin the transition animation to display the specified child. break.79. If the accordion has children. var my_accListener:Object = new Object().getChildAt(0). If the accordion has children. the code accordionInstance. Edition Flash MX Professional 2004. case "Payment": Accordion.change = function() { trace("Changed to different view").selectedChild Availability Flash Player 6 (6. undefined if no children exist.selectedChild 59 . the default value is accordionInstance. Changing the value of selectedChild also changes the value of selectedIndex. Example The following example detects when a child is selected and displays the child’s order in the Output panel each time a header is selected: // Create new Listener object.selectedChild.selectedChild is equivalent to the code accordionInstance.selectedIndex). // Perform action based on selected child switch (selectedChild_str) { case "Shipping Address": trace("One was selected"). the selected child (of type UIObject) if one or more children exist.getChildAt(accordionInstance. Usage accordionInstance.

.selectedIndex. Example The following example detects when a child is selected and displays the child’s order in the Output panel each time a header is selected: // Create new Listener object. The valid values of selectedIndex are 0. my_acc. See also Accordion. break.change = function() { trace("Changed to different view").1. Usage accordionInstance..0. var my_accListener:Object = new Object().selectedIndex Availability Flash Player 6 (6. where n is the number of children. the zero-based index of the selected child in an accordion with one or more children.addEventListener("change".selectedIndex Description Property. so the first child is 0. For an accordion with no child views. 2.79. Edition Flash MX Professional 2004. This index number is zerobased. my_accListener. // Perform action based on selected child. Changing the value of selectedIndex also changes the value of selectedChild. n . 1. switch (selectedChild_num) { 60 Accordion component . the second child is 1. var selectedChild_num:Number = my_acc. // Assign label of child panel to variable.trace("Three was selected"). and so on. the only valid value is undefined.0). } }. my_accListener). Each accordion child is given an index number for its position. ..selectedIndex Accordion. Setting this property to a child causes the accordion to begin the transition animation to display the specified child.

break. case 2: trace("Three was selected"). case 1: trace("Two was selected"). break.selectedChild Accordion. my_accListener). } }. See also Accordion. Accordion.case 0: trace("One was selected").selectedIndex 61 . break.addEventListener("change".numChildren. my_acc.

62 Accordion component .

show() method. 63 . you can use the Accessibility panel to make the component’s text and buttons accessible to screen readers. You enable accessibility for a component only once. the Alert component must be in the library. An Alert window can have any combination of Yes. and Cancel buttons. The live preview for the Alert component is an empty window. call the Alert. No. a message that you can customize.enableAccessibility(). and buttons whose labels you can change. To display an Alert window. Alert. N OTE TIP 3 The Alert component is supported only if you are working in a document that specifies ActionScript 2. When you add an Alert component to an application. An Alert window closes when a user clicks any of its buttons. and you can change the button labels by using the Alert.CHAPTER 3 Alert component The Alert component lets you display a window that presents the user with a message and response buttons. Cancel. Yes. OK.0 in its Publish Settings. add the following line of code to enable accessibility: mx. Alert.accessibility. First. No. the button order is always OK. The window has a title bar that you can fill with text. and Alert.cancelLabel properties. You cannot change the order of the buttons in an Alert window.AlertAccImpl. In order to call the method successfully. regardless of how many instances you have of the component.okLabel. you add the component to the library without making it visible in the document. By dragging the Alert component from the Components panel to the Stage and then deleting the component.yesLabel.noLabel.

} }.OK) { trace("start stock app"). For example. 2. you could display an alert when a user doesn’t fill out a form properly. You must call the ActionScript Alert. when a stock hits a certain price.Alert. // Show alert dialog box. Alert. To create an application with the Alert component: 1. // Define action after alert confirmation. In the Actions panel. or when a user quits an application without saving the session.detail == Alert. myClickHandler. For more information. see “Alert class” on page 69.controls. You can use other ActionScript properties to modify the Alert window in an application. "Stock Price Alert". var myClickHandler:Function = function (evt_obj:Object) { if (evt_obj.OK). This adds the component to the library. Select File > New and choose Flash File (ActionScript 2. Alert. enter the following code in Frame 1 of the to define an event handler for the click event: import mx.OK | Alert.show() method to display an Alert window. Alert. 3.Using the Alert component You can use an Alert component whenever you want to announce something to a user. but doesn’t make it visible in the application. In this example. the Alert component appears when a stock hits a certain price.show("Launch Stock Application?". Drag the Alert component from the Components panel to the current document’s library.0). Alert parameters The Alert component has no authoring parameters. this. Creating an application with the Alert component The following procedure explains how to add an Alert component to an application while authoring. 64 Alert component .CANCEL. "stockIcon".

core. an icon with the linkage identifier “stockIcon”). Using styles with the Alert component You can set style properties to change the appearance of an Alert component. Possible values are "haloGreen". The parent must be a UIComponent object. When the user clicks either button. Customizing the Alert component The Alert component positions itself in the center of the component that was passed as its parent parameter. see “Using styles to customize component color and text” in Using ActionScript 2. Select Control > Test Movie.0) in the symbol’s coordinate system. NOT E The Alert. The Alert component does not respond to the setSize() method.View so that it inherits from UIComponent. The background color. If the name of a style property ends in “Color”. The default value is "haloGreen". If it is a movie clip.show() method includes an optional parameter that displays an icon in the Alert window (in this example. Flash calls the myClickHandler function. The default color is white for the Halo theme and 0xEFEBEF (light gray) for the Sample theme. "haloBlue". An Alert component supports the following styles: Style themeColor Theme Description Halo The base color scheme of a component. create a symbol named stockIcon and set it to Export for ActionScript in the Linkage Properties dialog box or the Create New Symbol dialog box. you can register the clip as mx. To include this icon in your test example. it is a color style property and behaves differently than noncolor style properties.This code creates an Alert window with OK and Cancel buttons. backgroundColor Both Customizing the Alert component 65 . include line breaks in the text. The graphics for the stockIcon symbol should be aligned to coordinates (0. The Alert window automatically stretches horizontally to fit the message text or any buttons that are displayed. The myClickHandler function instructs Flash to trace “start stock app” when you click the OK button. 4.0 Components. and "haloOrange". For more information. If you want to display large amounts of text.

For more information. The Alert component has a component-specific borderStyle setting of “alert” with the Halo theme and “outset” with the Sample theme. no text is displayed. Alert.show("This is a test alert". "right". The default value is "none". If this style is set to true and fontFamily does not refer to an embedded font. 66 Alert component .setStyle("color". The point size for the font. Otherwise. color Both Both Both disabledColor embedFonts fontFamily fontSize fontStyle Both Both Both Both fontWeight textAlign Both Both Both textDecoration textIndent The Alert component includes three different categories of text. the embedded font is not used. Setting the text properties for the Alert component itself provides default values for all three categories. This style must be set to true if fontFamily refers to an embedded font. The default value is 0x0B333C for the Halo theme and blank for the Sample theme. A Boolean value that indicates whether the font specified in fontFamily is an embedded font. The default value is 0. The default value is "normal". 0x000099). The default value is 10. The default color is 0x848384 (dark gray). _global.Alert. The default value is "_sans". The text color.Style borderStyle Theme Description Both The Alert component uses a RectBorder instance as its border and responds to the styles defined on that class.controls. as shown here: import mx. The text alignment: either "left". A number indicating the text indent. The default value is false. The font style: either "normal" or "italic". see “RectBorder class” on page 1065. All components can also accept the value "normal" in place of "none" during a setStyle() call. "Title").Alert. The text decoration: either "none" or "underline". The default value is "left". or "center". The font name for text. but subsequent calls to getStyle() return "none".styles. The color for text when the component is disabled. The font weight: either "none" or "bold". The default value is "none".

controls. "Validation Error").0 Components.To set the text styles for one category individually. "italic").CSSStyleDeclaration. and Button skins for the visual states of its buttons. Customizing the Alert component 67 . this default is also overridden.Alert.show("Name is a required field". Using skins with the Alert component The Alert component extends the Window component and uses its title background skin for the title background. Alert. see “Setting inheriting styles on a container” in Using ActionScript 2. a RectBorder class instance for its border. Alert. the Alert component provides static properties that are references to a CSSStyleDeclaration instance. var titleStyles = new CSSStyleDeclaration(). so you must explicitly set fontWeight to "bold" if that setting is desired. see “RectBorder class” on page 1065. modify the Flash UI Components 2/Themes/MMDefault/Window Assets/Elements/TitleBackground and Flash UI Components 2/Themes/MMDefault/Button Assets/ButtonSkin symbols. To skin the buttons and title bar while authoring. The default title style declarations set fontWeight to "bold". titleStyles. For information on skinning the RectBorder class. For more information. When you override the titleStyleDeclaration property.0 Components.titleStyleDeclaration = titleStyles. "bold"). import mx.setStyle("fontWeight".setStyle("fontStyle". Static property buttonStyleDeclaration messageStyleDeclaration titleStyleDeclaration Text affected Button Message Title The following example demonstrates how to set the title of an Alert component to be italicized: import mx.styles. NOT E Text styles set on an Alert component provide default text styles to its components through style inheritance. The border and background are provided by the RectBorder class by default. titleStyles. see “About skinning components” in Using ActionScript 2. For more information.

including the border.0). 8. Use the drawing tools to create a box with a red fill and black line. Default value ButtonSkin ButtonSkin ButtonSkin ButtonSkin ButtonSkin ButtonSkin titleBackground TitleBackground To set the title of an Alert component to a custom movie clip symbol: 1. 4. Set the name to TitleBackground. The pressed state of the default button. 10. 12. The identifier is automatically filled out with TitleBackground. 7. Drag an Alert component to the Stage and delete it. Click 13. Select Export for ActionScript. The rolled-over state of the default button. the border style to hairline. The window title bar. The up state of the default button. If the advanced view is not displayed. 68 Alert component . the Back button to return to the main timeline. click the Advanced button. 3. Set 11. Make sure that Export in First Frame is already selected.skins. Select File > New and choose Flash File (ActionScript 2. SkinElement is a simple class that can be used for all skin elements that don’t provide their own ActionScript implementation. The pressed state of the buttons. Set the box. 2. The rolled-over state of the buttons. 9. The Alert component sets the proper width of the skin as needed. Set the Class to mx. and click OK. Create a new symbol by selecting Insert > New Symbol. but it uses the existing height as the height of the title. Open the new symbol for editing. so that is positioned at (0.An Alert component uses the following skin properties to dynamically skin the buttons and title bar: Property buttonUp buttonUpEmphasized buttonDown buttonDownEmphasized buttonOver buttonOverEmphasized Description The up state of the buttons.0) and has a width of 100 and height of 22.SkinElement. 5. 6. It provides movement and sizing functionality for components.

controls. Select Control > Test Movie. Alert class 69 .This action adds the Alert component to the library and makes it available at runtime. you drag an Alert component to the Stage and delete it so that the component is in the document library but not visible in the application. which means that the lines of ActionScript code that follow the call to Alert. Then you call Alert. You can pass parameters to Alert.show() to display an Alert window.controls. Microsoft Windows).show() run immediately. Alert class Inheritance MovieClip > UIObject class > UIComponent class > View > ScrollView > Window component > Alert mx. To understand more about the Alert class. Add ActionScript code to the main timeline to create a sample Alert instance. 15. Because ActionScript is asynchronous. a call to Alert.show() does not return until the user has taken an action. such as clicking a button.show("This is a skinned Alert component". import mx. Method summary for the Alert class The following table lists the method of the Alert class. see “Window component” on page 1467 and “PopUpManager class” on page 989. Alert. You must add listeners to handle the click events that are broadcast when a user clicks a button and then continue your code after the event is broadcast. a title bar. and buttons to the Alert window. 14.show() Description Creates an Alert window with optional parameters.show() that add a message. N OTE In operating environments that are blocking (for example.Alert ActionScript Class Name To use the Alert component.Alert."Title"). Method Alert. the Alert component is not blocking.

deletePopUp() Description Removes a window instance created by PopUpManager.setStyle() Methods inherited from the UIComponent class The following table lists the methods the Alert class inherits from the UIComponent class. 70 Alert component . Destroys a component instance. ) UIObject. Moves the object to the requested position. Gets the style property from the style declaration or object. Method Description UIObject.createClassObject( Creates an object on the specified class. Method UIComponent. Sets focus to the component instance. Forces validation of the object so it is drawn in the current frame.invalidate() UIObject. UIObject.move() UIObject.setFocus() Description Returns a reference to the object that has focus. Method Window.createObject() UIObject.createPopUp().setSkin() UIObject. Calls a function when parameters have been set in the Property and Component inspectors. Marks the object so it is redrawn on the next frame interval. Sets a skin in the object. Methods inherited from the Window class The following table lists the methods the Alert class inherits from the Window class.getFocus() UIComponent.Methods inherited from the UIObject class The following table lists the methods the Alert class inherits from the UIObject class.destroyObject() Creates a subobject on an object. Sets the style property on the style declaration or object.getStyle() UIObject.doLater() UIObject.redraw() UIObject.

okLabel Alert. Read-only. A number indicating the scaling factor in the y direction of the object. A constant hexadecimal value indicating whether a No button should be displayed in the Alert window.right UIObject. relative to the bottom edge of its parent. The label text for the Cancel button. When calling these properties from the Alert object. use the form Alert. The label text for the Yes button. Read-only. A constant hexadecimal value indicating whether a Cancel button should be displayed in the Alert window.Property summary for the Alert class The following table lists properties of the Alert class. relative to the right edge of its parent.bottom Description Read-only. in pixels.propertyName. The width of each button.yesLabel Properties inherited from the UIObject class The following table lists the properties the Alert class inherits from the UIObject class.left UIObject.scaleY Alert class 71 .buttonHeight Description The height of each button.The position of the bottom edge of the object.height UIObject.noLabel Alert. The default value is 100. the position of the right edge of the object.NO Alert. in pixels. A number indicating the scaling factor in the x direction of the object. in pixels. Property UIObject. The default value is 22. in pixels.CANCEL Alert. The label text for the No button.YES Alert.scaleX UIObject. UIObject. the height of the object.buttonWidth Alert. the left edge of the object. relative to its parent.cancelLabel Alert. relative to its parent. A constant hexadecimal value indicating whether a Yes button should be displayed in the Alert window. Read-only. Alert. Property Alert. The label text for the OK button. A constant hexadecimal value indicating whether an OK button should be displayed in the Alert window.OK Alert.

The style declaration that formats the text in the title bar. Read-only. Property UIComponent.contentPath Window.propertyName.enabled UIComponent. the width of the object.titleStyleDeclaration Event summary for the Alert class The following table lists an event of the Alert class. Sets the name of the content to display in the window. Properties inherited from the UIComponent class The following table lists the properties the Alert class inherits from the UIComponent class. the position of the top edge of the object. When calling these properties from the Alert object.closeButton Description Indicates whether a close button is (true) or is not (false) included on the title bar. 72 Alert component . in pixels. The text that appears in the title bar. in pixels.visible UIObject.y Description Read-only.top UIObject. A reference to the content (root movie clip) of the window. Properties inherited from the Window class The following table lists the properties the Alert class inherits from the Window class.click Description Broadcast when a button in an Alert window is clicked.width UIObject.Property UIObject. A Boolean value indicating whether the object is visible (true) or not (false). Window. the top edge of the object. the left edge of the object. Read-only.tabIndex Description Indicates whether the component can receive focus and input. relative to its parent. A number indicating the tabbing order for a component in a document. in pixels. use the form Alert. Property Window. Event Alert. Read-only.title Window.x UIObject.content Window.

Broadcast when an object’s state changes from visible to invisible.load UIObject.move UIObject. Broadcast when the object has moved. UIObject. Broadcast when a key is pressed. Events inherited from the Window class The following table lists the events the Alert class inherits from the Window class.hide UIObject.reveal UIObject. Broadcast when an object has been resized.unload Events inherited from the UIComponent class The following table lists the events the Alert class inherits from the UIComponent class. Event Window. Event UIObject.focusOut UIComponent.eventName. Broadcast when a window is created.eventName.draw UIObject.click Window.complete Description Broadcast when the close button is clicked (released). When calling these events from the Alert object. Broadcast when an object loses focus.keyUp Description Broadcast when an object receives focus. Alert class 73 .Events inherited from the UIObject class The following table lists the events the Alert class inherits from the UIObject class. use the form Alert. Broadcast when a key is released. use the form Alert.resize Description Broadcast when an object is about to draw its graphics. When calling these events from the Alert object. Broadcast when an object’s state changes from invisible to visible.focusIn UIComponent. Broadcast when subobjects are being created.keyDown UIComponent. Broadcast when the subobjects are being unloaded. Event UIComponent.

79.Alert.buttonHeight Description Property (class). Usage Alert.0.CANCEL).0.OK | Alert. The default value is 22. Example With an Alert component already in the library. // Show alert dialog box. Edition Flash MX Professional 2004. a class (static) property that changes the height of the buttons. Alert. Alert.controls. this example resizes the buttons: import mx.Alert.buttonWidth Availability Flash Player 6 (6.0).buttonWidth Alert.show("Launch Stock Application?". Alert.buttonWidth 74 Alert component .buttonHeight Availability Flash Player 6 (6.buttonHeight = 50.0). // Adjust button sizes. "Stock Price Alert".buttonWidth = 150. Edition Flash MX Professional 2004.79. Usage Alert. See also Alert. Alert.

controls.show() method. the Cancel button has initial focus and is triggered when the user presses Enter (Windows) or Return (Macintosh). Alert. a property with the constant hexadecimal value 0x8.0). Alert.OK | Alert.buttonHeight Alert.buttonWidth = 150.Alert. Example With an Alert component already in the library.CANCEL Availability Flash Player 6 (6. that button is triggered when the user presses Enter.CANCEL 75 . If the user tabs to another button. When used as a value for the defaultButton parameter.buttonHeight = 50. Edition Flash MX Professional 2004. This property can be used for the flags or defaultButton parameter of the Alert. a class (static) property that changes the width of the buttons. Usage Alert.CANCEL).0. Alert.79. The default value is 100. // Show alert dialog box.CANCEL Description Property (constant). Alert. "Stock Price Alert". Alert. When used as a value for the flags parameter.Description Property (class). See also Alert.show("Launch Stock Application?". // Adjust button sizes. this property indicates that a Cancel button should be displayed in the Alert window. add this ActionScript to the first frame of the main timeline to resize the buttons: import mx.

a class (static) property that indicates the label text on the Cancel button.0). this).CANCEL.show("This is a generic Alert window". Usage Alert. Alert.cancelLabel Availability Flash Player 6 (6. Edition Flash MX Professional 2004.OK | Alert.Alert. Alert.OK as values for the flags parameter and displays an Alert component with an OK button and a Cancel button: import mx.cancelLabel = "cancellation". 76 Alert component . Example The following example sets the Cancel button’s label to “cancellation”: Alert. "Alert Test".Example The following example uses Alert. Alert.controls.cancelLabel Description Property (class).79.CANCEL and Alert.0.

CANCEL.0).OK. depending on which button was clicked. clickHandler[. Yes. Alert.click 77 .NO. Components use a dispatcher/listener event model.show() method and pass it the name of the handler as a parameter. You call the Alert.click Availability Flash Player 6 (6. the listener is called. flags[. Edition Flash MX Professional 2004. The Alert component dispatches a click event when one of its buttons is clicked and the event is handled by a function.0. on a listener object (listenerObject) that you create. Each event object has properties that contain information about the event. see “EventDispatcher class” on page 495. icon[. or Alert. also called a handler.YES. Alert. You can use these properties to write code that handles the event. When the event occurs. or Cancel button is clicked. The Alert. it automatically passes an event object (eventObject) to the handler.Alert. parent[.click event’s event object has an additional detail property whose value is Alert. Usage var clickHandler:Function = function(eventObject:Object) { // Insert code here. broadcast to the registered listener when the OK.79. Alert. No. defaultButton]]]]]]) Description Event. When a button in the Alert window is clicked. } Alert.show(message[. For more information. title[.

Edition Flash MX Professional 2004.79. "Error". case Alert. // Define button actions.okLabel).controls. break.show("This is a test of errors". myClickHandler).OK : trace("You clicked: " + Alert. Usage Alert.CANCEL) to the Output panel. The event handler is passed to the Alert. Alert. // Display dialog box. this.CANCEL : trace("You clicked: " + Alert. Alert.Example With an Alert component already in the library.CANCEL. break. } }. The detail property of the event object is then used in a trace statement to send the name of the button that was clicked (Alert.detail) { case Alert.show() method as the fifth parameter. import mx.NO Availability Flash Player 6 (6. Alert.0). add this ActionScript to the first frame of the main timeline to create an event handler called myClickHandler. var myClickHandler:Function = function (evt_obj:Object) { switch (evt_obj.cancelLabel).Alert.NO 78 Alert component . The event object is captured by myClickHandler in the evt parameter.OK or Alert.OK | Alert.0.

Alert. a property with the constant hexadecimal value 0x2.Description Property (constant).79. "Alert Test". Alert.noLabel Availability Flash Player 6 (6. If the user tabs to another button. When used as a value for the defaultButton parameter. Example The following example uses Alert.YES as values for the flags parameter and displays an Alert component with a No button and a Yes button: import mx.YES.noLabel Description Property (class).NO and Alert.0.NO | Alert.noLabel = "nyet". a class (static) property that indicates the label text on the No button. the Cancel button has initial focus and is triggered when the user presses Enter (Windows) or Return (Macintosh). Alert. When used as a value for the flags parameter.0). Usage Alert. Edition Flash MX Professional 2004. Alert.controls.noLabel 79 . Example The following example sets the No button’s label to “nyet”: Alert. this property indicates that a No button should be displayed in the Alert window. that button is triggered when the user presses Enter. This property can be used for the flags or defaultButton parameter of the Alert. this).show("This is a generic Alert window". Alert.show() method.

show() are modal.NONMODAL Availability Flash Player 6 (6. The second button opens a nonmodal window.controls. a. modalListener).OK. Usage Alert. modal_button.Alert. Alert.Button. This property indicates that an Alert window should be nonmodal.Alert. To test this example. "modal_button".79. {_x:10. "nonmodal_button". Clicking one button opens a modal window. which allows users to interact with buttons and instances underneath the displayed window.NONMODAL Description Property (constant). this. a property with the constant hexadecimal value 0x8000.addEventListener("click". which means that users cannot click anything except the currently open window. function modalListener(evt_obj:Object):Void { var a:Alert = Alert. Edition Flash MX Professional 2004. which allows the user to continue clicking the buttons underneath the currently open nonmodal Alert window.controls.move(100.show("This is a modal Alert window". this). {_x:120.0). 20.createClassObject(mx. } 80 Alert component . 100). _y:10}). "Alert Test". This property can be used for the flags parameter of the Alert. 10.controls. this. _y:10}). add instances of both the Alert component and the Button component to the current document’s library and add the following code to Frame 1 of the main timeline: import mx. modal_button. By default. which prevents the user from further clicking the buttons until the Alert window is closed.0.show() method.label = "modal".createClassObject(mx. Example The following example displays two Button component instances on the Stage. windows generated with Alert.Button.

that button is triggered when the user presses Enter.0.79.CANCEL as values for the flags parameter and displays an Alert component with an OK button and a Cancel button: import mx.OK | Alert. function nonmodalListener(evt_obj:Object):Void { var a:MovieClip = Alert.controls. "Alert Test".OK 81 .addEventListener("click". } Alert. nonmodal_button.show() method. When used as a value for the flags parameter.OK Availability Flash Player 6 (6.label = "nonmodal".OK and Alert. the OK button has initial focus and is triggered when the user presses Enter (Windows) or Return (Macintosh). Edition Flash MX Professional 2004. this). Example The following example uses Alert. If the user tabs to another button. Alert. Usage Alert. This property can be used for the flags or defaultButton parameter of the Alert.show("This is a nonmodal Alert window". a.NONMODAL. "Alert Test".0). this property indicates that an OK button should be displayed in the Alert window. Alert. Alert.OK | Alert. a property with the constant hexadecimal value 0x4. nonmodalListener).nonmodal_button. this).Alert. Alert. When used as a value for the defaultButton parameter.OK Description Property (constant).move(100.show("This is a generic Alert window". 100).CANCEL.

Alert.Alert. parent[.NO. An optional parameter that indicates the buttons to display in the Alert window.okLabel = "okay".0). Alert.okLabel Description Property (class). Use one or more of the following values: Alert.YES. separate the values with a | character. if you omit it. Edition Flash MX Professional 2004. the title bar is blank. When you use more than one value. Alert. Alert.OK. Example The following example sets the OK button’s label to “okay”: Alert. title[. Usage Alert.79.0. The text in the Alert title bar. which displays an OK button. flags 82 Alert component .79. flags[.CANCEL. clickHandler[. Usage Alert.show(message[.okLabel Availability Flash Player 6 (6.show() Availability Flash Player 6 (6. This parameter is optional. icon[.OK.0). defaultButton]]]]]]) Parameters message title The message to display. The default value is Alert.0. Edition Flash MX Professional 2004. a class (static) property that indicates the label text on the OK button.

YES. world!"). a class (static) method that displays an Alert window with a message. This parameter is optional. This parameter can be one of the following values: Alert. optional buttons. The parent window for the Alert component. which contains the flag value of the button that was clicked (Alert.NO. The parent window must be a subclass of the UIComponent class. The icon appears to the left of the message text. The title of the alert appears at the top of the window and is left-aligned. The buttons are centered below the message text and the icon. there is an additional detail property.show() 83 .controls. either as another Flash component that is a subclass of UIComponent. Alert. In addition to the standard click event object properties. or as a custom window that is a subclass of the UIComponent (for more information see “About inheritance” in Learning ActionScript 2. Description Method (class).show("Hello.NO). parent clickHandler A handler for the click events broadcast when the buttons are clicked.Alert. see “Using listeners to handle events” in Using ActionScript 2. If a user tabs to another button. this symbol is used as an icon displayed to the left of the alert text. A nonmodal window allows a user to interact with other windows in the application.CANCEL. icon A string that is the linkage identifier of a symbol in the library. Alert. For more information.0 in Adobe Flash).You can also use Alert.YES. Alert. Alert.0 Components. The Alert window centers itself in the parent window. Use the value null or undefined to specify the _root timeline. Alert. Alert. This handler can be a function or an object. and an optional icon. an optional title.NONMODAL to indicate that the Alert window is nonmodal. defaultButton Indicates which button has initial focus and is clicked when a user presses Enter (Windows) or Return (Macintosh).OK. This parameter is optional. Example The following code is a simple example of a modal Alert window with an OK button: mx. Returns The Alert instance that is created. that button is triggered when the Enter key is pressed.CANCEL.OK. Alert.

OK). that button is triggered when the user presses Enter. var dialog_obj:Object = Alert.OK) { trace(Alert.79.Alert. null.CANCEL.detail == Alert. "testIcon". the Yes button has initial focus and is triggered when the user presses Enter (Windows) or Return (Macintosh). } else if (evt_obj. a property with the constant hexadecimal value 0x1.The following code defines a click handler that sends a message to the Output panel about which button was clicked. // Display dialog box.cancelLabel).show() method. myClickHandler. Alert. drag it to the Stage and then delete it): import mx. Alert. var myClickHandler:Function = function (evt_obj:Object) { if (evt_obj.show("Test Alert".0).detail == Alert. This property can be used for the flags or defaultButton parameter of the Alert.YES Availability Flash Player 6 (6. 84 Alert component . (You must have an Alert component in the library for this code to display an alert.controls.okLabel). Edition Flash MX Professional 2004.0. Usage Alert. Alert.CANCEL) { trace(Alert. If the user tabs to another button. to add the component to the library. this property indicates that a Yes button should be displayed in the Alert window. // Define button actions. } }.YES Description Property (constant).OK | Alert. When used as a value for the flags parameter. "Test". When used as a value for the defaultButton parameter.

yesLabel = "da".NO and Alert. Alert. Alert. Alert.yesLabel Description Property (class).yesLabel Availability Flash Player 6 (6.NO | Alert.0).79.0.Example The following example uses Alert. "Alert Test".YES as values for the flags parameter and displays an Alert component with a No button and a Yes button: import mx.yesLabel 85 . Example The following example sets the OK button’s label to “da”: Alert.Alert. a class (static) property that indicates the label text on the Yes button.controls. Usage Alert. Edition Flash MX Professional 2004.YES.show("This is a generic Alert window". Alert. this).

86 Alert component .

If you are using the version 3 component.0 Components. you must add the following line of code: mx. When you add the Button component to an application. For more information about controlling focus. An enabled button receives focus if you click it or tab to it. A live preview of each Button instance reflects changes made to parameters in the Property inspector or Component inspector during authoring. 87 . A toggle button stays pressed when clicked and returns to its up state when clicked again. This document discusses the version 2 component.accessibility. You can also change the behavior of a button from push to toggle. see “FocusManager class” on page 717 or “Creating custom focus navigation” in Using ActionScript 2. You can add a custom icon to a button. see “Using the Button” in Using ActionScript 3.enableAccessibility(). a button doesn’t receive mouse or keyboard input. Presses or releases the component and triggers the click event. regardless of how many instances you have of the component. you can use the following keys to control it: Key Shift+ Spacebar Description Moves focus to the previous object. NOT E 4 A Button component is supported for both ActionScript 2. However.0 and ActionScript 3. A button can be enabled or disabled in an application.0.CHAPTER 4 Button component The Button component is a resizable rectangular user interface button.0 Components. you can use the Accessibility panel to make it accessible to screen readers. When a Button instance has focus. In the disabled state. You enable accessibility for a component only once.ButtonAccImpl. in the live preview a custom icon is represented on the Stage by a gray square. First. Moves focus to the next object.

You can set the following additional parameters for each Button component instance in the Component inspector (Window > Component Inspector): 88 Button component . You can also enter this value for the Button. see Button. this parameter specifies whether the button is pressed (true) or released (false). you need to select or create a movie clip or graphic symbol to use as the icon. open the Linkage dialog box from the Library pop-up menu. You could also add Previous and Next buttons to a presentation. If true. labelPlacement orients the label text on the button in relation to the icon. use FocusManager. the default value is Button.Using the Button component A button is a fundamental part of any form or web application. most forms have a Submit button. it extends beyond the button’s borders. This is the value to enter for the icon parameter in the Property inspector or Component inspector. the default value is right. top. The value is the linkage identifier of a movie clip or graphic symbol in the library. label sets the value of the text on the button. You can use buttons wherever you want a user to initiate an event. the button behaves like a normal push button. To designate a button as the default push button in an application (the button that receives the click event when a user presses Enter). For example. For more information. or bottom. The default value is false.icon ActionScript property. right. The symbol should be registered at 0. and enter a linkage identifier. if the toggle parameter is true. Button parameters You can set the following authoring parameters for each Button component instance in the Property inspector or Component inspector (Window > Component Inspector menu option): icon adds a custom icon to the button. the button remains in the down state when clicked and returns to the up state when clicked again.defaultPushButton. Select the icon symbol in the Library panel. selected toggle turns the button into a toggle switch. NOT E If an icon is larger than the button. To add an icon to a button.0 for appropriate layout on the button.labelPlacement. This parameter can be one of four values: left. If false. The default value is false. there is no default value.

This uses the method “EventDispatcher. a Boolean value that indicates whether the object is visible (true) or not (false). open the Actions panel. In this example. Enter Click me for the label parameter. ■ Set the toggle property to true. Enter BtnIcon for the icon parameter. setting these properties in the Component inspector will have no visible effect. Creating an application with the Button component The following procedure explains how to add a Button component to an application while authoring. For more information. Drag a Button component from the Components panel to the Stage. clicked). These properties can be used if you make a custom layout manager for your application. To use an icon. They are defined in UIObject. The default value is true.0). do the following: ■ ■ ■ Enter the instance name my_button. NOT E visible is The minHeight and minWidth properties are used by internal sizing routines.enabled is a Boolean value that indicates whether the component can receive focus and input. and events. To create an application with the Button component: 1. see “Button class” on page 99. there must be a movie clip or graphic symbol in the library with a linkage identifier to use as the icon parameter. methods. 2. } my_button. In the Property inspector. Otherwise. Select File > New and choose Flash File (ActionScript 2. and enter the following code: function clicked(){ trace("You clicked the button!"). and are overridden by different components as needed. the linkage identifier is BtnIcon. 4.addEventListener()” on page 496 with a custom function to handle the event. the button displays a message when you click it. 3. Using the Button component 89 . You can write ActionScript to control these and additional options for the Button component using its properties. In this example. Select Frame 1 in the Timeline. The last line of code calls a clicked event handler function for the “click” event. The default value is true.addEventListener("click".

When you click the button. but doesn’t make it visible in the application. 10. Flash displays the message “You clicked the button!”. 20). Drag the Accordion component from the Components panel to the current document’s library. 6. The method UIObject. When you click the button. To create a Button using ActionScript: 1.addEventListener()” on page 496 with a custom function to handle the event. 90 Button component . Select Control > Test Movie. In the first frame of the main timeline. } my_button.0). This adds the component to the library. 3. 2. Select Control > Test Movie. To use a Button event with another component: 1. Then. As you use the Button component with other components. you can create more sophisticated event handler functions. Flash displays the message “You clicked the button!”. This uses the method “EventDispatcher.controls.Button. "my_button". Now. 5. 2.createClassObject() is used to create the Button instance named my_button and specify a label property. add the following ActionScript to create an event listener and an event handler function: function clicked() { trace("You clicked the button!"). 3.addEventListener("click". add the following ActionScript to the Actions panel to create a Button instance: this.5. clicked). the code uses the method UIObject. my_button.createClassObject(mx.0).move() to position the button. but doesn’t make it visible in the application. Drag the Button component from the Components panel to the current document’s library. Select File > New and choose Flash File (ActionScript 2. Select File > New and choose Flash File (ActionScript 2. the “click” event causes the Accordion component to change the display of the panels. {label:"Click me"}). 4. 6. In this example. This adds the component to the library.move(20. Drag the Button component from the Components panel to the current document’s library.

panelOne_button. 7. switch (evt_obj. changePanel). 40).move(120. Using the Button component 91 . 0). function changePanel(evt_obj:Object):Void { // Change Accordion view depending on button selected. "my_acc". panelOne_button. Select Control > Test Movie.move() to position the instances. add the following ActionScript to create event listeners and event handler functions: // Create Handler for the button event.addEventListener("click". panelTwo_button. Now. this.containers. 5. 6.createChild(mx. break._name) { case "panelOne_button" : my_acc.Accordion.View. changePanel).Button. "panelTwo". } } // Add Listeners for the buttons. "panelOne". {label:"Panel Two"}). In the first frame of the main timeline.controls.move(10.createClassObject(mx.move(10. When you click a button.createChild(mx.core. my_acc. case "panelTwo_button" : my_acc. This process uses the method EventDispatcher.core. the Accordion changes the current panel. {label:"Panel One"}). 20.Button. 10.View. 10). my_acc.createClassObject(mx. the code uses the method UIObject.4. this. "panelTwo_button".addEventListener() with a custom function to handle the events. "panelOne_button". add the following ActionScript to the Actions panel to create a Button instance: this.createClassObject() to create the Button and Accordion instances.selectedIndex = 1.createClassObject(mx.selectedIndex = 0. my_acc. break. {label: "Panel One"}).addEventListener("click". Then. This process uses the method UIObject. panelTwo_button. {label: "Panel Two"}).controls.target. 10).

setSize()) or any applicable properties and methods of the Button class (see “Button class” on page 99). The default value is "haloGreen". See “Using skins with the Button component” on page 93. If the name of a style property ends in “Color”. You can only modify the up background color in the Halo theme by skinning the button. select the component on the Stage and use the Free Transform tool or any of the Modify > Transform commands. backgroundColor Sample borderStyle Sample 92 Button component . The Halo theme uses 0xF8F8F8 (very light gray) for the button background color when the button is up and themeColor when the button is pressed. With the Halo theme. and "haloOrange". the icon extends beyond the button’s borders. The background color. Using styles with the Button component You can set style properties to change the appearance of a button instance. see “Using styles to customize component color and text” in Using ActionScript 2. If the bounding box is too small to fit the label. A Button component supports the following styles: Style themeColor Theme Description Halo The base color scheme of a component. The default value is 0xEFEBEF (light gray). See “RectBorder class” on page 1065. "haloBlue". use the setSize() method (see UIObject. it is a color style property and behaves differently than noncolor style properties. At runtime. For more information. Possible values are "haloGreen".0 Components. The Button component uses a RectBorder instance as its border in the Sample theme and responds to the styles defined in that class. Resizing the button does not change the size of the icon or label.Customizing the Button component You can transform a Button component horizontally and vertically while authoring and at runtime. the label is clipped to fit. the Button component uses a custom rounded border whose colors cannot be modified except for themeColor. While authoring. If an icon is larger than the button. If you increase the size of the instance. The bounding box of a Button instance is invisible and also designates the hit area for the instance. you also increase the size of the hit area.

The point size for the font. The default color is 0x848384 (dark gray). The default value is "none". Customizing the Button component 93 . The default value is "_sans". see “Using ActionScript to draw Button skins” on page 96. but subsequent calls to getStyle() return "none". (For more information. The default value is false. The default value is 0x0B333C for the Halo theme and blank for the Sample theme. If this style is set to true and fontFamily does not refer to an embedded font. This style must be set to true if fontFamily refers to an embedded font. create new movie clip symbols with the desired graphics and set the symbol linkage identifiers using ActionScript. The font name for text. The default value is "normal". All components can also accept the value "normal" in place of "none" during a setStyle() call.) The default implementation of the Button skins provided with both the Halo and Sample themes uses the ActionScript drawing API to draw the button states. The text decoration: either "none" or "underline". A Boolean value that indicates whether the font specified in fontFamily is an embedded font. The color for text when the component is disabled. no text is displayed. The default value is "none". Otherwise. The font style: either "normal" or "italic".Style color Theme Description Both Both Both The text color. the embedded font is not used. and uses a single movie clip symbol associated with one ActionScript class to provide all skins for the Button component. disabledColor embedFonts fontFamily fontSize fontStyle Both Both Both Both fontWeight textDecoration Both Using skins with the Button component The Button component includes 32 different skins that can be customized to correspond to the border and icon in 16 different states. The default value is 10. The font weight: either "none" or "bold". To skin the Button component while authoring.

The toggled state. When the toggle property is set to true. Provides a selected and unselected value and uses different skins to demonstrate the current value. determines if the Button is selected (true or false). The disabled-toggled state. The up (normal) state of an emphasized button. and a border and icon for each state. Shows whether or not the button is allowing user interaction. The pressed-toggled state. by default. it displays its Over state when the pointer moves over it. For a Button instance whose toggle property is set to false. such as the default button in a form. If the toggle parameter is set to true. are the only way this value is depicted on screen. The over state. If the pointer moves off the button while the mouse is pressed. enabled toggle selected If a button is enabled. the skin depends on the selected property. the button returns to its original state and it retains input focus. The state of a Button instance is controlled by four properties and user interaction. The pressed state. The disabled state. 94 Button component . it displays its disabled state. A Button component supports the following skin properties: Property falseUpSkin falseDownSkin falseOverSkin falseDisabledSkin trueUpSkin trueDownSkin trueOverSkin trueDisabledSkin falseUpSkinEmphasized Description The up (normal) state. The following properties affect skins: Property emphasized Description Provides two different looks for Button instances and is typically used to highlight one button. Different skins are used to identify the value and.The Button component has many skins because a button has so many states. If a button is disabled. regardless of user interaction. the state of the button does not change until the mouse is released over it. The over-toggled state. When the toggle property is true. The button returns to its Over state when the mouse is released. The button receives input focus and displays its Down state when it’s pressed. the false skins are used.

The default value for all skin properties ending in “Skin” is ButtonSkin. The icon toggled state. The icon over state of an emphasized button. trueUpSkinEmphasized trueDownSkinEmphasized trueOverSkinEmphasized trueDisabledSkinEmphasized falseUpIcon falseDownIcon falseOverIcon falseDisabledIcon trueUpIcon trueOverIcon trueDownIcon trueDisabledIcon falseUpIconEmphasized falseDownIconEmphasized falseOverIconEmphasized The toggled state of an emphasized button. whereas those with the “Icon” suffix provide a small icon. The icon pressed-toggled state. The properties with the “Skin” suffix provide a background and border. The icon disabled state. The pressed-toggled state of an emphasized button. The icon disabled-toggled state. The icon pressed-toggled state of an emphasized button. The icon pressed state. The icon over-toggled state of an emphasized button.Property falseDownSkinEmphasized falseOverSkinEmphasized Description The pressed state of an emphasized button. The disabled-toggled state of an emphasized button. The icon up state of an emphasized button. trueUpIconEmphasized trueOverIconEmphasized trueDownIconEmphasized trueDisabledIconEmphasized The icon toggled state of an emphasized button. falseDisabledIconEmphasized The icon disabled state of an emphasized button. falseDisabledSkinEmphasized The disabled state of an emphasized button. The over state of an emphasized button. The icon over-toggled state. The over-toggled state of an emphasized button. The icon up state. The icon disabled-toggled state of an emphasized button. and the default for all “Icon” properties is undefined. The icon pressed state of an emphasized button. The icon over state. Customizing the Button component 95 .

0 Components Help. static var symbolOwner:Object = RedGreenBlueSkin.ext. To create an ActionScript class to use as the skin and provide different states. To see an interactive demo showing when each skin is used. 96 Button component . see Using ActionScript 2. class RedGreenBlueSkin extends RectBorder { static var symbolName:String = "RedGreenBlueSkin". Select File > New and choose ActionScript File. If a Button instance has both the icon property and icon style properties set.core.skins. The following table shows the border style that is set for each skin: Property falseUpSkin falseDownSkin falseOverSkin falseDisabled trueUpSkin trueDownSkin trueOverSkin trueDisabledSkin Border style falseup falsedown falserollover falsedisabled trueup truedown truerollover truedisabled To create an ActionScript customized Button skin: 1.UIObjectExtensions. import mx.In addition to the icon skins. The Halo implementation uses an extension of the RectBorder class and some custom drawing code to draw the states.RectBorder. the skin can read the borderStyle style property of the skin and emphasized property of the parent to determine the state. 2. The difference between the standard property and style property is that through the style property you can set icons for the individual states. Copy the following ActionScript to the file: import mx. whereas with the standard property only one icon can be set and it applies to all states. the Button component also supports a standard icon property. The Sample implementation uses the same skin and the same ActionScript class as the Halo theme. Using ActionScript to draw Button skins The default skins in both the Halo and Sample themes use the same skin element for all states and draw the actual graphics through ActionScript. with different properties set in ActionScript to alter the appearance of the Button. the instance may not behave as anticipated.

} // Required for skins. } clear(). var thickness = _parent.emphasized ? 2 : 0. 3. __width.Extensions().skinRegistry["ButtonSkin"] = true. drawRect(0. break. switch (borderStyle) { case "falseup": case "falserollover": case "falsedisabled": c = 0x7777FF. For this example. } This class creates a square box based on the border style: a blue box for the false up. case "trueup": case "truedown": case "truerollover": case "truedisabled": c = 0xFF7777. 100). endFill(). name the file RedGreenBlueSkin. Customizing the Button component 97 . case "falsedown": c = 0x77FF77. Save the file. 0. beginFill(c. static var UIObjectExtensionsDependency = UIObjectExtensions.function size():Void { var c:Number. _global. break. break. // color var borderStyle:String = getStyle("borderStyle"). and a red box for the expanded child. a green box for the normal pressed state. and disabled states. __height). 0. rollover. static function classConstruct():Boolean { UIObjectExtensions. return true. } static var classConstructed:Boolean = classConstruct(). It draws a hairline border in the normal case and a thick border if the button is emphasized.as. lineStyle(thickness. 100).

which is the method used by the skins provided in both the Halo and Sample themes. Make sure that Export in First Frame is already selected. Using movie clips to customize Button skins The example above demonstrates how to use an ActionScript class to customize the Button skin. including the border. Set the name to ButtonSkin. If the advanced view is not displayed. Select Control > Test Movie. 8. Create a new symbol by selecting Insert > New Symbol. 5. Open the new symbol for editing. it is simpler in this case to use different movie clip symbols as the skins. Make sure that Export in First Frame is already selected. Create a new symbol by selecting Insert > New Symbol. 10. Select Export for ActionScript. click the Advanced button. Set the name to RedButtonSkin. To create movie clip symbols for Button skins: 1. 6. If the advanced view is not displayed.4. 7.0). Select Export for ActionScript.0). because the example uses simple colored boxes. 7. 8. a Button component to the Stage. the border style to hairline. The identifier is automatically filled out with RedButtonSkin. 10. Set the Class to mx. Set 11.SkinElement.0) and has a width and height of 100. 12. the Class to RedGreenBlueSkin. Select File > New and choose Flash File (ActionScript 2. 5. 4. Use the drawing tools to create a box with a red fill and black line. and click OK. Set the box. click the Advanced button. 9. 3. Select File > New and choose Flash File (ActionScript 2. However. Drag 13. 9. so that it is positioned at (0. The identifier is automatically filled out with ButtonSkin. 98 Button component . 6. The SkinElement class resizes the content as appropriate.skins. Save the file in the same folder as the AS file. Set 11. 2. and click OK.

14. falseDisabledSkin = "BlueButtonSkin". trueDisabledSkin = "RedButtonSkin". Button class Inheritance MovieClip > UIObject class > UIComponent class > SimpleButton class > mx. Set 16.12. Copy the following ActionScript code to the Actions panel with the Button instance selected. steps 2-11 and create green and blue skins. falseOverSkin = "BlueButtonSkin".controls. Click the Back button to return to the main timeline.Button Button ActionScript Class Name The properties of the Button class let you do the following at runtime: add an icon to a button.0 Components. see “Creating custom focus navigation” in Using ActionScript 2. falseDownSkin = "GreenButtonSkin". create a text label. The Button component uses the Focus Manager to override the default Flash Player focus rectangle and draw a custom focus rectangle with rounded corners. named accordingly. Repeat 13. the toggled property value to true to see all three skins. For more information. onClipEvent(initialize) { falseUpSkin = "BlueButtonSkin". trueUpSkin = "RedButtonSkin". trueOverSkin = "RedButtonSkin". Select Control > Test Movie. Drag 15. Setting a property of the Button class with ActionScript overrides the parameter of the same name set in the Property inspector or Component inspector. Button class 99 . a Button component to the Stage. trueDownSkin = "RedButtonSkin". and indicate whether the button acts as a push button or as a toggle switch. } 17.

invalidate() UIObject.createClassObject() Creates an object on the specified class. Resizes the object to the requested size. The Button component class is different from the built-in ActionScript Button object. Marks the object so it is redrawn on the next frame interval.version). Sets a skin in the object.doLater() UIObject. The version property returns a string that indicates the version of the component. Class properties are available only on the class itself. Method Description UIObject. When calling these methods from the Button object.controls.move() UIObject.version). Calls a function when parameters have been set in the Property and Component inspectors. Sets the style property on the style declaration or object. use the following code: trace(mx. use the form buttonInstance. returns undefined. N OTE 100 The code trace(myButtonInstance. Methods inherited from the UIObject class The following table lists the methods the Button class inherits from the UIObject class.getStyle() UIObject. Method summary for the Button class There are no methods exclusive to the Button class.createObject() UIObject. Forces validation of the object so it is drawn in the current frame.setSkin() UIObject. which is a class property.methodName.setSize() UIObject. Destroys a component instance.destroyObject() Creates a subobject on an object.Each component class has a version property.redraw() UIObject. UIObject. To access this property.Button.setStyle() Button component . UIObject. Moves the object to the requested position. Gets the style property from the style declaration or object.

methodName. Sets focus to the component instance. SimpleButton. The default value is false. Properties inherited from the SimpleButton class The following table lists the properties the Button class inherits from the SimpleButton class. property is set to true.toggle Button class 101 .icon Button. use the form buttonInstance. Method UIComponent. Specifies the text that appears in a button. When calling these methods from the Button object.setFocus() Description Returns a reference to the object that has focus. Specifies the orientation of the label text in relation to an icon.Methods inherited from the UIComponent class The following table lists the methods the Button class inherits from the UIComponent class. Property SimpleButton. The default value is false. A Boolean value indicating whether the button behaves as a toggle switch (true) or not (false). When accessing these properties. SimpleButton.labelPlacement Description Specifies an icon for a button instance.emphasized Description Indicates whether a button has the look of a default push button.propertyName. Property Button. Property summary for the Button class The following table lists properties of the Button class.getFocus() UIComponent.label Button.selected A Boolean value indicating whether the button is selected (true) or not (false). use the form buttonInstance.emphasizedStyleDeclaration The style declaration when the emphasized SimpleButton.

scaleY UIObject. Read-only. Read-only. the position of the bottom edge of the object.left UIObject. Property UIObject. the width of the object. the left edge of the object.width UIObject. A number indicating the tabbing order for a component in a document. in pixels.tabIndex 102 Button component . UIComponent. relative to the right edge of its parent.propertyName. A Boolean value indicating whether the object is visible (true) or not (false). the height of the object. Read-only. relative to its parent. use the form buttonInstance. When accessing these properties from the Button object.x UIObject.bottom Description Read-only.height UIObject. in pixels. the left edge of the object. Read-only. in pixels.Properties inherited from the UIObject class The following table lists the properties the Button class inherits from the UIObject class. in pixels.visible UIObject. A number indicating the scaling factor in the y direction of the object. the position of the right edge of the object. the position of the top edge of the object.right UIObject.propertyName.enabled Description Indicates whether the component can receive focus and input. Read-only. relative to its parent. the top edge of the object. Property UIComponent. When accessing these properties from the Button object. relative to the bottom edge of its parent.top UIObject. relative to its parent.scaleX UIObject. Read-only. Read-only. UIObject.y Properties inherited from the UIComponent class The following table lists the properties the Button class inherits from the UIComponent class. use the form buttonInstance. in pixels. A number indicating the scaling factor in the x direction of the object.

Event UIObject.draw UIObject. Button class 103 . Broadcast when the subobjects are being unloaded.keyUp Description Broadcast when an object receives focus.focusIn UIComponent. Broadcast when an object’s state changes from visible to invisible.move UIObject.click Description Broadcast when a button is clicked. UIObject.focusOut UIComponent. Events inherited from the UIObject class The following table lists the events the Button class inherits from the UIObject class. Broadcast when an object loses focus.Event summary for the Button class There are no events exclusive to the Button class. Broadcast when the object has moved. Broadcast when a key is pressed. Broadcast when subobjects are being created. Property SimpleButton. Broadcast when an object’s state changes from invisible to visible. Broadcast when an object has been resized. Broadcast when a key is released. Events inherited from the SimpleButton class The following table lists the events the Button class inherits from the SimpleButton class.resize Description Broadcast when an object is about to draw its graphics.keyDown UIComponent. Event UIComponent.reveal UIObject.hide UIObject.unload Events inherited from the UIComponent class The following table lists the events the Button class inherits from the UIComponent class.load UIObject.

create a movie clip or graphic symbol. The default value is an empty string (""). You can also create the button and assign the icon entirely in ActionScript using the method UIObject. Usage buttonInstance. You must select Control > Test Movie to see the icon. In the Library panel. You must resize the button if the icon is too large to fit. 1. neither the button nor the icon resizes automatically. Example With a button on the Stage with instance name my_button. First drag the Button component from the Components panel to the current document’s library. which indicates that there is no icon. a string that specifies the linkage identifier of a symbol in the library to be used as an icon for a button instance.Button. If an icon is larger than a button. Edition Flash MX 2004. To create a custom icon.0. Select Export for ActionScript. Then.0). Select the symbol on the Stage in symbol-editing mode and enter 0 in both the X and Y boxes in the Property inspector.icon Availability Flash Player 6 (6. select the movie clip and select Linkage from the Library pop-up menu. NOT E 104 The icon does not appear on the Stage in Flash.createClassObject() (you still must have already created an icon for the button with the linkage identifier happiness).79.controls.icon = "happiness". The icon can be a movie clip symbol or a graphic symbol with an upper left registration point. in the first frame of the main timeline. Button component . and enter an identifier in the Identifier text box. add the following ActionScript: this. the icon extends over the borders of the button. but not on the Stage. so the component appears in the library. the following code assigns the movie clip from the Library panel with the linkage identifier happiness to the Button instance as an icon: my_button. "my_button".createClassObject(mx.Button.icon Description Property. {icon: "happiness"}). Use the labelPlacement property to set the position of the icon in relation to the button.

Then. You can also create the button and assign the label entirely in ActionScript using the method UIObject. the label appears centered on the button.See also Button.Button. 1.0. specifies the text label for a button instance. Calling this method overrides the label authoring parameter specified in the Property inspector or the Component inspector.label Availability Flash Player 6 (6. {label: "Test Button"}).label Description Property. in the first frame of the main timeline.0). Usage buttonInstance.controls. Example With a button on the Stage with instance name my_button. Edition Flash MX 2004. First drag the Button component from the Components panel to the current document’s library.createClassObject(). The default value is "Button". By default.label 105 . but not on the Stage. the following code sets the label to “Test Button”: my_button.labelPlacement Button. See also Button. add the following ActionScript: this.labelPlacement Button. so the component appears in the library. "my_button".createClassObject(mx.label = "Test Button".79.

Then. {label: "Test Button".79. The default value is "right". The label is set below the icon. in the first frame of the main timeline. The following are the four possible values. icon: "happiness".createClassObject().labelPlacement Description Property. You can also create the button and set the alignment entirely in ActionScript using the method UIObject. my_button.Button. so it appears in the library. 106 Button component .0.labelPlacement = "left".icon = "happiness". but not on the Stage. and a symbol in the Library panel with the linkage identifier happiness. sets the position of the label in relation to the icon.labelPlacement Availability Flash Player 6 (6. my_button. labelPlacement: "left"}). The label is set to the left of the icon.label = "Test Button".controls. 1.Button. Example With a button on the Stage with instance name my_button. "my_button". the icon and label are always centered vertically and horizontally within the bounding area of the button: ■ ■ ■ ■ "right" "left" "bottom" "top" The label is set to the right of the icon. First drag the Button component from the Components panel to the current document’s library. the following code sets the label alignment to the left of the icon: my_button. The label is set above the icon.0).createClassObject(mx. Edition Flash MX 2004. Usage buttonInstance. add the following ActionScript: this.

a row consists of one cell (or. N OTE 5 The CellRenderer API is supported only if you are working in a document that specifies ActionScript 2. which the List component uses for communicating with the cell. many cells). Tree. and ComboBox) use to manipulate and display custom cell content for each of their rows. Menu. Tree. The stacking order of a row in a List or DataGrid component 107 . In the default case. or any class you create. these cells are TextField objects that implement the CellRenderer API. and play a vital part in scrolling. These rows display rollover and selection highlights. so understanding the List class lets you understand them as well. you can tell a List component to use a different class of component as the cell for each row. you need an advanced understanding of the List class.0 in its Publish Settings. However. The DataGrid. This customized cell can contain a prebuilt component. and ComboBox components are extensions of the List class. Aside from selection highlights and icons (such as the node icons and expander arrows of a Tree component). in the case of the DataGrid component. DataGrid. Menu. Understanding the List class To use the CellRenderer API. The only requirement is that the class must implement the CellRenderer API. such as a CheckBox component. About the composition of the List component List components are composed of rows. are used as hit states for row selection.CHAPTER 5 CellRenderer API The CellRenderer API is a set of properties and methods that the list-based components (List.

In fact. Using the CellRenderer API You must write a class with four methods (CellRenderer. CellRenderer. you can use size() instead of CellRenderer. Recycling of rows means that the cell renderer must know how to completely reset its state when it is set to a new value. and it has to know how to completely change itself from displaying one value to displaying another. it might need to remove that icon when another item is rendered with it. your cell should even know how to properly render undefined items. 108 N OTE If a cell has button event handlers (onPress and so on). the background hit area may not receive input necessary to trigger the events. CellRenderer API . Because of this scrolling behavior. which might mean removing all old content in the cell. it reinitializes them and uses them for the new rows being scrolled into view. it moves all the rows up or down (depending on the scrolling direction). you cannot expect a cell to be used for only one value. To do this. The class must be specified in the Class text box in the Linkage Properties dialog box of a movie clip symbol in your Flash application. it sets the value of the old row to the new item in the view and moves the old row to where the new item is scrolled into view. items beyond the value of the rowCount property don’t get rows at all. When the list scrolls. CellRenderer.setSize() and CellRenderer.setValue()) that the list-based component uses to communicate with the cell (if the class extends UIObject. Assume your cell renderer is a container that will be filled with numerous item values over time.setSize()).About the scrolling behavior of the List component The List class uses a fairly complex algorithm for scrolling.getPreferredHeight(). A list only lays out as many rows as it can display at once. if your cell renderer creates an icon to display one item. The list then recycles the rows that are scrolled out of view. For example.getPreferredWidth().

select Tools>Folder Options and then select the View tab.getCellIndex() to do so. the Application Data folder is hidden by default. it’s located in /Documents and Settings/user/Local Settings/Application Data/ Adobe/Flash CS3/en/Configuration/Classes/mx/controls/cells.getCellIndex(). causes a row to be selected. Under the View tab. The cell renderer needs a reference to the list-based component that contains it in order to call the component’s selectedIndex property. For example. the cell needs to know which item index it is currently rendering so that it can set selectedIndex to the correct number. and CellRenderer. see the DataGrid component documentation for CellRenderer related information. There are two methods and a property (CellRenderer. NOT E Using the CellRenderer API 109 . when selected. the cell can use CellRenderer.listOwner and CellRenderer. Also. select My Computer to open Windows Explorer. including “DataGrid performance strategies” on page 257. To show hidden folders and files.■ You can look at the CheckCellRenderer class that implements the Cell Renderer API for an example.getDataLabel().listOwner) that are given automatically to a cell to allow it to communicate with the list-based component. suppose a cell contains a check box that. Also. the cell receives them automatically when it is placed in the list-based component. CellRenderer. In Windows. You do not need to implement these ActionScript elements. select the Show hidden files and folders radio button.

as: // ActionScript 2.0 cell renderer class file called MultiLineCell.setValue() A cell renderer class must also declare the methods and property received from the List class: ■ ■ ■ CellRenderer. Select File > New and choose ActionScript File. you add ActionScript that creates the DataGrid dynamically and assigns the MultiLineCell class as the cell renderer for one of its columns: To create the multiLineCell cell renderer class: 1. 3. use implement example.getDataLabel() CellRenderer. Then.0 class.as. comment it out of the code.core. otherwise.setSize() If a cell renderer class extends UIObject. class MultiLineCell extends mx.com/go/learn_fl_samples.getCellIndex() CellRenderer. ■ size() instead. Creating the MultiLineCell cell renderer class A cell renderer class must implement the following methods: ■ ■ CellRenderer. Save the file as MultiLineCell. MultiLineCell. Enter the following code into MultiLineCell.UIComponent { 110 CellRenderer API . as shown in the example.as and link it to a new movie clip symbol in a new Flash document.getPreferredWidth() The CellRenderer.getPreferredHeight() CellRenderer. 2.as and CellRenderer_tutorial. as shown in this CellRenderer. you can add a DataGrid component to the Flash document library. ■ CellRenderer.listOwner The following steps show how to create an ActionScript 2.getPreferredWidth() method is necessary for Menu components or DataGrid headers only.adobe.Simple cell renderer example This section presents an example of a cell renderer that displays multiple lines of text in a cell. The following tutorial shows how to create a cell renderer class that displays multiple lines of text in the cells of a DataGrid component.fla are available online at www. The completed files. On the first frame.

// The label to be used for text.height.wordWrap = true. make sure its rowHeight property is set large enough that two lines of text can render within it. // Starting depth. startDepth).background = false. Since we want the rowHeight to fit two lines. c. private var listOwner.styleName = listOwner. c. public function MultiLineCell() { } /* UIObject expects you to fill in createChildren by instantiating all the movie clip assets you might need upon initialization.createLabel("multiLineLabel". // Links the style of the label to the style of the grid c. // The List. data grid or tree containing this cell. You're going to expand the cell to fit the whole rowHeight.multiline = true. private var startDepth:Number = 1. c. c. private static var PREFERRED_HEIGHT_OFFSET = 4. // Cell height offset from the row height total and preferred cell width.selectable = false.tabEnabled = false. c. Assume __width and __height are set for you now.border = false. private static var PREFERRED_WIDTH = 100. var c = multiLineLabel = this. private var owner. c. UIComponent expects you to implement size().width and .private var multiLineLabel. Should be empty. } public function size():Void { /* By extending UIComponent which imports UIObject. The rowHeight itself is a property of the list type component that we are rendering a cell in. when creating the list type component using this cellRenderer class. however.*/ Using the CellRenderer API 111 . you get setSize automatically. // Constructor. // The row that contains this cell. In this case we are creating one label*/ public function createChildren():Void { // The createLabel method is a useful method of UIObject and a handy // way to make labels in components.*/ /*__width and __height are the underlying variables of the getter/ setters .

To create an application with a DataGrid component that uses the MultiLineCell cell renderer class: 1. 112 CellRenderer API . Inherited method. 2.*/ return owner.*/ if (item==undefined){ multiLineLabel. Select File > New and choose Flash File (ActionScript 2.0). In this case we will keep the cell slightly smaller. name the file cellRender_tutorial.fla. Select File > Save As.__height . } // Provides the preferred height of the cell. public function setValue(suggestedValue:String. "owner". and save the file to the same folder as the MultiLineCell. select Insert > New Symbol.setSize(__width. public function getPreferredHeight():Number { /* The cell is given a property. nothing should be rendered in the cell. that references the row. so set the label as invisible. __height). 3.var c = multiLineLabel. the cells are intended to be empty as they scroll just out of sight.as file. you will create the DataGrid instance and implement the MultiLineCell class. c.text. selected:Boolean):Void { /* If item is undefined. you cannot rely on any one cell always having data to show or the same value. } // function getPreferredWidth :: only for menus and DataGrid headers // function getCellIndex :: not used in this cell renderer // function getDataLabel :: not used in this cell renderer } Creating an application to test the MultiLineCell cell renderer class In the following steps. It’s always preferred that the cell take up most of the row's height. To create a new movieClip symbol to link to the MultiLineCell class. item:Object. Inherited method.PREFERRED_HEIGHT_OFFSET. and then the cell is reused again and set to a new value producing an animated effect of scrolling. For this reason._visible = false. Note: For scrolling List type components like a scrolling datagrid.text = suggestedValue. } multiLineLabel. } // Called by the owner to set the value in the cell.

lastName:"Wade". and assign your new cell renderer class: // Create a new DataGrid component instance this. item:105}). lastName:"Dietrich".addItem({firstName:"Kevin".addItem({firstName:"Ewing". "myGrid_dg". myDP. Make sure that Export in First Frame is already selected. lastName:"Dietrich". note:aLongString. Using the CellRenderer API 113 . Enabling this option allows you to dynamically attach instances of this symbol to your Flash documents during runtime. In the Name text box.addItem({firstName:"Ric". lastName:"Elstad".createClassObject(mx.addItem({firstName:"Kimberly". lastName:"Bilow". NO TE 8. If you need to modify the MultiLineCell Movie Clip symbol’s Linkage properties at a later time. var aLongString:String = "An example of a cell renderer class that displays a multiple line TextField". 11. note:aLongString. If the advanced view is not displayed. 5.addItem({firstName:"Winston".addItem({firstName:"AJ". note:aLongString. The DataGrid instance will be created dynamically through ActionScript in the following step. you can right click the symbol in the document’s library and select Properties or Linkage from the menu. note:aLongString. lastName:"Canepa". Drag the DataGrid component from the Components panel to the library.controls. type MultiLineCell. item:101}). myDP. myDP. assign data to the DataGrid. The default value for Type is Movie Clip. item:103}).4. and click OK.DataGrid. Set the ActionScript 2. Select the first frame on the main Timeline (make sure you are not still in the MultiLineCell movie-clip editing mode). 7. 1). click the Advanced button. Click the Export for ActionScript check box in the Linkage section. enter the following code to create a DataGrid dynamically. 6. item:102}). In the Actions panel for the first frame. // Build a data provider for the data grid with four columns of data. 9. item:100}). myDP = new Array(). myDP. myDP. note:aLongString. item:104}). note:aLongString. Leave Movie Clip selected. myDP. The Identifier text box will automatically show MultiLineCell. 10.0 Class to MultiLineCell (to match the class name of the MultiLineCell cell renderer class created previously).

width = 220.setStyle("backgroundColor". myGrid_dg. myGrid_dg. and select Control > Test Movie. lastName:"Roo". lastName:"Yushan".width = 70.addItem({firstName:"Chuck".rowHeight = 40. Note: The data grid's row height should reflect the number of lines you expect to show in the MultiLineCell cell renderer. item:106}). /* Assign the data provider to the DataGrid to populate it.dataProvider = myDP. /* Set some basic grid properties.vScrollPolicy = "auto".200).addItem({firstName:"John". myGrid_dg.40). The cell renderer will size to the row height. Save the Flash document. // Allows for 2 lines of text at default text size. myGrid_dg. // Assign cellRenderers. Note: This has to be done before applying the cellRenderers. 12. item:107}). A data grid appears. 0xD5D5FF).getColumnAt(2). note:aLongString.width = 70.myDP.resizableColumns = true.cellRenderer = "MultiLineCell".getColumnAt(0). myGrid_dg.move(40.getColumnAt(2).getColumnAt(1). myDP. */ myGrid_dg. The third column of the data grid contains a multiple line cell. note:aLongString. myGrid_dg. This should be about 40 for 2 lines or 60 for 3 lines at default text size. myGrid_dg. The completed MultiLineCell cell renderer example.*/ myGrid_dg. myGrid_dg. 114 CellRenderer API .setSize(430. myGrid_dg.

or Menu component can communicate with the cell.getPreferredHeight() Returns the preferred height of a cell. Sets the width and height of a cell.setValue() The preferred width of a cell. CellRenderer. The additional installed sample named CellRenderers_Sample displaying a ComboBox and CheckBox. Tree. Using the CellRenderer API 115 . Sets the content to be displayed in the cell.setSize() CellRenderer.com/go/ learn_fl_samples. DataGrid. Methods to implement for the CellRenderer API You must write a class with the following methods so that the List.adobe. The samples are available online at www.Additional cell renderer examples Additional examples of cell renderer classes that display a ComboBox and a CheckCell component are also provided. Method Description CellRenderer.getPreferredWidth() CellRenderer.

0. that indicate the position of the cell. CellRenderer.Methods provided by the CellRenderer API The List. Edition Flash MX 2004. Usage componentInstance. Method CellRenderer. Tree. DataGrid.listOwner Description A reference to the List component that contains the cell. CellRenderer.getCellIndex() Parameters None. Returns a string containing the name of the cell renderer’s data field.0). Tree. 116 CellRenderer API . columnIndex and itemIndex. You do not need to implement these methods.getCellIndex() Availability Flash Player 6 (6. and Menu components give the following methods to the cell when it is created within the component. You do not need to implement these properties.getDataLabel() Properties provided by the CellRenderer API The List. A reference to the row that contains the cell.getCellIndex() Description Returns an object with two fields.79. DataGrid.owner CellRenderer. Returns An object with two fields: columnIndex and itemIndex. Property CellRenderer. and Menu component give the following properties to the cell when it is created within the component.

For the DataGrid component.79. that locate the cell in the component. This method is provided by the List class. returns a string containing the name of the cell renderer’s data field.itemIndex. someVal). For any components other than the DataGrid component. Each field is an integer that indicates a cell’s column position and item position. CellRenderer. listOwner.getDataLabel() Parameters None. Usage componentInstance. Description Method.dataProvider.editField(index. CellRenderer. Declare it in your cell renderer class as follows. you do not have to implement it. Returns A string. the value of columnIndex is always 0. var colName = listOwner. and use it in the functions in your cell renderer: var getCellIndex:Function.columnName.0.0). This method is provided by the List class. this method returns the column name for the current cell. you do not have to implement it. Example This example edits a DataGrid component’s data provider from within a cell: var index = getCellIndex(). colName. Declare it in your cell renderer class as follows.getColumnAt(index. returns an object with two fields. and use it in the functions in your cell renderer: var getDataLabel:Function. columnIndex and itemIndex.getDataLabel() 117 .Description Method.getDataLabel() Availability Flash Player 6 (6. Edition Flash MX 2004.columnIndex).

22). which indicates that the cell should be 20 pixels high: function getPreferredHeight(Void) :Number { return 20. For example. Edition Flash MX 2004. returns the preferred height of a cell. if the name of the data field currently being rendered by the cell is "Price". Returns The correct height for the cell.0). the variable p is now equal to "Price": var p = getDataLabel(). Description Method. This is especially important for getting the right height of text within the cell. you can return a constant (for example.getPreferredHeight() Availability Flash Player 6 (6. If you set this value higher than the rowHeight property of the component. you must implement it. which is the height of the row. If necessary. It tells the rows of the list how to center the cell and how to adjust the cell’s height if necessary.height.0.Example The following code tells the cell the name of the data field that it is rendering. You can also return owner.getPreferredHeight() Parameters None. CellRenderer.79. cells will bleed above and below the rows. Usage componentInstance. or you can measure and return the height of the contents. Example This example returns the value 20. This method is not provided by the List class. } 118 CellRenderer API .

"owner".79. Your cell is sized to whatever the width of the row is. Usage componentInstance. It’s always preferred for the cell to take up most of the row's height. the cell may be cut off. the preferred width of a cell.4. which must measure the text for the width of the row.This example returns a value that is 4 pixels less that the height of the row: function getPreferredHeight():Number { /* You know the cell is given a property.getPreferredWidth() Availability Flash Player 6 (6.getPreferredWidth() Parameters None. which is the row. You can also implement this method for the DataGrid component where the header renderer checks whether or not to show the sort arrow. } CellRenderer. CellRenderer.__height .0). except in a menu. Implement this method for the Menu component. If you specify a width greater than that of the component.getPreferredWidth() 119 . Description Method. Edition Flash MX 2004. Returns A value (of type Number) that indicates the correct width of the cell.0. */ return owner.

This method is provided by the List class. // or UIObject. List.selectedItem.0.0). That list can be a DataGrid.length*3. menu.listOwner Description Property. Edition Flash MX 2004. Example This example finds the list’s selected item in a cell: var s = listOwner. or grid): var listOwner:MovieClip. and use it as a reference back to the list (or tree. a reference to the list that owns the cell. which indicates that the cell should be three times bigger than the length of the string it is rendering: function getPreferredWidth():Number { return myString.listOwner Availability Flash Player 6 (6. Declare it in your cell renderer class as follows.79. } This example comments out the getPreferredWidth() method: // function getPreferredWidth :: only for a menu or datagrid CellRenderer. Tree.Example This example returns the value multiplied by 3. 120 CellRenderer API . Usage componentInstance. etc. you do not have to implement it. or Menu component.

79.setSize() Availability Flash Player 6 (6. a reference to the row that contains the cell.CellRenderer. Usage componentInstance.0. Declare it in your cell renderer class and use it as a reference: var owner:MovieClip. This method is provided by the List class.0.0). etc.owner Availability Flash Player 6 (6. CellRenderer. Edition Flash MX 2004.setSize() 121 . Usage componentInstance. Edition Flash MX 2004.setSize(width. height) Parameters width height A number that indicates the width at which to lay out the component.79.0). you do not have to implement it. Returns Nothing.owner Description Property. // or UIObject. A number that indicates the height at which to lay out the component. CellRenderer.

_height = h-2.setValue(suggested. you should implement the size() method instead. h:Number):Void { image. Example The following example sizes an image in the cell to fit within the bounds specified by the list: function setSize(w:Number. as follows: // // // // By extending UIComponent.height._width = __width._y = 1. If the cell renderer extends the UIObject class. } CellRenderer. image. item. function size():Void { // __width and __height are the underlying variables // of the getters/setters . var c = multiLineLabel. Assume __width and __height are set for you now.0. selected) 122 CellRenderer API . } This example is in a cell renderer class that extends UIComponent (which extends UIObject). image. c. however. Edition Flash MX 2004. you get setSize for free. Write the same function that you would write for setSize().79. but use the width and height properties instead of parameters. UIComponent expects you to implement size(). lets the list tell its cells the size at which they should lay themselves out. c._height = __height._width = w-2. so you must implement size() instead of setSize().width and .Description Method. Usage componentInstance. or the cell may bleed into other parts of the list and appear broken.setValue() Availability Flash Player 6 (6. The cell renderer should do layout so that it fits in the specified area.0)._x = image. You’re going to expand the cell to fit the whole rowHeight.

Parameters suggested item A value to be used for the cell renderer’s text. Description Method. a particular cell may be scrolled out of the display area or it might be reused to render another value. (Remember that any cell could display many values during its time in the list. For example. a selection. An object that is the entire item to be rendered. such as when scrolling occurs in a DataGrid. A string with the following possible values: "normal". if any is needed. This can cause problems if you’re trying to make the cell renderer behave differently according to whether the row is in a selected state.setValue() 123 .selectedNode == item. column resizing. The cell renderer can use properties of this object for rendering. If a row is selected and the pointer is over it. not "selected". It is important to remember that a cell might not exist on the Stage and should not always be updated with data when setValue() is called. or scrolling occurs). takes the values given and creates a representation of them in the cell. and selected "selected". you cannot directly reference a specific cell renderer instance in the grid. CellRenderer.) This is the most important CellRenderer method. This resolves any difference between what was displayed in the cell and what needs to be displayed in the cell for the new item. The setValue() method is called frequently (for example. For this reason. at any moment. Cells can be required to be visibly empty temporarily. Returns Nothing. and you should write if statements in the body of setValue() that allow code to run only if the item parameter is defined and a change has occurred. "highlighted". use the following code: var reallySelected:Boolean = selected != "normal" && listOwner. and you must implement it in every cell renderer. Example The following example shows how to use setValue() and editField() to reference a cell renderer instance in a grid. when a rollover. the value of the selected parameter is "highlighted". An undefined item parameter indicates that the cell should be visibly empty and any items in the cell should be assigned a _visible property of false. To test whether the current row is in a selected state.

itm. you cannot directly reference a specific cell renderer instance in the grid. The following is a setValue() implementation from a theoretical cell renderer that renders a check box in the cells: function setValue(str.enabled = itm. there should be a corresponding field in the data provider to hold that information.enabled){ myCheck._visible = false. field2:"SomeString". field2:"SomeString". field2:"SomeString". To display a given cell as enabled or selected (checked). enabled:true} {field1:"DisplayMe". use the data provider to communicate with a specific cell in the grid. checked:false. checked:true. The form of such a data provider might look like this: [ {field1:"DisplayMe".enabled!=itm. } } } 124 CellRenderer API . enabled:true} ] */ /* Hide anything normally rendered in the cell if itm is undefined.Because a cell might not exist on the Stage (it might be scrolled out of the display area or it might be reused to render another value) at any time. Instead. enabled:false} {field1:"DisplayMe". } if (myCheck.selected = itm. }else{ // redundancy checking if (myCheck.enabled.checked){ myCheck.checked.selected!=itm. */ if (itm == undefined){ myCheck. The data provider holds all the state information about the grid. Otherwise update the cell contents with the new data. sel) { /* Assume the data provider has two relevant fields for this cell: checked and enabled. The setValue() method of your cell renderer communicates changes in the data provider’s state to the cell. checked:true.

Otherwise update the cell contents with the new data.contentPath = undefined. */ if (item == undefined){ multiLineLabel. item.setValue() 125 . */ if (item == undefined){ loader. }else{ // clear the loader loader._visible = false. // the list has URLs for different images in its data provider if (suggested!=undefined){ loader.text = suggested.editField()) calls setValue() to refresh the display of the grid. item:Object. This code would be written in the Flash application. Any change to the data provider (when made through a DataProvider method such as DataProvider. depending on the value passed: function setValue(suggested. }else{ // adds the text to the label multiLineLabel.contentPath = suggested.editField(1. Otherwise update the cell contents with the new data. The following example loads an image in a loader component within the cell.If you want to enable the check box on the second row. true). you communicate through the data provider. either on a frame. selected:Boolean):Void { /* Hide anything normally rendered in the cell if item is undefined. "enabled". } } } The following example is from a multiline text cell renderer: function setValue(suggested:String. } } CellRenderer. on an object. selected) : Void { /* Hide anything normally rendered in the cell if item is undefined. or in another class file (but not in the cell renderer class file): // calls setValue() again myGrid._visible = false.

_visible = true. then the cell may be scrolled out of the display area and should be visibly empty. Otherwise update the cell contents with the new data.label + " " + item.state + " " + sel).selected = item._visible = false. radio.The following example is from a radio button renderer. function setValue(str:String. } } 126 CellRenderer API .label = item. An if statement is used to determine if the item parameter is undefined. } else { trace(item. radio.label.data + " " + item. otherwise. If the item parameter is undefined. sel:String) : Void { /* Hide anything normally rendered in the cell if item is undefined. radio. item:Object. the radio button is hidden by setting its _visible property to false.state. If the item parameter is undefined. the radio button is updated with the new data and appears.data = item. */ if (item == undefined) { radio. radio.data.

a check mark appears in the box. it displays its disabled appearance. 127 . This document discusses the version 2 component. the check box has two disabled states. see “FocusManager class” on page 717 or “Creating custom focus navigation” in Using ActionScript 2. Moves focus to the next element. The state of a check box does not change until the mouse is released over the component. regardless of user interaction.0 and ActionScript 3. When it is selected.0 Components. In the disabled state.CHAPTER 6 CheckBox component A check box is a square box that can be selected or deselected. selected and deselected. If you are using the version 3 component. the component’s appearance returns to its original state and it retains input focus. A check box can be enabled or disabled in an application. For more information about controlling focus. NOT E 6 A CheckBox component is supported for both ActionScript 2. right. see “Using the CheckBox” in Using ActionScript 3. When a CheckBox instance has focus. or bottom. A live preview of each CheckBox instance reflects changes made to parameters in the Property inspector or Component inspector during authoring. a button doesn’t receive mouse or keyboard input. If a user moves the pointer outside the bounding area of a check box or its label while pressing the mouse button. top. which do not allow mouse or keyboard interaction. You can add a text label to a check box and place it to the left. A CheckBox instance receives focus if a user clicks it or tabs to it.0 Components. If a check box is enabled and a user clicks it or its label.0. Selects or deselects the component and triggers the click event. you can use the following keys to control it: Key Shift+Tab Spacebar Tab Description Moves focus to the previous element. the check box receives input focus and displays its pressed appearance. If a check box is disabled. Additionally.

each hobby would have a check box beside it. selected sets the initial value of the check box to checked (true) or unchecked (false). a form collecting personal information about a customer could have a list of hobbies for the customer to select. see CheckBox. For more information. you can use the Accessibility panel to make it accessible to screen readers. you must add the following line of code to enable accessibility: mx. the default value is CheckBox. right. First. see “Creating accessible content” in Using Flash.CheckBoxAccImpl. and events. top. For more information. or bottom. Using the CheckBox component A check box is a fundamental part of any form or web application. You can use check boxes wherever you need to gather a set of true or false values that aren’t mutually exclusive. the default value is right.accessibility. methods. regardless of how many instances you have of the component. The default value is false.labelPlacement. see “CheckBox class” on page 133.enableAccessibility(). labelPlacement orients the label text for the check box. For example. You can write ActionScript to control these and additional options for the CheckBox component using its properties. CheckBox parameters You can set the following authoring parameters for each CheckBox component instance in the Property inspector or in the Component inspector: label sets the value of the text for the check box. This parameter can be one of four values: left.When you add the CheckBox component to an application. You enable accessibility for a component only once. For more information. 128 CheckBox component .

4. This code creates a click event handler that enables and disables the minimumAge and maximumAge text field components. 3. restrictAgeListener).0).click and “TextInput component” on page 1209. 2. see CheckBox. do the following: ■ ■ Enter restrictAge for the instance name. In the Property inspector. In the Property inspector.0). When the Restrict Age check box is selected. open the Actions panel.target. Select Frame 1 in the Timeline.selected. 6. maximumAge. Drag the CheckBox component from the Components panel to the current document’s library. This adds the component to the library. and enter the following code: var restrictAgeListener:Object = new Object(). The form is a query that searches for possible dating matches for the customer. but doesn’t make it visible in the application.enabled = evt. Select File > New and choose Flash File (ActionScript 2. Select File > New and choose Flash File (ActionScript 2. restrictAge. For more information. Drag two TextInput components from the Components panel to the Stage. 5. Enter Restrict Age for the label parameter. Drag the TextInput component from the Components panel to the current document’s library. Drag a CheckBox component from the Components panel to the Stage.click = function (evt:Object) { minimumAge.Creating an application with the CheckBox component The following procedure explains how to add a CheckBox component to an application while authoring. 3. which have already been placed on Stage.selected. Using the CheckBox component 129 . restrictAgeListener. 2. (These text fields are enabled only when the check box is selected.enabled = evt. enter the instance names minimumAge and maximumAge. The following example is a form for an online dating application.) To create an application with the CheckBox component: 1. The query form must have a check box labeled Restrict Age that permits customers to restrict their search to a specified age group.target. }. the customer can then enter the minimum and maximum ages into two text fields. To create a check box using ActionScript: 1.addEventListener("click".

move(20. 5.controls. add the following ActionScript to create an event listener and an event handler function: // Create handler for checkBox event. 30). “EventDispatcher.target.selected.setSize()) or any applicable properties and methods of the CheckBox class.createClassObject()” on page 1362 to create the CheckBox instance named restrictAge.4.addEventListener("click". it only changes the size of the bounding box. maxChars:2}). maximumAge_ti. In the first frame of the main Timeline.move()” on page 1376 to position the button. Then.createClassObject(mx. text:55. 130 CheckBox component . "maximumAge_ti". 3. {restrict:[0-9]. this. {restrict:[0-9]. The bounding box of a CheckBox instance is invisible and also designates the hit area for the instance. 2.enabled = evt_obj. the code uses the method “UIObject. This code creates a click event handler that enables and disables the minimumAge and maximumAge text field components. Customizing the CheckBox component You can transform a CheckBox component horizontally and vertically while authoring and at runtime. Now. selected:true}).addEventListener()” on page 496 and “TextInput component” on page 1209. 1.target. 60). If the bounding box is too small to fit the label. see CheckBox. this. "testAge_ch". you also increase the size of the hit area.click. "minimumAge_ti". add the following ActionScript to the Actions panel to create and position component instances: this.TextInput. function checkboxHandler(evt_obj:Object) { minimumAge_ti. For more information. maxChars:2}).enabled = evt_obj.move(20. Resizing the check box does not change the size of the label or the check box icon.controls.controls. {label:'Age Range'. At runtime. text:18. checkboxHandler). While authoring. maximumAge_ti.createClassObject(mx. the label is clipped to fit. This script uses the method “UIObject. minimumAge_ti.CheckBox.createClassObject(mx. If you increase the size of the instance.selected. } // Add Listener. select the component on the Stage and use the Free Transform tool or any of the Modify > Transform commands. testAge_ch.TextInput. and specifies a label property. use the setSize() method (UIObject.

The default value is 10. This style must be set to true if fontFamily refers to an embedded font. The font weight: either "none" or "bold". but subsequent calls to getStyle() return "none". The color for text when the component is disabled. The default value is "normal". For more information.Using styles with the CheckBox component You can set style properties to change the appearance of a CheckBox instance. Possible values are "haloGreen". "haloBlue". The default value is "haloGreen". The font name for text. The default value is "none". color Both disabledColor Both embedFonts Both fontFamily Both Both Both Both fontSize The point size for the font.0 Components. The text decoration: either "none" or "underline". see “Using styles to customize component color and text” in Using ActionScript 2. A Boolean value that indicates whether the font specified in fontFamily is an embedded font. The text color. If the name of a style property ends in “Color”. The default value is 0x0B333C for the Halo theme and blank for the Sample theme. The default color is 0x848384 (dark gray). no text is displayed. The default value is "none". The default value is false. The default value is "_sans". the embedded font is not used. The font style: either "normal" or "italic". If this style is set to true and fontFamily does not refer to an embedded font. fontStyle fontWeight textDecoration Both Customizing the CheckBox component 131 . A CheckBox component supports the following styles: Style themeColor Theme Description Halo The base color scheme of a component. it is a color style property and behaves differently than noncolor style properties. and "haloOrange". Otherwise. All components can also accept the value "normal" in place of "none" during a setStyle() call.

The toggled checked state. 132 CheckBox component . The default is CheckFalseDown. The default value is 0xFFFFFF (white). Only icons.fla file. The over checked state. The background color of the check box when disabled. The background color of the check box when pressed. The default is CheckFalseUp. The CheckBox component does not have a border or background. rather than skins. The default is CheckTrueOver. The disabled unchecked state. The default value is 0xEFEEEF (light gray). symbolBackgroundDisabledColor symbolBackgroundPressedColor Sample Sample Sample symbolColor symbolDisabledColor Using skins with the CheckBox component The CheckBox component uses symbols in the library to represent the button states. The default value is 0x848384 (dark gray). The default is CheckTrueUp. Each of these properties corresponds to the icon indicating the CheckBox state.fla file or the SampleTheme. For more information. The default is CheckFalseDisabled. The pressed unchecked state. The disabled checked state. modify symbols in the Library panel. The over unchecked state. The CheckBox component skins are located in the Flash UI Components 2/Themes/MMDefault/ CheckBox Assets/states folder in the library of either the HaloTheme. The default value is 0x000000 (black). see “About skinning components” in Using Components. The pressed checked state. A CheckBox component uses the following skin properties. The default is CheckTrueDown. The color of the disabled check mark.Style symbolBackgroundColor Theme Description Sample Sample The background color of the check box. To skin the CheckBox component while authoring. The default is CheckFalseOver. The default is CheckTrueDisabled. The color of the check mark. are displayed for the checkbox Property falseUpIcon falseDownIcon falseOverIcon falseDisabledIcon trueUpIcon trueDownIcon trueOverIcon trueDisabledIcon Description The up (normal) unchecked state. The default value is 0xFFFFFF (white).

top. 7. Set For this example. or bottom of a check box at runtime. see “Creating custom focus navigation” in Using ActionScript 2. Open the symbols you want to customize for editing.To create movie clip symbols for CheckBox skins: 1. 9.0 Components. 3. Repeat steps 5-6 for all symbols you want to customize. Expand the CheckBox Assets/States folder in the library of your document.fla file. set one CheckBox instance to true.0). see “About themes” in Using ActionScript 2. For the exact location on your operating system. and use ActionScript to set both CheckBox instances to disabled. 4. In the theme’s Library panel. For example. 5. Select Control > Test Movie. 10. drag two instances to show the two new skin symbols. Select File > Import > Open External Library. the CheckBox instance properties as desired. 11. and select the HaloTheme.CheckBox The properties of the CheckBox class let you create a text label and position it to the left. expand the Flash UI Components 2/Themes/MMDefault folder and drag the CheckBox Assets folder to the library for your document. 8. right. For example. Setting a property of the CheckBox class with ActionScript overrides the parameter of the same name set in the Property inspector or Component inspector.controls. repeat the color change for the inner box of the CheckTrueDisabled symbol. For this example. open the CheckFalseDisabled symbol. change the inner white square to a light gray. Click the Back button to return to the main timeline.0 Components. This file is located in the application-level configuration folder. For more information. CheckBox class 133 . For example. Customize the symbol as desired. 6. Drag a CheckBox component to the Stage. 2. CheckBox class Inheritance MovieClip > UIObject class > UIComponent class > SimpleButton class > Button component > CheckBox ActionScript Class Name mx. Select File > New and choose Flash File (ActionScript 2. The CheckBox component uses the Focus Manager to override the default Flash Player focus rectangle and draw a custom focus rectangle with rounded corners.

Sets the style property on the style declaration or object. Destroys a component instance. Methods inherited from the UIObject class The following table lists the methods the CheckBox class inherits from the UIObject class.version).setSkin() UIObject. Gets the style property from the style declaration or object. Marks the object so it is redrawn on the next frame interval.controls. Forces validation of the object so it is drawn in the current frame. To access this property.destroyObject() Creates a subobject on an object.Each component class has a version property.version). Class properties are available only on the class itself. Method Description UIObject. Sets a skin in the object.invalidate() UIObject.setStyle() CheckBox component .methodName.move() UIObject.createClassObject() Creates an object on the specified class.createObject() UIObject. The version property returns a string that indicates the version of the component. Resizes the object to the requested size. returns undefined. UIObject. Method summary for the CheckBox class There are no methods exclusive to the CheckBox class. UIObject.CheckBox.setSize() UIObject.redraw() UIObject. which is a class property. Moves the object to the requested position.getStyle() UIObject.doLater() UIObject. use the form checkBoxInstance. use the following code: trace(mx. Calls a function when parameters have been set in the Property and Component inspectors. N OTE 134 The code trace(myCheckBoxInstance. When calling these methods from the CheckBox object.

labelPlacement Description Specifies the text that appears next to a check box. relative to the bottom edge of its parent. Read-only. the position of the right edge of the object. in pixels. the left edge of the object.getFocus() UIComponent.left UIObject. the position of the bottom edge of the object. Property summary for the CheckBox class The following table lists properties of the CheckBox class. relative to the right edge of its parent. in pixels. Method UIComponent. Specifies whether the check box is selected (true) or deselected (false).setFocus() Description Returns a reference to the object that has focus.bottom Description Read-only.propertyName. Sets focus to the component instance. use the form checkBoxInstance.height UIObject. use the form checkBoxInstance.label CheckBox. UIObject. CheckBox.scaleX UIObject. A number indicating the scaling factor in the y direction of the object. When accessing these properties from the CheckBox object. relative to its parent. When calling these methods from the CheckBox object. relative to its parent.scaleY CheckBox class 135 . A number indicating the scaling factor in the x direction of the object. Read-only. Property UIObject.methodName. Read-only. Property CheckBox. Specifies the orientation of the label text in relation to a check box. the height of the object.right UIObject.Methods inherited from the UIComponent class The following table lists the methods the CheckBox class inherits from the UIComponent class.selected Properties inherited from the UIObject class The following table lists the properties the CheckBox class inherits from the UIObject class.

the position of the top edge of the object. The default value is false. SimpleButton. use the form checkBoxInstance.y Description Read-only. A number indicating the tab order for a component in a document.Property UIObject. the top edge of the object. A Boolean value indicating whether the button behaves as a toggle switch (true) or not (false). in pixels. in pixels. the left edge of the object. The default value is false.propertyName. Read-only.width UIObject. UIComponent. the width of the object. use the form checkBoxInstance.emphasizedStyleDeclaration The style declaration when the emphasized SimpleButton. property is set to true.propertyName. SimpleButton.tabIndex Properties inherited from the SimpleButton class The following table lists the properties the CheckBox class inherits from the SimpleButton class. Property SimpleButton. in pixels.emphasized Description Indicates whether a button has the appearance of a default push button. Read-only. Properties inherited from the UIComponent class The following table lists the properties the CheckBox class inherits from the UIComponent class.visible UIObject. Property UIComponent. A Boolean value indicating whether the object is visible (true) or not (false). relative to its parent.selected A Boolean value indicating whether the button is selected (true) or not (false).enabled Description Indicates whether the component can receive focus and input. When accessing these properties from the CheckBox object. Read-only. When accessing these properties from the CheckBox object.toggle 136 CheckBox component .top UIObject.x UIObject.

Event UIObject. Broadcast when subobjects are being created. Broadcast when an object has been resized. Broadcast when the subobjects are being unloaded.load UIObject. Specifies the orientation of the label text in relation to an icon.resize Description Broadcast when an object is about to draw its graphics. or if the check box has focus and the Spacebar is pressed. Events inherited from the UIObject class The following table lists the events the CheckBox class inherits from the UIObject class.reveal UIObject. When accessing these properties from the CheckBox object. Event CheckBox. UIObject. Broadcast when an object’s state changes from visible to invisible.hide UIObject. use the form checkBoxInstance. Property Button.draw UIObject. Broadcast when an object’s state changes from invisible to visible.click Description Triggered when the mouse is clicked (released) over the check box.propertyName.labelPlacement Description Specifies the text that appears in a button.unload CheckBox class 137 .move UIObject.label Button. Event summary for the CheckBox class The following table lists an event of the CheckBox class.Properties inherited from the Button class The following table lists the properties the CheckBox class inherits from the Button class. Broadcast when the object has moved.

focusIn UIComponent.79. broadcast to all registered listeners when the mouse is clicked (released) over the check box. } Description Event.. }. Broadcast when an object loses focus.0)..keyUp Description Broadcast when an object receives focus. Event SimpleButton. Broadcast when a key is pressed. Events inherited from the SimpleButton class The following table lists the event the CheckBox class inherits from the SimpleButton class.click Availability Flash Player 6 (6. 138 CheckBox component .click = function(eventObject:Object) { // . Broadcast when a key is released.addEventListener("click". checkBoxInstance.. listenerObject). Usage 2: on (click) { // . or if the check box has focus and the Spacebar is pressed. Usage Usage 1: var listenerObject:Object = new Object(). Edition Flash MX 2004.focusOut UIComponent.0.keyDown UIComponent.click Description Broadcast when a button is clicked. listenerObject. CheckBox.Events inherited from the UIComponent class The following table lists the events the CheckBox class inherits from the UIComponent class. Event UIComponent..

label = "I agree". You define a method with the same name as the event on the listener object. For example.enabled = event_obj. // Create Listener Object. used inside an on() handler attached to a component. }.addEventListener("click". and the event is handled by a function.enabled = false. the listener is called. also called a handler. When the instance dispatches the event. you call the addEventListener() method (see EventDispatcher. attached to the check box myCheckBox. // Assign function to Listener Object. on a listener object (listenerObject) that you create. it automatically passes an event object (eventObject) to the listener object method.click = function(event_obj:Object) { submit_button. When the event is triggered. You can use these properties to write code that handles the event. The second usage example uses an on() handler and must be attached directly to a CheckBox instance.myCheckBox” to the Output panel: on (click) { trace(this). agree_ch. // Add Listener. sends “_level0. refers to the component instance. the following code. For more information. } Example The following example enables a button when the check box is selected. the method is called when the event is triggered. form_obj). The keyword this. This example assumes you have a Button component instance on the Stage with instance name submit_button. and a CheckBox component instance on the Stage with the instance name agree_ch.The first usage example uses a dispatcher-listener event model. Add the following code to the first frame of the main timeline: agree_ch. see “EventDispatcher class” on page 495. A component instance (checkBoxInstance) dispatches an event (in this case. submit_button. var form_obj:Object = new Object().addEventListener()) on the component instance that broadcasts the event to register the listener with the instance. form_obj. CheckBox. click).click 139 . The event object has properties that contain information about the event.target.selected. Finally.

label) 140 CheckBox component . Usage checkBoxInstance.0.label = "Remove from list". trace(checkBox.label Availability Flash Player 6 (6. Example The following code sets the text that appears beside the CheckBox component and sends the value to the Output panel: checkBox.79.The following code sends a message to the Output panel when checkBoxInstance is clicked. By default. Setting this property overrides the label parameter specified in the Parameters tab of the Component inspector. The on() handler must be attached directly to checkBoxInstance: on (click) { trace("check box component was clicked"). The CheckBox component does not allow multiline labels. } See also EventDispatcher.label Description Property. Edition Flash MX 2004.addEventListener() CheckBox.0). the label appears to the right of the check box. indicates the text label for the check box.

labelPlacement Description Property. Edition Flash MX 2004. Then add the following ActionScript to the first frame of the main timeline: this.target. "my_ch".target.labelPlacement Availability Flash Player 6 (6.setSize(200.target. The following are the four possible values (the dotted lines represent the bounding area of the component.0. evt_obj. checkboxHandler).This example creates the check box in ActionScript. The label is set to the right of the check box. Usage checkBoxInstance. trace("after: " + evt_obj. but not on the Stage). 10.addEventListener("click". For this example.target.CheckBox.labelPlacement CheckBox.createClassObject(mx. function checkboxHandler(evt_obj:Object):Void { trace("before: " + evt_obj. See also CheckBox.width+"px wide").labelPlacement 141 . ■ The check box is pinned to the upper-right corner of the bounding area.height). This is the default value.controls. The label is set to the left of the check box.width +"px wide"). drag a CheckBox component from the Components panel to the current document’s library (so the CheckBox component appears in your library. {label:"Resize CheckBox instance"}). } my_ch.79. evt_obj. a string that indicates the position of the label in relation to the check box.0). "left" CheckBox. they are invisible in a document): ■ "right" The check box is pinned to the upper-left corner of the bounding area. and then resizes the label when checked.

The check box instance right_ch has its label and labelPlacement properties set within the method “UIObject. The check box and label are centered horizontally and vertically.■ "bottom" The label is set below the check box. {label:"Right".createClassObject(mx.move(10.CheckBox.controls.controls. See also CheckBox.CheckBox.labelPlacement = "left". "right_ch". "left_ch". Then add the following ActionScript to the first frame of the main timeline: this. For more information. left_ch. left_ch. The check box and label are centered horizontally and vertically.move(10.setSize() property. but not on the Stage).label 142 CheckBox component .label= "Left". right_ch. ■ "top" The label is placed below the check box. The check box instance left_ch has its label and labelPlacement properties set in separate declarations. The following example uses ActionScript to create check box instances. 2). labelPlacement:"right"}). see “Customizing the CheckBox component” on page 130. Drag the CheckBox component from the Components panel to the current document’s library (so the component appears in your library. this. 10). 30).createClassObject(mx. You can change the bounding area of a component while authoring by using the Transform command or at runtime using the UIObject. Example The following example sets the placement of the label to the left of the check box: checkBox_mc.labelPlacement = "left". 1. left_ch.createClassObject()” on page 1362.

selected Description Property.label = "Selected!". Example The following example shows a check box that has its selected property set to true. add the following code to the Actions panel of the first frame of the main timeline: my_ch.label = "Unselected!". Give the component instance the name my_ch.click = function(evt_obj:Object) { if (evt_obj.target. CheckBox.0.target. checkboxListener). Edition Flash MX 2004.selected Availability Flash Player 6 (6.selected) { evt_obj. a Boolean value that selects (true) or deselects (false) the check box.target. var checkboxListener:Object = new Object().CheckBox.0). and then uses the selected property within an event handler function to respond to the user clicking the check box. } else { evt_obj. by default. Usage checkBoxInstance.selected 143 .selected = true.79. checkboxListener. Then. } }.addEventListener("click". my_ch. Drag the CheckBox component to the Stage.

144 CheckBox component .

which you can manipulate while authoring by using the Values dialog box from the Component inspector. For more information on collections and collection items. change properties of items. remove items. and delete Collection instances programmatically. you can add items. and IteratorImpl for Iterator). You typically use the collection interface with components that use the Collection metadata tag to create collection properties.Collection The collection interface lets you programmatically manage a group of related items. Flash provides implementations of both collection-related interfaces (CollectionImpl for Collection.0 Components. NOT E The Collection class is supported only if you are working in a document that specifies ActionScript 2.utils. 7 Collection class ActionScript Class Name mx. access. To access this class. called collection items. Components can expose properties as collections. Using this dialog box. and change the position of items within the collection.CHAPTER 7 Collection interface The collection class is distributed in the common classes library as a compiled clip symbol. collections are most often used in the context of a component. Although you can create. select Window > Common Libraries > Classes. see “About the Collection tag” in Using ActionScript 2. which contains the compiled clip UtilsClasses.0 in its Publish Settings. 145 . Each collection item in this set has properties that are described in the metadata of the collection item class definition.

adds a new item to the end of the collection. Description Method.getIterator() Collection. it is not added to the collection. Returns the number of items in the collection. Returns an item within the collection by using its index. Indicates whether the collection contains the specified item. Returns A Boolean value of true if the collection was changed as a result of the operation.addItem(item) Parameters item The object to be added to the collection. Returns an iterator over the elements in the collection. Collection.Method summary for the Collection interface The following table lists the methods of the Collection interface.removeItem() Collection. Removes all elements from the collection.clear() Collection. If item is null. Edition Flash MX Professional 2004.contains() Description Adds a new item to the end of the collection.addItem() Collection. Usage collection.getItemAt() Collection. 146 Collection interface . Indicates whether the collection is empty.isEmpty() Collection. Method Collection.getLength() Collection. Removes the specified item from the collection.addItem() Availability Flash Player 7.

myCD = new CompactDisc().contains() 147 .utils. they must refer to the same object. indicates whether the collection contains the specified item. Collection. Collection. Usage collection.contains() Availability Flash Player 7. myCD.Artist = "John Coltrane".thisShelf.contains() returns false. For Flash to consider the objects as equal.MyCompactDiscs. myColl = _parent.Collection. even if the object’s properties are all equal. Edition Flash MX Professional 2004. If item is a different object. } Collection.addItem(myCD). myCD.contains(item) Parameters item The object whose presence in the collection is to be tested. Description Method. var myColl:mx. var wasAdded:Boolean = myColl.Example The following example calls addItem(): on (click) { import CompactDisc.Title = "Giant Steps". Returns A Boolean value of true if the collection contains item.

myColl = _parent.thisShelf.Collection.Iterator = myColl. } } Collection.clear() Returns Nothing.Title. Edition Flash MX Professional 2004.MyCompactDiscs.MyCompactDiscs.contains(cd)) { trace("myColl contains " + title). var title:String = cd.clear() Availability Flash Player 7.getIterator().utils. removes all of the elements from the collection.utils. myColl. if(myColl. var artist:String = cd. } 148 Collection interface .Artist.clear(). Description Method.next()). var itr:mx.Collection.thisShelf. } else { trace("myColl does not contain " + title).Example The following example calls contains(): var myColl:mx. Usage collection. while (itr. myColl = _parent. Example The following example calls clear(): on (click) { var myColl:mx.utils.hasNext()) { var cd:CompactDisc = CompactDisc(itr.

var myColl:mx. Usage collection.utils.getItemAt(index) Parameters index A number that indicates the location of item within the collection. so 0 retrieves the first item.MyCompactDiscs. } //. var myCD = CompactDisc(myColl. Collection. Edition Flash MX Professional 2004. myColl = _parent. Description Method.. or null if index is out of bounds. if (myCD !=null) { trace("Retrieved " + myCD.Collection. Returns An object containing a reference to the specified collection item. and so on. returns an item within the collection by using its index. This is a zerobased index.getItemAt(0)).getItemAt() 149 .Collection. 1 retrieves the second item.getItemAt() Availability Flash Player 7..thisShelf..Title). Example The following example calls getItemAt(): //..

var title:String = cd. var artist:String = cd.hasNext()) { var cd:CompactDisk = CompactDisc(itr. var itr:mx.Collection. There are no guarantees concerning the order in which the elements are returned (unless this collection is an instance of a class that provides a guarantee). while (itr.utils.getIterator().Collection.Artist.next()). Edition Flash MX Professional 2004.Iterator = myColl. Description Method. trace("Title: " + title + " .Title.getIterator() Availability Flash Player 7. Usage collection. Example The following example calls getIterator(): on (click) { var myColl:mx. returns an iterator over the elements in the collection. myColl = _parent.Artist: " + artist). } } 150 Collection interface .thisShelf.utils.MyCompactDiscs.getIterator() Returns An Iterator object that you can use to step through the collection.

//..thisShelf.isEmpty() Returns A Boolean value of true if the collection is empty. returns the number of items in the collection. Example The following example calls getLength(): //.Collection. Description Method.getLength()).getLength() Returns The number of items in the collection.utils. var myColl:mx.. Collection..isEmpty() 151 . Usage collection. myColl = _parent.. Edition Flash MX Professional 2004. Edition Flash MX Professional 2004. Usage collection.Collection. Collection.MyCompactDiscs.getLength() Availability Flash Player 7. trace ("Collection size is: " + myColl.isEmpty() Availability Flash Player 7.

} } //. Description Method. removes the specified item from the collection. Edition Flash MX Professional 2004.removeItem(item) Parameters item The object to be removed from the collection. 152 Collection interface . Collection.isEmpty()) { trace("No CDs in the collection"). if (myColl. do not call this method while looping through an iterator.Collection.Description Method. Usage collection. Because Collection.removeItem() dynamically reduces the size of the collection. indicates whether the collection is empty.thisShelf. myColl = _parent.MyCompactDiscs... Example The following example calls isEmpty(): on (click) { var myColl:mx.removeItem() Availability Flash Player 7.utils. Returns A Boolean value of true if item was removed successfully.

utils. i++) { removeCD = toRemove[i].Title). for(i = 0.tArtistToRemove. var artist:String = "". var title:String = "".Artist + "|" + removeCD. var cd:CompactDisc = new CompactDisc().Iterator = myColl. remove the bad ones var removeCD:CompactDisc = new CompactDisc().Example The following example calls removeItem(): var myColl:mx. } } // after while loop. } } Collection.utils.getIterator(). myColl = _parent.Title. artist = cd.Artist. // get this from a text input box var removeArtist:String = _parent.Collection. while (itr.push(cd). } else { var toRemove:Array = new Array().isEmpty()) { trace("No CDs in the collection"). if (myColl. if(artist == removeArtist) { // mark this artist for deletion removeSize = toRemove.removeItem(removeCD).removeItem() 153 . i < removeSize.text.MyCompactDiscs. myColl. trace("*** Marked for deletion: " + artist + "|" + title). var removeSize:Number = 0. title = cd.thisShelf. var itr:mx. trace("Removing: " + removeCD.next()).hasNext()) { cd = CompactDisc(itr.

154 Collection interface .

If you are using the version 3 component. An editable combo box allows a user to enter text directly into a text field at the top of the list. all keystrokes go to the text box and are handled according to the rules of the TextInput component (see “TextInput component” on page 1209). and a List component. A combo box can be static or editable. The combo box is composed of three subcomponents: a Button component. This document discusses the version 2 component. as well as selecting an item from a pop-up list. It doesn’t matter if the selection is made with the mouse or the keyboard. 155 .0 and ActionScript 3.0 Components. see “Using the ComboBox” in Using ActionScript 3. the label of the selection is copied to the text field at the top of the combo box.0. with the exception of the following keys: Key Description Control+Down Opens the drop-down list and gives it focus. it opens up instead of down. If the pop-up list hits the bottom of the document. A ComboBox component receives focus if you click the text box or the button. When a ComboBox component has focus and is editable.CHAPTER 8 ComboBox component A combo box allows a user to make a single selection from a pop-up list. NOTE 8 A ComboBox component is supported for both ActionScript 2. Moves focus to the next object. When a selection is made in the list. Arrow Shift+Tab Tab Moves focus to the previous object. a TextInput component.

Moves the selection down one item. Moves focus to the next object. You can also use the following keys to control a drop-down list: Key Control+Up Arrow Down Arrow End Enter Escape Home Page Down Page Up Description If the drop-down list is open. Moves the insertion point to the end of the text box. If the drop-down list is open. Arrow Control+Up Arrow Down Arrow End Escape Enter Home Page Down Page Up Shift+Tab Tab Closes the drop-down list. 156 ComboBox component . Moves the selection up one page.When a ComboBox component has focus and is static. Closes the drop-down list and returns focus to the combo box. alphanumeric keystrokes move the selection up and down the drop-down list to the next item with the same first character. focus returns to the text box and the drop-down list closes in test mode. Moves the selection up one page. Moves the insertion point to the beginning of the text box. You can also use the following keys to control a static combo box: Key Description Control+Down Opens the drop-down list and gives it focus. alphanumeric keystrokes move the selection up and down the drop-down list to the next item with the same first character. Moves the selection to the top of the list. Selection moves to the bottom of the list. If the drop-down list is open. Moves focus to the previous object. Closes the drop-down list and returns focus to the combo box in test mode. Moves the selection down one page. focus returns to the text box and the drop-down list closes. When the drop-down list of a combo box has focus. Moves the selection down one page. Moves the selection down one item. focus returns to the text box and the dropdown list closes in the stand-alone and browser versions of Flash Player. if open in the stand-alone and browser versions of Flash Player.

the drop-down list does not open in the live preview. For more information about controlling focus. When you add the ComboBox component to an application. Moves focus to the previous object. in an application that provides driving directions. and so on. paging down through a ten-line drop-down list will show items 0-9. you must add the following line of code to enable accessibility: mx. see “FocusManager class” on page 717 or “Creating custom focus navigation” in Using ActionScript 2.ComboBoxAccImpl. You enable accessibility for a component only once. Selects the text from the insertion point to the Home position.Key Tab Shift+End Shift+Home Shift+Tab Up Arrow N OTE Description Moves focus to the next object. The page size used by the Page Up and Page Down keys is one less than the number of items that fit in the display. Using the ComboBox component You can use a ComboBox component in any form or application that requires a single choice from a list. with one item overlapping per page. Selects the text from the insertion point to the End position. For example. For example. 18-27. regardless of how many instances the component has. You can use an editable combo box for more complex scenarios. Using the ComboBox component 157 . For example.0 Components. 9-18. and the first item is displayed as the selected item. you can use the Accessibility panel to make it accessible to screen readers. For more information. However. see “Creating accessible content” in Using Flash. A live preview of each ComboBox component instance on the Stage reflects changes made to parameters in the Property inspector or Component inspector during authoring. First. you could provide a drop-down list of states in a customer address form.enableAccessibility(). The drop-down list would contain her previously entered addresses.accessibility. you could use an editable combo box for a user to enter her origin and destination addresses. Moves the selection up one item.

These properties can be used if you make a custom layout manager for your application. ComboBox component . and events of the ComboBox class. The default labels populates rowCount value is 5. is a Boolean value that indicates whether the object is visible (true) or not (false). The data parameter is an array. sets the maximum number of items that can be displayed in the list. You can set the following additional parameters for each ComboBox component instance in the Component inspector (Window > Component Inspector): restrict indicates the set of characters that a user can enter in the text field of a combo box. setting these properties in the Component inspector has no visible effect.ComboBox parameters You can set the following authoring parameters for each ComboBox component instance in the Property inspector or in the Component inspector (Window > Component Inspector menu option): data associates a data value with each item in the ComboBox component. The default value is true. and are overridden by different components as needed. Otherwise. You can write ActionScript to set additional options for ComboBox instances using the methods. properties. see “ComboBox class” on page 164.restrict” on page 193. The default value is undefined. See “ComboBox. visible N OTE 158 The minHeight and minWidth properties are used by internal sizing routines. enabled is a Boolean value that indicates whether the component can receive focus and input. They are defined in UIObject. For more information. the ComboBox component with an array of text values. editable determines if the ComboBox component is editable (true) or only selectable (false). The default value is true. The default value is false.

0). Select the Transform tool and resize the component on the Stage. 5. and NH. 3. Drag a ComboBox component from the Components panel to the Stage. in the Property inspector. In this example. Drag the ComboBox component from the Components panel to the current document’s library. ■ 6. you would only change the width of a combo box to fit its entries. In the Component inspector or Property inspector. and enter the following code: function change(evt){ trace(evt.addEventListener("change". 4.label). Select File > New and choose Flash File (ActionScript 2.Creating an application with the ComboBox component The following procedure explains how to add a ComboBox component to an application while authoring. Select File > New and choose Flash File (ActionScript 2. but doesn’t make it visible in the application. Double-click the label parameter field to open the Values dialog box. The combo box can only be resized on the Stage during authoring. Select the combo box and. Portland. and Keene for the label parameter. open the Actions panel.swf for the data parameter.swf. Enter MN. This adds the component to the library. To create a ComboBox component using ActionScript: 1. Typically. do the following: ■ Enter Minneapolis. see ComboBox. Select Frame 1 in the Timeline.swf. you could load when a user selects a city from the combo box. } comboBox.0).target. To create an application with the ComboBox component: 1. Then click the plus sign to add items.selectedItem. These are imaginary SWF files that. For more information. OR.change. the combo box presents a list of cities to select from in its pop-up list. Using the ComboBox component 159 . The last line of code adds a change event handler to the ComboBox instance. this). for example. 2. enter the instance name comboBox. 2.

addEventListener("change". only the button is the hit area—not the text box.addItem({data:1. open the Actions panel.ComboBox. cbListener. } // Add event listener. Select Control >Test Movie. For static combo boxes. the button and the text box constitute the hit area.target. While authoring. The hit area responds by opening or closing the drop-down list. 10).addItem()” on page 169 to add list items to the ComboBox.createClassObject()” on page 1362 to create the ComboBox instance. the text is clipped to fit. In editable combo boxes. label:"Two"}). label:"One"}).3.createClassObject(mx.change = function (evt_obj:Object) { trace("Currently selected item is: " + evt_obj.addItem({data:2. Customizing the ComboBox component You can transform a ComboBox component horizontally and vertically while authoring. my_cb. // Create event handler function. 160 ComboBox component . my_cb. You must resize the combo box while authoring to fit the label text. and click an item in the combo box to see a message in the Output panel. Now add an event listener and event handler function to respond when a ComboBox item is selected: // Create listener object. and enter the following code: this. var cbListener:Object = new Object(). If text is too long to fit in the combo box. select the component on the Stage and use the Free Transform tool or any of the Modify > Transform commands.label). my_cb. This script uses the method “UIObject. Select the first frame in the main Timeline. "my_cb".controls. 4. cbListener).selectedItem. 5. and then uses “ComboBox.

(See “Using styles with the List component” on page 764. as follows: ■ The button is a Button instance and uses its styles.0 Components. (See “Using styles with the Button component” on page 92.) The text is a TextInput instance and uses its styles.Using styles with the ComboBox component You can set style properties to change the appearance of a ComboBox component. Other styles are passed to the button.) The drop-down list is an List instance and uses its styles. it is a color style property and behaves differently than noncolor style properties. see “Using styles to customize component color and text” in Using ActionScript 2. For more information. and drop-down list of the combo box through those individual components. (See “Using styles with the TextInput component” on page 1212. text box. The combo box has two unique styles: openDuration and openEasing. If the name of a style property ends in “Color”.) ■ ■ Customizing the ComboBox component 161 .

The text decoration: either "none" or "underline". The default value is false. In the Halo theme. "right". The colors of this portion of the ComboBox can be modified only through skinning. "haloBlue". This style must be set to true if fontFamily refers to an embedded font. the embedded font is not used. See “RectBorder class” on page 1065. The color for text when the component is disabled. The default value is "normal". Boolean value that indicates whether the font specified in fontFamily is an embedded font. backgroundColor borderStyle Both Both color Both Both Both disabledColor embedFonts fontFamily fontSize fontStyle Both Both Both Both fontWeight textAlign Both Both textDecoration 162 ComboBox component . The font weight: either "none" or "bold". The text color. The default value is "none". The default value is 0x0B333C for the Halo theme and blank for the Sample theme. The default value is "haloGreen". See “Using skins with the ComboBox component” on page 163. The text alignment: either "left". or "center". The default value is "left". no text is displayed. the ComboBox component uses a custom rounded border for the collapsed portion of the ComboBox. All components can also accept the value "normal" in place of "none" during a setStyle() call. The font name for text. Possible values are "haloGreen". The default color is 0x848384 (dark gray). The default value is 10. Otherwise. The default value is "none". If this style is set to true and fontFamily does not refer to an embedded font. The default color is white. but subsequent calls to getStyle() return "none". and "haloOrange". The Button subcomponent uses two RectBorder instances for its borders and responds to the styles defined on that class. The background color. The point size for the font.A ComboBox component uses the following styles: Style themeColor Theme Description Halo The base color scheme of a component. The default value is "_sans". The font style: either "normal" or "italic".

Style openDuration Theme Description Both Both The duration. 0xBFBFBF]). For more information. The down arrow’s up state.0 Components. For information on customizing these skins. see “Customizing component animations” in Using ActionScript 2. The ComboBox component also uses scroll bar skins for the drop-down list’s scroll bar and two RectBorder class instances for the border around the text input and drop-down list. A ComboBox component uses the following skin properties: Property Description ComboDownArrowDisabled. of the transition animation. A reference to a tweening function that controls the animation. The information below describes these skins and provides steps for customizing them. The down arrow’s over state. in milliseconds. The default is ComboDownArrowUp. see “Using skins with the UIScrollBar component” on page 1396 and “RectBorder class” on page 1065. ComboDownArrowDownName ComboDownArrowDisabledName The down arrow’s disabled state. The default is The down arrow’s down state.fla files. The default is ComboDownArrowOver. Defaults to sine in/out. see “About skinning components” in Using ActionScript 2.fla and SampleTheme.setStyle("alternatingRowColors". These skins are located in the Flash UI Components 2/ Themes/MMDefault/ComboBox Assets/States folder of the HaloTheme. The default is ComboDownArrowDown.0 Components. ComboDownArrowUpName ComboDownArrowOverName Customizing the ComboBox component 163 . The default value is 250. Using skins with the ComboBox component The ComboBox component uses symbols in the library to represent the button states and has skin variables for the down arrow. [0xFFFFFF. comboBox. // comboBox is an instance of the ComboBox component on Stage. openEasing The following example demonstrates how to use List styles to control the behavior of the popup portion of a ComboBox component. For more information on the methods available to skin components.

For example. For the exact location on your operating system. Repeat steps 5-6 for all symbols you want to customize.controls. change the inner white square to a light gray. 6. 4. the list changes at runtime. Set 11. Customize the symbol as desired. TextInput. The drop-down list in a combo box is provided either as an array or as a data provider. 7. Select File > Import > Open External Library.0 Components. This file is located in the application-level configuration folder. and events of each subcomponent are available directly from the ComboBox component and are listed in the summary tables for the ComboBox class. the ComboBox instance properties as desired. see “About themes” in Using ActionScript 2. expand the Flash UI Components 2/Themes/MMDefault folder and drag the ComboBox Assets folder to the library for your document. use ActionScript to set the ComboBox to disabled. 3. Click the Back button to return to the main timeline. 10. Select Control > Test Movie.ComboBox ComboBox ActionScript Class Name The ComboBox component combines three separate subcomponents: Button. and select the HaloTheme.To create movie clip symbols for ComboBox skins: 1. 164 ComboBox component .fla file. Drag a ComboBox component to the Stage. 9. For this example. ComboBox class Inheritance MovieClip > UIObject class > UIComponent class > ComboBase > mx. For example. In the theme’s Library panel. open the ComboDownArrowDisabled symbol. 2. properties. Expand the ComboBox Assets/States folder in the library of your document. 8. You can change the source of the ComboBox data dynamically by switching to a new array or data provider. Most of the methods.0). Select File > New and choose Flash File (ActionScript 2. If you use a data provider. Open the symbols you want to customize for editing. 5. and List.

addItemAt() ComboBox.close() ComboBox. This may occur when the user first interacts with the combo box. Methods that return an item return it as an object. If an item is an object. Returns the item at the specified index.addItem() ComboBox. Removes all items in the list. it is converted to a string. Removes an item from the list at the specified location.removeAll() ComboBox. If the item is a primitive data type other than String. or when the above code runs.Items in a combo box list are indexed by position. Accessing the pop-up list may cause a pause in the application. ComboBox methods to which you supply items have two parameters. Replaces the content of the item at the specified index. that refer to the properties above. An object that contains a label property and a data property NOT E An object may use the ComboBox.getItemAt() ComboBox. ComboBox class 165 .dropdown. Adds an item to the end of the list at the specified index. A combo box defers the instantiation of its drop-down list until a user interacts with it. Sorts the list using a field of each item.open() ComboBox. Use the following code to programmatically access the ComboBox component’s drop-down list and override the delay: var foo = myComboBox. starting with the number 0. Opens the drop-down list.sortItems() ComboBox.removeItemAt() ComboBox. Method summary for the ComboBox class The following table lists methods of the ComboBox class. Method ComboBox. An item can be one of the following: ■ ■ A primitive data type.replaceItemAt() ComboBox.labelFunction or ComboBox.sortItemsBy() Description Adds an item to the end of the list.labelField property to determine the label property. Therefore. a combo box may appear to respond slowly on first use. the label property must be a string and the data property can be any ActionScript value. label and data. Closes the drop-down list. Sorts the list using a compare function.

166 ComboBox component .methodName. Sets focus to the component instance.createObject() UIObject. Calls a function when parameters have been set in the Property and Component inspectors. Gets the style property from the style declaration or object.setSize() UIObject. use the form comboBoxInstance.setSkin() UIObject.invalidate() UIObject. Method Description UIObject. Destroys a component instance.doLater() UIObject. When calling these methods from the ComboBox object. Sets the style property on the style declaration or object.setStyle() Methods inherited from the UIComponent class The following table lists the methods the ComboBox class inherits from the UIComponent class.createClassObject() Creates an object on the specified class.destroyObject() Creates a subobject on an object. Sets a skin in the object.setFocus() Description Returns a reference to the object that has focus. Method UIComponent.methodName. Moves the object to the requested position. Marks the object so it is redrawn on the next frame interval.getStyle() UIObject. Forces validation of the object so it is drawn in the current frame. Resizes the object to the requested size. When calling these methods from the ComboBox object.getFocus() UIComponent. UIObject. UIObject.redraw() UIObject.move() UIObject. use the form comboBoxInstance.Methods inherited from the UIObject class The following table lists the methods the ComboBox class inherits from the UIObject class.

the left edge of the object. the length of the drop-down list. relative to the right edge of its parent. Read-only. The value of the selected item in the drop-down list. The maximum number of list items to display at one time. Property ComboBox.propertyName.left UIObject. ComboBox. Property UIObject.dataProvider Description The data model for the items in the list. UIObject. The index of the selected item in the drop-down list. Indicates which data field to use as the label for the dropdown list. the height of the object.Property summary for the ComboBox class The following table lists properties of the ComboBox class. A reference to the TextInput component in the combo box.textField ComboBox. the position of the bottom edge of the object.editable ComboBox.right ComboBox class 167 .dropdown ComboBox. The width of the drop-down list. Read-only.The position of the right edge of the object.bottom Description Read-only.selectedItem ComboBox.labelField ComboBox.selectedIndex ComboBox. Specifies a function to compute the label field for the dropdown list.value Properties inherited from the UIObject class The following table lists the properties the ComboBox class inherits from the UIObject class. When accessing these properties from the ComboBox object. Returns a reference to the List component contained by the combo box. The string of text in the text box. in pixels. Indicates whether a combo box is editable. The set of characters that a user can enter in the text field of a combo box.rowCount ComboBox.length ComboBox.height UIObject. use the form comboBoxInstance. Read-only.dropdownWidth ComboBox. The value of the text box (editable) or drop-down list (static). relative to the bottom edge of its parent.labelFunction ComboBox.text ComboBox.restrict ComboBox. in pixels. in pixels. Read-only.

UIComponent. Broadcast when the list of the combo box begins to retract. in pixels.x UIObject. Read-only. the position of the top edge of the object. When accessing these properties from the ComboBox object.change Description Broadcast when the value of the combo box changes as a result of user interaction. UIObject. Event ComboBox.itemRollOver 168 ComboBox component .top UIObject.itemRollOut ComboBox. Read-only. the left edge of the object.visible UIObject.Property UIObject. relative to its parent.enabled Description Indicates whether the component can receive focus and input.enter ComboBox. ComboBox. the width of the object. A Boolean value indicating whether the object is visible (true) or not (false). Read-only. Broadcast when the pointer rolls off a pop-up list item. relative to its parent. in pixels. Read-only.scaleX Description A number indicating the scaling factor in the x direction of the object.tabIndex Event summary for the ComboBox class The following table lists events of the ComboBox class. use the form comboBoxInstance.close ComboBox. the top edge of the object. Broadcast when the Enter key is pressed.width UIObject. A number indicating the scaling factor in the y direction of the object. in pixels.propertyName.scaleY UIObject. A number indicating the tab order for a component in a document. Broadcast when a drop-down list item is rolled over.y Properties inherited from the UIComponent class The following table lists the properties the ComboBox class inherits from the UIComponent class. relative to its parent. Property UIComponent.

Broadcast when a key is pressed.open ComboBox.resize Description Broadcast when an object is about to draw its graphics.keyDown UIComponent.load UIObject. Edition Flash MX 2004.keyUp Description Broadcast when an object receives focus. Broadcast when an object’s state changes from visible to invisible. Broadcast when subobjects are being created.0.addItem() Availability Flash Player 6 (6. ComboBox.move UIObject.addItem() 169 .focusOut UIComponent.Event ComboBox.unload Events inherited from the UIComponent class The following table lists the events the ComboBox class inherits from the UIComponent class. Broadcast when an object has been resized. Event UIComponent.focusIn UIComponent.draw UIObject.79. ComboBox. Broadcast when an object’s state changes from invisible to visible. Broadcast when a key is released. Event UIObject. Broadcast when the drop-down list is scrolled.hide UIObject. Events inherited from the UIObject class The following table lists the events the ComboBox class inherits from the UIObject class.reveal UIObject. Broadcast when the object has moved. Broadcast when an object loses focus.scroll Description Broadcast when the drop-down list begins to open. UIObject.0). Broadcast when the subobjects are being unloaded.

addItem(label[. Returns The index at which the item was added. When you test the SWF file. it can be of any data type.addItem({data:3. Parameters label data obj A string that indicates the label for the new item. // Add event listener and event handler function. Example With a ComboBox component instance named my_cb. trace("label: "+currentlySelected. the Output panel displays the identity of the “target” the data value and the label: // Add Items to Combo Box.addItem({label:label[. 170 ComboBox component . Description Method. my_cb.target). and click one of the items. This ActionScript creates a ComboBox with three items. my_cb. data:data]}) comboBoxInstance. data]) comboBoxInstance.Usage comboBoxInstance.target. This parameter is optional. label:"second value"}).change = function(evt_obj:Object):Void { var currentlySelected:Object = evt_obj. cbListener). An object with a label property and an optional data property. }. var cbListener:Object = new Object().data).addItem("this is an Item"). label:"third value"}). trace("data: "+currentlySelected. add the following ActionScript to the Actions panel for the first frame of the main timeline. my_cb. my_cb. The data for the item.selectedItem. trace(evt_obj.label).addItem(obj). cbListener. adds a new item to the end of the list. each has a data value and a label string.addEventListener("change".addItem({data:2.

An object with label and data properties.addItem({data:2. data:data]}) comboBoxInstance. and a Button component instance named my_btn. obj). Parameters index A number 0 or greater that indicates the position at which to insert the item (the index of the new item). label:"third value"}). label:"second value"}).length are ignored. ComboBox. my_btn. label data obj Returns The index at which the item was added.addItemAt() 171 . label[.addItemAt(0. Indices greater than ComboBox. data]) comboBoxInstance. my_cb.0). The data for the item. {data:1. it can be of any data type.0.addItemAt(index. you’ll see that it added another item labeled “first value”: my_cb. label:"first value"}). This parameter is optional. click the combo box to see two items in it. When you test the SWF file. Example Start with a ComboBox component instance named my_cb. btnListener. var btnListener:Object = new Object().addItem({data:3. }. and the next time you click the combo box.addItemAt(index. Edition Flash MX 2004.addItemAt(index.79. A string that indicates the label for the new item. Usage comboBoxInstance. Add the following ActionScript to the Actions panel for the first frame of the main timeline. Description Method. Then click the button. btnListener).addItemAt() Availability Flash Player 6 (6.click = function() { my_cb. adds a new item to the end of the list at the index specified by the index parameter.addEventListener("click". {label:label[.ComboBox.

When the instance dispatches the event. a component instance (comboBoxInstance) dispatches an event (in this case.selectedItem property changes as a result of user interaction. also called a handler. Example With a ComboBox component instance my_cb on the Stage.0).change = function(eventObject:Object) { // Your code here.addEventListener()) on the component instance that broadcasts the event to register the listener with the instance. see “EventDispatcher class” on page 495. }. listenerObject) Description Event.79. label:"Second Item"}). 172 ComboBox component .0. the following example sends the instance name of the component that generated the change event to the Output panel: // Add Item to List. Edition Flash MX 2004. label:"First Item"}).addItem({data:1. Finally.addEventListener("change".ComboBox.change Availability Flash Player 6 (6. // Create Listener Object. Usage var listenerObject:Object = new Object(). you call addEventListener() (see EventDispatcher. You define a method with the same name as the event on the listener object. it automatically passes an event object (eventObject) to the listener object method. broadcast to all registered listeners when the ComboBox. When the event is triggered.selectedIndex or ComboBox. my_cb. the method is called when the event is triggered. Each event object has properties that contain information about the event. Using a dispatcher/listener event model. change) and the event is handled by a function. var cbListener:Object = new Object(). on a listener object (listenerObject) that you create. the listener is called. For more information.addItem({data:2. comboBoxInstance. my_cb. listenerObject. You can use these properties to write code that handles the event.

79. var btnListener:Object = new Object(). // Add Listener.close().close() Availability Flash Player 6 (6.close() Parameters None. my_button.change = function(event_obj:Object) { trace("Value changed to: "+event_obj. the following example closes the drop-down list of the my_cb combo box when the my_button button is clicked: my_cb. Returns Nothing. Edition Flash MX 2004. Description Method.addItem({data:3.addEventListener() ComboBox.target. }.click = function() { my_cb. btnListener).close() 173 . ComboBox. my_cb. cbListener.selectedItem. cbListener). and a Button component instance my_button. label:"third value"}). label:"second value"}). my_cb.addEventListener("change".0). Usage comboBoxInstance.label). btnListener. }. See also EventDispatcher.0. closes the drop-down list. Example With a ComboBox component instance my_cb on the Stage.addEventListener("click".// Assign function to Listener Object.addItem({data:2.

listenerObject.79. close) and the event is handled by a function. see “EventDispatcher class” on page 495. on a listener object (listenerObject) that you create. Edition Flash MX 2004. Usage var listenerObject:Object = new Object(). For more information.open() ComboBox. you call the addEventListener() method on the component instance that broadcasts the event to register the listener with the instance. 174 ComboBox component . You can use these properties to write code that handles the event. When the event is triggered.close Availability Flash Player 6 (6. Using a dispatcher/listener event model. a component instance (comboBoxInstance) dispatches an event (in this case.close = function(eventObject:Object) { // Your code here.addEventListener("close". broadcast to all registered listeners when the drop-down list of the combo box is fully retracted. comboBoxInstance. the listener is called.0. When the instance dispatches the event. listenerObject) Description Event.See also ComboBox.0). }. it automatically passes an event object (eventObject) to the listener object method. You define a method with the same name as the event on the listener object. also called a handler. the method is called when the event is triggered. Finally. Each event object has properties that contain information about the event.

addEventListener() ComboBox. The List component and the ComboBox component share the dataProvider property. The value of this property can be an array or any object that implements the DataProvider API. my_cb. the following example sends a message to the Output panel when the drop-down list opens or closes: // Add Items to List.addItem({data:1.0). } // Add Listener. my_cb.dataProvider 175 . } cbListener.dataProvider Availability Flash Player 6 (6.addEventListener("close".0."). label:"Second Item"}).dataProvider Description Property. See also EventDispatcher.open = function(evt_obj:Object) { trace("The ComboBox has opened. Edition Flash MX 2004.Example With a ComboBox component instance my_cb on the Stage. my_cb. my_cb. cbListener). var cbListener:Object = new Object(). the data model for items viewed in a list.open(). cbListener).close = function(evt_obj:Object){ trace("The ComboBox has closed.addEventListener("open"."). // Open the combo box. my_cb. and changes to this property are immediately available to both components. cbListener. label:"First Item"}). ComboBox. // Create Listener Object.79.addItem({data:2. Usage comboBoxInstance. The default value is [].

/* is the same as my_cb. and can be used to broadcast model changes to multiple components.The List component. i++) { // These changes to the DataProvider will be broadcast to the list. This includes Flash Remoting RecordSet objects. the labelField or labelFunction property is accessed to determine what parts of the item to display. label:"Second Item"}]. and not objects. The default value is "label".addItem({data:2. my_cb. label:"Second Item"}). like other data-aware components. and so on) needed for it to be the model of a list. and so on. label:"First Item"}. Example This example uses an array of strings to populate the drop-down list for the ComboBox component instance my_cb: my_cb. if not. the list is not able to sort the items and maintain the selection state. } 176 ComboBox component . Firefly DataSet components. Any instance that implements the DataProvider API is eligible as a data provider for a List component. for (var i:Number = 0. a comma-separated list of all fields is displayed.addItem({label: accounts[i]. {data:2.addItem({data:1. myDP. getItemAt().as for details).accountID}). i < accounts.dataProvider = myDP. adds methods to the Array object’s prototype so that they conform to the DataProvider API (see DataProvider. list. it is chosen for display.length.name. Therefore. label:"First Item"}). NOT E If the array contains strings at each index. Any sorting causes the selection to be lost.dataProvider = [{data:1. */ This example creates a data provider array and assigns it to the dataProvider property: var myDP:Array = new Array(). so if such a field exists. data: accounts[i]. If the array contains objects. any array that exists at the same time as a list automatically has all the methods (addItem().

my_cb. However.dropdown.dropdownWidth ComboBox. when you access the dropdown property. pIcon:"dw_id"}).addItem({label:"Flash 1". // Add Items to List.dropdown Description Property (read-only). my_cb. // Set the iconField style within the ComboBox's dropdown property. my_cb.ComboBox. the following ActionScript uses the dropdown property to add icons to each item in the drop-down list: // Set the dropdown width to accommodate the label sizes. pIcon:"fl_id"}). and two movie clip symbols in the library with Linkage ID values set to dw_id and fl_id. "pIcon"). the list is created.dropdownWidth = 200. // The dropdown property is a reference to the List component within the ComboBox // so we can set List styles for the CB. my_cb.dropdown 177 . The List subcomponent isn’t instantiated in the combo box until it needs to be displayed.0.addItem({label:"Dreamweaver 1".setStyle("iconField". Example With a ComboBox component instance my_cb on the Stage. Usage comboBoxInstance. Edition Flash MX 2004. returns a reference to the list contained by the combo box. my_cb. See also ComboBox.79.0).dropdown Availability Flash Player 6 (6.addItem({label:"Flash 2". pIcon:"fl_id"}).

dropdown ComboBox.79. my_cb. the width limit of the drop-down list.editable 178 ComboBox component . my_cb.addItem({data:3. Example With a ComboBox component instance my_cb on the Stage.0).editable Availability Flash Player 6 (6.dropdownWidth Availability Flash Player 6 (6. the following ActionScript sets the drop-down list width to accommodate the labels: // Set the dropdown width to accommodate the label sizes.79. See also ComboBox. in pixels. label:"This is a long label"}). The default value is the width of the ComboBox component (the TextInput instance plus the SimpleButton instance).0).addItem({data:2. my_cb. Usage comboBoxInstance.dropdownWidth Description Property. Usage comboBoxInstance.addItem("ComboBox"). Edition Flash MX 2004.ComboBox. // Add Items to List.0.0. Edition Flash MX 2004.dropdownWidth = 200. label:"This has an even longer label"}). my_cb.

editable = true. If a combo box is not editable. myComboBox. changeListener).target. // Respond to the user clicking "Add new item". } my_cb. evt_obj..setFocus(). The second listener handles the user pressing the Enter key to add their entry to the combo box list: // Add items to the combo box list. Example With a ComboBox component instance my_cb on the Stage.target.target.addEventListener("enter".selectedIndex != undefined) { evt_obj. } } my_cb.setFocus().editable = false. The first listener handles clicking the “Add new item” label to make the combo box field editable. In an editable combo box.addItem({data:-1.target.addItem({data:''.editable = true. To make a combo box editable and still retain the selected item. } evt_obj.addEventListener("change".selectedIndex = evt_obj.selectedIndex = ix.target. function changeListener(evt_obj:Object) { if (evt_obj. label:"Second Item"}). Making a combo box editable clears the combo box text field.data == -1) { evt_obj."}).target.target. a user can enter values into the text box that do not appear in the drop-down list.value != '') { evt_obj.target.target. label:evt_obj. myComboBox. my_cb. label:"Add new item. evt_obj.editable = false. indicates whether the combo box is editable (true) or not (false). // Clears the text field.selectedItem. The text box displays the text of the item in the list.target. It also sets the selected index (and item) to undefined. enterListener).selectedIndex. function enterListener(evt_obj:Object) { if (evt_obj.target.length-1.dataProvider.value}). The default value is false. evt_obj. use the following code: var ix:Number = myComboBox. } else if (evt_obj. my_cb. the following ActionScript creates a combo box list and two listeners.target.Description Property. // Respond to the user pressing the Enter key after adding a new item name.addItem({data:2. you cannot enter text into the text box. label:"First Item"}). ComboBox. // Copies the label back into the text field.editable 179 ..addItem({data:1. my_cb.

enter Availability Flash Player 6 (6. You define a method with the same name as the event on the listener object. on a listener object (listenerObject) that you create. 180 ComboBox component .enter = function(eventObject:Object) { // Your code here. you call the addEventListener() method on the component instance that broadcasts the event to register the listener with the instance. This event is a TextInput event that is broadcast only from editable combo boxes. When the instance dispatches the event. Using a dispatcher/listener event model. a component instance (comboBoxInstance) dispatches an event (in this case.0). enter) and the event is handled by a function. Usage var listenerObject:Object = new Object(). For more information.79. see “EventDispatcher class” on page 495. }. it automatically passes an event object (eventObject) to the listener object method. When the event is triggered. the listener is called. also called a handler. the method is called when the event is triggered. listenerObject.addEventListener("enter". broadcast to all registered listeners when the user presses the Enter key in the text box. Edition Flash MX 2004. You can use these properties to write code that handles the event. comboBoxInstance.ComboBox. Each event object has properties that contain information about the event. see TextInput. Finally. listenerObject) Description Event. For more information.0.enter.

// Respond to the user pressing the Enter key after adding a new item name.target. my_cb.target.addEventListener("change".data == -1) { evt_obj.addItem({data:''. } } my_cb. The second listener handles the user pressing the Enter key to add their entry to the combo box list: // Add items to the combo box list.target.target. function changeListener(evt_obj:Object) { if (evt_obj.selectedIndex = evt_obj.editable = true.editable = false.addItem({data:2.selectedItem. changeListener).target.target. } evt_obj.addItem({data:-1.value}). evt_obj. } my_cb. my_cb. evt_obj.target. my_cb.target.editable = false.enter 181 .target. See also EventDispatcher.setFocus().Example With a ComboBox component instance my_cb on the Stage.addItem({data:1. label:"First Item"}).selectedIndex != undefined) { evt_obj.target... function enterListener(evt_obj:Object) { if (evt_obj. label:"Add new item. The first listener handles clicking the “Add new item” label to make the combo box field editable.length-1."}).dataProvider.addEventListener("enter". } else if (evt_obj.target. label:"Second Item"}).setFocus(). // Respond to the user clicking "Add new item". the following ActionScript creates a combo box list and two listeners. evt_obj. label:evt_obj.addEventListener() ComboBox.value != '') { evt_obj. enterListener).target.

Description Method.label).0.itemRollOut = function(eventObject:Object) { // Your code here. my_cb.itemRollOut Availability Flash Player 6 (6. trace(my_cb. Usage comboBoxInstance.getItemAt(1). Usage var listenerObject:Object = new Object(). my_cb.length. ComboBox.getItemAt(index) Parameters index The index of the item to retrieve.ComboBox. label:"First Item"}). Example With a ComboBox component instance my_cb on the Stage.addItem({data:1.0.0).0). and less than the value of ComboBox.addItem({data:2. label:"Second Item"}).79. Edition Flash MX 2004. 182 ComboBox component . Edition Flash MX 2004. Returns The indexed item object or value. The index must be a number greater than or equal to 0. listenerObject. retrieves the item at a specified index.79.getItemAt() Availability Flash Player 6 (6. The value is undefined if the index is out of range. the following ActionScript displays the label for the first combo box item in the Output panel: //Add Item to List.

addEventListener("itemRollOver".index+". the listener is called. my_cb. Example With a ComboBox instance my_cb on the Stage.addItem({data:2.itemRollOut 183 . Using a dispatcher/listener event model. When the instance dispatches the event. comboBoxInstance. For more information.index+".addEventListener("itemRollOut". label:"First Item"}). the method is called when the event is triggered. Description Event. broadcast to all registered listeners when the pointer rolls off pop-up list items.type). event: "+evt_obj. my_cb.addItem({data:1. you call the addEventListener() method on the component instance that broadcasts the event to register the listener with the instance. ComboBox. You can use these properties to write code that handles the event.itemRollOut. the following ActionScript sends a message to the Output panel that indicates the item index and the event when the pointer rolls on or off an item: my_cb. my_cb. // Create Listener Object. label:"Second Item"}). cbListener). }. on a listener object (listenerObject) that you create. // Add Listener. listenerObject) Event object In addition to the standard properties of the event object. see List.addEventListener("itemRollOut". This is a List event that is broadcast from a combo box.type). itemRollOut) and the event is handled by a function. the itemRollOut event has an index property.}. The index is the number of the item that the pointer rolled off. }. When the event is triggered. a component instance (comboBoxInstance) dispatches an event (in this case.itemRollOver = function(evt_obj:Object) { trace("index: "+evt_obj. cbListener. cbListener. var cbListener:Object = new Object(). Each event object has properties that contain information about the event.itemRollOut = function(evt_obj:Object) { trace("index: "+evt_obj. also called a handler. cbListener). it automatically passes an event object (eventObject) to the listener object method. Finally. see “EventDispatcher class” on page 495. For more information. event: "+evt_obj. You define a method with the same name as the event on the listener object.

you call the addEventListener() method on the component instance that broadcasts the event to register the listener with the instance. broadcast to all registered listeners when the pointer rolls over pop-up list items.0.itemRollOver Availability Flash Player 6 (6.itemRollOver.79. Usage var listenerObject:Object = new Object(). When the instance dispatches the event.See also ComboBox. a component instance (comboBoxInstance) dispatches an event (in this case. Finally. listenerObject. This is a List event that is broadcast from a combo box. the itemRollOver event has an index property. also called a handler. For more information. Edition Flash MX 2004. 184 ComboBox component . }. When the event is triggered. EventDispatcher.0). it automatically passes an event object (eventObject) to the listener object method.addEventListener() ComboBox. see “EventDispatcher class” on page 495. listenerObject) Event object In addition to the standard properties of the event object. Description Event. Each event object has properties that contain information about the event. The index is the number of the item that the pointer rolled over. the method is called when the event is triggered. itemRollOver) and the event is handled by a function. see List. the listener is called. You define a method with the same name as the event on the listener object.itemRollOver. Using the dispatcher/listener event model. For more information. comboBoxInstance. on a listener object (listenerObject) that you create.itemRollOver = function(eventObject:Object) { // Your code here. You can use these properties to write code that handles the event.addEventListener("itemRollOver".

type).itemRollOut. var cbListener:Object = new Object().labelField Description Property.addEventListener("itemRollOut".addItem({data:2. event: " + evt_obj. }. ComboBox.addEventListener() ComboBox.0. See also ComboBox.labelField. cbListener). cbListener).labelField 185 .index + ". // Add Listener.addItem({data:1. label:"First Item"}). The default value is undefined.Example With a ComboBox instance my_cb on the Stage.itemRollOver = function(evt_obj:Object) { trace("index: " + evt_obj. cbListener. my_cb.79. my_cb.index + ". Edition Flash MX 2004. the name of the field in dataProvider array objects to use as the label field. label:"Second Item"}).itemRollOut = function(evt_obj:Object) { trace("index: " + evt_obj.0). event: " + evt_obj. This is a property of the List component that is available from a ComboBox component instance. Usage comboBoxInstance. see List. // Create Listener Object.labelField Availability Flash Player 6 (6. the following ActionScript sends a message to the Output panel that indicates the item index and the event when the pointer rolls on or off an item: my_cb.type). EventDispatcher. }.addEventListener("itemRollOver". my_cb. For more information. cbListener.

Usage comboBoxInstance. Edition Flash MX 2004. age:"young"}. " + itemObj.0.79.labelFunction Availability Flash Player 6 (6.Example The following example sets the dataProvider property to an array of strings and sets the labelField property to indicate that the name field should be used as the label for the drop-down list: my_cb. lastName:"Yachuk".lastName + ". {firstName:"Gary".dataProvider = [ {name:"Gary". age:"old"}. Example The following example creates a data provider and then defines a function to specify what to use as the label in the drop-down list: myComboBox. age:"really young"}. lastName:"Grossman".dataProvider = [ {firstName:"Nigel". lastName:"Pegg". You must define the function. The default value is undefined.labelFunction = function(itemObj){ return (itemObj.labelFunction ComboBox. See also List. a function that computes the label of a data provider item.0). lastName:"Walcott". my_cb. {name:"Susan".labelField = "name". age:"really old"} ]. gender:"female"} ].firstName). myComboBox. gender:"male"}. {firstName:"Greg".labelFunction Description Property. } 186 ComboBox component . {firstName:"Chris".

Usage comboBoxInstance.length.open() 187 .length.0.labelField ComboBox.0). This is a property of the List component that is available from a ComboBox instance. The default value is 0. Returns Nothing.length Description Property (read-only). Edition Flash MX 2004.0.open() Availability Flash Player 6 (6. Example The following example stores the value of length to a variable: var dropdownItemCount:Number = myComboBox.length Availability Flash Player 6 (6. ComboBox.79. ComboBox. see List. Edition Flash MX 2004.open() Parameters None. the length of the drop-down list.See also List. For more information.0).79. Usage comboBoxInstance.

addItem({data:2. Usage var listenerObject:Object = new Object().Description Method.open = function(eventObject:Object) { // Your code here. and a Button component instance my_button. label:"third value"}).79.addItem({data:3.addEventListener("click". Edition Flash MX 2004.open Availability Flash Player 6 (6. label:"second value"}).0).addEventListener("open". btnListener). btnListener.0. var btnListener:Object = new Object(). my_button. Example With a ComboBox component instance my_cb on the Stage. listenerObject. }. comboBoxInstance. my_cb. }. listenerObject) 188 ComboBox component . opens the drop-down list.close() ComboBox. the following example opens the drop-down list of the my_cb combo box when the my_button button is clicked: my_cb. See also ComboBox.open().click = function() { my_cb.

open 189 .addEventListener("open". You define a method with the same name as the event on the listener object. Each event object has properties that contain information about the event. the method is called when the event is triggered. When the event is triggered. You can use these properties to write code that handles the event.").addItem({data:2. // Create Listener Object. the following example sends a message to the Output panel when the drop-down list opens or closes: // Add Items to List.addEventListener("close". the listener is called. broadcast to all registered listeners when the drop-down list is completely open. } cbListener. also called a handler.close = function(evt_obj:Object){ trace("The ComboBox has closed. it automatically passes an event object (eventObject) to the listener object method. my_cb. cbListener). open) and the event is handled by a function. Using the dispatcher/listener event model. var cbListener:Object = new Object().addEventListener() ComboBox. my_cb. Example With a ComboBox component instance my_cb on the Stage. my_cb. see “EventDispatcher class” on page 495. // Open the combo box. my_cb.addItem({data:1. on a listener object (listenerObject) that you create. my_cb. EventDispatcher. When the instance dispatches the event. label:"First Item"}). cbListener. Finally."). a component instance (comboBoxInstance) dispatches an event (in this case. } // Add Listener. you call the addEventListener() method on the component instance that broadcasts the event to register the listener with the instance. cbListener).open().open = function(evt_obj:Object) { trace("The ComboBox has opened.close. For more information. See also ComboBox. label:"Second Item"}).Description Event.

push({data:2. it clears the combo box’s items: my_cb. When you click the button. Usage comboBoxInstance. // Create dataprovider.0). // Define event listener object. Returns Nothing. When you click the combo box.79. clear_button. var myDP_array:Array = new Array().0. This is a method of the List component that is available from an instance of the ComboBox component.dataProvider = myDP_array. and a Button component instance clear_button on the Stage. Edition Flash MX 2004. } // Add Listener. myDP_array.addEventListener("click". clear_button. label:"First Item"}). my_cb.removeAll(). the following ActionScript positions the combo box and button beside each other.ComboBox.removeAll() Availability Flash Player 6 (6.removeAll() Parameters None. myDP_array. 190 ComboBox component . clearListener. clearListener).click = function(evt_obj:Object){ my_cb.move(120. var clearListener:Object = new Object().push({data:1. Example With a ComboBox instance my_cb on the Stage.move(10. you’ll see a list of items. removes all items in the list. label:"Second Item"}). 10). Description Method. 10).

The index is zero-based. 10). my_cb.move(10. Edition Flash MX 2004. 10).removeItemAt() Availability Flash Player 6 (6.0. removes the item at the specified index position. clear_button. you’ll see a list of two items. Example With a ComboBox instance my_cb on the Stage. ComboBox. because the value is zero-based): my_cb.removeItemAt().See also ComboBox. myDP_array. label:"Second Item"}). // Create dataprovider. and a Button component instance clear_button on the Stage. This is a method of the List component that is available from an instance of the ComboBox component.replaceItemAt() ComboBox. var myDP_array:Array = new Array(). Description Method.removeItemAt() 191 .removeItemAt(index) Parameters index A number that indicates the position of the item to remove. the following ActionScript positions the combo box and button beside each other.0).dataProvider = myDP_array. The list indices after the index indicated by the index parameter collapse by one.push({data:1. When you click the combo box. label:"First Item"}). Usage comboBoxInstance. ComboBox. it clears the combo box’s second item (at index position 1. myDP_array.move(120.79. When you click the button. Returns An object. the removed item (undefined if no item exists).push({data:2.

replaces the content of the item at the specified index. } // Add Listener.removeItemAt(1). {label:label[. clear_button.replaceItemAt() Availability Flash Player 6 (6.replaceItemAt(index. See also ComboBox. clearListener. obj). ComboBox. label[.replaceItemAt() ComboBox. Usage comboBoxInstance. clearListener). This is a method of the List component that is available from the ComboBox component.addEventListener("click". The data for the item. data]) comboBoxInstance. var clearListener:Object = new Object().click = function(evt_obj:Object){ my_cb. Parameters index A number 0 or greater that indicates the position at which to insert the item (the index of the new item).79. 192 ComboBox component .// Define event listener object. Description Method. This parameter is optional. label data obj Returns Nothing. data:data]}) comboBoxInstance.removeAll().0.replaceItemAt(index. An object with label and data properties. A string that indicates the label for the new item.replaceItemAt(index.0). Edition Flash MX 2004.

selectedIndex. // Create listener for user pressing Enter key on the Text Input field. and a TextInput component instance label_ti on the Stage. See also ComboBox. ComboBox. label_ti. If the string begins with a caret (^). the following ActionScript code adds the user input to the combo box when the user presses the Enter key: // Add Items to List. You can specify a range by using a dash (-).addItem({data:2. label:"First Item"}).restrict Description Property.selectedIndex. If this property is a string of characters. label:"Second Item"}). the string is scanned from left to right. The default value is undefined. Usage comboBoxInstance. tiListener.79.target. {label:evt_obj.removeAll(). indicates the set of characters that a user can enter in the text field of a combo box. ComboBox.removeItemAt() ComboBox. tiListener). // Needed to refresh recently modified ComboBox entry my_cb. Edition Flash MX 2004.restrict Availability Flash Player 6 (6.0. all characters that follow the caret are considered unacceptable characters. the characters in the string are considered acceptable.0). my_cb. my_cb.replaceItemAt(my_cb. If the string does not begin with a caret. If this property is null or an empty string (""). }.enter = function(evt_obj:Object) { my_cb.Example With a ComboBox component instance my_cb. the user can enter only characters in the string.restrict 193 .addItem({data:1.text}).addEventListener("enter". var tiListener:Object = new Object(). a user can enter any character.selectedIndex = my_cb.

restrict = "0-9\\-\\^\\\\".addItem({data:1. my_cb. label:"Second Item"}). Therefore. caret (^). or backslash (\) character.addItem({data:2.\\ ". // Restrict the characters that can be entered into combo box. you may think that the following should work: myText. the value 0-9-^\ is sent to the restrict interpreter. The restrict property restricts only user interaction.editable = true. To send the value 0-9\-\^\\ to the restrict interpreter.restrict = "0-9\-\^\\". The Actions panel’s restrict interpreter also uses the backslash as an escape character. It signifies that the character following the backslash should be treated “as is. Because you must enter this expression within double quotation marks. it has a special meaning for the Actions panel’s double-quote interpreter. a script may put any text into the text field. my_cb. you could use the following code to enter a single quotation mark: var leftQuote = "\’".You can use the backslash (\) to enter a hyphen (-). and the restrict interpreter doesn’t understand this value. my_cb. dashes. 194 ComboBox component . you must enter the following code: myCombo.” For example.restrict = "0-9\\-\\. However. and dots: // Add Items to List. label:"First Item"}). This property does not synchronize with the Embed Font Outlines check boxes in the Property inspector. but you must also escape the expression so that it will be read correctly by the Actions panel’s built-in interpreter for double quotation marks. you must not only provide the expression for the restrict interpreter. Example With a ComboBox component instance my_cb. since this expression is surrounded by double quotation marks. the following ActionScript restricts the entry of characters to numbers 0-9. as shown here: \^ \\\ When you enter a backslash in the Actions panel within double quotation marks. my_cb. // Enable editing of combo box.

myCombo. If the number of items in the drop-down list is greater than the rowCount property. The default value is 5. it resizes to the number of items in the list. and the second \ tells the interpreter that the next character should not be treated as a special character. This behavior differs from the List component. If the value is negative or fractional. Usage comboBoxInstance.0. The first \ escapes the double quotation marks. and spaces. the list resizes and a scroll bar is displayed if necessary. the first line of code limits the text field to uppercase letters.rowCount Availability Flash Player 6 (6. my_combo.0). and \. even if some empty space is shown.rowCount 195 .restrict = "0-9\\-\\^\\\\". which always shows the number of rows specified by its rowCount property. You must use a double backslash to escape the characters -.restrict = "A-Z 0-9". ComboBox. the maximum number of rows visible in the drop-down list before the combo box inserts a scroll bar.^ \” in the instance myCombo.In the following example. numbers. The second line of code allows all characters except lowercase letters. ComboBox. If the drop-down list contains fewer items than the rowCount property. Edition Flash MX 2004. the behavior is undefined.79. The following code allows a user to enter the characters “0 1 2 3 4 5 6 7 8 9 .rowCount Description Property. ^.restrict = "^a-z". my_combo.

the scroll event has one additional property. my_cb. Edition Flash MX 2004. and add a scrollbar to see the fourth: // Add Items to List.scroll = function(eventObject:Object) { // Your code here.scroll Availability Flash Player 6 (6. the value is always "vertical". label:"First Item"}).Example With a ComboBox component instance my_cb. my_cb. label:"Second Item"}). my_cb. Event object Along with the standard event object properties. ComboBox.addItem({data:2. "horizontal" or "vertical".addItem({data:1. listenerObject). It is a string with two possible values.79.rowCount = 3. my_cb.0). comboBoxInstance. For a ComboBox scroll event. my_cb.addEventListener("scroll". }.0. Usage var listenerObject:Object = new Object().addItem({data:4. Description Event. the following ActionScript sets the combo box to show the first three items. direction. // Display scroll bar if ComboBox has more than 3 items.addItem({data:3. label:"Fourth Item"}). This is a List component event that is available to the ComboBox component. 196 ComboBox component . listenerObject. broadcast to all registered listeners when the drop-down list is scrolled. label:"Third Item"}).

You define a method with the same name as the event on the listener object. label:"Third Item"}). When the instance dispatches the event.scroll 197 . You can use these properties to write code that handles the event. cbListener). my_cb. on a listener object (listenerObject) that you create.addEventListener() ComboBox.Using a dispatcher/listener event model. the method is called when the event is triggered. label:"First Item"}). // Create Listener Object. // Display scroll bar if ComboBox has more than 2 items.addItem({data:4. also called a handler. }. the following example sends a message to the Output panel that indicates the index of the item that the list scrolled to: // Add Items to List. a component instance (comboBoxInstance) dispatches an event (in this case. Example With a ComboBox component instance my_cb.scroll = function(evt_obj:Object) { trace("The list had been scrolled to item # "+evt_obj. you call the addEventListener() method on the component instance that broadcasts the event to register the listener with the instance.rowCount = 3. see “EventDispatcher class” on page 495. var cbListener:Object = new Object(). the listener is called. // Add Listener. Each event object has properties that contain information about the event.addItem({data:3. my_cb. When the event is triggered. label:"Fourth Item"}). my_cb. my_cb.addItem({data:2.addItem({data:1. Finally. cbListener.addEventListener("scroll". my_cb. scroll) and the event is handled by a function.position). For more information. it automatically passes an event object (eventObject) to the listener object method. my_cb. See also EventDispatcher. label:"Second Item"}).

addItem({data:4. label:"Fourth Item"}). Edition Flash MX 2004. my_cb. Usage comboBoxInstance.selectedIndex = my_cb. Example With a ComboBox component instance my_cb. label:"First Item"}).addItem({data:2. my_cb. by default it would display the first item): // Add Items to List. If you assign an out-of-range value to this property.length-1. my_cb.0.ComboBox.addItem({data:1. Entering text into the text field of an editable combo box sets selectedIndex to undefined.0). the following code selects the last item in the list (otherwise. Flash ignores it.selectedItem 198 ComboBox component . label:"Third Item"}). my_cb.selectedIndex Description Property. Assigning this property clears the current selection. The default value is 0. See also ComboBox. label:"Second Item"}). // Select last item on the list.addItem({data:3. and displays the label of that item in the combo box’s text box. selects the indicated item.79.selectedIndex Availability Flash Player 6 (6. my_cb. the index number of the selected item in the drop-down list.

label:"First Item"}). label:"Second Item"}).addItem({data:4.addItem({data:3. var cbListener:Object = new Object(). cbListener). Example With a ComboBox component instance my_cb. my_cb.dataProvider. it returns undefined if there are no items in the list. ComboBox.selectedItem.79. selectedItem returns undefined if the user enters any text in the text box.0). the value of the selected item in the drop-down list.addItem({data:2. Edition Flash MX 2004.ComboBox.addItem({data:1.addEventListener("change". label:"Fourth Item"}). my_cb. my_cb. } trace(""). If the combo box is static.selectedItem Availability Flash Player 6 (6. label:"Third Item"}). my_cb. cbListener. See also ComboBox. }. var i:String. for (i in item_obj) { trace(i + ":\t" + item_obj[i]). my_cb.selectedIndex ComboBox. Usage comboBoxInstance.selectedItem 199 . The property only has a value if you select an item from the drop-down list or set the value using ActionScript.change = function(evt_obj:Object) { var item_obj:Object = my_cb.0. If the combo box is editable. the following example shows the values for the selectedItem data and label properties: // Add Items to List. the value of selectedItem is always valid.selectedItem Description Property.

If they aren’t numbers. 3.ComboBox.NUMERIC. The following are possible values for optionsFlag: Array. Edition Flash MX Professional 2004. Array. This parameter is optional. which returns an integer index array that is the result of the ■ ■ sort. This parameter is optional. Array.0 Language Reference. the following array would return the second line of code and the array would remain unchanged: ["a".CASEINSENSITIVE.NUMERIC | Array. the following code combines options 3 and 1: array. For example.RETURNINDEXEDARRAY. [optionsFlag]) Parameters compareFunc A reference to a function that compares two items to determine their sort order.UNIQUESORT. Usage comboBoxInstance. 200 ComboBox component . For details.sort() in ActionScript 2. use a string comparison (which can be case-insensitive if that flag is specified). "d". For example. which sorts without regard to case. optionsFlag ■ ■ ■ which sorts highest to lowest.sortItems() Availability Flash Player 7.DESCENDING) Returns Nothing. Lets you perform multiple sorts of different types on a single array without having to replicate the entire array or re-sort it repeatedly. 1] You can combine these options into one value. Array. 2. "b"] [0. which returns an error code (0) instead of a sorted array if two objects in the array are identical or have identical sort fields. see Array. Array.sortItems([compareFunc]. "c".DESCENDING. which sorts numerically if the two elements being compared are numbers.sort (Array.

order [optionsFlag]) Parameters fieldName A string that specifies the name of the field to use for sorting. Example This example sorts according to uppercase labels.sortItems(upperCaseFunc. // The resulting sort order of myComboBox will be: // Venus // planet // Mercury // Earth ComboBox. } The following example uses the upperCaseFunc() function defined above. This value is usually "label" or "data".sortItemsBy() 201 . along with the optionsFlag parameter to sort the elements of a ComboBox instance named myComboBox: myComboBox.addItem("planet"). myComboBox. function upperCaseFunc(a.sortItems(upperCaseFunc). Edition Flash MX Professional 2004.addItem("Venus").addItem("Earth"). order ComboBox. myComboBox. sorts the items in the combo box according to the specified compare function or according to the specified sort options. Array.sortItemsBy(fieldName. myComboBox.label.toUpperCase().Description Method.DESCENDING).toUpperCase() > b.label.b){ return a.addItem("Mercury"). myComboBox. The items a and b are passed to the function and contain label and data fields: myComboBox. A string that specifies whether to sort the items in ascending order ("ASC") or descending order ("DESC"). Usage comboBoxInstance.sortItemsBy() Availability Flash Player 7.

Array.RETURNINDEXEDARRAY. in the specified order. For example. Description Method. 3. using the specified field name.UNIQUESORT. but if used.NUMERIC | Array. you can use the optionsFlag parameter to specify a sorting style. For example. If you want. should replace the order parameter. the following array would return the second line of code and the array would remain unchanged: ["a". which returns an integer index array that is the result of the Array. This parameter is optional. ■ which returns an error code (0) instead of a sorted array if two objects in the array are identical or have identical sort fields. "b"] [0. If they aren’t numbers. 1] You can combine these options into one value.DESCENDING. "d".NUMERIC. the following code combines options 3 and 1: array. sorts the items in the combo box alphabetically or numerically. ■ sort.DESCENDING) Returns Nothing. which sorts without regard to case. which sorts numerically if the two elements being compared are numbers. Array. the integer items are listed first. "c".CASEINSENSITIVE. use a string comparison (which can be case-insensitive if that flag is specified). Array. but advanced programmers may specify any primitive value. 202 ComboBox component . Array. 2. The following are possible values for optionsFlag: ■ ■ ■ which sorts highest to lowest.optionsFlag Lets you perform multiple sorts of different types on a single array without having to replicate the entire array or re-sort it repeatedly.sort (Array. If the fieldName items are a combination of text strings and integers. The fieldName parameter is usually "label" or "data".

Grapes. myComboBox. myComboBox.CASEINSENSITIVE | Array. Bananas. // resulting order: Apples. "cherries". populate the ComboBox with the elements. // resulting order: Apples.addItem("Grapes").sortItemsBy() 203 .sortItemsBy("label".DESCENDING. // resulting order: Grapes. Note that an ascending sort is the default setting. "ASC"). Bananas.DESCENDING). myComboBox.CASEINSENSITIVE. Bananas. Apples ComboBox. cherries. Array. and "Grapes": // First. myComboBox. Apples // The following statement sorts using the optionsFlag parameter set to // Array.addItem("cherries"). "DESC"). // The following statement sorts using the order parameter set to "ASC". cherries // The following statement sorts using the order parameter set to "DESC". Grapes // The following statement sorts using the optionsFlag parameter set to // Array. // and results in a sort that places "cherries" at the top of the list // because the sort is case-sensitive. Grapes.sortItemsBy("label". "Bananas". Bananas. Array.sortItemsBy("label".sortItemsBy("label". cherries. myComboBox.CASEINSENSITIVE). // and results in a sort that places "cherries" at the bottom of the list // because the sort is case-sensitive. which contains four elements labeled "Apples".Example The following examples are based on a ComboBox instance named myComboBox. // resulting order: cherries.addItem("Apples").CASEINSENSITIVE | Array. myComboBox.addItem("Bananas"). myComboBox. myComboBox.

79. 204 ComboBox component .0. my_cb.79. Usage comboBoxInstance. This property lets you access the underlying TextInput component so that you can manipulate it. a reference to the TextInput component contained by the ComboBox component. For example. my_cb. ComboBox.text Availability Flash Player 6 (6. my_cb.addItem("Georgia").text = "California". For static combo boxes. Example The following example sets the current text value of an editable combo box: my_cb. Edition Flash MX 2004. the value is read-only.0).0).ComboBox.textField Description Property (read-only).textField Availability Flash Player 6 (6.editable = true. you might want to change the selection of the text box or restrict the characters that can be entered in it. the text of the text box. Usage comboBoxInstance.addItem("Arkansas"). You can get and set this value for editable combo boxes.0.text Description Property. Edition Flash MX 2004.

it selects "California" and displays it in the Output panel while the combo box is editable.Example The following code restricts the text box of myComboBox so that it only accept numbers to maximum of six characters: // Add Items to List.79. trace('Editable value is "California": ' + my_cb.textField.dataProvider = [ {label:"Alaska". If the combo box is static. // Limit input to 6 characters. my_cb. my_cb. and then displays "CA" when the combo box is not editable.value Availability Flash Player 6 (6. {label:"California". ComboBox. data:"CA"}. my_cb.maxChars = 6. my_cb. trace('Non-editable value is "CA": ' + my_cb.addItem({data:0xFFFFFF. value returns the item data. // Restrict what can be entered into textfield to only 0-9. my_cb.addItem({data:0x000000. Edition Flash MX 2004. data:"WA"}]. ComboBox. my_cb. Finally.editable = true.value 205 .value). my_cb.0).editable = true. my_cb. It then displays the value in the Output panel. data:"AK"}.editable = false.selectedIndex = 1.value). Example The following example puts the data into the combo box by setting the dataProvider property.0.restrict = "0-9". value returns the item label. {label:"Washington". Usage comboBoxInstance. label:"white"}). my_cb.value Description Read-only property.selectedIndex = 1. my_cb. label:"black"}). if the combo box is editable.

206 ComboBox component .

or both) from the Classes library into your document’s library. Select the Classes library (Window > Common Libraries > Classes). You can get these SWC files from the Classes common library. You can visually create and configure data bindings in the Flash authoring environment by using the Bindings tab in the Component inspector. or you can programmatically create and configure bindings by using the classes in the mx. 207 . If you work with data binding and web services at runtime. To add the SWC files to your library: 1. Making data binding classes available at runtime To compile your SWF file. 2.CHAPTER 9 Data binding classes The data binding classes provide the runtime functionality for the data binding feature in Flash.binding package. For more information on these classes. WebServiceClasses. N OTE 9 The data binding classes are supported only if you are working in a document that specifies ActionScript 2. 4.0. Open the library for your document (Window > Library). see “Binding class” on page 208 and “Web service classes” on page 1415.0 in its Publish Settings. the relevant component classes are automatically added to the library. If you create data bindings in Flash while authoring. you must add the classes to your FLA file’s library. Confirm that your Publish Settings specify ActionScript 2.data. your library must contain SWC files that contain the byte code for the data binding classes and web service classes. 3. Drag the appropriate SWC files (DataBindingClasses.

To make this class available at runtime.binding package” on page 208. Provides read and write access to data fields of a component property. For more information. a source and a destination. The base class for creating custom validator classes. Adds data binding functionality to components. see “Making data binding classes available at runtime” on page 207. NOT E 208 The Binding class is supported only if you are working in a document that specifies ActionScript 2.data.data. Binding class ActionScript Class Name mx.data.data.Binding The Binding class defines an association between two endpoints. see “Classes in the mx.0 in its Publish Settings.binding package.binding package: Class Binding class ComponentMixins class CustomFormatter class CustomValidator class DataType class EndPoint class TypedValue class Description Creates a binding between two endpoints. It listens for changes to the source endpoint and copies the changed data to the destination endpoint each time the source changes. For an overview of the classes in the mx.binding package The following table lists the classes in the mx. Defines the source or destination of a binding.binding. Data binding classes . Contains a data value and information about the value’s data type. The base class for creating custom formatter classes.Classes in the mx. you must include the data binding classes in your FLA file. You can write custom bindings by using the Binding class (and supporting classes).data. or use the Bindings tab in the Component inspector.

79.0). Constructor for the Binding class 209 .Method summary for the Binding class The following table lists the methods of the Binding class. destination. format An optional object that contains formatting information. Returns Nothing. Constructor for the Binding class Availability Flash Player 6 (6. The destination endpoint of the binding.DataAccessor.0. destination mx. Method Binding. [isTwoWay]) Parameters source A source endpoint of the binding.binding. This parameter is nominally of type mx.binding. Edition Flash MX Professional 2004.EndPoint.execute() Description Fetches the data from the source component. [format].EndPoint. but can be any ActionScript object that has the required Endpoint fields (see “EndPoint class” on page 221). settings An object whose properties provide optional settings for the formatter class specified by cls.data. isTwoWay An optional Boolean value that specifies whether the new Binding object is bidirectional (true) or not (false).binding.data.0 class that extends the class mx. This parameter is nominally of type but can be any ActionScript object that has the required Endpoint fields. The default value is false.data. The object must have the following properties: ■ ■ cls An ActionScript 2. Usage new Binding(source. formats it. and assigns it to the destination component.

*. dest. dest. import mx.*. so that you can call its execute() method at a later time (see Binding.mycompany.property = "text". var dest = new EndPoint(). Data binding classes . As soon as the Binding object is created. the value of its text property is copied into dest_txt.binding. For example. {cls: mx. Example In this example.Custom. you might want to save a reference to the new Binding object. The following example demonstrates how to create a Binding object that uses a custom formatter class. components.data.data. src.property = "text". var dest = new EndPoint().component = src_txt.data. src. if movie clip named A contains components X and Y. new Binding(src. new Binding(src. src. NOT E 210 It’s not necessary to retain a reference to the new Binding object. dest. see “CustomFormatter class” on page 212.component = text_dest. When the src_txt text field loses focus (that is. var src = new EndPoint().text. In some cases.Description Constructor. src. dest. but not limited to. when the focusOut event is generated).component = dest_txt. settings: {classname: "com. however. it immediately begins listening for “changed” events emitted by either endpoint.binding. the text property of a TextInput component (src_txt) is bound to the text property of another TextInput component (dest_txt). import mx. For more information. src.component = src_txt. A binding object exists as long as the innermost movie clip contains both the source and destination components.formatters. dest. and there is a binding between X and Y.property = "text".event = "focusOut". var src = new EndPoint().SpecialFormatter"}}).execute()). src. creates a new Binding object.event = "focusOut".property = "text". dest). then the binding is in effect as long as movie clip A exists. You can bind data to any ActionScript object that has properties and emits events including.

this value is false. Usage myBinding. By default. unless the destination is read-only. Data is assigned to the destination even if it’s invalid. then the binding is executed in reverse (from the destination to the source). then the data is formatted before being assigned to the destination. or only from the source to the destination (false). executes the binding in reverse (from the destination component to the source component) when the button is clicked. } Binding.execute() Availability Flash Player 6.execute() 211 . Returns A null value if the binding executed successfully. Description Method. the method returns an array of error message strings that describe the errors that prevented the binding from executing.execute([reverse]) Parameters reverse A Boolean value that specifies whether the binding should also be executed from the destination to the source (true). If the reverse parameter is set to true and the binding is two-way.Binding. fetches the data from the source component and assigns it to the destination component.myBinding. attached to a Button component instance. This method also validates the data and causes either a valid or invalid event to be emitted by the destination and source components. Example The following code.execute(true). on(click) { _root. If the binding uses a formatter. Edition Flash MX Professional 2004. otherwise.

you first create a subclass of CustomFormatter that implements format() and unformat() methods. that provide the ability to transform data values from a specific data type to String. or created with ActionScript.data.binding.data. However. For more information.0 in its Publish Settings. “one”. “two”. You can then assign that class to a binding between components either by creating a new Binding object with ActionScript (see “Binding class” on page 208).binding package” on page 208. see “Classes in the mx. In contrast. these methods do nothing. and vice versa. or 3) as its English word equivalent (for example.data. you must implement them in a subclass of mx. Sample custom formatter The following example demonstrates how to create a custom formatter class and then apply it to a binding between two components by using ActionScript. For an overview of the classes in the mx. 2.CustomFormatter class ActionScript Class Name mx. the formatter is used only when the data is needed in the form of a string. You can also assign a formatter class to a component property on the Schema tab of the Component inspector. or “three”) before assigning it to the TextInput component.binding. Data binding classes . or by using the Bindings tab in the Component inspector. To create your own custom formatter. To make this class available at runtime. see “Sample custom formatter” on page 212. 1. For an example of writing and assigning a custom formatter using ActionScript.CustomFormatter The CustomFormatter class defines two methods. NO TE 212 The CustomFormatter class is supported only if you are working in a document that specifies ActionScript 2. formatters assigned with the Bindings panel. see “Making data binding classes available at runtime” on page 207.data. format() and unformat(). you must include the data binding classes in your FLA file. are used whenever when the binding is executed. The custom formatter class formats the current numeric value of the NumericStepper component (for example. in that case.binding package. the current value of a NumericStepper component (its value property) is bound to the current value of a TextInput component (its text property). By default. In this example.

{component:textInput. 6. In the Actions panel. } } return returnValue.change"}. event:"change"}. i++) { if (formattedValue == strArray[i]) { returnValue = numArray[i].binding.*. property:"value". 'two'. i<strArray. 5. i++) { if (rawValue == numArray[i]) { returnValue = strArray[i]. } // convert a formatted value. var customBinding = new Binding({component:stepper. break.as.data. var numArray = new Array(1. property:"text".formatters. From the Components panel. Add the following code to the file: // NumberFormatter. var strArray = new Array('one'. var x:NumberFormatter.as class NumberFormatter extends mx.0). Save the file as NumberFormatter. return a raw value function unformat(formattedValue) { var returnValue.CustomFormatter { // Format a Number. return a String function format(rawValue) { var returnValue.Custom. CustomFormatter class 213 . 'two'.data. {cls:mx. 3). 4. returnValue = "invalid". } } 3. 7. break. for (var i = 0. settings:{classname:"NumberFormatter"}}).binding. var strArray = new Array('one'. The second line of code (var x:NumberFormatter) ensures that the byte code for your custom formatter class is included in the compiled SWF file. for (var i = 0. returnValue = 0. var numArray = new Array(1. i<strArray. Then drag a NumericStepper component to the Stage and name it stepper.length.To create and use a custom formatter: 1. 2. 3). drag a TextInput component to the Stage and name it textInput. add the following code to the Actions panel: import mx. Select File > New and choose Flash File (ActionScript 2. Select File > New and choose ActionScript File. 2. event:"enter. Open the Timeline and select the first frame on Layer 1. 2.data. 'three'). } } return returnValue.length. 'three').

79.format() Availability Flash Player 6 (6. 12. 214 Data binding classes . Test Method summary for the CustomFormatter class The following table lists the methods of the CustomFormatter class. This makes the data binding runtime classes available for your document.format() CustomFormatter. DataBindingClasses from the Classes library to your document’s library.unformat() Description Converts from a raw data type to a new object. Converts from a string. or other data type. Edition Flash MX Professional 2004. 10. Save the FLA file to the same folder that contains NumberFormatter. the file (Control > Test Movie). Method CustomFormatter. Select Window > Library to open your document’s library. Usage This method is called automatically. Parameters rawData The data to be formatted.8. 9.0. to a raw data type. Select Window > Common Libraries > Classes to open the Classes library. CustomFormatter. you don’t invoke it directly.as. Returns A formatted value. Click the buttons on the NumericStepper component and watch the contents of the TextInput component update. Drag 11.0).

data.Description Method.binding.CustomFormatter.79. For more information. Parameters formattedData The formatted data to convert back to the raw data type. Edition Flash MX Professional 2004. This transformation should be the exact inverse transformation of CustomFormatter.format().0.data. Returns An unformatted value. For more information.CustomFormatter. You must define it in your subclass of mx. converts from a string. see “Sample custom formatter” on page 212. You must define it in your subclass of mx. converts from a raw data type to a new object.0). CustomFormatter. Description Method. you don’t invoke it directly. see “Sample custom formatter” on page 212. This method is not implemented by default.unformat() Availability Flash Player 6 (6. Usage This method is called automatically. CustomFormatter.binding. or other data type. to the raw data type. This method is not implemented by default.unformat() 215 .

0 in its Publish Settings.CustomValidator that implements a method named validate(). In order for the class you specify to be included in the published SWF file. In the Component inspector.data. 3. 216 Data binding classes . see “Making data binding classes available at runtime” on page 207. N OTE The CustomValidator class is supported only if you are working in a document that specifies ActionScript 2.0. you assign your custom validator class to a field of a component by using the Component inspector’s Schema tab.validate(). see “Classes in the mx. see CustomValidator. 4.CustomValidator class ActionScript Class Name mx. 5.data. Confirm that your Publish Settings specify ActionScript 2. For more information about how to implement this method.binding.validate() entry. To assign a custom validator: 1. For more information. Select the field you want to validate. enter the name of the custom validator class you created. In the ActionScript Class text box.binding.CustomValidator You use the CustomValidator class when you want to perform custom validation of a data field contained by a component. 2.binding package. For an overview of the classes in the mx. you first create a subclass of mx. see the Example section in the CustomValidator. To create a custom validator class. This method is automatically passed a value to be validated.data. it must be in the classpath.binding package” on page 208. To make this class available at runtime. select the Schema tab. and then select Custom from the Data Type pop-up menu. For an example of creating and using a custom validator class. you must include the data binding classes in your FLA file. Double-click the Validation Options field to open the Custom Validation Settings dialog box.data. Next.

validate() Availability Flash Player 6 (6. CustomValidator.validationError() with an appropriate message. Description Method. create event listeners for valid and invalid events and alert the end user from those event listeners (see the example below). the default implementation does nothing. Returns Nothing. Instead. If the data is not valid.0. Usage This method is called automatically.validationError() Reports validation errors. you don’t invoke it directly. Parameters value The data to be validated. your implementation should not take any action as a result of the validation test. Edition Flash MX Professional 2004. CustomValidator. such as alerting the end user.validationError() more than once if there are several validation problems with the data. You must implement this method in your subclass of CustomValidator. Your implementation of this method should only check for validity.validationError(). You can use any ActionScript code to examine and validate the data. it can be of any type.0). called automatically to validate the data contained by the value parameter. CustomValidator.Method summary for the CustomValidator class The following table lists the methods of the CustomValidator class. this method should call this. avoid adding code that takes a long time to complete. Similarly. and then report any errors using CustomValidator. You can call this. Since validate() might be called repeatedly.validate() 217 .79.validate() Description Performs validation on data. Method CustomValidator.

Add the following code to the file: class OddNumbersOnly extends mx. Select the NumericStepper component. return. 9. The validation occurs whenever a change occurs in the value of a NumericStepper component. button. Save the file as OddNumbersOnly. Open the Components panel. 8. N OTE The name of the AS file must match the name of the class. return. and open the Component inspector. } // data is OK. 7. no need to do anything. 6. and click the Add Binding (+) 11. Drag a TextArea component to the Stage and name it status.as determines any value that is not an odd number to be invalid.CustomValidator { public function validate(value) { // make sure the value is of type Number var n = Number(value). 2.Example The following procedure demonstrates how to create and use a custom validator class.validationError("'" + value + "' is not a number. Drag a Label component to the Stage and name it textLabel. 5. To create and use a custom validator class: 1. Select the Value property (the only one) in the Add Bindings dialog box. Select File > New and choose ActionScript File.binding.validationError("'" + value + "' is not an odd number. Select File > New and choose Flash File (ActionScript 2. just return } } 3."). 218 Data binding classes . 4. and click OK. } // make sure the number is odd if (n % 2 == 0) { this. which is bound to the text property of a Label component.data."). if (String(n) == "NaN") { this.as.0). Select the Bindings tab in the Component inspector. Drag a NumericStepper component from the Components panel to the Stage and name it stepper. 10. The validate() method of the CustomValidator class OddNumbersOnly.

Add function dataIsInvalid(evt) { if (evt. and click the Schema tab in the Component inspector. enter OddNumbersOnly. 18. } } textLabel. Click the arrows on the NumericStepper component to change its value.addEventListener("invalid". the following code to the Actions panel: 14. textLabel. In the Bound To dialog box.messages. the Label component on the Stage. Click OK.text = evt. Double-click 13.12. dataIsValid).validate() 219 . In 16. Notice the message that appears in the TextArea component when you choose even and odd numbers. CustomValidator. Open the Timeline and select the first frame on Layer 1.property == "text") { status.fla to the same folder that contains OddNumbersOnly. select Custom from the Data Type pop-up menu. In the ActionScript Class text box. } } function dataIsValid(evt) { if (evt. the Bound To field to open the Bound To dialog box.Test the FLA file as OddOnly. 21.text = "OK". 17. dataIsInvalid).as. which is the name of the ActionScript class you created previously. 19.addEventListener("valid". Click OK. Select 15. Double-click the Validation Options field in the Schema Attributes pane to open the Custom Validation Settings dialog box. Save 22.property == "text") { status. the Schema Attributes pane. select the Label component in the Component Path pane and its text property in the Schema Location pane. the SWF file (Control > Test Movie). the Actions panel. Open 20.

an invalid event is generated after validate() returns.0). If you call validationError() one or more times from within the validate(). Edition Flash MX Professional 2004. the keyword this refers to the current CustomValidator object.79.validationError() Availability Flash Player 6 (6. Each message you pass to validationError() is available in the messages property of the event object that was passed to the invalid event handler. Example See the Example section for CustomValidator. Data binding classes .0.CustomValidator. Returns Nothing. Usage this. Parameters errorMessage A string that contains the error message to be reported. called from the validate() method of your subclass of CustomValidator to report validation errors. a valid event is generated when validate() finishes executing.validate().validationError(errorMessage) NOT E 220 This method can be invoked only from within a custom validator class. Description Method. If you don’t call validationError().

you must include the data binding classes in your FLA file. var srcEndPoint = {component:source_txt.binding. that a Binding object listens for.EndPoint class ActionScript Class Name mx. might be defined as follows: var srcEndPoint = new mx.property = "text".event = "focusOut". or to which you can assign data.binding. The only requirement is that the objects define the required EndPoint properties.component = source_txt. when the specified event occurs. destEndPoint).EndPoint The EndPoint class defines the source or destination of a binding. component property. For more information. EndPoint class 221 .data.” You can also pass generic ActionScript objects to the Binding constructor.EndPoint(). the binding executes. When you create a new binding with the Binding class constructor. new mx. component and property.data. destEndPoint). the above code means “When the source text field loses focus. EndPoint objects define a constant value.0 in its Publish Settings. The EndPoint objects.binding. In English. or particular field of a component property.property = "text".Binding(srcEndPoint. or list of events.binding package” on page 208. property:"text"}. copy the value of its text property into the text property of the destination text field.Binding(srcEndPoint. rather than passing explicitly constructed EndPoint objects.binding. new mx. The following code is equivalent to that shown above. see “Making data binding classes available at runtime” on page 207. N OTE The EndPoint class is supported only if you are working in a document that specifies ActionScript 2. from which you can get data.data. you pass it two EndPoint objects: one for the source and one for the destination.data.data. destEndPoint. For an overview of the classes in the mx.data. srcEndPoint. destEndPoint.EndPoint().binding. srcEndPoint. var destEndPoint = {component:dest_txt. see “Classes in the mx. They can also define an event. srcEndPoint and destEndPoint.component = dest_txt.binding package. srcEndPoint. To make this class available at runtime. var destEndPoint = new mx.data. property:"text"}.

Method EndPoint. The name of a property of the component instance specified by EndPoint.binding. that the component emits when the data changes.property = "text". source_obj.Property summary for the EndPoint class The following table lists the properties of the EndPoint class.0.property Constructor for the EndPoint class Availability Flash Player 6 (6. creates a new EndPoint object.component.79.component EndPoint. Description Constructor.EndPoint(). EndPoint.component = myTextField.0). Usage new EndPoint() Returns Nothing.location EndPoint. or array of event names. The name of an event. Example This example creates a new EndPoint object named source_obj and assigns values to its component and property properties: var source_obj = new mx.data.event Description A reference to a component instance. Edition Flash MX Professional 2004. 222 Data binding classes . A constant value. source_obj.constant EndPoint. The location of a data field within the property of the component instance.

of a binding between components. Edition Flash MX Professional 2004. sourceEndPoint.component = listBox1.0.0. EndPoint. Edition Flash MX Professional 2004.EndPoint(). a reference to a component instance. not the destination.79.component Availability Flash Player 6 (6.binding.constant Availability Flash Player 6 (6.0).constant 223 . If this property is specified.data.0). Example This example assigns an instance of the List component (listBox1) as the component parameter of an EndPoint object.component Description Property. The value can be of any data type that is compatible with the destination of the binding. EndPoint. Usage endPoint_src.EndPoint. Usage endPointObj.constant Description Property. var sourceEndPoint = new mx. This property can be applied only to EndPoint objects that are the source. a constant value assigned to an EndPoint object. all other EndPoint properties for the specified EndPoint object are ignored.79.

or an array of event names. var my_binding:Binding = new Binding(src.event Description Property. dst). var src:Object = {component:first_textInput. For more information about creating two-way bindings. The specified event only applies to components that are used as the source of a binding.addEventListener("enter".constant = "hello". first_textInput. property:"text"}.79.Binding. the binding executes. generated by the component when data assigned to the bound property changes. property:"text".binding.Example In this example. EndPoint. specifies the name of an event. or as the destination of a two-way binding. doEnter). One text field needs an instance name of first_textInput and the other field needs the instance name second_textInput.event Availability Flash Player 6 (6.EndPoint(). you need to add two TextInput instances on the Stage. var dst:Object = {component:second_textInput. sourceEndPoint. "focusOut"]}. When the event occurs.0).data.binding. You also need to add the DataBindingClasses component to the Library. import mx. Usage endPointObj.data. Edition Flash MX Professional 2004.0. see “Binding class” on page 208. Example In this example. function doEnter(eventObject) {} 224 Data binding classes . event:["enter". the string constant value “hello” is assigned to an EndPoint object’s constant property: var sourceEndPoint = new mx.

(See Example 3 below. an array of strings is equivalent to use of an ActionScript path. the object must specify two properties: path and indices. Usage endPointObj. sourceEndPoint. sourceObj.b. sourceEndPoint.) When used with ActionScript data. You can use this technique with both XML and ActionScript data. Edition Flash MX Professional 2004. that is. There are four ways to specify a location: as a string that contains an XPath expression."b".c".79.location 225 . as discussed above. If you specify an object as the location. An ActionScript path contains the names of fields separated by dots (for example. or as an object. (See Example 2 below. sourceEndPoint. var sourcObj = new Object(). as an array of strings. except that one or more of the specified strings may be the special token "[n]". As the path is evaluated. the indices are used to index into arrays.) Example Example 1: This example uses an XPath expression to specify the location of a node named zip in an XML object: var sourceEndPoint = new mx. The path property is an array of strings."c"] is equivalent to "a.component = sourceObj. specifies the location of a data field within the property of the component instance.) For XML and ActionScript objects.location = "/zip". You can also specify an array of strings as a location. EndPoint.EndPoint().xml = new XML("<zip>94103</zip>"). you can also specify a string that contains an ActionScript path.location Availability Flash Player 6 (6.0). the array ["a". The index item can be any EndPoint object. For each occurrence of this token in path. Each string in the array “drills down” another level of nesting.property = "xml". as a string that contains an ActionScript path. This type of location can be applied to ActionScript data only—not XML. (See Example 1 below.databinding.EndPoint. there must be a corresponding index item in indices.location Description Property.b.c"). "a. XPath expressions can only be used when the data is an XML object.0.

// Access movieClip1. sourceEndPoint. Example 3: This example shows how to use an object to specify the location of a data field in a complex data structure: var city = new Object(). indices: [{constant:0}. srcEndPoint.binding. sourceEndPoint. var srcEndPoint = new EndPoint()."movies". {name: "Catch me if you can"}]}].theaters = [{theater: "t1". movies: [{name: "Gladiator"}. city.component and EndPoint.property Availability Flash Player 6 (6.0) Edition Flash MX Professional 2004.Bad. sourceEndPoint."x"].data.ball.position exists.property must combine to form a valid ActionScript object/property combination. specifies a property name of the component instance specified by EndPoint.position.component = movieClip1.ball.location = {path: ["[n]". Usage endPointObj.component that contains the bindable data.Ugly"}.EndPoint().location = ["position". movies: [{name: "Good. EndPoint.property Description Property.0. srcEndPoint. // Assume movieClip1.Example 2: This example uses an array of strings to “drill down” to a nested movie clip property: var sourceEndPoint = new mx. srcEndPoint. {name:"Matrix Reloaded"}]}.component = city."[n]".property = "theaters". {theater: "t2".{constant:0}]}.property = "ball". NOT E 226 EndPoint. Data binding classes ."name"].x.79.

data. destEndPoint).initComponent() method call.ComponentMixins The ComponentMixins class defines properties and methods that are automatically added to any object that is the source or destination of a binding.getField() Description Returns an object for getting and setting the value of a field at a specific location in a component property. see “Classes in the mx. For an overview of the classes in the mx.refreshDestinations() ComponentMixins class 227 . For more information. var sourceEndPoint = {component:text_1. new Binding(sourceEndPoint. Method ComponentMixins.data. ComponentMixins. ComponentMixins class ActionScript Class Name mx. property:"text"}. Executes all the bindings that have this object as the source endpoint. NOT E The ComponentMixins class is supported only if you are working in a document that specifies ActionScript 2.binding. Adds the ComponentMixins methods to a component.binding package” on page 208.Example This example binds the text property of one TextInput component (text_1) to the same property in another TextInput component (text_2). they add functionality that is useful with data binding.binding package. property:"text"}.0 in its Publish Settings. These properties and methods do not affect normal component functionality.initComponent() ComponentMixins.data. Method summary for the ComponentMixins class The following table lists the methods of the ComponentMixins class. or to any component that’s the target of a ComponentMixins. you must include the data binding classes in your FLA file. var destEndPoint = {component:text_2. To make this class available at runtime. rather. see “Making data binding classes available at runtime” on page 207.

refreshFromSources() Description Executes all bindings that have this component as the destination endpoint. For more information. "a.79. This form is permitted for any complex data (ActionScript or XML). separated by dots—for example. A string that contains field names. ComponentMixins.0). where each string is a field name—for example. Description Method. 228 Data binding classes .c". returns a DataType object whose methods you can use to get or set the data value in the component property at the specified field location. Checks to see if the data in the indicated property is valid. "b". Usage componentInstance. This is only valid for XML data structures. [location]) Parameters propertyName location A string that contains the name of a property of the specified component.getField() Availability Flash Player 6 (6. This form is permitted for any complex data (ActionScript or XML).Method ComponentMixins.b. An array of strings. "c"].validateProperty() ComponentMixins. Edition Flash MX Professional 2004. An optional parameter that indicates the location of a field within the component property. see “DataType class” on page 233. This is useful if propertyName specifies a complex data structure and you are interested in a particular field of that structure.0. The location property can take one of three forms: ■ ■ A string that contains an XPath expression.getField(propertyName. ["a". ■ Returns A DataType object.

*. var field : DataType = myComponent. import mx.binding. This method is called automatically for all components involved in a data binding. Returns Nothing. adds all the ComponentMixins methods to the component specified by componentInstance. Example The following code makes the ComponentMixins methods available to a DataSet component: mx. See also DataType.name1"). In this case the property (results) is a complex data structure.address.data.setAsString() method to set the value of a field located in a component’s property.data.getField("results". you must explicitly call this method for that component. Edition Flash MX Professional 2004. "po.initComponent(_root.binding.initComponent(componentInstance) Parameters componentInstance A reference to a component instance. ComponentMixins. Usage mx.initComponent() Availability Flash Player 6 (6.setAsString("Teri Randall").myDataSet). field. Description Method (static).setAsString() ComponentMixins.79.initComponent() 229 .Example This example uses the DataType.ComponentMixins. To make the ComponentMixins methods available for a component that is not involved in a data binding.0.data.binding.0).ComponentMixins.

ComponentMixins.refreshDestinations()
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
componentInstance.refreshDestinations()

Parameters

None.
Returns

Nothing.
Description

Method; executes all the bindings for which componentInstance is the source EndPoint object. This method lets you execute bindings whose sources do not emit a “data changed” event.
Example

The following example executes all the bindings for which the DataSet component instance named user_data is the source EndPoint object:
user_data.refreshDestinations();

ComponentMixins.refreshFromSources()
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
componentInstance.refreshFromSources()

Parameters

None.

230

Data binding classes

Returns

Nothing.
Description

Method; executes all bindings for which componentInstance is the destination EndPoint object. This method lets you execute bindings that have constant sources, or sources that do not emit a “data changed” event.
Example

The following example executes all the bindings for which the ListBox component instance named cityList is the destination EndPoint object:
cityList.refreshFromSources();

ComponentMixins.validateProperty()
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
componentInstance.validateProperty(propertyName)

Parameters
propertyName

A string that contains the name of a property that belongs to

componentInstance.

Returns

An array, or null.
Description

Method; determines if the data in propertyName is valid based on the property’s schema settings. The property’s schema settings are those specified on the Schema tab in the Component inspector. The method returns null if the data is valid; otherwise, it returns an array of error messages as strings.

ComponentMixins.validateProperty()

231

Validation applies only to fields that have schema information available. If a field is an object that contains other fields, each “child” field is validated, and so on, recursively. Each individual field dispatches a valid or invalid event, as necessary. For each data field contained by propertyName, this method dispatches valid or invalid events, as follows:

If the value of the field is null, and is not required, the method returns null. No events are generated. If the value the field is null, and is required, an error is returned and an invalid event is generated. If the value of the field is not null and the field’s schema does not have a validator, the method returns null; no events are generated. If the value is not null and the field’s schema does define a validator, the data is processed by the validator object. If the data is valid, a valid event is generated and null is returned; otherwise, an invalid event is generated and an array of error strings is returned.

Example

The following example shows how to use validateProperty() to make sure that text entered by a user is of a valid length. You’ll determine the valid length by setting the Validation Options for the String data type in the Component inspector’s Schema tab. If the user enters a string of invalid length in the text field, the error messages returned by validateProperty() are displayed in the Output panel.
To validate text entered by a user in a TextInput component:
1. 2.

Select File > New and choose Flash File (ActionScript 2.0). Drag a TextInput component from the Components panel to the Stage, and name it zipCode_txt. Select the TextInput component and, in the Component inspector, click the Schema tab. In the Schema Tree pane (the top pane of the Schema tab), select the text property. In the Schema Attributes pane (the bottom pane of the Schema tab), select ZipCode from the Data Type pop-up menu. Open the Timeline if it is not already open. Click the first frame on Layer 1 in the Timeline, and open the Actions panel (Window > Actions). Add the following code to the Actions panel:
// Add ComponentMixin methods to TextInput component. // Note that this step is only necessary if the component // isn’t already involved in a data binding,

3. 4. 5.

6. 7.

8.

232

Data binding classes

// either as the source or destination. mx.data.binding.ComponentMixins.initComponent(zipCode_txt); // Define event listener function for component: validateResults = function (eventObj) { var errors:Array = eventObj.target.validateProperty("text"); if (errors != null) { trace(errors); } }; // Register listener function with component: zipCode_txt.addEventListener("enter", validateResults); 9.

Select Window > Common Libraries > Classes to open the Classes library. Window > Library to open your document’s library. Drag DataBindingClasses from the Classes library to your document’s library. This step makes the data binding runtime classes available to the SWF file at runtime. the SWF file by selecting Control > Test Movie.

10. Select 11.

12. Test

In the TextInput component on the Stage, enter an invalid United States zip code—for example, one that contains all letters, or one that contains fewer than five numbers. Notice the error messages displayed in the Output panel.

DataType class
ActionScript Class Name

mx.data.binding.DataType

The DataType class provides read and write access to data fields of a component property. To get a DataType object, you call the ComponentMixins.getField() method on a component. You can then call methods of the DataType object to get and set the value of the field. To make this class available at runtime, you must include the data binding classes in your FLA file. For more information, see “Making data binding classes available at runtime” on page 207.
NOT E

The DataType class is supported only if you are working in a document that specifies ActionScript 2.0 in its Publish Settings.

If you get and set field values directly on the component instance instead of using DataType class methods, the data is provided in its “raw” form. In contrast, when you get or set field values using DataType methods, the values are processed according to the field’s schema settings.

DataType class

233

For example, the following code gets the value of a component’s property directly and assigns it to a variable. The variable, propVar, contains whatever “raw” value is the current value of the property propName.
var propVar = myComponent.propName;

The next example gets the value of the same property by using the DataType.getAsString() method. In this case, the value assigned to stringVar is the value of propName after being processed according to its schema settings, and then returned as a string.
var dataTypeObj:mx.data.binding.DataType = myComponent.getField("propName"); var stringVar: String = dataTypeObj.getAsString();

You can also use the methods of the DataType class to get or set fields in various data types. The DataType class automatically converts the raw data to the requested type, if possible. For example, in the code example above, the data that’s retrieved is converted to the String type, even if the raw data is a different type. The ComponentMixins.getField() method is available for components that have been included in a data binding (either as a source, destination, or an index), or that have been initialized with ComponentMixins.initComponent(). For more information, see “ComponentMixins class” on page 227. For an overview of the classes in the mx.data.binding package, see “Classes in the mx.data.binding package” on page 208.

Method summary for the DataType class
The following table lists the methods of the DataType class.
Method Description

DataType.getAnyTypedValue() Fetches the current value of the field. DataType.getAsBoolean() DataType.getAsNumber() DataType.getAsString() DataType.getTypedValue()

Fetches the current value of the field as a Boolean value. Fetches the current value of the field as a number. Fetches the current value of the field as a String value. Fetches the current value of the field in the form of the requested data type.

DataType.setAnyTypedValue() Sets a new value in the field. DataType.setAsBoolean()

Sets the field to the new value, which is given as a Boolean value. Sets the field to the new value, which is given as a number.

DataType.setAsNumber()

234

Data binding classes

Method
DataType.setAsString() DataType.setTypedValue()

Description
Sets the field to the new value, which is given as a string. Sets a new value in the field.

Property summary for the DataType class
The following table lists the properties of the DataType class.
Property
DataType.encoder

Description
Provides a reference to the encoder object associated with this field. Provides a reference to the formatter object associated with this field. Provides a reference to the Kind object associated with this field.

DataType.formatter

DataType.kind

DataType.encoder
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
dataTypeObject.encoder

Description

Property; provides a reference to the encoder object associated with this field, if one exists. You can use this property to access any properties and methods defined by the specific encoder applied to the field in the Component inspector’s Schema tab. If no encoder was applied to the field in question, then this property returns undefined.

DataType.encoder

235

Example

The following example assumes that the field being accessed (isValid) uses the Boolean encoder (mx.data.encoders.Bool). This encoder is provided with Flash and contains a property named trueStrings that specifies which strings should be interpreted as true values. The code below sets the trueStrings property for a field’s encoder to be the strings “Yes” and “Oui”.
var myField:mx.data.binding.DataType = dataSet.getField("isValid"); myField.encoder.trueStrings = "Yes,Oui";

DataType.formatter
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
dataTypeObject.formatter

Description

Property; provides a reference to the formatter object associated with this field, if one exists. You can use this property to access any properties and methods for the formatter object applied to the field in the Component inspector’s Schema tab. If no formatter was applied to the field in question, this property returns undefined.
Example

This example assumes that the field being accessed is using the Number Formatter (mx.data.formatters.NumberFormatter) provided with Flash. This formatter contains a property named precision that specifies how many digits to display after the decimal point. This code sets the precision property to two decimal places for a field using this formatter.
var myField:DataType = dataGrid.getField("currentBalance"); myField.formatter.precision = 2;

DataType.getAnyTypedValue()
Availability

Flash Player 6 (6.0.79.0).

236

Data binding classes

Edition

Flash MX Professional 2004.
Usage
dataTypeObject.getAnyTypedValue(suggestedTypes)

Parameters
suggestedTypes An array of strings that specify, in descending order of desirability, the preferred data types for the field.

Returns

The current value of the field, in the form of one of the data types specified in the suggestedTypes array.
Description

Method; fetches the current value of the field, using the information in the field’s schema to process the value. If the field can provide a value as the first data type specified in the suggestedTypes array, the method returns the field’s value as that data type. If not, the method attempts to extract the field’s value as the second data type specified in the suggestedTypes array, and so on. If you specify null as one of the items in the suggestedTypes array, the method returns the value of the field in the data type specified in the Schema tab of the Component inspector. Specifying null always results in a value being returned, so only use null at the end of the array. If a value can’t be returned in the form of the one of the suggested types, it is returned in the type specified in the Schema tab.
Example

This example attempts to get the value of a field (productInfo.available) in an XMLConnector component’s results property first as a number or, if that fails, as a string.
import mx.data.binding.DataType; import mx.data.binding.TypedValue; var f: DataType = myXmlConnector.getField("results", "productInfo.available"); var b: TypedValue = f.getAnyTypedValue(["Number", "String"]);

See also
ComponentMixins.getField()

DataType.getAnyTypedValue()

237

DataType.getAsBoolean()
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
dataTypeObject.getAsBoolean()

Parameters

None.
Returns

A Boolean value.
Description

Method; fetches the current value of the field and converts it to Boolean form, if necessary.
Example

In this example, a field named propName that belongs to a component named myComponent is retrieved as a Boolean value, and assigned to a variable:
var dataTypeObj:mx.data.binding.DataType = myComponent.getField("propName"); var propValue:Boolean = dataTypeObj.getAsBoolean();

DataType.getAsNumber()
Availability

Flash Player 6.
Edition

Flash MX Professional 2004.
Usage
dataTypeObject.getAsNumber()

Parameters

None.

238

Data binding classes

Returns

A number.
Description

Method; fetches the current value of the field and converts it to Number form, if necessary.
Example

In this example, a field named propName that belongs to a component named myComponent is retrieved as a number, and assigned to a variable:
var dataTypeObj:mx.data.binding.DataType = myComponent.getField("propName"); var propValue:Number = dataTypeObj.getAsNumber();

See also
DataType.getAnyTypedValue()

DataType.getAsString()
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
dataTypeObject.getAsString()

Parameters

None.
Returns

A string.
Description

Method; fetches the current value of the field and converts it to String form, if necessary.
Example

In this example, a property named propName that belongs to a component named myComponent is retrieved as a string and assigned to a variable:

DataType.getAsString()

239

var dataTypeObj:mx.data.binding.DataType = myComponent.getField("propName"); var propValue:String = dataTypeObj.getAsString();

See also
DataType.getAnyTypedValue()

DataType.getTypedValue()
Availability Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
dataTypeObject.getTypedValue(requestedType)

Parameters
requestedType

A string containing the name of a data type, or null.

Returns

A TypedValue object (see “TypedValue class” on page 246).
Description

Method; returns the value of the field in the specified form, if the field can provide its value in that form. If the field cannot provide its value in the requested form, the method returns null. If null is specified as requestedType, the method returns the value of the field in its default type.
Example

The following example returns the value of the field converted to the Boolean data type. This is stored in the bool variable.
var bool:TypedValue = field.getTypedValue("Boolean");

240

Data binding classes

DataType.kind
Availability Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
dataTypeObject.kind

Description

Property; provides a reference to the Kind object associated with this field. You can use this property to access properties and methods of the Kind object.

DataType.setAnyTypedValue()
Availability Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
dataTypeObject.setAnyTypedValue(newTypedValue)

Parameters
newTypedValue A TypedValue object value to set in the field. For more information, see “TypedValue class” on page 246.

DataType.setAnyTypedValue()

241

Returns

An array of strings describing any errors that occurred while attempting to set the new value. Errors can occur under any of the following conditions:

The data provided cannot be converted to the data type of this field (for example, "abc" cannot be converted to Number). The data is an acceptable type but does not meet the validation criteria of the field. The field is read-only.
NOT E

■ ■

The actual text of an error message varies depending on the data type, formatters, and encoders that are defined in the field’s schema.

Description

Method; sets a new value in the field, using the information in the field’s schema to process the field. This method operates by first calling DataType.setTypedValue() to set the value. If that fails, the method checks to see if the destination object is willing to accept String, Boolean, or Number data, and if so, attempts to use the corresponding ActionScript conversion functions.
Example

The following example creates a new TypedValue object (a Boolean value), and then assigns that value to a DataType object named field. Any errors that occur are assigned to the errors array.
import mx.data.binding.*; var t:TypedValue = new TypedValue (true, "Boolean"); var errors: Array = field.setAnyTypedValue (t);

See also
DataType.setTypedValue()

242

Data binding classes

DataType.setAsBoolean()
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
dataTypeObject.setAsBoolean(newBooleanValue)

Parameters
newBooleanValue

A Boolean value.

Returns

Nothing.
Description

Method; sets the field to the new value, which is given as a Boolean value. The value is converted to, and stored as, the data type that is appropriate for this field.
Example

The following example sets a variable named bool to the Boolean value true. It then sets the value referenced by field to true.
var bool: Boolean = true; field.setAsBoolean (bool);

DataType.setAsNumber()
Availability Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
dataTypeObject.setAsNumber(newNumberValue)

Parameters
newNumberValue

A number.

DataType.setAsNumber()

243

Returns

Nothing.
Description

Method; sets the field to the new value, which is given as a number. The value is converted to, and stored as, the data type that is appropriate for this field.
Example

The following example sets a variable named num to the Number value of 32. It then sets the value referenced by field to num.
var num: Number = 32; field.setAsNumber (num);

DataType.setAsString()
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
dataTypeObject.setAsString(newStringValue)

Parameters
newStringValue

A string.

Returns

Nothing.
Description

Method; sets the field to the new value, which is given as a string. The value is converted to, and stored as, the data type that is appropriate for this field.
Example

The following example sets the variable stringVal to the string "The sets the value of field to the string.
var stringVal: String = "The new value"; field.setAsString (stringVal);

new value".

It then

244

Data binding classes

DataType.setTypedValue()
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
dataTypeObject.setTypedValue(newTypedValue)

Parameters
newTypedValue

A TypedValue object value to set in the field.

For more information about TypedValue objects, see “TypedValue class” on page 246.
Returns

An array of strings describing any errors that occurred while attempting to set the new value. Errors can occur under any of the following conditions:
■ ■

The data provided is not an acceptable type. The data provided cannot be converted to the data type of this field (for example, "abc" cannot be converted to Number). The data is an acceptable type but does not meet the validation criteria of the field. The field is read-only.
N OTE

■ ■

The actual text of an error message varies depending on the data type, formatters, and encoders that are defined in the field’s schema.

Description

Method; sets a new value in the field, using the information in the field’s schema to process the field. This method behaves similarly to DataType.setAnyTypedValue(), except that it doesn’t try as hard to convert the data to an acceptable data type. For more information, see DataType.setAnyTypedValue().
Example

The following example creates a new TypedValue object (a Boolean value), and then assigns that value to a DataType object named field. Any errors that occur are assigned to the errors array.
import mx.data.binding.*; var bool:TypedValue = new TypedValue (true, "Boolean"); var errors: Array = field.setTypedValue (bool);

DataType.setTypedValue()

245

See also
DataType.setTypedValue()

TypedValue class
ActionScript Class Name

mx.data.binding.TypedValue

A TypedValue object contains a data value, along with information about the value’s data type. TypedValue objects are provided as parameters to, and are returned from, various methods of the DataType class. The data type information in the TypedValue object helps DataType objects decide when and how they need to do type conversion. To make this class available at runtime, you must include the data binding classes in your FLA file. For more information, see “Making data binding classes available at runtime” on page 207.
NO TE 246

The TypedValue class is supported only if you are working in a document that specifies ActionScript 2.0 in its Publish Settings.

For an overview of the classes in the mx.data.binding package, see “Classes in the mx.data.binding package” on page 208.

Property summary for the TypedValue class
The following table lists the properties of the TypedValue class.
Property
TypedValue.type TypedValue.typeName TypedValue.value

Description
Contains the schema associated with the TypedValue object’s value. Names the data type of the TypedValue object’s value. Contains the data value of the TypedValue object.

Constructor for the TypedValue class
Availability

Flash Player 6 (6.0.79.0).
Usage
new mx.data.binding.TypedValue(value, typeName, [type])

Parameters
value

A data value of any type.

Data binding classes

typeName type

A string that contains the name of the value’s data type.

An optional Schema object that describes in more detail the schema of the data. This field is required only in certain circumstances, such as when setting data into a DataSet component’s dataProvider property.

Description

Constructor; creates a new TypedValue object.

TypedValue.type
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
typedValueObject.type

Description

Property; contains the schema associated with the TypedValue object’s value.
Example

This example displays null in the Output panel:
var t: TypedValue = new TypedValue (true, "Boolean", null); trace(t.type);

TypedValue.typeName
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
typedValueObject.typeName

TypedValue.typeName

247

Description

Property; contains the name of the data type of the TypedValue object’s value.
Example

This example displays Boolean in the Output panel:
var t: TypedValue = new TypedValue (true, "Boolean", null); trace(t.typeName);

TypedValue.value
Availability

Flash Player 6 (6.0.79.0).
Edition

Flash MX Professional 2004.
Usage
typedValueObject.value

Description

Property; contains the data value of the TypedValue object.
Example

This example displays true in the Output panel:
var t: TypedValue = new TypedValue (true, "Boolean", null); trace(t.value);

248

Data binding classes

CHAPTER 10

DataGrid component
The DataGrid component lets you create powerful data-enabled displays and applications. You can use the DataGrid component to instantiate a recordset (retrieved from a database query in Adobe ColdFusion, Java, or .Net) using Adobe Flash Remoting and display it in columns. You can also use data from a data set or from an array to fill a DataGrid component.
N OTE

10

A DataGrid component is supported for both ActionScript 2.0 and ActionScript 3.0. This document discusses the version 2 component. If you are using the version 3 component, see “Using the DataGrid” in Using ActionScript 3.0 Components.

You can resize and customize characteristics such as the font, color, and borders of columns in a grid. You can use a custom movie clip as a cell renderer for any column in a grid. (A cell renderer displays the contents of a cell.) You can use scroll bars to move through data in a grid; you can also turn off scroll bars and use the DataGrid methods to create a page view style display. For more information about customization, see “DataGridColumn class” on page 301. When you add the DataGrid component to an application, you can use the Accessibility panel to make the component accessible to screen readers. First, you must add the following line of code to enable accessibility for the DataGrid component:
mx.accessibility.DataGridAccImpl.enableAccessibility();

You enable accessibility for a component only once, regardless of how many instances the component has. For more information, see “Creating accessible content” in Using Flash.

249

Interacting with the DataGrid component
You can use the mouse and the keyboard to interact with a DataGrid component. If DataGrid.sortableColumns and DataGridColumn.sortOnHeaderRelease are both true, clicking in a column header causes the grid to sort based on the column’s cell values. If DataGrid.resizableColumns is true, clicking in the area between columns lets you resize columns. Clicking in an editable cell sends focus to that cell; clicking a non-editable cell has no effect on focus. An individual cell is editable when both the DataGrid.editable and DataGridColumn.editable properties of the cell are true. When a DataGrid instance has focus either from clicking or tabbing, you can use the following keys to control it:
Key
Down Arrow

Description
When a cell is being edited, the insertion point shifts to the end of the cell’s text. If a cell is not editable, the Down Arrow key handles selection as the List component does. When a cell is being edited, the insertion point shifts to the beginning of the cell’s text. If a cell is not editable, the Up Arrow key handles selection as the List component does. When a cell is being edited, the insertion point shifts one character to the right. If a cell is not editable, the Right Arrow key does nothing. When a cell is being edited, the insertion point shifts one character to the left. If a cell is not editable, the Left Arrow key does nothing. When a cell is editable, the change is committed, and the insertion point is moved to the cell on the same column, next row (up or down, depending on the shift toggle). Moves focus to the previous item. When the Tab key is pressed, focus cycles from the last column in the grid to the first column on the next line. When Shift+Tab is pressed, cycling is reversed. All the text in the focused cell is selected.

Up Arrow

Right Arrow Left Arrow Return/Enter/ Shift+Enter Shift+Tab/Tab

250

DataGrid component

Using the DataGrid component
You can use the DataGrid component as the foundation for numerous types of data-driven applications. You can easily display a formatted tabular view of a database query (or other data), but you can also use the cell renderer capabilities to build more sophisticated and editable user interface pieces. The following are practical uses for the DataGrid component:
■ ■ ■

A webmail client Search results pages Spreadsheet applications such as loan calculators and tax form applications

Understanding the design of the DataGrid component
The DataGrid component extends the List component. When you design an application with the DataGrid component, it is helpful to understand how the List class underlying it was designed. The following are some fundamental assumptions and requirements that Adobe used when developing the List class:

Keep it small, fast, and simple. Don’t make something more complicated than absolutely necessary. This was the prime design directive. Most of the requirements listed below are based on this directive.

Lists have uniform row heights. Every row must be the same height; the height can be set during authoring or at runtime. Lists must scale to thousands of records. Lists don’t measure text. This creates a horizontal scrolling issue for List and Tree components; for more information, see “Understanding the design of the List component” on page 761. The DataGrid component, however, supports "auto" as an hScrollPolicy value, because it measures columns (which are the same width per item), not text. The fact that lists don’t measure text explains why lists have uniform row heights. Sizing individual rows to fit text would require intensive measuring. For example, if you wanted to accurately show the scroll bars on a list with nonuniform row height, you’d need to premeasure every row.

■ ■

Using the DataGrid component

251

Lists perform worse as a function of their visible rows. Although lists can display 5000 records, they can’t render 5000 records at once. The more visible rows (specified by the rowCount property) you have on the Stage, the more work the list must to do to render. Limiting the number of visible rows, if at all possible, is the best solution.

Lists aren’t tables. DataGrid components are intended to provide an interface for many records. They’re not designed to display complete information; they’re designed to display enough information so that users can drill down to see more. The message view in Microsoft Outlook is a prime example. You don’t read the entire e-mail in the grid; the message would be difficult to read and the client would perform terribly. Outlook displays enough information so that a user can drill into the post to see the details.

Understanding the DataGrid component: data model and view
Conceptually, the DataGrid component is composed of a data model and a view that displays the data. The data model consists of three main parts:

DataProvider This is a list of items with which to fill the data grid. Any array in the same frame as a DataGrid component is automatically given methods (from the DataProvider API) that let you manipulate data and broadcast changes to multiple views. Any object that implements the DataProvider API can be assigned to the DataGrid.dataProvider property (including recordsets, data sets, and so on). The following code creates a data provider called myDP:
myDP = new Array({name:"Chris", price:"Priceless"}, {name:"Nigel", price:"Cheap"});

252

DataGrid component

Item This is an ActionScript object used for storing the units of information in the cells of a column. A data grid is really a list that can display more than one column of data. A list can be thought of as an array; each indexed space of the list is an item. For the DataGrid component, each item consists of fields. In the following code, the content between curly braces ({}) is an item:
myDP = new Array({name:"Chris", price:"Priceless"}, {name:"Nigel", price:"Cheap"});

Field Identifiers that indicate the names of the columns within the items. This corresponds to the columnNames property in the columns list. In the List component, the fields are usually label and data, but in the DataGrid component the fields can be any identifier. In the following code, the fields are name and price:
myDP = new Array({name:"Chris", price:"Priceless"}, {name:"Nigel", price:"Cheap"});

The view consists of three main parts:

Row This is a view object responsible for rendering the items of the grid by laying out cells. Each row is laid out horizontally below the previous one.

Column Columns are fields that are displayed in the grid; the fields each correspond to the columnName property of each column. Each column is a view object (an instance of the DataGridColumn class) responsible for displaying each column—for example, width, color, size, and so on. There are three ways to add columns to a data grid: assign a DataProvider object to DataGrid.dataProvider (this automatically generates a column for each field in the first item), set DataGrid.columnNames to specify which fields are displayed, or use the constructor for the DataGridColumn class to create columns and call DataGrid.addColumn() to add them to the grid. To format columns, either set up style properties for the entire data grid, or define DataGridColumn objects, set up their style formats individually, and add them to the data grid.

Cell This is a view object responsible for rendering the individual fields of each item. To communicate with the data grid, these components must implement the CellRenderer API (see “CellRenderer API” on page 107). For a basic data grid, a cell is a built-in ActionScript TextField object.

Using the DataGrid component

253

DataGrid parameters
You can set the following authoring parameters for each DataGrid component instance in the Property inspector or in the Component inspector:
editable

is a Boolean value that indicates whether the grid is editable (true) or not (false). The default value is false.

multipleSelection

is a Boolean value that indicates whether multiple items can be selected (true) or not (false). The default value is false.

rowHeight indicates the height of each row, in pixels. Changing the font size does not change the row height. The default value is 20.

You can write ActionScript to control these and additional options for the DataGrid component using its properties, methods, and events. For more information, see “DataGrid class” on page 262.

Creating an application with the DataGrid component
To create an application with the DataGrid component, you must first determine where your data is coming from. The data for a grid can come from a recordset that is fed from a database query in Adobe ColdFusion, Java, or .Net using Flash Remoting. Data can also come from a data set or an array. To pull the data into a grid, you set the DataGrid.dataProvider property to the recordset, data set, or array. You can also use the methods of the DataGrid and DataGridColumn classes to create data locally. Any Array object in the same frame as a DataGrid component copies the methods, properties, and events of the DataProvider API.
NO TE

When you bind data to the DataGrid component using the Data components, the object binds columns backward (similar to looping over an object or array). Therefore, to order the data in the DataGrid component differently, you must explicitly define columns.

To use Flash Remoting to add a DataGrid component to an application:
1. 2. 3. 4.

Select File > New and choose Flash File (ActionScript 2.0). In the Components panel, double-click the DataGrid component to add it to the Stage. In the Property inspector, enter the instance name myDataGrid. In the Actions panel on Frame 1, enter the following code:
myDataGrid.dataProvider = recordSetInstance;

The Flash Remoting recordset recordSetInstance is assigned to the dataProvider property of myDataGrid.
5.

Select Control > Test Movie.

254

DataGrid component

To use a local data provider to add a DataGrid component to an application:
1. 2. 3. 4.

Select File > New and choose Flash File (ActionScript 2.0). In the Components panel, double-click the DataGrid component to add it to the Stage. In the Property inspector, enter the instance name myDataGrid. In the Actions panel on Frame 1, enter the following code:
myDP = new Array({name:"Chris", price:"Priceless"}, {name:"Nigel", price:"Cheap"}); myDataGrid.dataProvider = myDP;

The name and price fields are used as the column headings, and their values fill the cells in each row.
5.

Select Control > Test Movie.

To specify columns and add sorting for a DataGrid component in an application:
1. 2. 3. 4.

Select File > New and choose Flash File (ActionScript 2.0). In the Components panel, double-click the DataGrid component to add it to the Stage. In the Property inspector, enter the instance name myDataGrid. In the Actions panel on Frame 1, enter the following code:
var myDataGrid:mx.controls.DataGrid; // Create columns to enable sorting of data. myDataGrid.addColumn("name"); myDataGrid.addColumn("score"); var myDP_array:Array = new Array({name:"Clark", score:3135}, {name:"Bruce", score:403}, {name:"Peter", score:25}) myDataGrid.dataProvider = myDP_array; // Create listener object for DataGrid. var listener_obj:Object = new Object(); listener_obj.headerRelease = function(evt_obj:Object) { switch (evt_obj.target.columns[evt_obj.columnIndex].columnName) { case "name" : myDP_array.sortOn("name", Array.CASEINSENSITIVE); break; case "score" : myDP_array.sortOn("score", Array.NUMERIC); break; } };

Using the DataGrid component

255

// Add listener to DataGrid. myDataGrid.addEventListener("headerRelease", listener_obj); 5.

Select Control > Test Movie.

To create a DataGrid component instance using ActionScript:
1. 2.

Select File > New and choose Flash File (ActionScript 2.0). Drag the DataGrid component from the Components panel to the current document’s library. This adds the component to the library, but doesn’t make it visible in the application. Select the first frame in the main Timeline, open the Actions panel, and enter the following code:
this.createClassObject(mx.controls.DataGrid, "my_dg", 10, {columnNames:["name", "score"]}); my_dg.setSize(140, 100); my_dg.move(10, 40);

3.

This script uses the UIObject.createClassObject() method to create the DataGrid instance and then sizes and positions the grid.
4.

Create an array, add data to the array, and identify the array as the data provider for the data grid:
var myDP_array:Array = new Array(); myDP_array.push({name:"Clark", score:3135}); myDP_array.push({name:"Bruce", score:403}); myDP_array.push({name:"Peter", score:25}); my_dg.dataProvider = myDP_array;

5.

Select Control > Test Movie.

256

DataGrid component

DataGrid performance strategies
Performance can quickly become a major concern when you are using the DataGrid component because the size of the data it displays can be scalable. A data grid that displays a hundred rows on a fast computer with a fast connection to the data source may look acceptable to you. A month later, when the data has increased to several thousand rows, a user may have a much different experience. Also, the user may have a slower computer on a slow connection to your data source. Here are some suggestions for avoiding common performance pitfalls when using the DataGrid component.

Build and bind a data structure rather than add columns directly. There are two ways to add columns and data to the DataGrid component: by binding a pre-made data structure (an array of objects) through the DataGrid.dataProvider property or by using DataGrid class methods such as DataGrid.addColumn() and DataGrid.addItem(). Whenever possible, you should bind to a pre-made data structure using the DataGrid.dataProvider property because it allows DataGrid to create all the columns it needs before attempting to draw them on the screen. You may be tempted to make a for loop to call DataGrid.addColumn() for all the columns needed. Although this seems like a simple and obvious approach, do not use it. Each time that DataGrid.addColumn() is called, the data grid adds event listeners, sorts, and redraws itself to present the new column. Creating 20 columns using DataGrid.addColumn() causes DataGrid to sort itself and redraw 20 times needlessly. Building your data structure in ActionScript requires no rendering or events to account for. When you assign it to the dataProvider property of the DataGrid component, all of the drawing is completed in just one pass.

Provide a drill-down mechanism for detailed data. The DataGrid component interface allows users to search quickly so that they can search for more details. Provide only the data needed to perform the initial search, and.detailed information for any particular row or cell can be provided in a second search step. This process minimizes not only the initial data required to fill the data grid but also minimizes the amount of information that users must read to locate what they are looking for. When a row or item of interest is selected in the data grid, a second call can be made to the data source to get related details. Those details can be appear better in some other UI mechanism, such as a collection of multiline text fields and graphics.

DataGrid performance strategies

257

Avoid cycles of data manipulation between the data source and the data grid. If it is possible, and if it meets long-term database needs, storing the data in much the same format and order in which it appears can avoid unnecessary memory allocation and processing time on the user’s computer and speed up data-grid response time.

Avoid queries that return every row in the database. Users rarely want to see every record that is available every time they access the data. It’s important to understand what the consumers of your data are looking for and give them the means to narrow down their search. If they usually look only at the most recent records for a given week for a particular subject, display that smaller group of data as a default, with the ability to widen the view of the data. Consider paging potentially large amounts of data to limit its size by providing a subset of data that might normally be returned from a query. For instance, rather than viewing all 10,000 rows of data that might be returned by a query from your database, a subset of the first 20 rows might be called for, and additional navigation buttons might trigger a call to fill the data grid with the next 20 records.

Separate data processing from CellRenderer processing. The CellRenderer API lets you display custom cell content in a data grid. A functional requirement might require that you populate the data grid with a ComboBox component or other UI control conditionally. For example, based on a selection in column two, you may repopulate or auto-select options in column four. Whenever possible, it is important to separate this conditional logic and repopulating of controls from the process of rendering the content of the cell. Each time the mouse rolls over the cell, the cell is selected, or data is changed, the content of the cell or the entire cell is likely to be redrawn to keep it up to date. This means that any code you put in CellRenderer is run over and over again, so you should keep processing in CellRenderer as light as possible. If you do have to add code to CellRenderer, it is better to call a function from CellRenderer that detects what updates need to be made and makes them in the most efficient manner.

Use UIObject.doLater() to access properties after the data grid has finished drawing. A data grid instance needs to finish drawing and loading data before you can access all the properties of the data grid (such as focusedCell and others). Because there is no “complete” event for a DataGrid, you can use UIObject.doLater(), instead, to call a function that accesses the data grid properties. UIObject.doLater() will execute the function only after the data grid properties are available. See DataGrid.focusedCell for an example.

258

DataGrid component

Customizing the DataGrid component
You can transform a DataGrid component horizontally and vertically during authoring and runtime. While authoring, select the component on the Stage and use the Free Transform tool or any of the Modify > Transform commands. At runtime, use the setSize() method (see UIObject.setSize()). If there is no horizontal scroll bar, column widths adjust proportionally. If column (and therefore, cell) size adjustment occurs, text in the cells may be clipped.

Using styles with the DataGrid component
You can set style properties to change the appearance of a DataGrid component. The DataGrid component inherits styles from the List component. (See “Using styles with the List component” on page 764.) The DataGrid component also supports the following styles:
Style
backgroundColor

Theme Description
Both Both The background color, which can be set for the whole grid or for each column. The background color when the component’s enabled property is set to "false". The default value is 0xDDDDDD (medium gray). The DataGrid component uses a RectBorder instance as its border and responds to the styles defined on that class. See “RectBorder class” on page 1065. The default border style value is "inset". The color of the column headers. The default value is 0xEAEAEA (light gray) A CSS style declaration for the column header that can be applied to a grid or column to customize the header styles. The text color. The default value is 0x0B333C for the Halo theme and blank for the Sample theme. The color for text when the component is disabled. The default color is 0x848384 (dark gray).

backgroundDisabledColor

borderStyle

Both

headerColor

Both Both

headerStyle

color

Both Both

disabledColor

Customizing the DataGrid component

259

The color of the horizontal grid lines. Otherwise. The default value is "left". The default value is 0x666666 (medium gray). 260 DataGrid component .embedFonts=true. The default value is "_sans".setStyle("fontFamily". fontFamily fontSize fontStyle Both Both Both Both The font name for text. "right". If this style is set to true and fontFamily does not refer to an embedded font. A Boolean value that indicates whether to show vertical grid lines (true) or not (false). but subsequent calls to getStyle() return "none". The point size for the font. All components can also accept the value "normal" in place of "none" during a setStyle() call. For example (using a DataGrid instance my_dg): my_dg. The default value is false. 0xFF00AA). The default value is 10. The font style: either "normal" or "italic".setStyle("backgroundColor". This style must be set to true if fontFamily refers to an embedded font. The default value is "none". or "center". The text decoration: either "none" or "underline". my_dg. The default value is "normal". The default value is true. "yourFont"). The default value is "none".getColumnAt(3). the embedded font is not used. A Boolean value that indicates whether to show horizontal grid lines (true) or not (false). The color of the vertical grid lines. fontWeight textAlign Both Both Both textDecoration vGridLines hGridLines Both vGridLineColor Both Both hGridLineColor Setting styles for an individual column Color and text styles can be set for the grid as a whole or for a column. You can use the following syntax to set a style for a particular column: grid. The default value is false. The font weight: either "none" or "bold". The default value is 0x666666 (medium gray). no text is displayed. The text alignment: either "left".Style embedFonts Theme Description Both A Boolean value that indicates whether the font specified in fontFamily is an embedded font.

var headerStyles = new CSSStyleDeclaration(). When you create a new class-level style declaration. as shown in the following example.styles.DataGrid = new CSSStyleDeclaration(). which is a style property itself.styles. if (_global.. and these new settings are reflected in all affected components. To set a style property on the DataGrid components only.0 Components. which the Menu component and all List-based components extend. 0xFF00AA).styles. Customizing the DataGrid component 261 . _global. import mx. var target = _global.ScrollSelectList.DataGrid.styles. you can create a new instance of CSSStyleDeclaration and store it in _global.in loop to copy the old settings to the new declaration.setStyle(style. which is required for supporting mouse events. see “Setting styles for a component class” in Using ActionScript 2.Setting header styles You can set header styles through headerStyle.styles. use a for. source. The default class-level style properties are defined on the ScrollSelectList class. for (var style in source) { target. 0xFF00AA).DataGrid == undefined) { _global. you lose all default values provided by the ScrollSelectList declaration.setStyle("fontStyle".DataGrid.CSSStyleDeclaration. } For more information about class-level styles. To do this. To create a class-level style declaration and preserve defaults.setStyle("backgroundColor". headerStyles). and then assign the CSSStyleDeclaration to the headerStyle property. headerStyles. grid.styles. var source = _global.styles.setStyle("backgroundColor". Setting styles for all DataGrid components in a document The DataGrid class inherits from the List class. which inherits from the ScrollSelectList class. import mx. You can set new default style values on this class directly. including backgroundColor.DataGrid.CSSStyleDeclaration.styles.getStyle(style)).styles.setStyle("headerStyle". } _global. you create an instance of CSSStyleDeclaration. "italic"). set the appropriate properties on that instance for the header.ScrollSelectList.

editField() DataGrid. The version property returns a string that indicates the version of the component.controls.addColumnAt() DataGrid.Using skins with the DataGrid component The skins that the DataGrid component uses to represent its visual states are included in the subcomponents that constitute the data grid (scroll bars and RectBorder).addItem() DataGrid. Adds an item to the data grid at a specified location.DataGrid. DataGrid. Removes a column from a data grid at a specified location. For information about their skins.getColumnAt() DataGrid. Adds an item to the data grid.getColumnIndex() Description Adds a column to the data grid. NO TE 262 The code trace(myDataGridInstance. Gets a reference to the DataGridColumn object at the specified index. Class properties are available only on the class itself.removeColumnAt() DataGrid component . returns undefined. Method summary for the DataGrid class The following table lists methods of the DataGrid class. Gets a reference to a column at a specified location.DataGrid ActionScript Class Name Each component class has a version property.version). To access this property.addItemAt() DataGrid. DataGrid class Inheritance MovieClip > UIObject class > UIComponent class > View > ScrollView > ScrollSelectList > List component > DataGrid mx. Replaces the cell data at a specified location. use the following code: trace(mx.removeAllColumns() DataGrid. Removes all columns from a data grid. Method DataGrid.addColumn() DataGrid. see “Using skins with the UIScrollBar component” on page 1396 and “RectBorder class” on page 1065. Adds a column to the data grid at a specified location.version). which is a class property.controls.

Method UIObject. use the form dataGridInstance.getStyle() UIObject.createClassObject() UIObject. When calling these methods. Marks the object so it is redrawn on the next frame interval. Creates a subobject on an object. Method UIComponent. Sets the style property on the style declaration or object.destroyObject() Description Creates an object on the specified class.setStyle() Methods inherited from the UIComponent class The following table lists the methods the DataGrid class inherits from the UIComponent class. Sets focus to the component instance.methodName.getFocus() UIComponent.replaceItemAt() Description Replaces an item at a specified location with another item. Resizes the object to the requested size.methodName. Gets the style property from the style declaration or object. Destroys a component instance.setFocus() Description Returns a reference to the object that has focus.setSkin() UIObject. Forces validation of the object so it is drawn in the current frame.invalidate() UIObject.spaceColumnsEqually() Spaces all columns equally. UIObject.redraw() UIObject.createObject() UIObject.Method DataGrid.setSize() UIObject. use the form dataGridInstance. DataGrid class 263 . Sets a skin in the object. DataGrid.doLater() UIObject. When calling these methods. Moves the object to the requested position. Methods inherited from the UIObject class The following table lists the methods the DataGrid class inherits from the UIObject class.move() UIObject. Calls a function when parameters have been set in the Property and Component inspectors.

Applies the specified properties to the specified item. A Boolean value that indicates whether the data grid is selectable (true) or not (false). A Boolean value that indicates whether the columns are resizable (true) or not (false).columnNames Description Read-only. The height of the column headers.headerHeight DataGrid.sortItemsBy() Property summary for the DataGrid class The following table lists the properties of the DataGrid class. The data model for a data grid. Defines the cell that has focus. Replaces the item at the specified index with another item.resizableColumns DataGrid.getItemAt() List.columnCount DataGrid.replaceItemAt() List. use the form dataGridInstance.Methods inherited from the List class The following table lists the methods the DataGrid class inherits from the List class.hScrollPolicy DataGrid. or appears when necessary ("auto"). not present ("off"). Sorts the items in the list according to the specified compare function. Method List. List.removeAll() List. DataGrid.selectable 264 DataGrid component . An array of field names within each item that are displayed as columns. Sorts the items in the list according to a specified property. Removes the item at the specified index.editable DataGrid. When calling these methods. in pixels. the number of columns that are displayed.dataProvider DataGrid.addItemAt() List. Property DataGrid. Indicates whether a horizontal scroll bar is present ("on"). Returns the item at the specified index. Removes all items from the list. Adds an item to the list at the specified index.addItem() List.removeItemAt() List.focusedCell DataGrid. A Boolean value that indicates whether the data grid is editable (true) or not (false).methodName.sortItems() Description Adds an item to the end of the list.setPropertiesAt() List.

height UIObject. When accessing these properties from the DataGrid object. relative to the right edge of its parent.showHeaders Description A Boolean value that indicates whether the column headers are visible (true) or not (false). A Boolean value that indicates whether the columns are sortable (true) or not (false). in pixels.scaleX UIObject. relative to its parent.x UIObject. in pixels.left UIObject. relative to its parent. The top edge of the object.scaleY UIObject. The left edge of the object. Read-only.sortableColumns Properties inherited from the UIObject class The following table lists the properties the DataGrid class inherits from the UIObject class. The height of the object.propertyName.Property DataGrid.right UIObject. Read-only. Read-only. DataGrid. in pixels. The width of the object. A number indicating the scaling factor in the x direction of the object.y DataGrid class 265 . The position of the top edge of the object. in pixels. in pixels. Read-only. use the form dataGridInstance. Read-only. Read-only. A Boolean value indicating whether the object is visible (true) or not (false). Property UIObject. UIObject. The position of the right edge of the object. relative to its parent. Read-only.bottom Description The position of the bottom edge of the object. Read-only. The left edge of the object.top UIObject.width UIObject. A number indicating the scaling factor in the y direction of the object. relative to the bottom edge of its parent.visible UIObject.

hScrollPolicy Description Assigns the class or symbol to use to display each row of the list.propertyName.enabled Description Indicates whether the component can receive focus and input. Indicates whether the list is selectable (true) or not (false). Indicates whether the horizontal scroll bar is displayed ("on") or not ("off"). The pixel height of every row in the list.propertyName.iconField List. When accessing these properties from the DataGrid object. The source of the list items.dataProvider List. when List.Properties inherited from the UIComponent class The following table lists the properties the DataGrid class inherits from the UIComponent class. The number of pixels the list can scroll to the right. use the form dataGridInstance. Specifies a field of each item to be used as label text. When accessing these properties from the DataGrid object. A function that determines which icon to use. use the form dataGridInstance.iconFunction List. Property UIComponent. A number indicating the tab order for a component in a document. A field in each item to be used to specify icons. This property is read-only. The number of rows that are at least partially visible in the list. The horizontal position of the list.rowCount List. Property List. A function that determines which fields of each item to use for the label text.cellRenderer List.labelFunction List.tabIndex Properties inherited from the List class The following table lists the properties the DataGrid class inherits from the List class. List.multipleSelection List. UIComponent.length List.rowHeight List. The number of items in the list.hPosition List.maxHPosition List.selectable 266 DataGrid component .labelField List. Indicates whether multiple selection is allowed in the list (true) or not (false).hScrollPolicy is set to "on".

Event DataGrid. Broadcast when a cell receives focus.draw UIObject. The selected item in a single-selection list.selectedItems List.selectedIndices List.change DataGrid.hide UIObject.cellFocusOut DataGrid.columnStretch DataGrid. List. Broadcast when a user clicks (releases) a header.selectedIndex List.resize Description Broadcast when an object is about to draw its graphics.cellFocusIn Description Broadcast when the cell value has changed. An array of the selected items in a multiple-selection list.cellEdit DataGrid.headerRelease Events inherited from the UIObject class The following table lists the events the DataGrid class inherits from the UIObject class. DataGrid. Broadcast when an object has been resized. or displayed when needed ("auto").move UIObject. The selected item objects in a multiple-selection list. This property is read-only. Broadcast when an object’s state changes from visible to invisible.vPosition List. Broadcast when a user resizes a column horizontally. Scrolls the list so the topmost visible item is the number assigned. not displayed ("off"). This property is read-only. Indicates whether the vertical scroll bar is displayed ("on").vScrollPolicy Event summary for the DataGrid class The following table lists the events of the DataGrid class.cellPress DataGrid.selectedItem Description The index of a selection in a single-selection list. Broadcast when a cell loses focus. Broadcast when the object has moved. Broadcast when an item has been selected. Broadcast when subobjects are being created. DataGrid class 267 .Property List.load UIObject. Broadcast when a cell is pressed (clicked). Event UIObject.

Broadcast when a list is scrolled. Event List.keyUp Description Broadcast when an object receives focus.addColumn(name) 268 DataGrid component .reveal UIObject.unload Description Broadcast when an object’s state changes from invisible to visible. Events inherited from the UIComponent class The following table lists the events the DataGrid class inherits from the UIComponent class.addColumn() Availability Flash Player 6 (6.Event UIObject. Broadcast when the mouse pointer rolls over list items. Broadcast when an object loses focus.focusOut UIComponent. Events inherited from the List class The following table lists the events the DataGrid class inherits from the List class. Broadcast when a key is pressed.itemRollOut List.focusIn UIComponent. Usage myDataGrid.scroll DataGrid.0).itemRollOver List.keyDown UIComponent. Broadcast when the mouse pointer rolls over and then off of list items. List.0.addColumn(dataGridColumn) myDataGrid. Event UIComponent.change Description Broadcast whenever user interaction causes the selection to change. Broadcast when a key is released. Broadcast when the subobjects are being unloaded.79. Edition Flash MX Professional 2004.

controls. A string that indicates the name of a new DataGridColumn object to be inserted. Example This example shows three different ways of creating columns for a DataGrid component. var blue_dgc:DataGridColumn = new DataGridColumn("Blue"). or returns the string that indicates the name of the new column. blue_dgc.gridclasses. // Add a third column to grid. Returns A reference to the DataGridColumn object that was added. 240). blue_dgc.controls. see “DataGridColumn class” on page 301.addColumn(blue_dgc). adds a new column to the end of the data grid.addColumnAt() 269 . DataGrid. my_dg.Parameters dataGridColumn name An instance of the DataGridColumn class. var my_dg:mx.addColumn(new DataGridColumn("Green")). // Add another column to grid. my_dg.addColumnAt() Availability Flash Player 6 (6.DataGridColumn.DataGrid.width = 140. paste the following code in the first frame of the main timeline (notice that it imports the DataGridColumn class first): import mx. DataGrid. my_dg. my_dg.0).headerText = "Blue Column:". // Add columns to grid. For more information. Edition Flash MX Professional 2004. Description Method.setSize(320.addColumn("Red"). With a DataGrid instance named my_dg on the Stage.0.79.

addColumnAt(index. var orange_dgc:DataGridColumn = my_dg. blue_dgc).DataGrid. or returns the string that indicates the name of the new column. 270 DataGrid component . Columns are shifted to the right and their indexes are incremented. name dataGridColumn Returns A reference to the DataGridColumn object that was added. dataGridColumn) Parameters index The index position at which the DataGridColumn object is added.gridclasses.79.controls. my_dg.addColumnAt(0. An instance of the DataGridColumn class.0. my_dg. With a DataGrid instance named my_dg on the Stage.addColumnAt(index.getColumnAt(0). DataGrid.DataGridColumn. 240). my_dg.addColumnAt(1. paste the following code in the first frame of the main timeline (notice that it imports the DataGridColumn class first): import mx. var blue_dgc:DataGridColumn = new DataGridColumn("Blue").addItem() Availability Flash Player 6 (6. Description Method. A string that indicates the name of the DataGridColumn object. orange_dgc. adds a new column at the specified position. see “DataGridColumn class” on page 301.setSize(320. Example This example shows two ways to use addColumnAt() and sets the column widths. name) myDataGrid.0). "Orange"). // Add columns to grid. The first position is 0. For more information.width = 75.controls. var my_dg:mx. blue_dgc.Usage myDataGrid.width = 125.

my_dg. paste the following code in the first frame of the main timeline: // Add columns to grid and add data. Description Method. my_dg.addItemAt(index.addItem() method in that an object is passed rather than a string.addItem(item) Parameters item An instance of an object to be added to the grid. Usage myDataGrid. Usage myDataGrid.Edition Flash MX Professional 2004.addItemAt() 271 . Example This example creates one column with the heading “name” and then inserts the item_obj value for “name”. NO TE This differs from the List. Notice that the “age” value is ignored.0. DataGrid.79. age:30}.addItemAt() Availability Flash Player 6 (6.addItem(item_obj). DataGrid automatically creates the appropriate columns. Returns A reference to the instance that was added.0). If you don’t specify a column (remove the addColumn line). Edition Flash MX Professional 2004. item) DataGrid. var item_obj:Object = {name:"Jim". With a DataGrid instance named my_dg on the Stage. because only the name column has been defined. adds an item to the end of the grid (after the last item index).addColumn("name").

Description Method. {name:"Jose". Example This example creates one column with the heading “name”.0). item_obj). var item_obj:Object = {name:"Chase". age:41}). because only the name column has been defined. age:33}.Parameters index The index position (among the child nodes) at which the node should be added. A string that displays the node. and then adds the name “Chase” in the first row. var myDP_array:Array = new Array({name:"John". If you don’t specify a column (remove the addColumn line). age:30}. The first position is 0. paste the following code in the first frame of the main timeline: var my_dg:mx. DataGrid. Notice that the “age” value is ignored. 272 DataGrid component . my_dg.dataProvider = myDP_array. item Returns A reference to the object instance that was added. Edition Flash MX Professional 2004. // Add columns to grid and add data.addItemAt(0. adds an item to the grid at the position specified. my_dg. Usage listenerObject = new Object(). populates the column from an array.79.addColumn("name"). With a DataGrid instance named my_dg on the Stage.0.cellEdit Availability Flash Player 6 (6. listenerObject.controls. my_dg.cellEdit = function(eventObject){ // Insert your code here.DataGrid. DataGrid automatically creates the appropriate columns.

my_dg.setSize(320.getColumnAt(0). You can use these properties to write code that handles the event. my_dg. my_dg. a handler called myDataGridListener is defined and passed to myDataGrid. score:403}).editable = false.push({name:"Clark". With a DataGrid instance named my_dg on the Stage. it automatically passes an event object (eventObject) to the handler. For more information. The event object is captured by the cellEdit handler in the eventObject parameter. and the event is handled by a function (also called a handler) that is attached to a listener object (listenerObject) that you create. a trace statement is sent to the Output panel. broadcast to all registered listeners when cell value changes. // Add columns and make the first one not editable. Components use a dispatcher/listener event model. myDP_array. my_dg. Example In the following example. listenerObject) Description Event. // Set data source of DataGrid. myDP_array.dataProvider = myDP_array. When the cellEdit event is broadcast (after you alter a “score” value and press Enter). A number that indicates the index of the target row. var myDP_array:Array = new Array(). The DataGrid.cellEdit event’s event object has four additional properties: columnIndex itemIndex oldValue type A number that indicates the index of the target column.} myDataGridInstance. Each event object has properties that contain information about the event. score:3135}). The previous value of the cell. The DataGrid component dispatches a cellEdit event when the value of a cell has changed. When the event is triggered.cellEdit 273 .addColumn("score"). myDP_array. The string "cellEdit".push({name:"Bruce". my_dg.push({name:"Peter". see “EventDispatcher class” on page 495.editable = true. 240). You call the addEventListener() method and pass it the name of the handler as a parameter.addEventListener("cellEdit". DataGrid. score:25}).addEventListener() as the second parameter.addColumn("name"). paste the following code in the first frame of the main timeline: my_dg.

The DataGrid. myListener_obj). it automatically passes an event object (eventObject) to the handler.score.cellFocusIn event’s event object has three additional properties: columnIndex itemIndex type A number that indicates the index of the target column.0). trace("The value of the cell at "+cell_obj+" has changed to "+value_obj).0. DataGrid. listenerObject.addEventListener("cellFocusIn".selectedItem. "+evt_obj. You can use these properties to write code that handles the event. listenerObject) Description Event. }. This event is broadcast after any previously edited cell’s editCell and cellFocusOut events are broadcast.cellEdit = function(evt_obj:Object) { // Retrieve location of cell that was changed.cellFocusIn Availability Flash Player 6 (6. When a DataGrid component dispatches a cellFocusIn event. When the event is triggered.target. the event is handled by a function (also called a handler) that is attached to a listener object (listenerObject) that you create.// Create listener object. broadcast to all registered listeners when a particular cell receives focus. var value_obj:Object = evt_obj. // Retrieve cell value that was changed.cellFocusIn = function(eventObject){ // Insert your code here. 274 DataGrid component . Each event object has properties that contain information about the event. Components use a dispatcher/listener event model.79. myListener_obj. var myListener_obj:Object = new Object(). You call the addEventListener() method and pass it the name of the handler as a parameter. my_dg.columnIndex+". Usage listenerObject = new Object(). A number that indicates the index of the target row. The string "cellFocusIn". } myDataGridInstance.addEventListener("cellEdit".itemIndex+")". // Add listener object. var cell_obj:Object = "("+evt_obj. Edition Flash MX Professional 2004.

score:25}). // Make DataGrid editable. }. // Create listener object.0. my_dg.79.push({name:"Peter". then clicking in a row in the "name" column would not trigger this event. DataGrid. var myDP_array:Array = new Array(). DataGrid.itemIndex + ")".addEventListener("cellFocusIn".editable = true.cellFocusIn = function(evt_obj:Object) { var cell_str:String = "(" + evt_obj. Edition Flash MX Professional 2004.cellFocusOut Availability Flash Player 6 (6.For more information.columnIndex + ".cellFocusOut 275 . N OTE The grid must be editable for this code to work.0). score:403}).push({name:"Clark". // Add listener. my_dg. my_dg. and the event is broadcast only for editable cells. When the cellFocusIn event is broadcast. myDP_array. paste the following code in the first frame of the main timeline: // Set up sample data. myDP_array.push({name:"Bruce". trace("The cell at " + cell_str + " has gained focus"). With a DataGrid instance named my_dg on the Stage. "score"). a trace statement is sent to the Output panel. " + evt_obj. var dgListener:Object = new Object().addEventListener() as the second parameter.dataProvider = myDP_array. So if you have two columns and only one of them is editable (for example. dgListener). score:3135}). myDP_array. Example In the following example. dgListener. a handler called dgListener is defined and passed to my_dg. see “EventDispatcher class” on page 495.

When a DataGrid component dispatches a cellFocusOut event. The DataGrid.push({name:"Bruce". myDP_array. paste the following code in the first frame of the main timeline: // Set up sample data. score:3135}). myDP_array. listenerObject) Description Event. myDP_array. This event is broadcast after the cellEdit event and before any subsequent cellFocusIn events are broadcast by the next cell. The first position is 0.addEventListener() as the second parameter. it automatically passes an event object (eventObject) to the handler. Each event object has properties that contain information about the event. var myDP_array:Array = new Array(). } myDataGridInstance.Usage listenerObject = new Object(). score:25}). a handler called dgListener is defined and passed to my_dg.cellFocusOut = function(eventObject){ // Insert your code here. When the event is triggered. With a DataGrid instance named my_dg on the Stage. Components use a dispatcher/listener event model.push({name:"Peter". 276 DataGrid component . itemIndex type The string "cellFocusOut". broadcast to all registered listeners whenever a user moves off a cell that has focus. The first position A number that indicates the index of the target row. a trace statement is sent to the Output panel. see “EventDispatcher class” on page 495. Example In the following example.push({name:"Clark". the event is handled by a function (also called a handler) that is attached to a listener object that you create. When the cellFocusOut event is broadcast. You can use the event object properties to isolate the cell that was left. For more information.addEventListener("cellFocusOut". score:403}).cellFocusOut event’s event object has three additional properties: columnIndex A number that indicates the index of the target column. listenerObject. You call the addEventListener() method and pass it the name of the handler as a parameter. You can use these properties to write code that handles the event. is 0.

Edition Flash MX Professional 2004. dgListener).dataProvider = myDP_array. listenerObject) Description Event. // Create listener object.0).my_dg. DataGrid.addEventListener("cellFocusOut". my_dg.0.cellPress = function(eventObject){ // Insert your code here. }. broadcast to all registered listeners when a user presses the mouse button on a cell. Components use a dispatcher/listener event model.addEventListener("cellPress".cellPress Availability Flash Player 6 (6. my_dg. trace("The cell at " + cell_str + " has lost focus"). " + evt_obj.itemIndex + ")". // Make DataGrid editable. // Add listener. dgListener. If you have two columns and only one of them is editable (for example.79. the event is handled by a function (also called a handler) that is attached to a listener object (listenerObject) that you create.cellPress 277 . clicking out of a row in the "name" column does not trigger this event. } myDataGridInstance. var dgListener:Object = new Object().editable = true.cellFocusOut = function(evt_obj:Object) { var cell_str:String = "(" + evt_obj. and the event is broadcast only for editable cells. "score"). DataGrid. When a DataGrid component broadcasts a cellPress event. You call the addEventListener() method and pass it the name of the handler as a parameter.columnIndex + ". listenerObject. Usage listenerObject = new Object(). N OTE The grid must be editable for this code to work.

The event object is captured by the cellPress handler in the evt_obj parameter.cellPress event’s event object has three additional properties: columnIndex A number that indicates the index of the column that was pressed. my_dg. Each event object has properties that contain information about the event. itemIndex position is 0. paste the following code in the first frame of the main timeline: // Set up sample data. see “EventDispatcher class” on page 495. The first A number that indicates the index of the row that was pressed.When the event is triggered. The DataGrid. }. // Create listener object. You can use these properties to write code that handles the event.cellPress = function(evt_obj:Object) { var cell_str:String = "("+evt_obj. dgListener. var dgListener:Object = new Object(). // Add listener. score:3135}. my_dg. trace("The cell at "+cell_str+" has been clicked").addEventListener() as the second parameter. score:25}]. For more information. 278 DataGrid component .itemIndex+")". When the cellPress event is broadcast.columnIndex+". {name:"Peter". The first position is 0.dataProvider = [{name:"Clark". score:403}. Example In the following example.addEventListener("cellPress". dgListener). type The string "cellPress". "+evt_obj. With a DataGrid instance named my_dg on the Stage. {name:"Bruce". a handler called dgListener is defined and passed to grid. a trace statement is sent to the Output panel. it automatically passes an event object (eventObject) to the handler.

var dgListener:Object = new Object(). a trace statement is sent to the Output panel.change event’s event object has one additional property.79. it automatically passes an event object (eventObject) to the handler. The DataGrid. // Create listener object. type. The event object is captured by the change handler in the evt_obj parameter. {name:"Peter".addEventListener() as the second parameter. Usage listenerObject = new Object().addEventListener("change".change Availability Flash Player 6 (6. When the change event is broadcast.change = function(evt_obj:Object) { trace("The selection has changed to " + evt_obj. Edition Flash MX Professional 2004. When a DataGrid component dispatches a change event. broadcast to all registered listeners when an item has been selected.selectedIndex). dgListener. my_dg. } myDataGridInstance.change 279 . }. score:403}. Components use a dispatcher/listener event model. paste the following code in the first frame of the main timeline: // Set up sample data.dataProvider = [{name:"Clark". You can use these properties to write code that handles the event. a handler called dgListener is defined and passed to grid. You call the addEventListener() method and pass it the name of the handler as a parameter. listenerObject. For more information. score:3135}. DataGrid. Example In the following example. whose value is "change". score:25}]. the event is handled by a function (also called a handler) that is attached to a listener object (listenerObject) that you create. Each event object has properties that contain information about the event.target.0. With a DataGrid instance named my_dg on the Stage.DataGrid.0).change = function(eventObject){ // Insert your code here. When the event is triggered. see “EventDispatcher class” on page 495. {name:"Bruce". listenerObject) Description Event.

my_dg.columnCount Availability Flash Player 6 (6.addEventListener("change".addColumn("a"). my_dg.addColumn("b"). the number of columns displayed.79. var colCount_num:Number = my_dg. my_dg. paste the following code in the first frame of the main timeline: // Add columns to grid and add data.addItem({a:"one".0). b:"two"}). Example The following example displays the total number of columns in the Output panel. trace("Number of columns: "+colCount_num).columnCount. // Get number of columns in grid. With a DataGrid instance named my_dg on the Stage. Usage myDataGrid. Edition Flash MX Professional 2004.// Add listener.0. my_dg.columnCount Description Property (read-only). dgListener). 280 DataGrid component . DataGrid.

Example The following example displays the column name in the Output panel when the title is clicked.79. listenerObject) DataGrid. Edition Flash MX Professional 2004.columnNames Availability Flash Player 6 (6. var dgListener:Object = new Object().setSize(200. With a DataGrid instance named my_dg on the Stage.").columnStretch Availability Flash Player 6 (6. an array of field names within each item that are displayed as columns. Usage myDataGrid.0. paste the following code in the first frame of the main timeline: my_dg. Edition Flash MX Professional 2004.columnStretch 281 .79.columnNames Description Property.columnIndex] + "\" column. "Description". dgListener.columnNames[evt_obj.0).0).columnNames = ["Name".addEventListener("columnStretch". Usage listenerObject = new Object().addEventListener("headerRelease".columnStretch = function(eventObject){ // Insert your code here. 100). "Price"]. dgListener). } myDataGridInstance. listenerObject.0. DataGrid.DataGrid. } my_dg. my_dg.headerRelease = function (evt_obj:Object) { trace("You clicked on the \"" + my_dg.

The DataGrid.Description Event. var dgListener:Object = new Object(). it automatically passes an event object (eventObject) to the handler. my_dg. my_dg.addEventListener("columnStretch". // Add listener.dataProvider = myDP_array.push({id:1. name:"Peter". // Create listener object. When the event is triggered. 100). score:403}). The first position is 0. myDP_array. 282 DataGrid component . score:25}). broadcast to all registered listeners when a user resizes a column horizontally. myDP_array. For more information. When a DataGrid component dispatches a columnStretch event.columnIndex + " was resized"). You call the addEventListener() method and pass it the name of the handler as a parameter.setSize(240. see “EventDispatcher class” on page 495. Components use a dispatcher/listener event model. Each event object has properties that contain information about the event. type The string "columnStretch". score:3135}). the event is handled by a function (also called a handler) that is attached to a listener object (listenerObject) that you create. dgListener). }.push({id:0. var myDP_array:Array = myDP_array. name:"Bruce". new Array(). Example The following example displays the column index number in the Output panel when the title is resized. // Set up sample data.columnStretch = function(evt_obj:Object) { trace("column " + evt_obj. paste the following code in the first frame of the main timeline: my_dg. dgListener.push({id:2.columnStretch event’s event object has two additional properties: columnIndex A number that indicates the index of the target column. With a DataGrid instance named my_dg on the Stage. You can use these properties to write code that handles the event. name:"Clark".

Edition Flash MX Professional 2004.addColumn()) for the data grid before the DataGrid. and so on) needed for it to be the data model of a data grid. DataGrid. getItemAt().0.0). The data grid adds methods to the prototype of the Array class so that each Array object conforms to the DataProvider API (see DataProvider. data sets. Example The following example creates an array to be used as a data provider and assigns it directly to the dataProvider property: my_dg.dataProvider property has been set. and arrays).dataProvider Availability Flash Player 6 (6. Any object that implements the DataProvider API can be used as a data provider for a data grid (including Flash Remoting recordsets. If you don’t define the column set (by setting the DataGrid. Any array that is in the same frame or screen as a data grid automatically has all the methods (addItem().as in the Classes/mx/controls/listclasses folder).dataProvider” on page 375. and can be used to broadcast data model changes to multiple components. Use a grid’s data provider to communicate with the data in the grid because the data provider remains consistent. For example.79.dataProvider Description Property.DataGrid.dataProvider = [{name:"Chris". price:"Priceless"}. the data model for items viewed in a DataGrid component. see “DataSet. once that item arrives.columnNames property. the data grid generates columns for each field in the data provider’s first item.columnNames property or by calling DataGrid. {name:"Nigel". regardless of scroll position. In a DataGrid component. you specify fields for display in the DataGrid.dataProvider 283 . Usage myDataGrid. price:"cheap"}].

Usage myDataGrid. Edition Flash MX Professional 2004. i++) myDP. If you want individual columns to be uneditable. name:"Dave". DataGrid component . paste the following code in the first frame of the main timeline: my_dg.The following example creates a new Array object that is decorated with the DataProvider API.0). determines whether the data grid can be edited by a user (true) or not (false). You must bind the DataGrid component to the DataSet component and bind the DataSet component to the WebServiceConnector component or XMLConnector component if you want the grid to be editable or sortable. my_dg. my_dg.addColumn("b").79.addItem({id:i. b:1}). price:"Priceless"}). It uses a for loop to add 20 items to the grid: var myDP:Array = new Array().setSize(140.editable property.addItem({a:"two".addColumn("a"). i<20. With a DataGrid instance named my_dg on the Stage.0. CAUTION 284 The DataGrid is not editable or sortable if it is bound directly to a WebServiceConnector component or an XMLConnector component. 100). my_dg. // Add columns to grid and add data. This property must be true in order for individual columns to be editable and for any cell to receive focus.editable Availability Flash Player 6 (6. use the DataGridColumn. my_dg. for (var i=0. The default value is false. my_dg. Example The following example allows users to edit all the columns of the grid except the first column.addItem({a:"one".dataProvider = myDP DataGrid. b:2}).editable Description Property.

// Set up sample data. my_dg.getColumnAt(0). paste the following code in the first frame of the main timeline: my_dg.editable = false. data) Parameters index colName data The index of the target cell.editable = true. This number is zero-based.editField() Availability Flash Player 6 (6. replaces the cell data at the specified location and refreshes the data grid with the new value.0). DataGrid. colName.0.setSize(140. Any cell present for that value has its setValue() method triggered. See also DataGridColumn. With a DataGrid instance named my_dg nd a Button instance named my_btn on the Stage. Usage myDataGrid. Example The following example places a value in the grid in the first row of the first column (index value 0) when the button is clicked. The value to be stored in the target cell. This parameter can be of any data type. // Make the first column read-only. Edition Flash MX Professional 2004. my_dg. A string indicating the name of the column (field) that contains the target cell. 100). Returns The data that was in the cell.79.editable DataGrid. Description Method.editField(index.editField() 285 .// Make DataGrid editable.

The object must have the fields columnIndex and itemIndex. var myDP:Array = new Array(). use UIObject. i<50. my_btn.my_dg.dataProvider = myDP. eleventh row (numbered “10” because the first row is “0”). }. "Arthur").dataProvider = [{name:"Clark". name:"Dave". i++) myDP. an object instance that defines the cell that has focus.79. btnListener). // Add button listener. Because you can’t access the cells until the DataGrid has finished drawing. 286 DataGrid component .click = function() { //Replace first field with new values.0).0). my_dg. Usage myDataGrid.addItem({id:i. for (var i=0. score:403}.focusedCell Description Property. score:3135}.editField(0.editable = true. score:25}].addEventListener("click".0. // Assign the data provider to the DataGrid instance and set it to be editable. DataGrid. The origin is (0. btnListener.doLater() to delay using the focusedCell property: // Create a data provider with three columns and 50 rows. {name:"Peter". var btnListener:Object = new Object().focusedCell Availability Flash Player 6 (6. The default value is undefined. Example The following example sets the focused cell to the second column. in editable mode only. {name:"Bruce". price:"Priceless"}). which are both integers that indicate the index of the column and item of the cell. Edition Flash MX Professional 2004. my_dg. my_dg. "name". // Create listener object.

my_dg. score:25}]. "select"). } DataGrid. This number is zero-based. With a DataGrid instance named my_dg and a Button instance named my_btn on the Stage.0. Example The following example gets the DataGridColumn object at index 0 and changes the text.getColumnAt(0).doLater() in the current timeline to call the function after the data grid has set all of its properties.click = function() { // Get column at location 0.getColumnAt(index) Parameters index The index of the DataGridColumn object to be returned. // Set up sample data. Description Method.// Use UIObject. DataGrid.focusedCell = {columnIndex:1. {name:"Bruce". score:3135}.doLater(this.setSize(140. itemIndex:10}. function select() { my_dg. // Create listener object.dataProvider = [{name:"Clark". gets a reference to the DataGridColumn object at the specified index.0). btnListener. Returns A DataGridColumn object. Usage myDataGrid. my_dg. 100). var a_dgc = my_dg.79. score:403}. Edition Flash MX Professional 2004.getColumnAt() 287 . var btnListener:Object = new Object().getColumnAt() Availability Flash Player 6 (6. paste the following code in the first frame of the main timeline: my_dg. {name:"Peter".

// Set up sample data. Usage myDataGrid.getColumnIndex() Availability Flash Player 6 (6.0).addEventListener("click". // Add button listener. my_btn.79. Description Method. returns the index of the column specified by the columnName parameter. var column_num:Number = my_dg. myDP_array. btnListener). 288 DataGrid component . score:403}). Edition Flash MX Professional 2004. myDP_array. 100).getColumnIndex(columnName) Parameters columnName A string that is the name of a column.push({name:"Peter".push({name:"Bruce". trace("Column that has name of 'score': " + column_num). a_dgc. }. Returns A number that specifies the index of the column. With a DataGrid instance named my_dg on the Stage. DataGrid. score:25}).setSize(150.getColumnIndex("score").// Change header text. score:3135}).0. paste the following code in the first frame of the main timeline: my_dg.dataProvider = myDP_array.headerText = "c". my_dg.push({name:"Clark". var myDP_array:Array = new Array(). myDP_array. Example The following example displays the index number of the “score” column.

push({name:"Clark".79. score:25}). Edition Flash MX Professional 2004.headerHeight = 40.headerHeight Description Property. score:403}). Example The following example sets the height of the header bar to 40. myDP_array. myDP_array.DataGrid.push({name:"Peter". DataGrid. my_dg. paste the following code in the first frame of the main timeline: // Set grid attributes. The default value is 20. With a DataGrid instance named my_dg on the Stage.79. var myDP_array:Array = new Array().headerHeight Availability Flash Player 6 (6. DataGrid.0).0). // Set up sample data. my_dg. myDP_array. my_dg.headerRelease 289 . in pixels. 100). my_dg.0.0.push({name:"Bruce". Edition Flash MX Professional 2004.dataProvider = myDP_array.spaceColumnsEqually().headerRelease Availability Flash Player 6 (6.setSize(240. the height of the header bar of the data grid. Usage myDataGrid. score:3135}).

}.Usage listenerObject = new Object(). listenerObject) Description Event. You can use this event with the DataGridColumn. The event object is captured by the headerRelease handler in the eventObject parameter. listenerObject. Each event object has properties that contain information about the event. myListener).headerRelease = function(eventObject){ // Insert your code here. } myDataGridInstance. var myListener = new Object(). Example In the following example. When the event is triggered. You call the addEventListener() method and pass it the name of the handler as a parameter. myListener.columnIndex + " header was pressed"). a trace statement is sent to the Output panel. see “EventDispatcher class” on page 495. The DataGrid. Components use a dispatcher/listener event model. 290 DataGrid component .headerRelease = function(event) { trace("column " + event.sortOnHeaderRelease property to prevent automatic sorting and to let you sort as you like.addEventListener("headerRelease".addEventListener("headerRelease". it automatically passes an event object (eventObject) to the handler. For more information.headerRelease event’s event object has two additional properties: columnIndex type A number that indicates the index of the target column. grid. When the headerRelease event is broadcast. You can use these properties to write code that handles the event. the event is handled by a function (also called a handler) that is attached to a listener object (listenerObject) that you create. When the DataGrid component dispatches a headerRelease event. broadcast to all registered listeners when a column header has been released. The string "headerRelease". a handler called myListener is defined and passed to grid.addEventListener() as the second parameter.

79. my_dg. Edition Flash MX Professional 2004.sortDirection). you change the sort direction using a column.setSize(150. my_dg.spaceColumnsEqually(). }. my_dg. var myListener:Object = new Object().addColumn("a").addEventListener("headerRelease".columnIndex+" header was pressed").hScrollPolicy 291 .controls.target. "off". my_dg. columns scale proportionally to accommodate the finite width. myListener). you can tell whether the sort order is ascending or descending. 100). trace(""). so it traces as either ASC or DESC.addItem({a:'two'. myListener. The default value is "off". Usage myDataGrid. specifies whether the data grid has a horizontal scroll bar. my_dg.hScrollPolicy Description Property. paste the following code in the first frame of the main timeline: var my_dg:mx.hScrollPolicy Availability Flash Player 6 (6.DataGrid. which cannot have hScrollPolicy set to "auto". my_dg. trace("\t current sort order is: "+evt. With a DataGrid instance named my_dg on the Stage. b:2}). or "auto".In the following example.addItem({a:'one'. DataGrid. By accessing the sortDirection property. NOT E This differs from the List component. DataGrid.0.headerRelease = function(evt:Object) { trace("column "+evt.0). If hScrollPolicy is set to "off". This property can have the value "on".addColumn("b"). b:1}). The sortDirection property is a string. my_dg.

removeAllColumns() Availability Flash Player 6 (6. score:3135}). DataGrid.hScrollPolicy = "on".setSize(150. removes all DataGridColumn objects from the data grid. 100).0).0. var myDP_array:Array = new Array().Example The following example sets horizontal scroll policy to automatic. Returns Nothing. Description Method. // Add columns to grid and add data. Calling this method has no effect on the data provider.removeAllColumns() Parameters None. and you want to clear the fields that are displayed. Usage myDataGrid.push({name:"Peter".push({name:"Clark". my_dg. myDP_array. Call this method if you are setting a new data provider that has different fields from the previous data provider. which means that the horizontal scroll bar appears if it’s necessary to display all the content: my_dg.push({name:"Bruce".dataProvider = myDP_array. myDP_array.79. 292 DataGrid component . score:25}). myDP_array. score:403}). my_dg. Edition Flash MX Professional 2004.

} clear_button.removeAllColumns(). this. 10).move(10.removeColumnAt() 293 .Button. With a DataGrid instance named my_dg and a Button instance named clear_button on the Stage.addEventListener("click".controls. {label:"Clear"}).push({name:"Bruce". buttonListener). removes the DataGridColumn object at the specified index. DataGrid.push({name:"Peter".removeColumnAt() Availability Flash Player 6 (6.0.click = function (evt_obj:Object) { my_dg. score:403}).createClassObject(mx. // Set up sample data. paste the following code in the first frame of the main timeline: my_dg.setSize(140.0).removeColumnAt(index) Parameters index The index of the column to remove. score:3135}). Usage myDataGrid. myDP_array. Edition Flash MX Professional 2004.move(10. 100). 40). var buttonListener:Object = new Object(). "clear_button". my_dg.dataProvider = myDP_array. Description Method. myDP_array. score:25}). var myDP_array:Array = new Array().79. Returns A reference to the DataGridColumn object that was removed. my_dg. 20.Example The following example removes all DataGridColumn objects from the DataGrid when the button is clicked. clear_button. DataGrid. myDP_array. buttonListener.push({name:"Clark".

addEventListener("click".replaceItemAt() Availability Flash Player 6 (6.setSize(140. 100). name_button.push({name:"Peter". 294 DataGrid component . 10). buttonListener).setSize(140. With a DataGrid instance named my_dg and a Button instance named name_button on the Stage.move(10.push({name:"Bruce". DataGrid. paste the following code in the first frame of the main timeline: my_dg.move(10. 40). name_button. evt_obj. myDP_array.push({name:"Clark". item) Parameters index item The index of the item to be replaced.replaceItemAt(index.click = function(evt_obj:Object) { my_dg.height). score:403}).0. my_dg. }. name_button. buttonListener. // Set up sample data. score:25}). // Create listener object. myDP_array.dataProvider = myDP_array.79. name_button. var buttonListener:Object = new Object().target. var myDP_array:Array = new Array(). Usage myDataGrid.enabled = false. Returns The previous value. // Add button listener.getColumnIndex("name")).0). score:3135}).Example The following example removes the first DataGridColumn object when the button is clicked. my_dg. myDP_array. Edition Flash MX Professional 2004. An object that is the item value to use as a replacement.removeColumnAt(my_dg.

buttonListener).selectedIndex = 2. 100). {name:"Frank". paste the following code in the first frame of the main timeline: my_dg.setSize(140. score:25}).replaceItemAt() 295 . myDP_array.dataProvider = myDP_array. my_dg. myDP_array. With a DataGrid instance named my_dg and a Button instance named replace_button on the Stage.push({name:"Peter".push({name:"Bruce".replaceItemAt(2. score:3135}). var myDP_array:Array = new Array(). 40). // Create listener object. 10). replace_button. var buttonListener:Object = new Object(). myDP_array.move(10. buttonListener. my_dg.click = function(evt_obj:Object) { //Replace previous value var prevValue_obj:Object = my_dg.push({name:"Clark". // Add button listener. Example The following example replaces the item at row index 2 with new entries.addEventListener("click". DataGrid. score:403}). }.move(10. // Set up sample data. score:949}). replaces the item at a specified index and refreshes the display of the grid.Description Method. my_dg. replace_button.

paste the following code in the first frame of the main timeline: my_dg.push({name:"Clark".resizableColumns Description Property. Example The following example prevents users from resizing columns. a Boolean value that determines whether the columns of the grid can be stretched by the user (true) or not (false). myDP_array. 296 DataGrid component . The default value is true. myDP_array.setSize(140.resizableColumns = false. score:403}).0). score:25}).push({name:"Bruce".dataProvider = myDP_array.push({name:"Peter". // Set up sample data.79. 100).DataGrid. my_dg. myDP_array. With a DataGrid instance named my_dg on the Stage. my_dg. var myDP_array:Array = new Array().0. score:3135}). This property must be true for individual columns to be resizable by the user. Usage myDataGrid. Edition Flash MX Professional 2004. // Don't allow columns to be resizable.resizableColumns Availability Flash Player 6 (6.

0). With a DataGrid instance named my_dg on the Stage.dataProvider = myDP_array. var myDP_array:Array = new Array().selectable = false.selectable Description Property. Edition Flash MX Professional 2004. paste the following code in the first frame of the main timeline: my_dg. If false.79. my_dg.push({name:"Clark". myDP_array. // Set up sample data. Example The following example prevents the grid from being selected. score:3135}). DataGrid. a Boolean value that determines whether a user can select the data grid (true) or not (false). an item in the grid does not remain selected when the user clicks the item and moves the pointer.push({name:"Peter".DataGrid. score:403}). score:25}).0. Usage myDataGrid.selectable Availability Flash Player 6 (6.selectable 297 .setSize(140. my_dg. The default value is true.push({name:"Bruce". 100). myDP_array. myDP_array.

0). my_dg.setSize(140. The default value of showHeaders is true.addItem({name:"Clark".showHeaders Availability Flash Player 6 (6.sortableColumns 298 DataGrid component . // Don't show headers. See also DataGrid. Edition Flash MX Professional 2004.79.DataGrid. my_dg. 100).addItem({name:"Bruce". Example The following example hides the column headers: my_dg. // Set up sample data.sortableColumns is set to true. Users can click column headers to sort the contents of the column if DataGrid. score:3135}).addItem({name:"Peter". score:403}). Usage myDataGrid. my_dg. score:25}). my_dg. Column headers are shaded to differentiate them from the other rows in a grid.showHeaders = false.0. a Boolean value that indicates whether the data grid displays the column headers (true) or not (false).showHeaders Description Property.

The default value is true. Usage myDataGrid. Example The following example turns off sorting: my_dg. Edition Flash MX Professional 2004. See also DataGrid. 100). and for the headerRelease event to be broadcast.addItem({name:"Clark". score:3135}). my_dg.sortableColumns Availability Flash Player 6 (6.DataGrid.sortableColumns = false.addItem({name:"Bruce". a Boolean value that determines whether the columns of the data grid can be sorted (true) or not (false) when a user clicks the column headers.sortableColumns 299 . C A UTI ON The DataGrid is not editable or sortable if it is bound directly to a WebServiceConnector component or an XMLConnector component. This property must be true for individual columns to be sortable. my_dg. my_dg.0). // Set up sample data.setSize(140.79.sortableColumns Description Property.addItem({name:"Peter". score:403}).0.headerRelease DataGrid. score:25}). my_dg. // Don't allow columns to be sorted. You must bind the DataGrid component to the DataSet component and bind the DataSet component to the WebServiceConnector component or XMLConnector component if you want the grid to be editable or sortable.

setSize(200. // Create listener object. resize_button.79.addItem({guitar:"SG".height). With a DataGrid instance named my_dg and a Button instance named resize_button on the Stage. 100). my_dg.spaceColumnsEqually() Availability Flash Player 6 (6. }. my_dg. var buttonListener:Object = new Object().spaceColumnsEqually(). Description Method. // Set up sample data.spaceColumnsEqually() Parameters None. resize_button.addItem({guitar:"jagstang". Edition Flash MX Professional 2004. 40).click = function() { my_dg.DataGrid. my_dg.addItem({guitar:"Flying V".addColumn("name"). respaces the columns equally.addColumn("guitar").0). resize_button.move(10. name:"vitapup"}). 300 DataGrid component . paste the following code in the first frame of the main timeline: my_dg. my_dg.0. buttonListener. name:"dreschie"}). my_dg. my_dg.move(10. 10). Usage myDataGrid. Example The following example respaces the columns of my_dg when the button is clicked. name:"maggot"}).setSize(200. Returns Nothing.

For example. {guitar:"SG". ■ Prebuild the DataGridColumn objects and add them to the data grid by using DataGrid. you can access them by calling DataGrid. ■ Add a data provider or an item with multiple fields to a grid that has no configured DataGridColumn objects.DataGridColumn You can create and configure DataGridColumn objects to use as columns of a data grid. buttonListener).addColumn(). resize_button. DataGridColumn class ActionScript Class Name mx. 0 is the leftmost column.dataProvider = [{guitar:"Flying V". and the most flexible. {guitar:"jagstang". for a DataGrid instance named my_dg: my_dg.getColumnAt(index). name:"dreschie"}. Use DataGrid. This approach removes any previous column information. If you want to configure your columns. see “Constructor for the DataGridColumn class” on page 303."name"].columnNames = ["guitar". var location_dgc:DataGridColumn = new DataGridColumn("Location"). for each field listed. my_dg. in order. because it lets you add columns with proper sizing and formatting before the columns ever reach the grid (which reduces processor demand)..// Add button listener.gridclasses. This approach automatically generates columns for every field in the reverse order of the for.controls. Many of the methods of the DataGrid class are dedicated to managing DataGridColumn objects. name:"vitapup"}].in loop.width = 100. for a DataGrid instance named my_dg: my_dg. This approach lets you select and order columns quickly with a minimal amount of configuration. DataGridColumn objects are stored in an zero-based array in the data grid. DataGridColumn class 301 . location_dgc. name:"maggot"}.addEventListener("click". For example. // Add column to DataGrid. This approach is useful. it is best to use either the second or third way before you add data to a data grid so you don’t have to create columns twice. for a DataGrid instance named my_dg: // Create column object. After columns have been added or created. There are three ways to add or create columns in a grid. For more information.addColumn(location_dgc). For example.columnNames to create the field names of the desired item fields and ■ generate DataGridColumn objects.

Read-only. the name of the field associated with the column. A Boolean value that indicates whether a column is editable (true) or not (false). The text for the header of this column. A Boolean value that indicates whether a column is resizable (true) or not (false).Property summary for the DataGridColumn class The following table lists the properties of the DataGridColumn class.headerText DataGridColumn.sortOnHeaderRelease A Boolean value that indicates whether a column is DataGridColumn.columnName DataGridColumn.headerRenderer DataGridColumn. in pixels. A Boolean value that indicates whether a column is sortable (true) or not (false).resizable DataGridColumn.labelFunction DataGridColumn. DataGridColumn.sortable DataGridColumn.width The width of a column.cellRenderer Description The linkage identifier of a symbol to be used to display the cells in this column. 302 DataGrid component . sorted (true) or not (false) when a user clicks a column header. Property DataGridColumn.editable DataGridColumn. The name of a class to be used to display the header of this column. A function that determines which field of an item to display.

Description Constructor. you can add them to a data grid by calling DataGrid. Constructor for the DataGridColumn class 303 . Edition Flash MX Professional 2004. Example The following example creates a DataGridColumn object called Location: import mx.controls. After you create the DataGridColumn objects.Constructor for the DataGridColumn class Availability Flash Player 6 (6. This parameter is the field of each item to display.gridclasses. creates a DataGridColumn object. var column = new DataGridColumn("Location"). Usage new DataGridColumn(name) Parameters name A string that indicates the name of the DataGridColumn object.0).DataGridColumn.addColumn().79. Returns Nothing.0. Use this constructor to create columns to add to a DataGrid component.

DataGridColumn.getColumnAt(3).getColumnAt(index). a linkage identifier for a symbol to be used to display cells in this column.79.) The default value is undefined. Example The following example uses a linkage identifier to set a new cell renderer: myGrid. 304 DataGrid component . Usage myDataGrid.getColumnAt(index).0.columnName Description Property (read-only). The default value is the name called in the DataGridColumn constructor.cellRenderer = "MyCellRenderer". Edition Flash MX Professional 2004.cellRenderer Description Property. Any class used for this property must implement the CellRenderer API (see “CellRenderer API” on page 107.0.columnName Availability Flash Player 6 (6. Usage myDataGrid. the name of the field associated with this column.DataGridColumn.0).0).79.cellRenderer Availability Flash Player 6 (6. Edition Flash MX Professional 2004.

gridclasses.addColumn(new DataGridColumn("name")).0. // Set up sample data.controls. my_dg.editable 305 .addColumn(new DataGridColumn("score")).getColumnAt(1). my_dg.DataGridColumn. name_dgc.addItem({name:"Bruce".setSize(150. See also Constructor for the DataGridColumn class DataGridColumn. // Get column name. score:403}).editable Availability Flash Player 6 (6.addItem({name:"Clark".addItem({name:"Peter". score_dgc.Example The following example displays the name of the column as index position 1: import mx. 100). // Add columns to grid. Usage myDataGrid.columnName.headerText = "Name:". my_dg. var name_str:String = my_dg. Edition Flash MX Professional 2004.0).headerText = "Score:". trace(name_str). // Set grid attributes. var score_dgc:DataGridColumn = my_dg.editable DataGridColumn. my_dg. score:25}). var name_dgc:DataGridColumn = my_dg.79.getColumnAt(index). score:3135}).

my_dg. even when DataGridColumn. CA UT ION 306 The DataGrid is not editable or sortable if it is bound directly to a WebServiceConnector component or an XMLConnector component. 100). my_dg.addItem({name:"Clark".Description Property. See also DataGrid. determines whether the column can be edited by a user (true) or not (false).addItem({name:"Bruce". my_dg. // Add columns to grid.getColumnAt(0). score:403}). score:3135}).addColumn("name"). my_dg. my_dg. The default value is true.editable DataGrid component . my_dg. my_dg.editable property must be true in order for individual columns to be editable. score:25}).addColumn("score").editable = true.editable is set to true. The DataGrid. You must bind the DataGrid component to the DataSet component and bind the DataSet component to the WebServiceConnector component or XMLConnector component if you want the grid to be editable or sortable. Example The following example prevents items in the first column in a grid from being edited: // Set grid attributes.editable = false.addItem({name:"Peter". // Set up sample data. // Don't allow first column to be editable.setSize(150. my_dg.

Example The following example uses a linkage identifier to set a new header renderer: myGrid.headerText Availability Flash Player 6 (6.0. a string that indicates a class name to be used to display the header of this column. This property allows you to display something other than the field name as the header. Usage myDataGrid.getColumnAt(3). Edition Flash MX Professional 2004.DataGridColumn.headerRenderer Description Property. the text in the column header. Edition Flash MX Professional 2004. The default value is the column name. Usage myDataGrid. DataGridColumn.headerText 307 . DataGridColumn.79.79.0.0).headerRenderer Availability Flash Player 6 (6. The default value is undefined. Any class used for this property must implement the CellRenderer API (see “CellRenderer API” on page 107).headerText Description Property.headerRenderer = "MyHeaderRenderer".getColumnAt(index).0).getColumnAt(index).

Example The following example sets the column header text to “Price (USD)”: import mx.0. item. Edition Flash MX Professional 2004. price_dgc.width = 80.0).DataGrid. price_dgc. specifies a function to determine which field (or field combination) of each item to display.99"}). DataGrid component . and must return a string representing the text to display. Usage myDataGrid. my_dg. NOT E 308 The specified function operates in a nondefined scope. DataGridColumn. var price_dgc:DataGridColumn = new DataGridColumn("price").controls. This function receives one parameter.79.addItem({price:"$14.headerText = "Price (USD)". This property can be used to create virtual columns that have no equivalent field in the item. which is the item being rendered.controls. var my_dg:mx.labelFunction Description Property.DataGridColumn.labelFunction Availability Flash Player 6 (6.addColumn(price_dgc).gridclasses. my_dg.getColumnAt(index).

0).value != undefined) && (item. //Define labelFunction for Subtotal column. DataGridColumn.addItem({guitar:"SG". var value_dgc:DataGridColumn = new DataGridColumn("value").tax).resizable Availability Flash Player 6 (6. a Boolean value that indicates whether a column can be resized by a user (true) or not (false).addColumn(value_dgc). } }. my_dg.tax != undefined)) { return "$"+(item. DataGridColumn. tax:2}). value:30. tax:1}). 200). var st_dgc:DataGridColumn = new DataGridColumn("Subtotal"). // Add columns to grid.0. The DataGrid. // Set up columns. my_dg. value:20. st_dgc. tax:3}). var tax_dgc:DataGridColumn = new DataGridColumn("tax").controls.addItem({guitar:"jagstang". my_dg. var my_dg:mx. // Set data model.addItem({guitar:"Flying V". my_dg.gridclasses. my_dg.DataGrid. my_dg.DataGridColumn.addColumn(guitar_dgc).controls.labelFunction = function(item:Object):String { if ((item.resizable Description Property. value:10.Example The following example calculates a value for the “Subtotal” column: import mx.addColumn(st_dgc). my_dg.setSize(300. Edition Flash MX Professional 2004. Usage myDataGrid.resizableColumns property must be set to true for this property to take effect.getColumnAt(index). var guitar_dgc:DataGridColumn = new DataGridColumn("guitar"). The default value is true. my_dg.value+item.resizable 309 .79.addColumn(tax_dgc).

addItem({name:"Peter". my_dg. my_dg.0. my_dg.sortable Description Property.79. DataGridColumn. The DataGrid. You must bind the DataGrid component to the DataSet component and bind the DataSet component to the WebServiceConnector component or XMLConnector component if you want the grid to be editable or sortable. Usage myDataGrid. Edition Flash MX Professional 2004.addColumn("score"). my_dg. my_dg.getColumnAt(index).setSize(150.Example The following example prevents the column at index 0 from being resized: // Set grid attributes. The default value is true. // Don't allow resize of the first column my_dg. score:403}).addItem({name:"Bruce". score:3135}). a Boolean value that indicates whether a column can be sorted by a user (true) or not (false).resizable = false.sortable Availability Flash Player 6 (6.addItem({name:"Clark".addColumn("name"). 100). score:25}). DataGrid component . // Set up sample data.sortableColumns property must be set to true for this property to take effect.getColumnAt(0).0). my_dg. C A UTI ON 310 The DataGrid is not editable or sortable if it is bound directly to a WebServiceConnector component or an XMLConnector component.

// Don't allow sort of the second column.sortOnHeaderRelease 311 . Example The following example disables sorting of the second column: // Set grid attributes. my_dg. a Boolean value that indicates whether the column is sorted automatically (true) or not (false) when a user clicks a header. my_dg. You must bind the DataGrid component to the DataSet component and bind the DataSet component to the WebServiceConnector component or XMLConnector component if you want the grid to be editable or sortable. my_dg.setSize(150.getColumnAt(1).sortOnHeaderRelease is set to false. Usage myDataGrid. If DataGridColumn. my_dg.Example The following example prevents the column at index 1 from being sorted: // Set grid attributes.getColumnAt(index). The default value is true.addItem({name:"Clark". DataGridColumn.sortOnHeaderRelease Description Property.sortable is set to true.setSize(150.sortable = false. Edition Flash MX Professional 2004.0. score:25}). 100). This property can be set to true only if DataGridColumn. my_dg.addItem({name:"Bruce". 100). score:403}). DataGridColumn.addItem({name:"Peter". score:3135}).79. my_dg. you can catch the headerRelease event and perform your own sort. C A U TI O N The DataGrid is not editable or sortable if it is bound directly to a WebServiceConnector component or an XMLConnector component. // Set up sample data.sortOnHeaderRelease Availability Flash Player 6 (6.0).

getColumnAt(1).79. my_dg. The default value is 50.addItem({name:"Bruce". 100). score:3135}). // Alter DataGrid dimensions.getColumnAt(index).sortOnHeaderRelease = false. score:25}). my_dg. Example The following example makes the width of the first column 50 pixels: // Create new DataProvider component.setSize(140. my_dg.width Description Property. var myDP_array:Array = new Array({name:"Chris". my_dg. Edition Flash MX Professional 2004.// Set up sample data. 312 DataGrid component .dataProvider = myDP_array.addItem({name:"Clark".width Availability Flash Player 6 (6.0.addItem({name:"Peter". in pixels. {name:"Nigel".rowHeight = 30. my_dg.width = 50. DataGridColumn.0). //Assign DataProvider to DataGrid. price:"Cheap"}). my_dg. price:"Priceless"}. // Don’t allow sort of the second column by clicking the header. Usage myDataGrid. a number that indicates the width of the column. my_dg.getColumnAt(0). my_dg. score:403}).

You can add more properties by using the Schema tab in the Component inspector. you do not use this component to build an application. In most cases. user interface components. Initially. and any bindings associated with that property are executed. The DataHolder component is useful when you can’t directly bind components (such as connectors. It is needed only when you cannot bind external data directly to another component and you do not want to use a DataSet component. NOT E ■ 11 The DataHolder component is supported only if you are working in a document that specifies ActionScript 2.0 in its Publish Settings. or by using your own ActionScript code. either by creating a binding between the data and another property. the DataHolder component emits an event whose name is the same as the property. you could have a DataHolder component that contains properties that are bound as desired. Its main purpose is to hold data and act as a connector between other components that use data binding. 313 . Whenever new values are assigned to those properties (by means of ActionScript. In this case. for example) those values are distributed to the data-bound object. the DataHolder component has a single bindable property named data. You can assign any type of data to a DataHolder property. you might want to bind it to some other components. or DataSet components) together. Whenever the value of that data changes. Below are some scenarios in which you might use a DataHolder component: If a data value is generated by ActionScript.CHAPTER 11 DataHolder component The DataHolder component is a repository for data and a means of generating events when that data has changed.

and name it dataHolder. 314 DataHolder component . It is a repository for holding data and generating events when that data has changed. Creating an application with the DataHolder component In this example.movieTitle UI TextField title DataModel myDataModel data.■ You might have a data value that results from a complex indexed data binding. N OTE The DataHolder component is not meant to implement the same control over your data as the DataSet component.movieRating UI TextField rating data. To use the DataHolder component in a simple application: 1. Web Service Method getMovies Results UI ListBox movieList Results[movieList. 3.0). Select File > New and choose Flash File (ActionScript 2. You then bind that array property to the dataProvider property of a DataGrid component by using the Bindings tab in the Component inspector.movieTimes UI ListBox times In this case it is convenient to bind the data value to a DataHolder component (called DataModel in this illustration) and then use that for bindings to the user interface. as shown in the following diagram. drag a DataHolder component to the Stage.selectedIndex] data. Drag a DataGrid component to the Stage and name it namesGrid. you add an array property to a DataHolder component’s schema (an array) whose value is determined by ActionScript code that you write. nor does it have the ability to update data. It does not manage or track data. 2. Open the Components panel.

data. the DataHolder component has a single bindable property named data. 8. and add a binding between the namesArray property of the DataHolder component and the dataProvider property of the DataGrid component. In the bottom pane of the Schema tab.{name:"Paul"}. Its main purpose is to hold data and act as a connector between other components that use data binding. Click the Add Component Property (+) button located in the top pane of the Schema tab.{name:"Jason"}]. the binding that you established previously between the DataHolder component and the DataGrid component executes. You can add more properties by using the Schema tab in the Component inspector. Property summary for the DataHolder class The following table lists the properties of the DataHolder class. 10. In the Timeline. the following code in the Actions panel: dataHolder. 5. DataHolder class 315 . When this variable assignment executes. DataHolder class Inheritance MovieClip > DataHolder mx.4. Test the file by selecting Control > Test Movie. Click the Bindings tab in the Component inspector. 6. 11. type namesArray in the Field Name field. Property DataHolder. Click the Schema tab in the Component inspector.components.namesArray = [{name:"Tim"}.DataHolder ActionScript class name The DataHolder component is a repository for data and a means of generating events when that data has changed. 7. 9. Initially. select the first frame on Layer 1 and open the Actions panel. Enter This code populates the namesArray array with several objects.data Description Default bindable property for the DataHolder component. and select Array from the Data Type pop-up menu. Select the DataHolder component and open the Component inspector.

or delete the default data property.click = function() { trace("dumping DataHolder"). you enter a value into the text input field and click the addDate_btn instance. 316 DataHolder component .text.myDate).79. To test the application. trace("").addDate_btn. You can add your own bindable properties. see “Creating an application with the DataHolder component” on page 314. Add the following ActionScript to Frame 1: var dhListener:Object = new Object(). // Drag two Button components onto the Stage (addDate_btn and dumpDataHolder_btn).0. The following code shows a simple example of how to populate the DataHolder component with data that is a variable.DataHolder. Edition Flash MX Professional 2004.addEventListener("click". it is the default bindable property for each instance of the component. by using the Schema tab in the Component inspector.click = function() { myDataHolder.addEventListener("click". }. trace("added value"). dhListener. Usage dataHolder. }. dateListener. Rather.data Availability Flash Player 6 (6. var dateListener:Object = new Object(). trace(" " + myDataHolder. the default item in a DataHolder object’s schema. This property is not a “permanent” member of the DataHolder component. this.data Description Property. Example For a step-by-step example of using this component. Click the dumpDataHolder_btn instance to trace the contents of the DataHolder component.dumpDataHolder_btn. dhListener). this.0).myDate = myDate_txt. a TextInput (myDate_txt) and a DataHolder (myDataHolder). dateListener). which adds the value to the DataHolder component.

Because of the DataProvider API. Data-aware components apply all the methods of the DataProvider API to Array. 317 . A list-based component could then use that class as a data provider.controls. You can access these items by index (as you can with an array). Data providers are most commonly used with arrays. The DataProvider API is the language with which data-aware components communicate with their data providers.getItemAt(). Each item is an object composed of many fields of data. Multiple views can use the same data provider and receive the change events. Arrays. DataProvider class ActionScript Class Name mx.CHAPTER 12 DataProvider API The DataProvider API is a set of methods and properties that a data source needs so that a listbased class can communicate with it. A data provider is a linear collection (like an array) of items. You can create a DataProvider-compliant class by implementing all the methods and properties described in this section.listclasses. and data sets implement this API. the components that provide views for data (DataGrid. NOTE 12 The DataProvider API is supported only if you are working in a document that specifies ActionScript 2. The DataProvider API also broadcasts change events when the data changes. List.prototype when an Array object is in the same frame or screen as a data-aware component. recordsets. using DataProvider. and so on) can also display Flash Remoting RecordSet objects and data from the DataSet component.0 in its Publish Settings.DataProvider The methods of the DataProvider class let you query and modify the data in any component that displays data (also called a view). Tree. This lets you use any existing array as the data for views that have a dataProvider property.

Returns the unique ID of the item.In the Adobe Flash documentation. dataProvider is a property of each component that acts as a view for data.addItem() DataProvider.getItemAt() DataProvider. and “data provider” is the generic term for a data source.removeAll() DataProvider.removeItemAt() Gets a reference to the item at a specified position. Changes one field of the data provider. DataProvider.sortItemsBy() Property summary for the DataProvider API The following table lists the properties of the DataProvider API.length Description The number of items in a data provider. Removes all items from a data provider. Replaces the item at a specified position with another item. in the specified order. using the specified field name. Adds an item to the data provider at the specified position. Removes an item from a data provider at a specified position. DataProvider. Method DataProvider. Sorts the items in the data provider according to a compare function or sort options.addItemAt() DataProvider. Property DataProvider. 318 DataProvider API .getItemID() DataProvider. “DataProvider” is the name of the class. Sorts the items in the data provider alphabetically or numerically. Method summary for the DataProvider API The following table lists the methods of the DataProvider API.replaceItemAt() DataProvider.editField() Description Adds an item at the end of the data provider. DataProvider.sortItems() DataProvider.getEditingData() Gets the data for editing from a data provider.

DataProvider. Example The following example adds an item to the end of the data provider myDP: myDP. This constitutes an item in a data provider.0.79.0). Edition Flash MX Professional 2004.0).addItem(item) Parameters item An object that contains data.79. Returns Nothing.addItemAt() 319 . adds a new item at the end of the data provider. This method triggers the modelChanged event with the event name addItems.modelChanged Description Broadcast when the data provider is changed.addItem({label : "this is an Item"}). Edition Flash MX Professional 2004. DataProvider.0.addItemAt() Availability Flash Player 6 (6.addItem() Availability Flash Player 6 (6. Event DataProvider. Description Method. Usage myDP.Event summary for the DataProvider API The following table lists the events of the DataProvider API. DataProvider.

320 DataProvider API .79. {label : "this is the fourth Item"}). Usage myDP.addItemAt(3. it is the index of the new item. A string indicating the name of the field to modify in the item.editField(index. Indices greater than the data provider’s length are ignored. The new data to put in the data provider. fieldName newData Returns Nothing. This method triggers the modelChanged event with the event name addItems.addItemAt(index. item Returns Nothing. DataProvider. the index of the item.editField() Availability Flash Player 6 (6.Usage myDP.0. Example The following example adds an item to the data provider myDP at the fourth position: myDP. An object containing the data for the item.0). Edition Flash MX Professional 2004. Description Method. newData) Parameters index A number greater than or equal to 0. This number indicates the position at which to insert the item. fieldName. item) Parameters index A number greater than or equal to 0. adds a new item to the data provider at the specified index.

changes one field of the data provider.getEditingData(index.0). fieldName) Parameters index A number greater than or equal to 0 and less than DataProvider. Edition Flash MX Professional 2004. fieldName Returns The editable formatted data to be used.getEditingData(4.0.length. "mynewData").Description Method.editField(2.getEditingData() 321 . Description Method. DataProvider. This method triggers the modelChanged event with the event name updateField.getEditingData() Availability Flash Player 6 (6. This number is the index of the item to retrieve. Usage myDP. A string indicating the name of the field being edited.79. DataProvider. Example The following code modifies the label field of the third item: myDP. This lets the data model provide different formats of data for editing and displaying. retrieves data for editing from a data provider. Example The following code gets an editable string for the price field: trace(myDP. "price"). "label".

getItemID() Availability Flash Player 6 (6. Edition Flash MX Professional 2004.79.DataProvider. This number is the index of the item to retrieve.getItemAt(index) Parameters index A number greater than or equal to 0 and less than DataProvider.0). undefined if the index is out of range.0). Usage myDP. Example The following code displays the label of the fifth item: trace(myDP. 322 DataProvider API .0.getItemID(index) Parameters index A number greater than or equal to 0. Edition Flash MX Professional 2004. Description Method. DataProvider.label).length.0.getItemAt(4).getItemAt() Availability Flash Player 6 (6. Usage myDP. Returns A reference to the retrieved item. retrieves a reference to the item at a specified position.79.

DataProvider.Returns A number that is the unique ID of the item. DataProvider. Usage listenerObject = new Object(). Edition Flash MX Professional 2004. Example This example gets the ID of the fourth item: var ID = myDP.length). Edition Flash MX Professional 2004. Description Method.getItemID(3). returns a unique ID for the item. Usage myDP.79.length Description Property (read-only). Example This example sends the number of items in the myArray data provider to the Output panel: trace(myArray. DataProvider. the number of items in the data provider.0.modelChanged 323 .length Availability Flash Player 6 (6.79. The ID is used in data-aware components to keep lists of what items are selected.0).0).modelChanged Availability Flash Player 6 (6. This method is primarily used to track selection.0.

and data-aware components catch it to update their displays to reflect the changes in data. A series of items has been deleted. } myMenu. The model has been filtered. For more information. The Menu. The value equals firstItem if only one item is affected. When a data provider changes in some way.modelChanged = function(eventObject){ // Insert your code here.listenerObject. Data-aware components use this information to avoid completely refreshing the component instance (view) that is using the data provider. removeItems updateItems sort The data has been sorted. A string indicating the name of the field that is affected. Components use a dispatcher/listener event model.modelChanged event’s event object has five additional properties: ■ eventName The eventName property is used to subcategorize modelChanged events. ■ schemaLoaded ■ ■ firstItem The index of the first affected item. 324 DataProvider API . An entire field’s definition in the data provider needs refreshing. The eventName property supports the following values: ■ ■ ■ ■ ■ ■ ■ ■ updateAll addItems The entire view needs refreshing. A series of items has been added. see “EventDispatcher class” on page 495. A series of items needs refreshing. broadcast to all of its view listeners whenever the data provider is modified. removedIDs fieldName ■ ■ An array of the item identifiers that were removed. A field in an item must be changed and needs refreshing.addEventListener("modelChanged". You typically add a listener to a model by assigning its dataProvider property. listenerObject) Description Event. and the view needs refreshing (reset the The field’s definition of the data provider has been declared. it broadcasts a modelChanged event. excluding scroll position. updateField updateColumn filterModel scroll position). lastItem The index of the last affected item.

0). Edition Flash MX Professional 2004. listener = new Object(). DataProvider. listener.Example In the following example.79.modelChanged = function(evt){ trace(evt. Returns Nothing.removeAll() Parameters None.eventName). Description Method.removeAll(). listener). a handler called listener is defined and passed to addEventListener() as the second parameter. a trace statement is sent to the Output panel.addEventListener("modelChanged". DataProvider. When the modelChanged event is broadcast. Usage myDP. This method triggers the modelChanged event with the event name removeItems.removeAll() 325 . The event object is captured by the modelChanged handler in the evt parameter. removes all items in the data provider. } myList.0. Example This example removes all the items in the data provider: myDP.removeAll() Availability Flash Player 6 (6.

The indices after the removed index collapse by one. removes the item at the specified index.79. Description Method. Example This example removes the item at the fourth position: myDP.0.DataProvider. This method triggers the modelChanged event with the event name removeItems.79. Returns Nothing. 326 DataProvider API . Edition Flash MX Professional 2004. This number is the index of the item to remove.replaceItemAt() Availability Flash Player 6 (6. This number is the index of the item to change. Usage myDP.removeItemAt(3). DataProvider.0).removeItemAt() Availability Flash Player 6 (6.replaceItemAt(index. Usage myDP. Edition Flash MX Professional 2004.removeItemAt(index) Parameters index A number greater than or equal to 0. item) Parameters index A number greater than or equal to 0.0).0.

Array. This parameter is optional. see the Array. which returns an error code (0) instead of a sorted array if two objects in the array are identical or have identical sort fields. which sorts numerically if the two elements being compared are numbers. [optionsFlag]) Parameters compareFunc A reference to a function that compares two items to determine their sort order. Array.sortItems() Availability Flash Player 7. This parameter is optional.replaceItemAt(3.DESCENDING. different types of sorts on a single array without having to replicate the entire array or resort it repeatedly. Edition Flash MX Professional 2004.sortItems([compareFunc].0 Language Reference. Description Method. {label : "new label"}). use a string comparison (which can be case-insensitive if that flag is specified). ■ DataProvider. replaces the content of the item at the specified index. The following are possible values for optionsFlag: Array. DataProvider.CASEINSENSITIVE. Lets you perform multiple. Usage myDP. Returns Nothing. For more information. optionsFlag ■ ■ ■ which sorts highest to lowest.sort() method in ActionScript 2.UNIQUESORT.NUMERIC. Array.sortItems() 327 . Example This example replaces the item at index 3 with the item labeled “new label”: myDP.item An object that is the new item. This method triggers the modelChanged event with the event name updateItems. If they aren’t numbers. which sorts case-insensitively.

optionsFlag) myDP. the following array would return the second line of code and the array would remain unchanged: ["a".sortItemsBy(fieldName.sort (Array. sorts the items in the data provider according to the specified compare function or according to one or more specified sort options. which returns an integer index array that is the result of the sort. Description Method. the following code combines options 3 and 1: array. function upperCaseFunc(a. 1] You can combine these options into one value.■ Array.sortItemsBy() Availability Flash Player 7.toUpperCase(). Example This example sorts according to uppercase labels. "c". 2.NUMERIC | Array.toUpperCase() > b. For example.DESCENDING) Returns Nothing.label. "d".sortItemsBy(fieldName. order) Parameters fieldName A string that specifies the name of the field to use for sorting. This value is usually "label" or "data".label. For example. } DataProvider.b){ return a. The items a and b are passed to the function and contain label and data fields: myList. 3.RETURNINDEXEDARRAY. Usage myDP. Edition Flash MX Professional 2004. 328 DataProvider API .sortItems(upperCaseFunc). This method triggers the modelChanged event with the event name sort. "b"] [0.

using the specified field name. this method returns an error code (0) instead of a sorted array. and is therefore slower. If the fieldName items are a combination of text strings and integers.DESCENDING—sorts ■ ■ ■ highest to lowest.NUMERIC—sorts numerically if the two elements being compared are numbers. ■ Array. "b"] [0.RETURNINDEXEDARRAY—returns an integer index array that is the result of the sort. The sortItemsBy() method is fast because it doesn’t run any ActionScript while sorting. This method triggers the modelChanged event with the event name sort. For example. case-insensitively. If they aren’t numbers. but advanced programmers may specify any primitive value. This is the fastest way to sort data in a component. The fieldName parameter is usually "label" or "data". 2. different types of sorts on a single array without having to replicate the entire array or resort it repeatedly.sort (Array. Array. It also maintains the component’s selection state. 1] You can combine these options into one value.NUMERIC | Array. optionsFlag Lets you perform multiple. Description Method. For example. DataProvider. This parameter is optional. use a string comparison (which can be case-insensitive if that flag is specified).UNIQUESORT—if ■ two objects in the array are identical or have identical sort fields.order A string that specifies whether to sort the items in ascending order ("ASC") or descending order ("DESC"). sorts the items in the data provider in the specified order. the integer items are listed first. "d". "c". the following code combines options 3 and 1: array.DESCENDING) Returns Nothing. Array. The following are possible values for optionsFlag: Array. the following array would return the second line of code and the array would remain unchanged: ["a".sortItemsBy() 329 . 3.CASEINSENSITIVE—sorts Array. The sortItems() method needs to run an ActionScript compare function.

330 DataProvider API . "ASC").Example The following code sorts the items in a list in ascending order using the labels of the list items: myDP.sortItemsBy("label".

Using the DateChooser component The DateChooser can be used anywhere you want a user to select a date.CHAPTER 13 DateChooser component The DateChooser component is a calendar that allows users to select a date. For example. The value is an array and the default value is ["S". when a user chooses a date. as well as highlighting the current date. you could use a DateChooser component in a hotel reservation system with certain dates selectable and others disabled. such as performances or meetings. DateChooser parameters You can set the following authoring parameters for each DateChooser component instance in the Property inspector or in the Component inspector (Window > Component Inspector menu option): dayNames sets the names of the days of the week. "F". "W". 331 . disabledDays indicates the disabled days of the week. You can set parameters that indicate the month and day names. and disabled dates. "T". "S"]. A live preview of each DateChooser instance reflects the values indicated by the Property inspector or Component inspector during authoring. The default value is [] (an empty array). N OTE 13 The DateChooser component is supported only if you are working in a document that specifies ActionScript 2. You could also use the DateChooser component in an application that displays current events.0 in its Publish Settings. It has buttons that allow users to scroll through months and click a date to select it. "M". the first day of the week. This parameter is an array that can have up to seven values. "T".

These properties can be used if you make a custom layout manager for your application. "September". setting these properties in the Component inspector will have no visible effect. the date chooser allows a user to pick a date for an airline reservation system. is a Boolean value that indicates whether the object is visible (true) or not (false). The default value is true. Creating an application with the DateChooser component The following procedure explains how to add a DateChooser component to an application while authoring. This property changes the display order of the day columns. You can set the following additional parameters for each DateChooser component instance in the Component inspector (Window > Component Inspector): enabled is a Boolean value that indicates whether the component can receive focus and input. Otherwise. The default value is true. a range in December must be disabled to create a holiday black-out period. In this example. and events. showToday indicates whether to highlight today’s date. "March". methods. For more information. DateChooser component . monthNames sets the month names that are displayed in the heading row of the calendar. "October". You can write ActionScript to control these and additional options for the DateChooser component using its properties. "June". see “DateChooser class” on page 337. The default value is true. "July". They are defined in UIObject. The value is an array and the default value is ["January". "February". Also."November". All dates before October 15th must be disabled. visible N OTE 332 The minHeight and minWidth properties are used by internal sizing routines. "December"]. and Mondays must be disabled. "May". "April". "August". and are overridden by different components as needed. with 0 being the first element of the array) is displayed in the first column of the date chooser.firstDayOfWeek dayNames indicates which day of the week (0-6.

Select File > New and choose Flash File (ActionScript 2. and then sizes and positions the grid. 4.0). 9. 2. 15).0). This script uses the method “UIObject. 11. 31)} This code assigns a value to the selectableRange property in an ActionScript object that contains two Date objects with the variable names rangeStart and rangeEnd. 1). In the Actions panel. enter the following code on Frame 1 of the timeline to set the range of selectable dates: flightCalendar. 3. enter the following code on Frame 1 of the timeline to set a range of holiday disabled dates: flightCalendar. To create a DateChooser component instance using ActionScript: 1. In the Property inspector. enter the following code on Frame 1 of the timeline to disable Mondays: flightCalendar. 4. This defines an upper and lower end of a range in which the user can select a date. 15). 3.createClassObject()” on page 1362 to create the DateChooser instance. Drag the DateChooser component from the Components panel to the current document’s library. 11.To create an application with the DateChooser component: 1.disabledRanges = [{rangeStart: new Date(2003.controls. rangeEnd:new Date(2003. rangeEnd: new Date(2003. Select File > New and choose Flash File (ActionScript 2. enter the instance name flightCalendar. In the Actions panel.disabledDays=[1]. In the Actions panel. 11. 6. 5. Double-click the DateChooser component in the Components panel to add it to the Stage. 26)}].createClassObject(mx. Select Control > Test Movie. "my_dc".selectableRange = {rangeStart:new Date(2003.DateChooser. open the Actions panel. 7. 2. Select Control > Test Movie. Using the DateChooser component 333 . Select the first frame in the main Timeline. and enter the following code: this.

Possible values are "haloGreen". The default value is 0x919999. The default value is 0xEFEBEF (light gray). The border color. The default value is "haloGreen". The background color for the today’s date. Using styles with the DateChooser component You can set style properties to change the appearance of a DateChooser instance. The default color is white. The background color of a rolled-over date. it is a color style property and behaves differently than noncolor style properties. While authoring. The default value is 0xCDFFC1 (light green) with the Halo theme and 0xEEEEEE (very light gray) with the Sample theme. use the setSize() method (see UIObject. A DateChooser component supports the following styles: Style themeColor Theme Description Halo The glow color for the rollover and selected dates. At runtime.0 Components. This border cannot be modified through styles or skinning. see “Using styles to customize component color and text” in Using ActionScript 2. backgroundColor Both Both borderColor headerColor Both Both The background color for the component heading. The default value is 0x666666 (dark gray). select the component on the Stage and use the Free Transform tool or any of the Modify > Transform commands. rollOverColor selectionColor Both todayColor Both 334 DateChooser component .setSize()). For more information. and "haloOrange". If the name of a style property ends in “Color”. "haloBlue".Customizing the DateChooser component You can transform a DateChooser component horizontally and vertically while authoring and at runtime. The DateChooser component uses a solid single-pixel line as its border. The background color. The default value is 0xE3FFD6 (bright green) with the Halo theme and 0xAAAAAA (light gray) with the Sample theme. The background color of the selected date.

no text is displayed. _global.WeekDayStyle. 0x660000). Otherwise. The color for text when the component is disabled.styles. today’s date. If this style is set to true and fontFamily does not refer to an embedded font. the days of the week.HeaderDateText. The point size for the font. The default value is 10. The default value is "none". The font name for text. The default value is "none". This style must be set to true if fontFamily refers to an embedded font. and regular dates. The following example demonstrates how to set the month name and days of the week to a deep red color. 0x660000). The default value is "_sans".Style color Theme Description Both Both Both The text color.styles. The font weight: either "none" or "bold". All components can also accept the value "normal" in place of "none" during a setStyle() call. Declaration name HeaderDateText WeekDayStyle TodayStyle Description The month name. use the following class-level style declarations.setStyle("color". The default value is 0x0B333C with the Halo theme and blank with the Sample theme. The text style properties set on the DateChooser component itself control the regular date text and provide defaults for the other text. the embedded font is not used. Customizing the DateChooser component 335 . The text decoration: either "none" or "underline".setStyle("color". The font style: either "normal" or "italic". The default color is 0x848384 (dark gray). The days of the week. A Boolean value that indicates whether the font specified in fontFamily is an embedded font. _global. Today’s date. disabledColor embedFonts fontFamily fontSize fontStyle Both Both Both Both fontWeight textDecoration Both The DateChooser component uses four categories of text to display the month name. The default value is "normal". but subsequent calls to getStyle() returns "none". To set text styles for specific categories of text. The default value is false.

The default value is backMonthDisabled. The month back button pressed state. 2. 4. The default value is backMonthUp. 5.Using skins with the DateChooser component The DateChooser component uses skins to represent the forward and back month buttons and the today indicator. open the backMonthDown symbol.0 Components.fla file. The default value is fwdMonthUp. The default value is backMonthDown. The default value is fwdMonthDisabled. For example.0). To create movie clip symbols for DateChooser skins: 1. The month forward button pressed state. Select File > Import > Open External Library and then select the HaloTheme. Select File > New and choose Flash File (ActionScript 2. 3. This file is located in the application-level configuration folder. Only the month scrolling buttons can be dynamically skinned in this component. The month forward button disabled state. The default value is fwdMonthDown. In the theme’s Library panel. The month forward button up state. A DateChooser component uses the following skin properties: Property backMonthButtonUpSymbolName Description The month back button up state. Expand the DateChooser Assets/States folder in the library of your document. Open the symbols that you want to customize for editing. see “About themes” in Using ActionScript 2. The size is determined by the symbol during authoring.0 Components. For more information. backMonthButtonDownSymbolName backMonthButtonDisabledSymbolName fwdMonthButtonUpSymbolName fwdMonthButtonDownSymbolName fwdMonthButtonDisabledSymbolName The button symbols are used exactly as is. 336 DateChooser component . modify skin symbols in the Flash UI Components 2/Themes/MMDefault/DateChooser Assets/States folder in the library of one of the themes’ FLA files. For the exact location on your operating system. without applying colors or resizing. expand the Flash UI Components 2/Themes/MMDefault folder and drag the DateChooser Assets folder to the library for your document. see “About skinning components” in Using ActionScript 2. To skin the DateChooser component while authoring. The month back button disabled state.

DateChooser. use the following code: trace(mx.version). indicate disabled dates and selectable dates. 9. change the tint of the forward arrow down symbol to match the back arrow. Click the Back button to return to the main timeline. DateChooser class 337 . so a cut-out in the middle of the today indicator skin element would make today’s date unreadable unless either the background color or the today text color is also changed.DateChooser ActionScript Class Name The properties of the DateChooser class let you access the selected date and the displayed month and year. Select NOT E N OTE The DateChooser Assets/States folder also contains a Day Skins folder with a single skin element. change the tint of the arrow to red. it cannot be changed dynamically on a particular DateChooser instance to use a different symbol. The version property returns a string that indicates the version of the component. Control > Test Movie. In addition.controls. Setting a property of the DateChooser class with ActionScript overrides the parameter of the same name set in the Property inspector or Component inspector. because the DateChooser component applies the todayColor color to the graphic as a whole. For example. DateChooser class Inheritance MovieClip > UIObject class > UIComponent class > DateChooser mx. For example. Repeat steps 5-6 for all symbols that you want to customize. You can also set the names of the days and months. the cal_todayIndicator symbol must be a solid single-color graphic. Drag a DateChooser component to the Stage. 8.version). Class properties are available only on the class itself. To access this property. 7. The graphic may have cut-outs. cal_todayIndicator. Customize the symbol as desired. Each component class has a version property. but keep in mind that the default text color for today’s date is white and the default background for the DateChooser is white.controls. which is a class property. set the first day of the week. and indicate whether the current date should be highlighted. This element can be modified during authoring to customize the today indicator. 10.6. returns undefined. The code trace(myDC. However.

use the form dateChooserInstance.doLater() UIObject. Sets focus to the component instance. Sets the style property on the style declaration or object.redraw() UIObject.destroyObject() Creates a subobject on an object. Marks the object so it is redrawn on the next frame interval.createObject() UIObject. use the form dateChooserInstance.setSkin() UIObject.getFocus() UIComponent. Methods inherited from the UIObject class The following table lists the methods the DateChooser class inherits from the UIObject class. 338 DateChooser component . Gets the style property from the style declaration or object.setFocus() Description Returns a reference to the object that has focus. Forces validation of the object so it is drawn in the current frame.setStyle() Methods inherited from the UIComponent class The following table lists the methods the DateChooser class inherits from the UIComponent class.setSize() UIObject. UIObject. Method UIComponent.getStyle() UIObject. When calling these methods from the DateChooser object.Method summary for the DateChooser class There are no methods exclusive to the DateChooser class.invalidate() UIObject. Destroys a component instance. Method Description UIObject. When calling these methods from the DateChooser object.methodName. Sets a skin in the object.methodName. Resizes the object to the requested size. UIObject.createClassObject() Creates an object on the specified class.move() UIObject. Calls a function when parameters have been set in the Property and Component inspectors. Moves the object to the requested position.

height UIObject. relative to the bottom edge of its parent.displayedYear DateChooser. relative to the right edge of its parent. A number indicating the year to display.Property summary for the DateChooser class The following table lists the properties that are exclusive to the DateChooser class. use the form dateChooserInstance.disabledDays Description An array indicating the names of the days of the week. The height of the object.selectableRange A single selectable date or a range of selectable dates. in pixels. The position of the right edge of the object. DateChooser. When accessing these properties from the DateChooser object.showToday A Date object indicating the selected date. relative to its parent. The left edge of the object. A range of disabled dates or a single disabled date. Read-only.selectedDate DateChooser.monthNames DateChooser.bottom Description The position of the bottom edge of the object. An array of strings indicating the month names.left UIObject. A number indicating an element in the monthNames array to display in the date chooser. Properties inherited from the UIObject class The following table lists the properties the DateChooser class inherits from the UIObject class. Read-only.disabledRanges DateChooser. A Boolean value indicating whether the current date is highlighted. Read-only.dayNames DateChooser. in pixels. UIObject. A number indicating the scaling factor in the y direction of the object. Property DateChooser.right UIObject. A number indicating an element in the dayNames array to display in the first column of the date chooser. Property UIObject.scaleY DateChooser class 339 .firstDayOfWeek DateChooser. A number indicating the scaling factor in the x direction of the object.propertyName.scaleX UIObject. DateChooser. relative to its parent.displayedMonth DateChooser. An array indicating the days of the week that are disabled for all applicable dates in the date chooser. Read-only.

width UIObject. relative to its parent. A number indicating the tab order for a component in a document. The width of the object. Read-only.y Description The position of the top edge of the object. Events inherited from the UIObject class The following table lists the events the DateChooser class inherits from the UIObject class. When accessing these properties from the DateChooser object. in pixels. use the form dateChooserInstance. in pixels. Broadcast when an object’s state changes from visible to invisible. Properties inherited from the UIComponent class The following table lists the properties the DateChooser class inherits from the UIComponent class.top UIObject. Read-only. Broadcast when the object has moved.scroll Description Broadcast when a date is selected.load UIObject. A Boolean value indicating whether the object is visible (true) or not (false). Broadcast when the month buttons are clicked.visible UIObject. in pixels. Broadcast when subobjects are being created. Read-only. 340 DateChooser component . Read-only.Property UIObject.tabIndex Description Indicates whether the component can receive focus and input.move Description Broadcast when an object is about to draw its graphics.draw UIObject.propertyName. The top edge of the object. Event UIObject.x UIObject. Property UIComponent. Event summary for the DateChooser class The following table lists the events that are exclusive to the DateChooser class.change DateChooser.enabled UIComponent. The left edge of the object.hide UIObject. Event DateChooser.

listenerObject.keyUp Description Broadcast when an object receives focus..addEventListener("change".change Availability Flash Player 6 (6. Usage 2: on (change) { //.79.focusIn UIComponent. Broadcast when a key is pressed.Event UIObject. listenerObject).focusOut UIComponent. dateChooserInstance.unload Events inherited from the UIComponent class The following table lists the events the DateChooser class inherits from the UIComponent class. Event UIComponent..change = function(eventObject:Object) { // .0). UIObject. DateChooser. Broadcast when an object loses focus. Broadcast when an object’s state changes from invisible to visible. } DateChooser.0. Broadcast when the subobjects are being unloaded.reveal UIObject.resize Description Broadcast when an object has been resized.. Usage Usage 1: var listenerObject:Object = new Object(). Broadcast when a key is released. Edition Flash MX Professional 2004.change 341 .keyDown UIComponent.. }.

it automatically passes an event object (eventObject) to the listener object method. broadcast to all registered listeners when a date is selected. refers to the component instance. the method is called when the event is triggered. For example.addEventListener() method on the component instance that broadcasts the event to register the listener with the instance. on a listener object (listenerObject) that you create. var dcListener:Object = new Object(). The first usage example uses a dispatcher/listener event model.change = function(evt_obj:Object) { var thisDate:Date = evt_obj. Finally. see “EventDispatcher class” on page 495. Each event object has properties that contain information about the event. also called a handler. When the event is triggered. A component instance (dataChooserInstance) dispatches an event (in this case. }. sends “_level0. 342 DateChooser component . You define a method with the same name as the event on the listener object. For more information. dcListener).addEventListener("change". my_dc). change) and the event is handled by a function. trace("date selected: " + thisDate). the following code. in this example eventObj. When the instance dispatches the event. dcListener. // Create listener object. written on a frame of the timeline. // Add listener object to date chooser. you call the EventDispatcher. The keyword this. Inside the function is a trace() statement that uses the event object that is automatically passed to the function. the listener is called. my_dc. The second line defines a function for the change event on the listener object. to generate a message. } Example This example.target. The first line of code creates a listener object called form. The second usage example uses an on() handler and must be attached directly to a DateChooser instance. sends a message to the Output panel when a DateChooser instance called my_dc is changed. The target property of an event object is the component that generated the event (in this example.selectedDate.Description Event.my_dc” to the Output panel: on (change) { trace(this). attached to the date chooser my_dc. You can use these properties to write code that handles the event. used inside an on() handler attached to a component.

DateChooser.disabledDays Availability Flash Player 6 (6. "T".dayNames = new Array("Su". an array indicating the disabled days of the week. Edition Flash MX Professional 2004. "Fr".dayNames Description Property. DateChooser.0). The default value is [] (an empty array). The default value is ["S". "Th". 6].disabledDays Description Property. Edition Flash MX Professional 2004.0). Usage dateChooserInstance. Example The following example changes the value of the days of the week: my_dc. "Mo". Usage dateChooserInstance.disabledDays 343 . "Tu". All the dates in a month that fall on the specified day are disabled.0.79.79. "T".dayNames Availability Flash Player 6 (6.disabledDays = [0. Sunday is the first day (at index position 0) and the rest of the day names follow in order. an array containing the names of the days of the week. "S"]. "W". "F". The elements of this array can have values from 0 (Sunday) to 6 (Saturday).0.DateChooser. "M". "We". Example The following example disables Sundays and Saturdays so that users can select only weekdays: my_dc. "Sa").

0). the Date object returns the current date and time. 7)} ]. specify new Date(2003.79. 4. 3. 10.disabledRanges Description Property. 11. If you don’t specify a time. or an object that contains either or both of the properties rangeStart and rangeEnd. The default value of disabledRanges is undefined. The following example disables all dates after November 7: my_dc. 7) ].disabledRanges = [ {rangeEnd: new Date(2002. For example. the range is unbounded in that direction.DateChooser.disabledRanges = [ new Date(2003. Usage dateChooserInstance. 7)} ]. The following example disables April 7 and April 21: my_dc. Specify a full date when you define dates for the disabledRanges property. 9. 21) ]. new Date(2003.6.disabledRanges Availability Flash Player 6 (6. The following example disables only December 7: my_dc. disables a single day or a range of days.disabledRanges = [ new Date(2003. the time is returned as 00:00:00. Example The following example defines an array with rangeStart and rangeEnd Date objects that disable the dates between May 7 and June 7: my_dc.disabledRanges = [ {rangeStart: new Date(2003. 7). 5. Each object in the array must be either a Date object that specifies a single day to disable.0.24) rather than new Date(). 7)}]. The rangeStart and rangeEnd properties describe the boundaries of the date range. This property is an array of objects. 7). Edition Flash MX Professional 2004. 344 DateChooser component . If either property is omitted. If you don’t specify a full date. rangeEnd: new Date(2003. 3. each of whose value must be a Date object.disabledRanges = [{rangeStart: new Date(2003. The following example disables all dates before October 7: my_dc.

DateChooser. Usage dateChooserInstance. See also DateChooser. a number indicating which month is displayed.79.0. The default value is the month of the current date.displayedYear 345 .0). Edition Flash MX Professional 2004.displayedYear DateChooser.0). Example The following example sets the displayed month to December: my_dc.displayedMonth Description Property.0. The number indicates an element in the monthNames array. DateChooser. Edition Flash MX Professional 2004.79. a four-digit number indicating which year is displayed.displayedMonth Availability Flash Player 6 (6. with 0 being the first month.displayedMonth = 11.displayedYear Description Property.displayedYear Availability Flash Player 6 (6. The default value is the current year. Usage dateChooserInstance.

firstDayOfWeek Availability Flash Player 6 (6.displayedYear = 2010. Usage dateChooserInstance. my_dc. Even though Monday is now the first day in the DateChooser.79. // Disables day 0 (Sunday). Sunday is still array index 0. See also DateChooser. a number indicating which day of the week (0-6.disabledDays = [0]. 0 being the first element of the dayNames array) is displayed in the first column of the DateChooser component. Changing this property changes the order of the day columns but has no effect on the order of the dayNames property.Example The following example sets the displayed year to 2010: my_dc.dayNames 346 DateChooser component .firstDayOfWeek Description Property.0).0. The default value is 0 (Sunday). my_dc. Example The following example sets the first day of the week to Monday: // Sets the first day of the week to Monday in the calendar.firstDayOfWeek = 1.displayedMonth DateChooser. Edition Flash MX Professional 2004. See also DateChooser.

"April".0. "November".monthNames Description Property.monthNames Availability Flash Player 6 (6. "October". "Feb". "June". DateChooser. "May".. "March". "August"."Mar".DateChooser.0.79. "July". Edition Flash MX Professional 2004. an array of strings indicating the month names at the top of the DateChooser component. "Sept". "February".. Usage Usage 1: var listenerObject:Object = new Object(). "May". "September"."Apr".monthNames = ["Jan".addEventListener("scroll".scroll = function(eventObject:Object) { //.. Usage dateChooserInstance.0).. "June". Example The following example sets the month names for the instance my_dc: my_dc. listenerObject. "Aug". } dateChooserInstance. "Dec"]. } DateChooser.scroll Availability Flash Player 6 (6."July". Edition Flash MX Professional 2004.scroll 347 .0). The default value is ["January". "December"]. listenerObject) Usage 2: on (scroll) { //."Oct". "Nov".79.

detail). the method is called when the event is triggered. The first line of code creates a listener object called form. The keyword this. the following code.Description Event.myDC” to the Output panel: on (scroll) { trace(this). you call the EventDispatcher. The second usage example uses an on() handler and must be attached directly to a DateChooser instance. sends a message to the Output panel when a month button is clicked on a DateChooser instance called my_dc.addEventListener() method on the component instance that broadcasts the event to register the listener with the instance. Finally. When the event is triggered. The first usage example uses a dispatcher/listener event model. } Example This example. written on a frame of the timeline. // Create listener object. used inside an on() handler attached to a component. it automatically passes an event object (eventObject) to the listener object method. The second line defines a function for the scroll event on the listener object. sends “_level0. detail. my_dc. that can have one of the following values: nextMonth. You define a method with the same name as the event on the listener object. var dcListener:Object = new Object(). scroll) and the event is handled by a function. When the instance dispatches the event. For more information. Each event object has properties that contain information about the event. previousYear. on a listener object (listenerObject) that you create.addEventListener("scroll". previousMonth. in this example evt_obj. The scroll event’s event object has an additional property. }. refers to the component instance. attached to the date chooser myDC. A component instance (myDC) dispatches an event (in this case. 348 DateChooser component . Inside the function is a trace() statement that uses the event object that is automatically passed to the function. // Add listener object to date chooser. You can use these properties to write code that handles the event. For example.scroll = function(evt_obj:Object) { trace(evt_obj. nextYear. the listener is called. also called a handler. dcListener. see “EventDispatcher class” on page 495. dcListener). to generate a message. broadcast to all registered listeners when a month button is clicked.

new If you don’t specify a time. the displayed month changes to July 2003. Date(2003.79. The rangeStart and rangeEnd properties designate the boundaries of the selectable date range. If you don’t specify a full date. the Date object returns the current date and time. 2003. DateChooser.6.displayedYear are set to the nearest last month in the selectable range if the current month falls outside the selectable range.selectableRange Description Property. The user cannot scroll beyond the selectable range. If you want to enable only a single day. you can use a single Date object as the value of selectableRange. all the dates before rangeEnd are enabled. Edition Flash MX Professional 2004.24) rather than new Date(). Usage dateChooserInstance.selectableRange 349 . the time is returned as 00:00:00.DateChooser. The values of DateChooser.0. and the selectable range is from June 2003 to July. If only rangeStart is defined.selectedDate is set to undefined if it falls outside the selectable range. The value of this property is an object that consists of two Date objects named rangeStart and rangeEnd. Specify a full date when you define dates—for example.0). all the dates after rangeStart are enabled.displayedMonth and DateChooser.selectableRange Availability Flash Player 6 (6. If only rangeEnd is defined. sets a single selectable date or a range of selectable dates. The default value is undefined. For example. The value of DateChooser. if the current displayed month is August.

0. Example The following example sets the selected date to June 7: my_dc. The following example defines the selectable date as June 7 only: my_dc. 7)}. or on a day that has been disabled. 350 DateChooser component . Edition Flash MX Professional 2004. a Date object that indicates the selected date if that value falls within the value of the selectableRange property. 7)}. 5.selectedDate Availability Flash Player 6 (6. The default value is undefined. You cannot set the selectedDate property within a disabled range. rangeEnd: new Date(2003.selectableRange = {rangeEnd: new Date(2005.selectedDate Description Property. 5.0). outside a selectable range. 7)}. The following example defines the selectable range as the dates after and including May 7: my_dc. If this property is set to one of these dates. The following example defines the selectable range as the dates before and including June 7: my_dc. 4.Example The following example defines the selectable range as the dates between and including May 7 and June 7: my_dc.selectableRange = {rangeStart: new Date(2005. the value is undefined.79.selectedDate = new Date(2005. 5.selectableRange = {rangeStart: new Date(2001. 4. Usage dateChooserInstance. DateChooser. 5. 7).selectableRange = new Date(2005. 7). 7).

showToday = false.DateChooser. The default value is true. Example The following example turns off the highlighting on today’s date: my_dc.0). DateChooser.79.showToday Description Property.0.showToday Availability Flash Player 6 (6. Usage dateChooserInstance.showToday 351 . a Boolean value that determines whether the current date is highlighted. Edition Flash MX Professional 2004.

352 DateChooser component .

searched. A transfer object exposes business data that resides on the server with public attributes or accessor methods for reading and writing data. The DataSet component allows developers to work with sophisticated client-side objects that mirror their server-side counterparts or. In most cases. you don’t use these classes and interfaces directly. in its simplest form. you use them indirectly through methods provided by the DataSet class. The DataSet component functionality includes DataSetIterator.CHAPTER 14 CHAPTER 14 DataSet component The DataSet component lets you work with data as collections of objects that can be indexed. NOTE 14 The DataSet component is supported only if you are working in a document that specifies Flash Player 7 or later and ActionScript 2. a set of interfaces and classes for working with updates to a data collection. sorted. a set of methods for traversing and manipulating a data collection.html. # .sun. see Core J2EE Patterns Transfer Object at http:/ /java. and DeltaPacket. a collection of anonymous objects with public attributes that represent the fields in a record of data.0 in its Publish Settings.com/blueprints/corej2eepatterns/Patterns/TransferObject. filtered. and modified. The items managed by the DataSet component are also called transfer objects. For details on transfer objects.

the data set creates an anonymous transfer object for you. DataSet parameters You can set the following parameters for the DataSet component: is a string indicating the name of the transfer object class that is instantiated each time a new item is created in the DataSet component. See “Making data binding classes available at runtime” on page 207. You can write ActionScript code to use the properties. readOnly is a Boolean value that defaults to false. The DataSet component uses functionality in the data binding classes. If this parameter is set to true. methods. N OTE 388 You must make a fully qualified reference to this class somewhere in your code to make sure that it gets compiled into your application (such as private var myItem:my. without using the Binding and Schema tabs in the Component inspector to set properties. the data set logs all changes made to its data and any method calls made on the associated transfer objects. and a resolver component for translating updates made to the data set into the appropriate format for sending to the external data source. itemClassName The DataSet component uses transfer objects to represent the data that you retrieve from an external data source.).package. you’ll need to import the data binding classes into your FLA file and set required properties in your code.Using the DataSet component You typically use the DataSet component in combination with other components to manipulate and update a data source: a connector component for connecting to an external data source. ActionScript 2. the data set instantiates your transfer object whenever new data is added. You can then use data binding to bind properties of these different components together. If this parameter is set to true.0 Components Dictionary . If you leave this parameter blank. If you intend to work with the DataSet component in ActionScript only. For more information.myItem. logChanges is a Boolean value that defaults to true. If you give this parameter a value. see “DataSet class” on page 357. and events of the DataSet component to control these and additional options. the data set cannot be modified. user interface components for displaying data from the data source.

Creating an application with the DataSet component Typically. If you intend to work with the DataSet component in ActionScript only. give it the instance name user_ds. In the Components panel. 2. the DataSet component is notified of changes made from within a UI control. DataSet. The items in the data set are populated by means of the connector component or raw ActionScript data. 5. drag a DataSet component from the Components panel to the Stage. 3. See “Making data binding classes available at runtime” on page 207. Load the DataSet component with data from an external data source. you’ll need to import the data binding classes into your FLA file and set required properties in your code. managing. you can bind the DataSet component to a connector and a resolver component to provide a complete solution for accessing. 6. and updated accordingly.0).0. you use the DataSet component with other user interface components. and often with a connector component such as XMLConnector or WebServiceConnector. To create an application using the DataSet component: 1. 2. Confirm that your Publish Settings specify ActionScript 2. and updating data from an external data source. without using the Binding and Schema tabs in the Component inspector to set properties. Call the methods of the DataSet component in your application to manage your data. In the Property inspector.Common workflow for the DataSet component The typical workflow for the DataSet component is as follows. Add an instance of the DataSet component to your application and give it an instance name. The UI controls are notified as records (transfer objects) are selected or modified within the DataSet component. In addition. To use a DataSet component: 1. those changes are tracked by the data set and can be extracted by means of a delta packet. Use the Bindings tab of the Component inspector to bind the data set fields to user interface components in your application. Select the Schema tab for the DataSet component and create component properties to represent the persistent fields of the data set. NO TE In addition to these steps.loadFromSharedObj() 385 . The DataSet component uses functionality in the data binding classes. Select File > New and choose Flash File (ActionScript 2. and then bound to user interface controls (such as List or DataGrid components). 4.

firstName:"Paul". 8.types. var i:mx. 14. In the Add Binding dialog box.Str. Drag a Button component to the Stage and give it the instance name next_button. and click the Add Binding (+) button in the Component inspector. select “selectedIndex : Number”. select the first frame on Layer 1 and open the Actions panel. open the Component inspector and click the Bindings tab. lastName:"Simonon"}]. {id:1.data. Click Add Component Property. Double-click 13. lastName:"Strummer"}. 388 ActionScript 2. select “dataProvider : Array” and click OK. Or. This populates the DataSet object’s items property with an array of objects. and lastName. Add the three properties and their required data types to the DataSet schema: a. 7. respectively. Select 11. the DataGrid component (user_dg) on the Stage. 6. firstName:"Mick". 10. and click the Schema tab. Click OK. and data types Number.3. In the Bound To dialog box that appears. you can add the following line of code to the Actions panel instead of following steps a and b above: // Add required schema types. firstName. and add three new properties. and String. To bind the contents of the DataSet component to the contents of the DataGrid component.Num. Double-click the Bound To field in the Component inspector to open the Bound To dialog box. b. In the Timeline. var j:mx. String. Drag a DataGrid component to the Stage and give it the instance name user_dg. In 16. user_ds. firstName:"Joe". 12. select “DataSet <user_ds>” from the Component Path column and then select “dataProvider : Array” from the Schema Location column. the dialog box that appears.data. the Bound To field in the Component inspector. select the DataGrid component on the Stage and click the Add Binding (+) button again in the Component inspector. component. 4. if you prefer to add the properties and their required data types in code. To bind the selected index of the DataSet component to the selected index of the DataGrid 15. firstName. with field names id. {id:2.items = recData_array. open the Component inspector. 9. Select the DataSet component on the Stage. 5. Add the following code to the Actions panel: var recData_array:Array = [{id:0. each of which has three properties: id. and lastName. Resize the DataGrid component to be approximately 300 pixels wide and 100 pixels tall.types. lastName:"Jones"}.0 Components Dictionary .

nextBtnClick). 19. DataSet.addItemAt() DataSet. and modified. This code uses the DataSet. Save the file. Creates a new sorted view of the items in the collection. changing the current item in the DataSet object changes the current (selected) item in the DataGrid object as well.components.addEventListener("click".next(). and select Control > Test Movie to test the SWF file.DataSet ActionScript Class Name The DataSet component lets you work with data as collections of objects that can be indexed. function nextBtnClick(evt_obj:Object):Void { user_ds. Method DataSet. a set of methods for traversing and manipulating a data collection. you use them indirectly through methods provided by the DataSet class.next() method to navigate to the next item in the DataSet object’s collection of items. Method summary for the DataSet class The following table lists the methods of the DataSet class.addSort() DataSet.loadFromSharedObj() 385 . you don’t use these classes and interfaces directly. Since you had previously bound the selectedIndex property of the DataGrid object to the same property of the DataSet object. and DeltaPacket. sorted. searched.17. } 18. Notice how clicking the button changes the selected item in the DataGrid object.applyUpdates() Description Adds the specified item to the collection. Signals that the deltaPacket property has a value that you can access using data binding or ActionScript. DataSet class Inheritance MovieClip > DataSet mx. In most cases. Enter the following code in the Actions panel: next_button. In the Component Path field. select “DataSet <user_ds>” from the Component Path column and then select “selectedIndex : Number” from the Schema Location column.data.addItem() DataSet. The DataSet component functionality includes DataSetIterator. The DataGrid object is populated with the specified items. filtered. Adds an item to the data set at the specified position. a set of interfaces and classes for working with updates to a data collection.

Removes the specified item from the collection.loadFromSharedObj() Loads all of the relevant data needed to restore the DataSet DataSet. Moves to the first item in the current view of the collection. Moves to the last item in the current view of the collection.locateById() DataSet.changesPending() Description Indicates whether the collection has changes pending that have not yet been sent in a delta packet. Clears all items from the current view of the collection. collection from a shared object. DataSet.disableEvents() DataSet.removeItem() DataSet.last() DataSet.findFirst() DataSet. Removes all the items from the collection.clear() DataSet. DataSet. Moves to the next item in the current view of the collection. Removes the current iterator’s range settings. Returns a clone of the current iterator. Indicates whether the current iterator is at the end of its view of the collection.enableEvents() DataSet. Returns the unique ID for the specified item.findLast() DataSet.getIterator() DataSet. Locates the first occurrence of an item in the current view of the collection.getItemId() DataSet. Locates an item in the current view of the collection.removeAll() DataSet.first() DataSet. Indicates whether the collection contains any items.hasSort() DataSet.find() DataSet. Stops sending DataSet events to listeners.isEmpty() DataSet.getLength() DataSet.hasPrevious() DataSet. Removes a data set item at a specified position. Moves to the previous item in the current view of the collection.removeItemAt() DataSet.previous() Moves the current iterator to the item with the specified ID.Method DataSet. Returns the number of items in the data set. Indicates whether the specified sort exists. Locates the last occurrence of an item in the current view of the collection. Returns a newly initialized collection item. Indicates whether the current iterator is at the beginning of its view of the collection.next() DataSet. Resumes sending DataSet events to listeners.0 Components Dictionary .hasNext() DataSet.removeRange() 388 ActionScript 2.createItem() DataSet.

itemClassName DataSet.setRange() DataSet.filterFunc DataSet. Makes the specified sort the active one.skip() Description Removes the specified sort from the DataSet object.currentItem DataSet.saveToSharedObj() DataSet. Property DataSet.removeSort() DataSet. or assigns changes to be made to the collection.items DataSet. Indicates whether changes made to the collection.logChanges DataSet. Indicates whether the collection can be modified.setIterator() DataSet. Items in the collection.deltaPacket Description Returns the current item in the collection. Contains the current item’s index in the collection.useSort() Property summary for the DataSet class The following table lists the properties of the DataSet class.loadFromSharedObj() 385 . Returns changes made to the collection.dataProvider DataSet. DataSet. Specifies the collection’s schema in XML format.schema DataSet.filtered DataSet. Moves forward or backward by a specified number of items in the current view of the collection. User-defined function for filtering items in the collection. DataSet.length DataSet. are recorded. Contains the properties (fields) for any transfer object in this collection. Saves the data in the DataSet object to a shared object. Name of the object to create when assigning items. Sets the current iterator’s range settings. Indicates whether items are filtered. Specifies the number of items in the current view of the collection.readOnly DataSet.properties DataSet.selectedIndex DataSet. Sets the current iterator for the DataSet object. Returns the data provider. or its items.Method DataSet.

Broadcast before an item is removed.iteratorScrolled DataSet. Edition Flash MX Professional 2004.removeItem DataSet.afterLoaded DataSet. DataSet. but before it is added to the collection. Broadcast when a new transfer object is constructed by the DataSet object.. Usage 2: on (addItem) { // .calcFields DataSet... Broadcast when the DataSet object’s delta packet has been changed and is ready to be used.Event summary for the DataSet class The following table lists the events of the DataSet class. }. Broadcast when the iterator’s position is changed.addEventListener("addItem".resolveDelta DataSet.0 Components Dictionary . Broadcast after the items property is assigned.newItem DataSet. listenerObject).addItem DataSet. Event DataSet.addItem = function (eventObj:Object) { // ..addItem Availability Flash Player 7. dataSetInstance.modelChanged DataSet. Usage Usage 1: var listenerObject:Object = new Object(). Broadcast when a delta packet is assigned to the DataSet object that contains messages. } 388 ActionScript 2.deltaPacketChanged Description Broadcast before an item is added to the collection. Broadcast when items in the collection have been modified in some way. listenerObject. Broadcast when calculated fields should be updated.

if you set it to true. Example The following addItem event handler cancels the addition of the new item if a user-defined function named userHasAdminPrivs() returns false. evt_obj. // Change this to true to allow inserts. trace("Item added"). } else { // Don't allow item addition. } } See also DataSet. By default.result = false. The string "addItem". The event object (eventObj) contains the following properties: target type item The DataSet object that generated the event. function addItemListener(evt_obj:Object):Void { if (userHasAdminPrivs()) { // Allow the item addition.removeItem DataSet.result = true.addItem({name:"Bobo".loadFromSharedObj() 385 . evt_obj. function userHasAdminPrivs():Boolean { return false. occupation:"clown"}). If you set the result property of the event object to false. this value is true.addEventListener("addItem". my_ds. } my_ds. insufficient permissions"). the add operation is canceled.Description Event. user doesn't have admin privileges. addItemListener). the add operation is allowed. A reference to the item in the collection to be added. otherwise. generated just before a new record (transfer object) is inserted into this collection. the item addition is allowed. trace("Error. result A Boolean value that specifies whether the specified item should be added.

The newly added item becomes the current item of the data set. If a sort is in use.createItem(). The location of the new item in the collection depends on whether a sort has been specified for the current iterator. the item is added to the collection according to its position in the current sort. addItemListener). false if it was not.0 Components Dictionary . Example The following example uses DataSet.addItem() Availability Flash Player 7. the item is added to the end of the collection.addItem({name:"Bobo". For more information on initialization and construction of the transfer object. This parameter is optional.DataSet.addEventListener("addItem". my_ds. Description Method. Usage dataSetInstance. adds the specified record (transfer object) to the collection for management. If no sort is in use. occupation:"clown"}). function addItemListener(evt_obj:Object):Void { trace("adding item"). Edition Flash MX Professional 2004.createItem(). Returns A Boolean value: true if the item was added to the collection. } 388 ActionScript 2.addItem() to create a new item and add it to the data set: my_ds. If no obj parameter is specified.addItem([obj]) Parameters obj An object to add to this collection. see DataSet. a new object is created automatically by means of DataSet.

Create a binding between the my_ds. Add the following ActionScript to Frame 1 of the main timeline: my_ds. and give it an instance name of submit_button. insufficient permissions").result = true.addEventListener("click". addItemListener).dataProvider property by using the Bindings panel of the Component inspector.dataProvider property and the my_dg. and assign it an instance name of my_ds. } else { // Don't allow the item addition. and give it an instance name of my_dg. Add two properties. submitListener). occupation:"clown"}). Drag a CheckBox component to the Stage. Drag a DataGrid component to the Stage.The following example demonstrates how you can accept or reject an item’s insertion into the DataSet by setting the result to true or false within the handler for the addItem event. Drag a Button component to the Stage.addItem({name:"bobo". Drag a DataSet component to the Stage.selected. trace("Item added"). } } function submitListener(evt_obj:Object):Void { my_ds.addEventListener("addItem". submit_button. name and occupation.result = false. user doesn't have admin privileges. evt_obj. } function addItemListener(evt_obj:Object):Void { if (userHasAdminPrivs()) { // Allow the item addition. to the DataSet component by using the Schema tab of the Component inspector. } See also DataSet. and give it an instance name of my_ch. trace("Error. function userHasAdminPrivs():Boolean { return my_ch.loadFromSharedObj() 385 .createItem() DataSet. evt_obj.

addItem({name:"Milton". my_ds. my_ds.addItem({name:"Michael". years:2}). adds a new item to the data set at the specified index. years:3}). years:1}). This number indicates the position at which to insert the item.addItemAt(index. Example The following example uses the addItemAt() method to add an item to the DataSet at the first position: my_ds. it is the index of the new item.addItem({name:"Mark". years:3}). and false indicates that the item already exists in the data set. Edition Flash MX Professional 2004. Description Method.0 Components Dictionary . Indices greater than the data provider’s length are ignored.addItemAt() Availability Flash Player 7. my_ds. 388 ActionScript 2. item Returns A Boolean value indicating whether the item was added: true indicates that the item was added.addItem({name:"Sarah". item) Parameters index A number greater than or equal to 0. {name:"Bobo".addItemAt(0. years:2}). my_ds.DataSet. years:1}). An object containing the data for the item. Usage dataSetInstance. This method triggers the modelChanged event with the event type addItem.addItem({name:"Frank". my_ds.

An array of strings that specify the field names to sort on. By default.Descending properties specified.Unique is specified as a sort option and the data being sorted is not unique.loadFromSharedObj() 385 . Returns Nothing.DataSet.addSort() Availability Flash Player 7. Edition Flash MX Professional 2004. fieldList sortOptions One or more of the following integer (constant) values. A DataSetError exception is thrown when DataSetIterator. if none is specified. which indicate what options are used for this sort. Specify one or more of the following values: ■ DataSetIterator.Unique Prevents the sort if any fields have like values.CaseInsensitive Ignores case when comparing two strings during the sort operation. ■ ■ DataSetIterator. when the specified sort name has already been added. Separate multiple values using the bitwise OR operator (|). sortOptions) Parameters name A string that specifies the name of the sort. sorts are case-sensitive when the property being sorted on is a string. ■ DataSetIterator. or when a property specified in the fieldList array does not exist in this data set. and then stores it in the sorting collection for later retrieval. Description Method. DataSetIterator. Flash automatically assigns the new sort to the current iterator after it is created. creates a new ascending or descending sort for the current iterator based on the properties specified by the fieldList parameter. This is the default sort Sorts items in descending order based on item option.Ascending Sorts items in ascending order. DataSet. fieldList. Usage dataSetInstance.addSort(name.

["name"]. you can dynamically add data to a DataSet component by entering first and last names into TextInput component instances on the Stage and clicking the Submit button.enabled = false. and give them instance names of submit_button and clear_button.label = "Clear". Finally.addItem({name:"Sarah". caseinsensitive sort on the DataSet object’s "name" field.0 Components Dictionary . years:3}). years:2}). Drag two TextInput components to the Stage.CaseInsensitive). and give them instance names of firstName_ti and lastName_ti. clear_button. and give it an instance name of my_ds.addEventListener("click". add a data binding from the dataProvider property of the DataSet component to the dataProvider property of the DataGrid component by using the Binding tab in the Component inspector. Drag a DataSet component to the Stage.addSort("nameSort". my_ds. and give it an instance name of my_dg. import mx. my_ds.components. Drag a DataGrid component to the Stage. DataSetIterator.addSort("lastFirst". my_ds. years:2}). clear_button. my_ds. addItemListener). my_ds. my_ds.data. submitListener).addItem({name:"Frank". In the following example.addItem({name:"michael". you can clear the data set by clicking the Clear button on the Stage. my_ds. Add two component properties. to the DataSet component’s schema by using the Schema tab of the Component inspector.datasetclasses.DataSetIterator. my_ds.controls. paste the following code in the first frame of the main timeline: import mx.enabled = false.addEventListener("modelChanged".addEventListener("click". clear_button.addItem({name:"mark". years:3}).Alert. clearListener). Drag an Alert component into the current document’s library. After you add items to the DataSet component.Example The following code creates a new sort named "nameSort" that performs a descending. ["lastName". submit_button. Drag two Button components to the Stage. my_ds.label = "Submit". my_dg. submit_button. "firstName"]).Unique | DataSetIterator. 388 ActionScript 2. Next.Descending | DataSetIterator.addItem({name:"Milton".addEventListener("addItem". firstName and lastName. modelChangedListener). years:1}).

show("Are you sure you want to clear the data?".CANCEL: break.enabled = my_dg. Clicking Cancel dismisses the Alert component instance.removeSort() DataSet. } } function clearListener(evt_obj:Object):Void { Alert. case Alert. See also DataSet. evt_obj. Enter some text into both of the TextInput instances and then click the Submit button.text = "". } function submitListener(evt_obj:Object):Void { my_ds.text = "". first name or last name cannot be blank.show("Error.enabled = (evt_obj.OK: my_ds.result = false.OK. clearConfirmListener). lastName_ti.lastName.".clear(). Alert.item. because of the binding).length == 0) || (evt_obj. Alert. _level0.addItem({firstName:firstName_ti. } function clearConfirmListener(evt_obj:Object):Void { switch (evt_obj.enabled.length == 0)) { Alert.target. A a new item should be added to the DataGrid instance.item. clear_button.firstName. Clicking OK clears the dataProvider property of the DataSet component (and then the dataProvider property of the DataGrid component.text.loadFromSharedObj() 385 . } } Select Control > Test Movie to test the document in the authoring environment.length > 0). } else { firstName_ti.text}). Clicking the Clear button should display an Alert component instance with a confirmation message asking if you want to clear the contents of the DataGrid.CANCEL. break.OK | Alert. } function addItemListener(evt_obj:Object):Void { if ((evt_obj. "Error".detail) { case Alert.function modelChangedListener(evt_obj:Object):Void { my_dg. "Warning". lastName:lastName_ti. _level0).

var loadListener:Object = new Object(). } }.. Usage 2: on (afterLoaded) { // .addEventListener("afterLoaded". Usage Usage 1: var listenerObject:Object = new Object(). Example In the following example. listenerObject. dataSetInstance.target == "contact_ds") { contactForm. loadListener). Edition Flash MX Professional 2004. 388 ActionScript 2.DataSet.0 Components Dictionary ..afterLoaded Availability Flash Player 7. } Description Event. }. contact_ds. broadcast immediately after the DataSet.items property has been assigned.. loadListener.visible = true. The event object (eventObj) contains the following properties: target type The DataSet object that generated the event. The string "afterLoaded"..addEventListener("afterLoaded".afterLoaded = function (eventObj:Object):Void { // .afterLoaded = function (evt_obj:Object) { if (evt_obj. listenerObject). a form named contactForm (not shown) is made visible once the items in the data set contact_ds have been assigned.

Edition Flash MX Professional 2004. itemsListener).target.applyUpdates() Returns Nothing.labelField = "name".items.deltaPacket property is null.deltaPacket property and emits a deltaPacketChanged event.dataProvider = evt_obj. my_list. var itemsListener:Object = new Object(). Usage dataSetInstance.items = item_array. Drag a List component and a DataSet component to the Stage. DataSet.The following example uses the afterLoaded event of the DataSet component to populate the dataProvider property for a List component on the Stage. } my_ds. Add the following ActionScript code to Frame 1 of the main timeline: my_list. DataSet. {name:"Katherine"}.disableEvents() method. and give them instance names of my_list and my_ds. itemsListener.applyUpdates() Availability Flash Player 7. {name:"Vinnie"}.afterLoaded = function (evt_obj:Object):Void { trace("After loaded"). my_ds. For more information.deltaPacket property has a value that you can access using data binding or directly by ActionScript. Description Method. Calling this method also creates a transaction ID for the current DataSet. This method has no effect if events have been disabled by means of the DataSet. see DataSet.addEventListener("afterLoaded".deltaPacket. var item_array:Array = [{name:"Douglas"}. respectively.loadFromSharedObj() 385 . signals that the DataSet. the DataSet. {name:"David"}]. Before this method is called.

dataSetInstance.calcFields = function (eventObj:Object):Void { // . age:48. } See also DataSet. gender:"M"}). }. Usage Usage 1: var listenerObject:Object = new Object(). var i:String. listenerObject.addItem({name:"Jonathan". my_ds. my_ds. my_ds.addItem({name:"Thomas".deltaPacket DataSet.addEventListener("calcFields".addItem({name:"Carol". for (i in my_ds.0 Components Dictionary . age:35.applyUpdates().. Usage 2: on (calcFields) { // . gender:"M"}). } 388 ActionScript 2.Example The following code calls the applyUpdates() method on the my_ds DataSet.applyUpdates(). age:31. my_ds.calcFields Availability Flash Player 7.deltaPacket) { trace(i + ":\t" + my_ds..deltaPacket[i])..addItem({name:"Orville". gender:"M"}). The following example adds four items to the my_ds DataSet instance on the Stage and displays each item in the top-level of the deltaPacket property: my_ds. Edition Flash MX Professional 2004. gender:"F"}). listenerObject). age:33. my_ds..

or any item in the collection. otherwise. DataSet. This event is also called when the value of a noncalculated field (that is.changesPending() Returns A Boolean value. has changes pending that have not yet been sent in a delta packet.addItem({name:"Mark". years:2}). years:2}).addItem({name:"Frank". a field with its Kind property set to Data on the Schema tab) is updated. have had modifications made to them that haven’t been committed to a delta packet. my_ds. my_ds.” Set only the values of calculated fields within the calcFields event.addItem({name:"Milton". Example The following code enables a Save Changes button (not shown) if the DataSet collection. or any items with that collection.Description Event. my_ds. Usage dataSetInstance.addItem({name:"Sarah". my_ds. Edition Flash MX Professional 2004.addItem({name:"Michael". my_ds. years:1}). years:3}). C AU TI ON Do not change the values of any of noncalculated fields in this event. The calcFields event listener that you create should perform the required calculation and set the value for the calculated field. returns false. Description Method. because this results in an “infinite loop. returns true if the collection. A calculated field is one whose Kind property is set to Calculated on the Schema tab of the Component inspector. DataSet.changesPending() Availability Flash Player 7.loadFromSharedObj() 385 . generated when values of calculated fields for the current item in the collection need to be determined. years:3}).

modelChangedListener). my_ds. my_ds.addItem({name:"Hal".addItem({name:"Milton".clear() Availability Flash Player 7.addItem({name:"Sarah".clear() Returns Nothing.deltaPacket for all items in the collection.target. use DataSet. years:2}).0 Components Dictionary . my_ds.enabled = true. To clear all of the items in the collection regardless of the current iterator’s view. Therefore.my_ds. my_ds. Usage dataSetInstance. years:3}). Example The following example removes all items from the current view of the DataSet collection. the removal of those items is logged.changesPending()) { trace("changes pending"). Which items are considered “viewable” depends on any current filter and range settings on the current iterator.addItem({name:"Mark".addItem({name:"Frank". } } submitChanges_button. years:3}). “remove” entries are added to DataSet. 388 ActionScript 2. Description Method. my_ds. removes the items in the current view of the collection.removeAll().logChanges is set to true when you invoke this method. my_ds. Edition Flash MX Professional 2004.enabled = false. function modelChangedListener(evt_obj:Object):Void { if (evt_obj. DataSet. submitChanges_button. Because the logChanges property is set to true. years:2}). years:1}). years:4}).addEventListener("modelChanged".addItem({name:"Michael". calling this method might not clear all of the items in the collection. If DataSet.

itemClassName A DataSetError exception is thrown when the class specified with the property cannot be loaded. my_ds. Edition Flash MX Professional 2004.years >= 3). When this method is invoked. creates an item that isn’t associated with the collection. The optional item data is used to initialize the class specified with the DataSet.logChanges = true.itemClassName property or is used as the item if DataSet. See also DataSet. my_ds. any listeners for the DataSet.createItem() Availability Flash Player 7.createItem([itemData]) Parameters itemData Data associated with the item. You can specify the class of object created by using the DataSet. Usage dataSetInstance. // Remove filtered items from dataset.schema. If no DataSet.itemClassName is blank. my_ds. my_ds. Description Method. ["name"]). an anonymous object is constructed. This parameter is optional. DataSet.loadFromSharedObj() 385 .filtered = true.removeSort("nameSort").deltaPacket.clear(). DataSet. }.itemClassName property.itemClassName value is specified and the itemData parameter is omitted.newItem event are notified and are able to manipulate the item before it is returned by this method. This anonymous object’s properties are set to the default values based on the schema currently specified by DataSet. DataSet.filterFunc = function(item:Object):Boolean { return (item.addSort("nameSort". my_ds.logChanges DataSet. Returns The newly constructed item.my_ds.

or null if the collection is empty or if the current iterator’s view of the collection is empty. years:2}). my_ds. my_ds. }. nor are any of the schema settings applied to any properties of this object.0 Components Dictionary .currentItem Availability Flash Player 7.newItem. my_ds.filterFunc = function(item:Object):Boolean { return (item. 388 ActionScript 2. years:" + evt_obj. years:3})). function newItemListener(evt_obj:Object):Void { trace("new item was added: {name:'" + evt_obj. Changes made by directly accessing this object are not tracked (in the DataSet. } my_ds.name + "'. This property provides direct access to the item in the collection. See also DataSet. Usage dataSetInstance. returns the current item in the DataSet collection.createItem({name:"Wilson". newItemListener).years + "}").years % 2 == 0).Example my_ds.item.currentItem Description Property (read-only). DataSet. Edition Flash MX Professional 2004.addItem(my_ds.deltaPacket property).item.itemClassName.filtered = true.schema DataSet.addEventListener("newItem".addItem({name:"Tom". DataSet.

Example The following code assigns the dataProvider property of a DataSet object to the corresponding property of a DataGrid component.addItem({name:"Frank". Usage dataSetInstance. trace(customers_ds. DataSet. such as the List and DataGrid components.addItem({name:"Michael". customers_ds.dataProvider.Example The following example displays the value of the name property defined in the current item in the data set named customers_ds. see “DataProvider API” on page 317.dataProvider Description Property.addItem({name:"Sarah". years:3}). For more information about the DataProvider API. years:1}). // Frank DataSet. the data provider for this data set.currentItem.name). my_dg. customers_ds.addItem({name:"Milton". customers_ds. customers_ds. years:2}).dataProvider = my_ds. customers_ds.loadFromSharedObj() 385 . years:3}).dataProvider Availability Flash Player 7. This property provides data to user interface controls.addItem({name:"Mark". Edition Flash MX Professional 2004. years:2}).

resolveDelta event. Errors or server messages are reported to listeners of the DataSet. returns a delta packet that contains all of the change operations made to the dataSet collection and its items.logChanges settings are ignored when a delta packet with a matching ID is assigned to DataSet.deltaPacket Description Property.deltaPacket.resolveDelta 388 ActionScript 2. This transaction ID is used to identify the delta packet on an update round trip from the server and back to the client. A DataSetError exception is thrown if a delta packet is assigned with a matching transaction ID and one of the items in the newly assigned delta packet cannot be found in the original delta packet.logChanges setting of dataSet and the delta packet. DataSet.DataSet.deltaPacket Availability Flash Player 7. See also DataSet.logChanges. This property is null until DataSet. DataSet. a transaction ID is assigned to the delta packet.applyUpdates(). Any subsequent assignment to the deltaPacket property by a delta packet with a matching transaction ID is assumed to be the server’s response to the changes previously sent. depending on the current DataSet. When DataSet. Note that the DataSet. A delta packet with a matching ID is used to update the collection and report errors specified within the packet. Usage dataSetInstance. A delta packet without a matching transaction ID updates the collection.applyUpdates() is called. Edition Flash MX Professional 2004. as if the DataSet API were used directly.applyUpdates() is called on dataSet. This may create additional delta entries.0 Components Dictionary .

Usage 2: on (deltaPacketChanged) { // .loadFromSharedObj() 385 .DataSet. Edition Flash MX Professional 2004. broadcast when the specified DataSet object’s deltaPacket property has been changed and is ready to be used.addEventListener("deltaPacketChanged".disableEvents() Availability Flash Player 7.. listenerObject.deltaPacketChanged = function (eventObj:Object):Void { // . }.deltaPacketChanged Availability Flash Player 7. Usage Usage 1: var listenerObject:Object = new Object(). dataSetInstance.deltaPacket DataSet.disableEvents() Returns Nothing. Edition Flash MX Professional 2004. See also DataSet. listenerObject). } Description Event.... DataSet. Usage dataSetInstance.

name + " .length + " items"). disables events for the DataSet object. DataSet now has " + evt_obj. While events are disabled.hasPrevious()) { my_ds.length.addItem({name:"Bananas". } See also DataSet. // Tell the dataset it's time to update the controls now.enableEvents() 388 ActionScript 2. my_ds.price).0 Components Dictionary . function traceItems():Void { for (var i:Number = 0. my_ds.$" + my_ds. function onModelChanged(evt_obj:Object):Void { trace("model changed. Example In the following example.enableEvents(). traceItems().items. To reenable events.items.target. trace("Before:"). so that the DataSet object won’t affect performance by trying to refresh controls: my_ds. } // Disable events for the data set. i < my_ds. events are disabled before changes are made to items in the collection.disableEvents(). traceItems().Description Method. i++) { trace("\t" + my_ds. you must call DataSet. } trace("After:"). } trace(""). no user interface controls (such as a DataGrid component) are updated when changes are made to items in the collection. price:8}). my_ds. price:14}). and enableEvents() must be called an equal number of times to reenable the dispatching of events.price *= 0.items[i]. // Everything's 50% off! my_ds.5. or when the DataSet object is scrolled to another item in the collection.previous(). The disableEvents() method can be called multiple times.items[i]. onModelChanged).addItem({name:"Apples".last().enableEvents().addEventListener("modelChanged". my_ds. my_ds. while(my_ds.

so that the DataSet object won’t affect performance by trying to refresh controls. the enableEvents() method must be called an equal or greater number of times than disableEvents() was called. Example In the following example.5. my_ds.addItem({name:"Apples". onModelChanged).items.enableEvents() Returns Nothing.hasPrevious()) { my_ds. Description Method. function onModelChanged(evt_obj:Object):Void { trace("model changed. while(my_ds.addEventListener("modelChanged". // Everything's 50% off! my_ds. DataSet now has " + evt_obj. events are disabled before changes are made to items in the collection.disableEvents(). reenables events for the DataSet objects after events have been disabled by a call to DataSet. Usage dataSetInstance.previous().disableEvents().DataSet.loadFromSharedObj() 385 .target. price:14}). my_ds. my_ds. trace("Before:").last(). To reenable events for the DataSet object. Edition Flash MX Professional 2004. my_ds.enableEvents() Availability Flash Player 7. my_ds. price:8}).price *= 0. } // Disable events for the data set. } DataSet.length + " items").addItem({name:"Bananas". traceItems().

filtered = true. The default value is false. a Boolean value that indicates whether the data in the current iterator is filtered. filtering is enabled on the DataSet object named employee_ds.0 Components Dictionary .price). }. } trace(""). employee_ds.trace("After:"). Usage dataSetInstance. the filter function specified by DataSet.filtered Availability Flash Player 7. Example In the following example. employee_ds. } See also DataSet. 388 ActionScript 2.$" + my_ds. my_ds.enableEvents().filterFunc = function (item:Object) { // Filter out employees who are managers.empType != "management").name + " . otherwise. i < my_ds. return(item. The following filter function returns true if the empType field in the current item is set to "management".filterFunc is called for each item in the collection. it returns false. function traceItems():Void { for (var i:Number = 0.items. Edition Flash MX Professional 2004.filtered Description Property.items[i]. traceItems().items[i]. // Tell the data set it's time to update the controls now.length. Suppose that each record in the DataSet collection contains a field named empType. i++) { trace("\t" + my_ds.disableEvents() DataSet.When this property is true.

The following example populates a DataGrid component from content dynamically loaded using the XMLConnector component. When a user clicks a CheckBox instance on the Stage, the contents of the DataSet component are filtered and are updated automatically in the DataGrid component. Drag the following components to the Stage, and give them the following instance names:
■ ■ ■ ■

CheckBox (editorsChoice_ch) DataGrid (reviews_dg) DataSet (reviews_ds) XMLConnector (reviews_xmlconn)

Download a copy of the following XML document and save it to your local hard disk: http:/ /www.helpexamples.com/flash/xml/reviews.xml. This XML document will be loaded dynamically using the XMLConnector component, but you’ll use the local copy to import the XML schema into the DataSet component. Select the XMLConnector instance on the Stage and select the Schema tab from the Component inspector. Select the results property and click the “Import a schema from a sample XML file” button. Select the XML document that you downloaded to your local hard disk and click Open. The schema of the XML document should be imported into the DataSet component. With the reviews_xmlconn XMLConnector instance still selected on the Stage, add a binding from the reviews_xmlconn.results.reviews.review array to the dataProvider property of the reviews_ds DataSet instance. Set the direction of the data binding to “out” in the Bindings tab. Select the reviews_ds DataSet instance on the Stage and add another binding for the dataProvider property. With the reviews_ds instance selected, select the Bindings tab of the Component inspector. Click the Add binding button and add a binding from the dataProvider property of the DataSet component to the dataProvider property of the reviews_dg DataGrid instance. Add the following code to Frame 1 of the main timeline:
editorsChoice_ch.label = "Editor's Choice"; reviews_xmlconn.direction = "receive"; reviews_xmlconn.multipleSimultaneousAllowed = false; reviews_xmlconn.URL = "http://www.helpexamples.com/flash/xml/reviews.xml"; reviews_xmlconn.trigger(); reviews_dg.setSize(320, 240); reviews_dg.addColumn("name"); reviews_dg.addColumn("rating"); reviews_dg.addColumn("reviewDate"); reviews_dg.getColumnAt(0).width = 100; reviews_dg.getColumnAt(1).width = 100; reviews_dg.getColumnAt(2).width = 100; reviews_dg.setStyle("alternatingRowColors", [0xFFFFFF, 0xF6F6F6]);

DataSet.loadFromSharedObj()

385

editorsChoice_ch.addEventListener("click", editorsChoiceListener); function editorsChoiceListener(evt_obj:Object):Void { reviews_ds.filtered = evt_obj.target.selected; reviews_ds.filterFunc = function(item:Object):Boolean { return (item.editorsChoice == 1); }; }

Select Control > Test Movie. By default, the DataGrid component should display each of the reviews from the external XML document. Clicking on the Editor’s Choice CheckBox component causes the DataSet component to be filtered, so that only the specific reviews flagged as an editor’s choice appear.
See also
DataSet.filterFunc

DataSet.filterFunc
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.filterFunc = function (item:Object):Boolean { // return true|false; };

Description

Property; specifies a function that determines which items are included in the current view of the collection. When DataSet.filtered is set to true, the function assigned to this property is called for each record (transfer object) in the collection. For each item that is passed to the function, it should return true if the item should be included in the current view, or false if the item should not be included in the current view. When changing the filter function on a data set, you must set the filtered property to and then true again in order for the proper modelChanged event to be generated. Changing the filterFunc property won’t generate the event.
false

Also, if a filter is already in place when the data loads in (modelChanged or updateAll), the filter isn’t applied until filtered is set to false and then back to true again.

388

ActionScript 2.0 Components Dictionary

Example

In the following example, filtering is enabled on the DataSet object named employee_ds. The specified filter function returns true if the empType field in each item is set to "management"; otherwise, it returns false.
employee_ds.filtered = true; employee_ds.filterFunc = function (item:Object):Boolean { // Filter out employees who are managers. return(item.empType != "management"); };

In the following example, you filter the contents of a DataSet component based on the selected item in a ComboBox component. The ComboBox component lets you select all people, males only, or females only. Drag the a DataSet, DataGrid, and ComboBox components to the Stage, and give them instance names of my_ds, data_dg, and filter_cb respectively. Select the my_ds DataSet instance on the Stage and add two new properties: name and gender. Create a data binding between the dataProvider property of the DataSet and the dataProvider of the DataGrid component by using the Bindings panel of the Component inspector. Add the following ActionScript code to Frame 1 of the main timeline:
my_ds.dataProvider = new Array({name:"Charles", gender:"M"}, {name:"Buddy", gender:"M"}, {name:"Walter", gender:"M"}, {name:"Ellen", gender:"F"}, {name:"Jamie", gender:"F"}, {name:"Sarah", gender:"F"}, {name:"Adam", gender:"M"}); my_ds.addSort("nameSort", ["name"]); my_ds.addSort("genderSort", ["gender", "name"]); my_ds.useSort("genderSort"); filter_cb.dataProvider = [{label:"All", value:""} , {label:"Male only", value:"M"}, {label:"Female only", value:"F"}]; filter_cb.addEventListener("change", filterListener); function filterListener(evt_obj:Object):Void { var selItem:Object = evt_obj.target.selectedItem; if (selItem.value.length == 0) { my_ds.filtered = false; } else { my_ds.filtered = true; my_ds.filterFunc = function(item:Object):Boolean { return (item.gender == selItem.value); } } }

DataSet.loadFromSharedObj()

385

The following example populates a DataGrid component from content dynamically loaded using the XMLConnector component. When a user clicks a CheckBox instance on the Stage, the contents of the DataSet component are filtered and are updated automatically in the DataGrid component. Drag the following components to the Stage, and give them the following instance names:
■ ■ ■ ■

CheckBox (editorsChoice_ch) DataGrid (reviews_dg) DataSet (reviews_ds) XMLConnector (reviews_xmlconn)

Download a copy of the following XML document, and save it to your local hard disk: www.helpexamples.com/flash/xml/reviews.xml. This XML document loads dynamically using the XMLConnector component,. You’ll use the local copy to import the XML schema into the DataSet component. Select the XMLConnector instance on the Stage, and select the Schema tab from the Component inspector. Select the results property, and click Import a Schema From a Sample XML File. Select the XML document that you downloaded to your local hard disk, and click Open. The schema of the XML document should import into the DataSet component. With the reviews_xmlconn XMLConnector instance still selected on the Stage, add a binding from the reviews_xmlconn.results.reviews.review array to the dataProvider property of the reviews_ds DataSet instance. Set the direction of the data binding to Out in the Bindings tab. Select the reviews_ds DataSet instance on the Stage, and add another binding for the dataProvider property. With the reviews_ds instance selected, select the Bindings tab of the Component inspector. Click the Add Binding button and add a binding from the dataProvider property of the DataSet component to the dataProvider property of the reviews_dg DataGrid instance. Add the following code to Frame 1 of the main timeline:
editorsChoice_ch.label = "Editor's Choice"; reviews_xmlconn.direction = "receive"; reviews_xmlconn.multipleSimultaneousAllowed = false; reviews_xmlconn.URL = "http://www.helpexamples.com/flash/xml/reviews.xml"; reviews_xmlconn.trigger(); reviews_dg.setSize(320, 240); reviews_dg.addColumn("name"); reviews_dg.addColumn("rating"); reviews_dg.addColumn("reviewDate"); reviews_dg.getColumnAt(0).width = 100; reviews_dg.getColumnAt(1).width = 100; reviews_dg.getColumnAt(2).width = 100; reviews_dg.setStyle("alternatingRowColors", [0xFFFFFF, 0xF6F6F6]);

388

ActionScript 2.0 Components Dictionary

editorsChoice_ch.addEventListener("click", editorsChoiceListener); function editorsChoiceListener(evt_obj:Object):Void { reviews_ds.filtered = evt_obj.target.selected; reviews_ds.filterFunc = function(item:Object):Boolean { return (item.editorsChoice == 1); }; }

Select Control > Test Movie. By default, the DataGrid component should display each of the reviews from the external XML document. Clicking on the Editor’s Choice CheckBox component causes the DataSet component to be filtered, so that only the specific reviews flagged as an editor’s choice appear.
See also
DataSet.filtered

DataSet.find()
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.find(searchValues)

Parameters
searchValues

An array that contains one or more field values to be found within the

current sort.
Returns

Returns true if the values are found; otherwise, returns false.
Description

Method; searches the current view of the collection for an item with the field values specified by searchValues. Which items are in the current view depends on any current filter and range settings. If an item is found, it becomes the current item in the DataSet object. The values specified by searchValues must be in the same order as the field list specified by the current sort (see the example below).

DataSet.loadFromSharedObj()

385

If the current sort is not unique, the record (transfer object) found is nondeterministic. If you want to find the first or last occurrence of a transfer object in a nonunique sort, use DataSet.findFirst() or DataSet.findLast(). Conversion of the data specified is based on the underlying field’s type. For example, if you specify ["05-02-02"] as a search value, the underlying date field is used to convert the value using the date’s DataType.setAsString() method. If you specify [new Date().getTime()], the date’s DataType.setAsNumber() method is used.
Example

The following example searches for an item in the current collection whose name and id fields contain the values "Bobby" and 105, respectively. If found, DataSet.getItemId() is used to get the unique identifier for the item in the collection, and DataSet.locateById() is used to position the current iterator on that item.
var studentID:String = null; student_ds.addSort("id", ["name","id"]); // Locate the transfer object identified by "Bobby" and 105. // Note that the order of the search fields matches those // specified in addSort(). if (student_ds.find(["Bobby", 105])) { studentID = student_ds.getItemId(); } // Now use locateByID() to position the current iterator // on the item in the collection whose ID matches studentID. if (studentID != null) { student_ds.locateById(studentID); }

See also
DataSet.applyUpdates(), DataSet.getItemId(), DataSet.locateById()

388

ActionScript 2.0 Components Dictionary

DataSet.findFirst()
Availability Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.findFirst(searchValues)

Parameters
searchValues

An array that contains one or more field values to be found within the

current sort.
Returns

Returns true if the items are found; otherwise, returns false.
Description

Method; searches the current view of the collection for the first item with the field values specified by searchValues. Which items are in the current view depends on any current filter and range settings. The values specified by searchValues must be in the same order as the field list specified by the current sort (see the example below). Conversion of the data specified is based on the underlying field’s type. For example, if the search value specified is ["05-02-02"], the underlying date field is used to convert the value with the date’s setAsString() method. If the value specified is [new Date().getTime()], the date’s setAsNumber() method is used.
Example

The following example uses DataSet.find() to search for an item in the current collection whose name and id fields contain the values "Bobby" and 105, respectively. If found, DataSet.getItemId() is used to get the unique identifier for that item, and DataSet.locateById() is used to position the current iterator at that item.

DataSet.loadFromSharedObj()

385

To test this example, drag a DataSet component to the Stage, and give it an instance name of student_ds. Add two properties, name (data type: String) and id (data type: Number) to the DataSet by using the Schema tab of the Component inspector. If you don’t already have a copy of the DataBindingClasses compiled clip in your library, drag a copy of the compiled clip from the Classes library (Window > Common Libraries > Classes). Add the following ActionScript to Frame 1 of the main timeline:
student_ds.addItem({name:"Barry", id:103}); student_ds.addItem({name:"Bobby", id:105}); student_ds.addItem({name:"Billy", id:107}); trace("Before find() > " + student_ds.currentItem.name); // Billy var studentID:String; student_ds.addSort("id", ["name","id"]); if (student_ds.find(["Bobby", 105])) { studentID = student_ds.getItemId(); student_ds.locateById(studentID); trace("After find() > " + student_ds.currentItem.name); // Bobby } else { trace("We lost Billy!"); }

See also
DataSet.applyUpdates(), DataSet.getItemId(), DataSet.locateById()

DataSet.findLast()
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.findLast(searchValues)

Parameters
searchValues

An array that contains one or more field values to be found within the

current sort.
Returns

Returns true if the items are found; otherwise, returns false.

388

ActionScript 2.0 Components Dictionary

Description

Method; searches the current view of the collection for the last item with the field values specified by searchValues. Which items are in the current view depends on any current filter and range settings. The values specified by searchValues must be in the same order as the field list specified by the current sort (see the example below). Conversion of the data specified is based on the underlying field’s type. For example, if the search value specified is ["05-02-02"], the underlying date field is used to convert the value with the date’s setAsString() method. If the value specified is [new Date().getTime()], the date’s setAsNumber() method is used.
Example

The following example searches for the last item in the current collection whose name and age fields contain "Bobby" and "13". If found, DataSet.getItemId() is used to get the unique identifier for the item in the collection, and DataSet.locateById() is used to position the current iterator on that item.
var studentID:String = null; student_ds.addSort("nameAndAge", ["name", "age"]); // Locate the last transfer object with the specified values. // Note that the order of the search fields matches those // specified in addSort(). if (student_ds.findLast(["Bobby", "13"])) { studentID = student_ds.getItemId(); } // Now use locateByID() to position the current iterator // on the item in the collection whose ID matches studentID. if (studentID != null) { student_ds.locateById(studentID); }

See also
DataSet.applyUpdates(), DataSet.getItemId(), DataSet.locateById()

DataSet.loadFromSharedObj()

385

DataSet.first()
Availability Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.first()

Returns

Nothing.
Description

Method; makes the first item in the current view of the collection the current item. Which items are in the current view depends on any current filter and range settings.
Example

The following code positions the data set inventory_ds at the first item in its collection, and then displays the value of the price property contained by that item using the DataSet.currentItem property.
inventory_ds.first(); trace("The price of the first item is:" + inventory_ds.currentItem.price);

The following example iterates over all of the items in the current view of the collection (starting at its beginning) and performs a calculation on the price property of each item.
my_ds.addItem({name:"item a", price:16}); my_ds.addItem({name:"item b", price:9}); my_ds.first(); while (my_ds.hasNext()) { my_ds.currentItem.price *= 0.5; // Everything's 50% off! my_ds.next(); } for (var i in my_ds.items) { trace(my_ds.items[i].name + ": " + my_ds.items[i].price); }

See also
DataSet.last()

388

ActionScript 2.0 Components Dictionary

DataSet.getItemId()
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.getItemId([index])

Parameters
index

A number specifying the item in the current view for which to get the ID. This parameter is optional.

Returns

A string.
Description

Method; returns the identifier of the current item in the collection, or that of the item specified by index. This identifier is unique only in this collection and is assigned automatically by DataSet.addItem().
Example

The following code gets the unique ID for the current item in the collection and then displays it in the Output panel.
var itemNo:String = my_ds.getItemId(); trace("Employee id(" + itemNo + ")");

The following example uses DataSet.find() to search for an item in the current collection whose name and id fields contain the values "Bobby" and 105, respectively. If found, DataSet.getItemId() is used to get the unique identifier for that item, and DataSet.locateById() is used to position the current iterator at that item.

DataSet.loadFromSharedObj()

385

To test this example, drag a DataSet component to the Stage, and give it an instance name of student_ds. Add two properties, name (data type: String) and id (data type: Number) to the DataSet by using the Schema tab of the Component inspector. If you don’t already have a copy of the DataBindingClasses compiled clip in your library, drag a copy of the compiled clip from the Classes library (Window > Common Libraries > Classes). Add the following ActionScript to Frame 1 of the main timeline:
student_ds.addItem({name:"Barry", id:103}); student_ds.addItem({name:"Bobby", id:105}); student_ds.addItem({name:"Billy", id:107}); trace("Before find() > " + student_ds.currentItem.name); // Billy var studentID:String; student_ds.addSort("id", ["name","id"]); if (student_ds.find(["Bobby", 105])) { studentID = student_ds.getItemId(); student_ds.locateById(studentID); trace("After find() > " + student_ds.currentItem.name); // Bobby } else { trace("We lost Billy!"); }

See also
DataSet.addItem()

DataSet.getIterator()
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.getIterator()

Returns

A ValueListIterator object.

388

ActionScript 2.0 Components Dictionary

Description

Method; returns a new iterator for this collection; this iterator is a clone of the current iterator in use, including its current position in the collection. This method is mainly for advanced users who want access to multiple, simultaneous views of the same collection.
Example

The following example uses DataSet.find() to search for an item in the current collection whose name field contain the value "Bobby". Even though the myIterator iterator is pointing to Bobby’s record, the main iterator of student_ds still points to the last record, Billy. To test this example, drag a DataSet component to the Stage, and give it an instance name of student_ds. Add two properties, name (data type: String) and id (data type: Number) to the DataSet component by using the Schema tab of the Component inspector. If you don’t already have a copy of the DataBindingClasses compiled clip in your library, drag a copy of the compiled clip from the Classes library (Window > Common Libraries > Classes). Add the following ActionScript to Frame 1 of the main timeline:
import mx.data.to.ValueListIterator; student_ds.addItem({name:"Barry", id:103}); student_ds.addItem({name:"Bobby", id:105}); student_ds.addItem({name:"Billy", id:107}); var myIterator:ValueListIterator = student_ds.getIterator(); myIterator.sortOn(["name"]); myIterator.find({name:"Bobby"}).id = "999"; trace(student_ds.currentItem.name + " [" + student_ds.currentItem.id + "]"); // Billy [107] student_ds.addSort("id", ["name", "id"]); if (student_ds.find({name:"Bobby", id:999})) { student_ds.locateById(student_ds.getItemId()); trace(student_ds.currentItem.name + " [" + student_ds.currentItem.id + "]"); // Bobby [999] } else { trace("We lost Billy!"); }

DataSet.loadFromSharedObj()

385

DataSet.getLength()
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.getLength()

Returns

The number of items in the data set.
Description

Method; returns the number of items in the data set.
Example

The following example calls getLength():
//... var my_ds:mx.data.components.DataSet; my_ds = _parent.thisShelf.compactDiscs_ds; trace ("Data set size is: " + my_ds.getLength()); //...

DataSet.hasNext()
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.hasNext()

Returns

A Boolean value.

388

ActionScript 2.0 Components Dictionary

Description

Method; returns false if the current iterator is at the end of its view of the collection; otherwise, returns true.
Example

The following example iterates over all of the items in the current view of the collection (starting at its beginning) and performs a calculation on the price property of each item.
my_ds.addItem({name:"item a", price:16}); my_ds.addItem({name:"item b", price:9}); my_ds.first(); while (my_ds.hasNext()) { my_ds.currentItem.price *= 0.5; // Everything's 50% off! my_ds.next(); } for (var i in my_ds.items) { trace(my_ds.items[i].name + ": " + my_ds.items[i].price); }

See also
DataSet.currentItem, DataSet.first(), DataSet.next()

DataSet.hasPrevious()
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.hasPrevious()

Returns

A Boolean value.
Description

Method; returns false if the current iterator is at the beginning of its view of the collection; otherwise, returns true.

DataSet.loadFromSharedObj()

385

Example

The following example iterates over all the items in the current view of the collection (starting from the its last item) and performs a calculation on the price property of each item:
my_ds.addItem({name:"item a", price:16}); my_ds.addItem({name:"item b", price:9}); my_ds.last(); while (my_ds.hasPrevious()) { my_ds.currentItem.price *= 0.5; // Everything's 50% off! my_ds.previous(); } for (var i in my_ds.items) { trace(my_ds.items[i].name + ": " + my_ds.items[i].price); }

See also
DataSet.currentItem, DataSet.skip(), DataSet.previous()

DataSet.hasSort()
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.hasSort(sortName)

Parameters
sortName

A string that contains the name of a sort created with DataSet.addSort().

Returns

A Boolean value.
Description

Method; returns true if the sort specified by sortName exists; otherwise, returns false.

388

ActionScript 2.0 Components Dictionary

Example

The following code tests whether a sort named “nameSort” exists. If the sort already exists, it is made the current sort by means of DataSet.useSort(). If a sort by that name doesn’t exist, one is created by means of DataSet.addSort(). To test this example, drag a DataSet component and a List component to the Stage, and give them instance names of my_ds and my_list respectively. Add a binding between the dataProvider property of the DataSet component and the dataProvider property of the List component by using the Bindings tab of the Component inspector. Create two properties in the schema of my_ds DataSet by using the Schema tab of the Component inspector: name (data type: String) and years (data type: Number). Add the following code on Frame 1 of the main timeline:
import mx.data.components.datasetclasses.DataSetIterator; my_list.labelField = "name"; my_ds.addItem({name:"Milton", years:3}); my_ds.addItem({name:"Mark", years:3}); my_ds.addItem({name:"Sarah", years:1}); my_ds.addItem({name:"Michael", years:2}); my_ds.addItem({name:"Frank", years:2}); if (my_ds.hasSort("nameSort")) { my_ds.useSort("nameSort"); } else { my_ds.addSort("nameSort", ["name"], DataSetIterator.Descending); }

See also
DataSet.addSort(), DataSet.applyUpdates(), DataSet.useSort()

DataSet.isEmpty()
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.isEmpty()

Returns

A Boolean value.

DataSet.loadFromSharedObj()

385

Description

Method; returns true if the specified DataSet object doesn’t contain any items (that is, if dataSet.length == 0).
Example

The following code disables a Delete Record button (not shown) if the DataSet object it applies to is empty:
if (my_ds.isEmpty()) { delete_button.enabled = false; }

See also
DataSet.length

DataSet.items
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.items

Description

Property; an array of items managed by my_ds.
Example

The following example assigns an array of objects to the items property of a DataSet object:
var recData:Array = [{id:0, firstName:"Mick", lastName:"Jones"}, {id:1, firstName:"Joe", lastName:"Strummer"}, {id:2, firstName:"Paul", lastName:"Simonon"}]; my_ds.items = recData;

388

ActionScript 2.0 Components Dictionary

DataSet.itemClassName
Availability Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.itemClassName

Description

Property; a string indicating the name of the class that should be created when items are added to the collection. The class you specify must implement the TransferObject interface, shown below.
interface mx.data.to.TransferObject { function clone():Object; function getPropertyData():Object; function setPropertyData(propData:Object):Void; }

You can also set this property in the Property inspector. To make the specified class available at runtime, you must also make a fully qualified reference to this class somewhere in your SWF file’s code, as in the following code snippet:
var myItem:my.package.myItem;

A DataSetError exception is thrown if you try to modify the value of this property after the DataSet.items array has been loaded. For more information, see “TransferObject interface” on page 1233.

DataSet.iteratorScrolled
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage

Usage 1:

DataSet.loadFromSharedObj()

385

var listenerObject:Object = new Object(); listenerObject.iteratorScrolled = function (eventObj:Object) { // ... }; dataSetInstance.addEventListener("iteratorScrolled", listenerObject);

Usage 2:
on (iteratorScrolled) { // ... }

Description

Event; generated immediately after the current iterator has scrolled to a new item in the collection. The event object (eventObj) contains the following properties:
target type

The DataSet object that generated the event. The string "iteratorScrolled".

scrolled

A number that specifies how many items the iterator scrolled; positive values indicate that the iterator moved forward in the collection; negative values indicate that it moved backward in the collection.

Example

In the following example, the status bar of an application (not shown) is updated when the position of the current iterator changes:
my_ds.addItem({name:"Milton", years:3}); my_ds.addItem({name:"Mark", years:3}); my_ds.addItem({name:"Sarah", years:1}); my_ds.addItem({name:"Michael", years:2}); my_ds.addItem({name:"Frank", years:2}); my_ds.addEventListener("iteratorScrolled", iteratorScrolledListener); my_ds.first(); // Trigger the iteratorScrolled event. function iteratorScrolledListener(evt_obj:Object):Void { trace("The iterator was scrolled."); }

388

ActionScript 2.0 Components Dictionary

DataSet.last()
Availability Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.last()

Returns

Nothing.
Description

Method; makes the last item in the current view of the collection the current item.
Example

The following code, attached to a Button component, goes to the last item in the DataSet collection:
function goLast(evt_obj:obj):Void { inventory_ds.last(); } goLast_button.addEventListener("click", goLast);

The following example iterates over all the items in the current view of the collection (starting from the its last item) and performs a calculation on the price property of each item:
my_ds.addItem({name:"item a", price:16}); my_ds.addItem({name:"item b", price:9}); my_ds.last(); while (my_ds.hasPrevious()) { my_ds.currentItem.price *= 0.5; // Everything's 50% off! my_ds.previous(); } for (var i in my_ds.items) { trace(my_ds.items[i].name + ": " + my_ds.items[i].price); }

See also
DataSet.first()

DataSet.loadFromSharedObj()

385

DataSet.length
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.length

Description

Property (read-only); specifies the number of items in the current view of the collection. The viewable number of items is based on the current filter and range settings.
Example

In the following example, events are disabled before changes are made to items in the collection, so that the DataSet object won’t affect performance by trying to refresh controls:
my_ds.addEventListener("modelChanged", onModelChanged); function onModelChanged(evt_obj:Object):Void { trace("model changed, DataSet now has " + evt_obj.target.length + " items"); } // Disable events for the data set. my_ds.disableEvents(); my_ds.addItem({name:"Apples", price:14}); my_ds.addItem({name:"Bananas", price:8}); trace("Before:"); traceItems(); my_ds.last(); while(my_ds.hasPrevious()) { my_ds.price *= 0.5; // Everything's 50% off! my_ds.previous(); } trace("After:"); traceItems();

388

ActionScript 2.0 Components Dictionary

// Tell the dataset it's time to update the controls now. my_ds.enableEvents(); function traceItems(label:String):Void { for (var i:Number = 0; i < my_ds.length; i++) { trace("\t" + my_ds.items[i].name + " - $" + my_ds.items[i].price); } trace(""); }

DataSet.loadFromSharedObj()
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.loadFromSharedObj(objName, [localPath])

Parameters

A string specifying the name of the shared object to retrieve. The name can include forward slashes (for example, “work/addresses”). Spaces and the following characters are not allowed in the specified name:
objName ~ % & \ ; : " ' , < > ? # localPath

An optional string parameter that specifies the full or partial path to the SWF file that created the shared object. This string is used to determine where the object is stored on the user’s computer. The default value is the SWF file’s full path.

Returns

Nothing.
Description

Method; loads all of the relevant data needed to restore this DataSet collection from a shared object. To save a DataSet collection to a shared object, use DataSet.saveToSharedObj(). The DataSet.loadFromSharedObject() method overwrites any data or pending changes that might exist in this DataSet collection. Note that the instance name of the DataSet collection is used to identify the data in the specified shared object. This method throws a DataSetError exception if the specified shared object isn’t found or if there is a problem retrieving the data from it.

DataSet.loadFromSharedObj()

385

Example

The following example attempts to load a shared object named webapp/customerInfo associated with the data set named my_ds. The method is called within a try...catch code block.
import mx.data.components.datasetclasses.DataSetError; try { my_ds.loadFromSharedObj("webapp/customerInfo"); } catch(e:DataSetError) { trace("Unable to load shared object."); }

See also
DataSet.saveToSharedObj()

DataSet.locateById()
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.locateById(id)

Parameters
id

A string identifier for the item in the collection to be located.

Returns

A Boolean value.
Description

Method; positions the current iterator on the collection item whose ID matches id. This method returns true if the specified ID can be matched to an item in the collection; otherwise, it returns false.
Example

The following example uses DataSet.find() to search for an item in the current collection whose name and id fields contain the values "Bobby" and 105, respectively. If found, DataSet.getItemId() is used to get the unique identifier for that item, and DataSet.locateById() is used to position the current iterator at that item.

388

ActionScript 2.0 Components Dictionary

To test this example, drag a DataSet component to the Stage, and give it an instance name of student_ds. Add two properties, name (String) and id (Number) to the DataSet by using the Schema tab of the Component inspector. If you don’t already have a copy of the DataBindingClasses compiled clip in your library, drag a copy of the compiled clip from the Classes library (Window > Common Libraries > Classes). Add the following ActionScript to Frame 1 of the main timeline:
student_ds.addItem({name:"Barry", id:103}); student_ds.addItem({name:"Bobby", id:105}); student_ds.addItem({name:"Billy", id:107}); trace("Before find() > " + student_ds.currentItem.name); // Billy var studentID:String; student_ds.addSort("id", ["name","id"]); if (student_ds.find(["Bobby", 105])) { studentID = student_ds.getItemId(); student_ds.locateById(studentID); trace("After find() > " + student_ds.currentItem.name); // Bobby } else { trace("We lost Billy!"); }

See also
DataSet.applyUpdates(), DataSet.find(), DataSet.getItemId()

DataSet.logChanges
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.logChanges

Description

Property; a Boolean value that specifies whether changes made to the data set, or to its items, should (true) or should not (false) be recorded in DataSet.deltaPacket.

DataSet.loadFromSharedObj()

385

When this property is set to true, operations performed at the collection level and item level are logged. Collection-level changes include the addition and removal of items from the collection. Item-level changes include property changes made to items and method calls made on items by means of the DataSet component.
Example

The following example disables logging for the DataSet object named userData.
user_ds.logChanges = false;

See also
DataSet.deltaPacket

DataSet.modelChanged
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.
Description

Usage 1:
var listenerObject:Object = new Object(); listenerObject.modelChanged = function (eventObj:Object):Void { // ... }; dataSetInstance.addEventListener("modelChanged", listenerObject);

Usage 2:
on (modelChanged) { // ... }

Description

Event; broadcast when the collection changes in some way—for example, when items are removed or added to the collection, when the value of an item’s property changes, or when the collection is filtered or sorted. The event object (eventObj) contains the following properties:
target type

The DataSet object that generated the event. The string "iteratorScrolled".

388

ActionScript 2.0 Components Dictionary

firstItem

The index (number) of the first item in the collection that was affected by

the change.
lastItem

The index (number) of the last item in the collection that was affected by the change (equals firstItem if only one item was affected). A string that contains the name of the field being affected. This property is unless the change was made to a property of the DataSet object.

fieldName undefined eventName

A string that describes the change that took place. This can be one of the following values:
String value
"addItems" "filterModel"

Description
A series of items has been added. The model has been filtered, and the view needs refreshing (reset scroll position). A series of items has been deleted. The fields definition of the data provider has been declared. The data has been sorted. The entire view needs refreshing, excluding scroll position. An entire field’s definition in the data provider needs refreshing. A field in an item has been changed and needs refreshing. A series of items needs refreshing.

"removeItems" "schemaLoaded" "sort" "updateAll" "updateColumn" "updateField" "updateItems"

Example

In the following example, the modelChanged event gets dispatched whenever an item is added or removed from the data set:
my_ds.addEventListener("modelChanged", onModelChanged); function onModelChanged(evt_obj:Object):Void { trace("[event =" + evt_obj.eventName + "] the data set now has " + evt_obj.target.items.length + " items."); } my_ds.addItem({name:"Apples", price:14}); my_ds.addItem({name:"Bananas", price:8}); my_ds.removeItemAt(0);

In the following example, a Delete Item button is disabled if the items have been removed from the collection and the target DataSet object has no more items:
my_ds.addEventListener("modelChanged", onModelChanged); function onModelChanged(evt_obj:Object):Void { trace("model changed, DataSet now has " + evt_obj.target.items.length + " items"); }

DataSet.loadFromSharedObj()

385

// Disable events for the data set. my_ds.disableEvents(); my_ds.addItem({name:"Apples", price:14}); my_ds.addItem({name:"Bananas", price:8}); trace("Before:"); traceItems(); my_ds.last(); while (my_ds.hasPrevious()) { my_ds.price *= 0.5; // Everything's 50% off! my_ds.previous(); } trace("After:"); traceItems(); // Tell the dataset it's time to update the controls now. my_ds.enableEvents(); function traceItems(label:String):Void { for (var i:Number = 0; i < my_ds.items.length; i++) { trace("\t" + my_ds.items[i].name + " - $" + my_ds.items[i].price); } trace(""); }

See also
DataSet.isEmpty()

DataSet.newItem
Availability

Flash Player 7.
Edition

Flash MX Professional 2004.

388

ActionScript 2.0 Components Dictionary

Usage

Usage 1:
var listenerObject:Object = new Object(); listenerObject.newItem = function (eventObj:Object) { // ... }; dataSetInstance.addEventListener("newItem", listenerObject);

Usage 2:
on (newItem) { // ... }

Description

Event; broadcast when a new transfer object is constructed by means of DataSet.createItem(). A listener for this event can make modifications to the item before it is added to the collection. The event object (eventObj) contains the following properties:
target type item

The DataSet object that generated the event. The string "iteratorScrolled". A referenece to the item that was created.

Example

The following example makes modifications to a newly created item before it’s added to the collection:
function newItemEvent(evt_obj:Object):Void { var employee:Object = evt_obj.item; employee.name = "newGuy"; // Property data happens to be XML. employee.zip = employee.getPropertyData().firstChild.childNodes[1].attributes.zip; } employees_ds.addEventListener("newItem", newItemEvent);

DataSet.loadFromSharedObj()

385

DataSet.next()
Availability Flash Player 7.
Edition

Flash MX Professional 2004.
Usage
dataSetInstance.next()

Returns

Nothing.
Description

Method; makes the next item in the current view of the collection the current item. Which items are in the current view depends on any current filter and range settings.
Example

The following example iterates over all the items in the current view of the collection (starting at its beginning) and performs a calculation on the price property of each item:
my_ds.addItem({name:"item a", price:16}); my_ds.addItem({name:"item b", price:9}); my_ds.first(); while (my_ds.hasNext()) { my_ds.currentItem.price *= 0.5; // Everything's 50% off! my_ds.next(); } for (var i in my_ds.items) { trace(my_ds.items[i].name + ": " + my_ds.items[i].price); }

See also
DataSet.first(), DataSet.hasNext()

388

ActionScript 2.0 Components Dictionary

previous().last(). while (my_ds.price *= 0.hasPrevious()) { my_ds.DataSet. makes the previous item in the current view of the collection the current item.loadFromSharedObj() 385 .price). Which items are in the current view depends on any current filter and range settings. and performs a calculation on a field in each item: my_ds. Usage dataSetInstance. my_ds. Edition Flash MX Professional 2004. price:9}). Example The following example loops over each item in a data set and traces each item’s price: my_ds. Description Method. starting from the last item.5.hasPrevious()) { trace(my_ds.currentItem.previous() Availability Flash Player 7. price:16}). while (my_ds. } The following example loops over all the items in the current view of the collection.last(). DataSet. } See also DataSet.previous().addItem({name:"item a".hasNext() DataSet. my_ds. my_ds.first().addItem({name:"item b".previous() Returns Nothing. // Everything's 50% off! my_ds.

properties Description Property (read-only).readOnly Description Property. Usage dataSetInstance. Example The following example displays all the names of the properties in the DataSet object named my_ds: var i:String.properties Availability Flash Player 7.DataSet. 388 ActionScript 2. Edition Flash MX Professional 2004. Edition Flash MX Professional 2004.properties) { trace("field '" + i + "' has value " + my_ds. Setting this property to true prevents updates to the collection. returns an object that contains all of the exposed properties (fields) for any transfer object within this collection.0 Components Dictionary . The default value is false.properties[i]). a Boolean value that specifies whether this collection can be modified (false) or is read-only (true). } DataSet. Usage dataSetInstance.readOnly Availability Flash Player 7. for (i in my_ds.

trace("DataSetError >> " + e.message).removeAll() Availability Flash Player 7. try { // This throws an exception.removeAll().currentItem DataSet.readOnly = true.You can also set this property in the Property inspector.DataSetError. my_ds. } catch (e:DataSetError) { // Sort specified 'name' doesn’t exist for DataSet 'my_ds'.addItem({name:'Joe'}).removeAll() Returns Nothing.loadFromSharedObj() 385 . removes all items in the DataSet collection. Description Method. This attempt throws a DataSetError exception. } See also DataSet. and then attempts to change the value of a property that belongs to the current item in the collection.components. Example The following example makes the DataSet object named my_ds read-only.datasetclasses. import mx. Edition Flash MX Professional 2004. Example The following example removes all the items in the DataSet collection contact_ds: contact_ds. Usage dataSetInstance. DataSet. my_ds.data.

.. Usage 2: on (removeItem) { // . if you set it to true..addEventListener("removeItem". listenerObject). } Description Event. Usage Usage 1: var listenerObject:Object = new Object(). result A Boolean value that specifies whether the item should be removed. }. Edition Flash MX Professional 2004.. this value is true.0 Components Dictionary . 388 ActionScript 2. If you set the result property of the event object to false.removeItem Availability Flash Player 7. the delete operation is canceled. The event object (eventObj) contains the following properties: target type item The DataSet object that generated the event. By default. The string "removeItem". listenerObject. generated just before a new item is deleted from this collection.removeItem = function (eventObj:Object):Void { // . A reference to the item in the collection to be removed.DataSet. dataSetInstance. the delete operation is allowed.

price:9}).loadFromSharedObj() 385 . eventObj. user doesn't have admin privileges.userHasAdminPrivs()) { // Allow the item deletion. the deletion is allowed: on (removeItem) { if (globalObj. // change this to true to allow inserts } function removeItemListener(evt_obj:Object):Void { if (userHasAdminPrivs()) { // Allow the item removal.addItem DataSet. trace("Error. otherwise. eventObj.result = true. my_ds. evt_obj. } else { // Don't allow item removal. insufficient permissions").Example In the following example. evt_obj. } else { // Don’t allow the item deletion. trace("Item removed").result = false. my_ds. otherwise. my_ds.result = false.removeItemAt(0). user doesn’t have admin privileges. an on(removeItem) event handler cancels the deletion of the new item if a user-defined function named userHasAdminPrivs() returns false. } } my_ds. See also DataSet.addItem({name:"item b". } } The following removeItem event handler cancels the removal of the existing item if a userdefined function named userHasAdminPrivs() returns false. removeItemListener).result = true.addEventListener("removeItem". the item removal is allowed: function userHasAdminPrivs():Boolean { return false. price:16}).addItem({name:"item a".

trace(my_ds. my_ds. years:1}). // Frank my_ds. Returns A Boolean value. DataSet. and give it an instance name of my_ds. Returns true if the item was successfully removed.removeItem([item]) Parameters item The item to be removed.addItem({name:"Mark".deltaPacket.name).deltaPacket if DataSet. This parameter is optional. years:2}).name).addItem({name:"Milton". Edition Flash MX Professional 2004.removeItem(). Usage dataSetInstance. Example The following code removes the item at the current iterator position.removeItem() Availability Flash Player 7. or removes the current item if the item parameter is omitted.0 Components Dictionary . Description Method. // Michael See also DataSet. years:2}).addItem({name:"Sarah".addItem({name:"Michael". removes the specified item from the collection. years:3}). years:3}).logChanges is true.currentItem. add a DataSet component to the Stage.addItem({name:"Frank". // 4 trace(my_ds. returns false. my_ds.DataSet. To test this example. otherwise.getLength()). trace(my_ds.getLength()). my_ds. // 5 trace(my_ds. This operation is logged to DataSet. Add the following code to Frame 1 of the main timeline: my_ds. my_ds.currentItem.logChanges 388 ActionScript 2.

This number is the index of the item to remove. my_ds.loadFromSharedObj() 385 . the item is removed by default. years:3}).result = (evt_obj.addItem({name:"Michael". it triggers the DataSet. evt_obj. In addition.addItem({name:"Milton". the result property is set to true. years:3}).customerId != 0).removeItemAt(index) Parameters index A number greater than or equal to 0. years:2}).getLength()). } Example The following example removes an item from the data set at the first position: my_ds. my_ds. my_ds. // 5 DataSet.item. Edition Flash MX Professional 2004. The result property is used to determine if the item (referenced by the item property of the event) can be removed.addItem({name:"Frank". my_ds. Usage dataSetInstance. An event listener can stop the item from being removed by listening for the removeItem event and setting the result property of the event to false. The indices after the removed index collapse by one. as shown in the following example: function removeItem(evt_obj:Object):Void { // Don’t allow anyone to remove the item with customerId == 0.DataSet.removeItem event. removes the item at the specified index. This method triggers the modelChanged event with the event name removeItems. If no event listener is specified for the removeItem event. By default. years:1}). Returns A Boolean value indicating whether the item was removed. Description Method. years:2}). trace(my_ds. which contains the result and item properties.addItem({name:"Mark".addItem({name:"Sarah".removeItemAt() Availability Flash Player 7.

Example my_ds.setRange() for the current iterator. 105].next(). // Change all of the grades in this range. See also DataSet. // Frank my_ds. 110]). // Frank DataSet. while (my_ds. DataSet.next().hasNext(). removes the current end point settings specified by DataSet. DataSet. ["name".getLength()).currentItem.name).removeRange().hasNext()) { my_ds. Edition Flash MX Professional 2004. Description Method.removeRange() Availability Flash Player 7.removeSort().removeItemAt(0). Usage dataSetInstance.addSort("name_id". trace(my_ds. "id"]).applyUpdates(). my_ds. } my_ds.gradeLevel ="5".removeSort("name_id").setRange() 388 ActionScript 2.["Cathy".setRange(["Bobby".0 Components Dictionary . // 4 trace(my_ds. DataSet. my_ds. DataSet.removeRange() Returns Nothing.name). my_ds.trace(my_ds.currentItem.

Usage dataSetInstance. my_ds. and give it an instance name of my_ds. } DataSet. With the DataSet component selected. create three new properties in the schema of the DataSet component by using the Schema tab in the Component inspector. Description Method. ["Cathy". this method throws a DataSetError exception. id. while (my_ds.removeSort(sortName) Parameters sortName A string that specifies the name of the sort to remove. Example The following example creates a range of items in the DataSet component and modifies the gradeLevel property of each item.addItem({name:"Cathy". and Number respectively. Returns Nothing. my_ds. removes the specified sort from this DataSet object if the sort exists. 105]. gradeLevel:3}). Number. // Change all of the grades in this range.removeSort() Availability Flash Player 7.loadFromSharedObj() 385 . my_ds.hasNext()) { my_ds.addItem({name:"Mally". my_ds. gradeLevel:4}). Name the new properties name. id:112. my_ds. gradeLevel:4}). Edition Flash MX Professional 2004.addSort("name_id". id:106. and gradeLevel. my_ds.gradeLevel = "5".addItem({name:"Billy".DataSet.next().addItem({name:"Bobby". gradeLevel:4}). id:104. ["name".addItem({name:"Carrie". and give them the data types of String.setRange(["Bobby". gradeLevel:4}). 110]). id:105. "id"]). my_ds. id:110. To test this example. drag a DataSet component to the Stage. If the specified sort does not exist. Add a copy of the DataBindingClasses compiled clip from the Classes common library (Window > Common Libraries > Classes) and add the following ActionScript to Frame 1 of the main timeline: my_ds.

length..removeRange(). } Description Event. Usage Usage 1: var listenerObject:Object = new Object(). Edition Flash MX Professional 2004. DataSet.gradeLevel). }.. and that has messages associated with any of the deltas or DeltaItem objects contained by that delta packet. i++) { trace(my_ds.next().items[i]. dataSetInstance. } See also DataSet.. This event gives you the chance to reconcile any error returned from the server while attempting to apply changes previously submitted. allowing the user to make appropriate modifications to the data so that it can be re-sent. Typically.0 Components Dictionary .. DataSet. broadcast when DataSet. for (var i=0.hasNext(). you use this event to display a “reconcile dialog box” with the conflicting values.items[i].addEventListener("resolveDelta".setRange() DataSet.resolveDelta = function (eventObj:Object):Void { // . my_ds. 388 ActionScript 2.applyUpdates().name + " > " + my_ds. DataSet.resolveDelta Availability Flash Player 7.deltaPacket is assigned a delta packet whose transaction ID matches that of a delta packet previously retrieved from the DataSet object. listenerObject). DataSet. i<my_ds.my_ds. listenerObject.removeSort("name_id").removeRange(). Usage 2: on (resolveDelta) { // .

curValue+"].datasetclasses. var cl:Array. i<data.addEventListener("resolveDelta".newValue+"] Please fix!").length>0) { trace("The following problem occurred '"+msg+"' while performing a '"+ops[di. my_ds. i++) { cl = data[i]. j<cl. var ops:Array = ["property".setReconcileData(eventObj.kind]+"' modification on/with '"+di.name+"' current server value ["+di.data). j++) { di = cl[j]. // change list var msg:String. if (msg.loadFromSharedObj() 385 .visible = true. An array of deltas and associated DeltaItem objects that have nonzero length messages. Example The following example displays a form called reconcileForm (not shown) and calls a method on that form object (setReconcileData()) that allows the user to reconcile any conflicting values returned by the server: import mx. } } } } DataSet. for (var j = 0.components.message. "method"]. onResolveDelta).length.length. The string "resolveDelta". for (var i = 0.data. reconcileForm.*. } // in the reconcileForm code function setReconcileData(data:Array):Void { var di:DeltaItem. function onResolveDelta(eventObj:Object) { reconcileForm. value sent ["+di.The event object (eventObj) contains the following properties: target type data The DataSet object that generated the event.getChangeList(). msg = di.

: " ' . To restore a DataSet collection from a shared object. This string is used to determine where the object is stored on the user’s computer.DataSet.saveToSharedObj(objName.saveToSharedObj() Availability Flash Player 7. use DataSet. Spaces and the following characters are not allowed in the specified name: ~ % & \ . < > ? # localPath An optional string parameter that specifies the full or partial path to the SWF file that created the shared object. Returns Nothing. The default value is the SWF file’s full path. This allows users to work when disconnected from the source data. Edition Flash MX Professional 2004. saves all of the relevant data needed to restore this DataSet collection to a shared object. Description Method.0 Components Dictionary . If the shared object can’t be created or there is a problem flushing the data to it. this method throws a DataSetError exception. This method overwrites any data that might exist within the specified shared object for this DataSet collection. if it is a network resource. 388 ActionScript 2.loadFromSharedObj(). Usage dataSetInstance. Note that the instance name of the DataSet collection is used to identify the data within the specified shared object. “work/addresses”). The name can include forward slashes (for example. [localPath]) Parameters objName A string that specifies the name of the shared object to create.

.components.schema Availability Flash Player 7. } catch(e:DataSetError) { trace("Unable to create shared object”)..0"?> <properties> <property name="propertyName"> <type name="dataType" /> <encoder name="dataType"> <options> <dataFormat>format options</dataFormat> </options> </encoder> <kind name="dataKind"> </kind> </property> <property> .. DataSet.saveToSharedObj("webapp/customerInfo"). Edition Flash MX Professional 2004. </property> ..loadFromSharedObj() 385 . The XML assigned to this property must have the following format: <?xml version="1. </properties> A DataSetError exception is thrown if the XML specified does not follow the above format. try { my_ds.catch block and displays an error if there is a problem saving the data to the shared object.schema Description Property. provides the XML representation of the schema for this DataSet object.. Usage dataSetInstance. } See also DataSet.loadFromSharedObj() DataSet.datasetclasses.data. import mx.Example The following example calls saveToSharedObj() in a try.DataSetError.

. DataSet.selectedIndex = user_dg. see “Creating an application with the DataSet component” on page 355. Usage dataSetInstance. and vice versa.setIterator() Availability Flash Player 7.selectedIndex Availability Flash Player 7. Example The following example sets the selected index of a DataSet object (user_ds) to the selected index in a DataGrid component (user_dg). specifies the selected index in the collection. Edition Flash MX Professional 2004.selectedIndex. </ properties>").Example The following example sets the schema of the data set my_ds to a new XML object containing appropriately formatted XML: my_ds. DataSet.etc.selectedIndex Description Property.setIterator(iterator) 388 ActionScript 2.schema = new XML("<properties><property name="billable"> .0 Components Dictionary . You can bind this property to the selected item in a DataGrid or List component. Usage dataSetInstance.. Edition Flash MX Professional 2004. user_ds. For a complete example that demonstrates this.

See also DataSet. endValues Returns Nothing.to. DataSet.getIterator() on the DataSet object to which it is being assigned.setRange() Availability Flash Player 7.setRange(startValues.getIterator().setIterator(myIterator).ValueListIterator. Edition Flash MX Professional 2004. Returns Nothing.getIterator() DataSet. a DataSetError exception is thrown. Example import mx.data. otherwise. myIterator. my_ds. The specified iterator must come from a previous call to DataSet. the range. assigns the specified iterator to this DataSet object and makes it the current iterator. myIterator:ValueListIterator = my_ds.loadFromSharedObj() 385 .sortOn(["name"]).getIterator(). Usage dataSetInstance. endValues) Parameters startValues An array of key values of the properties of the first transfer object in An array of key values of the properties of the last transfer object in the range. Description Method.Parameters iterator An iterator object returned by a call to DataSet.

hasNext().name). my_ds.addItem({name:"Billy". Setting a range for the current iterator is more efficient than using a filter function if you want a grouping of values (see DataSet.setRange(["Bobby". This is only valid if a valid sort has been set for the current iterator by means of DataSet. } See also DataSet. my_ds.next(). id:112.addSort(). DataSet.["name".addSort().skip(offSet) Parameters offSet An integer specifying the number of records by which to move the iterator position. sets the end points for the current iterator. my_ds. "id"]). id:110. id:106.Cathy my_ds..addItem({name:"Carrie".next(). DataSet.addSort("name_id". gradeLevel:4}). my_ds. while (my_ds. // Bobby.filterFunc).hasNext()) { trace(my_ds.["Cathy". 105].removeRange(). my_ds. The end points define a range in which the iterator operates. DataSet. gradeLevel:4}). Edition Flash MX Professional 2004.removeSort() DataSet. gradeLevel:3}).addItem({name:"Bobby". 388 ActionScript 2. id:105.addItem({name:"Cathy".Description Method. DataSet. 110]).addItem({name:"Mally". Example The following example selects a range of students and traces each of their names to the Output panel: my_ds.0 Components Dictionary . gradeLevel:4}). gradeLevel:4}). id:104.skip() Availability Flash Player 7. my_ds. Usage dataSetInstance.

order) Parameters sortName order A string that contains the name of the sort to use.name).addItem({name:"Cathy".Descending. gradeLevel:3}). Positive offSet values move the iterator’s position forward.addItem({name:"Carrie". negative values move it backward.useSort(sortName.useSort() Availability Flash Player 7. moves to the next-to-last item. gradeLevel:4}). An integer value that indicates the sort order for the sort. Usage dataSetInstance. Description Method.skip(itemsToSkip). and performs a calculation on a field belonging to that item: my_ds. id:112. the value must be DataSetIterator. trace(my_ds. gradeLevel:4}). my_ds. the iterator is positioned at the beginning (or end) of the collection. my_ds.currentItem. my_ds.currentItem. Edition Flash MX Professional 2004.loadFromSharedObj() 385 .addItem({name:"Mally". DataSet.addItem({name:"Bobby". my_ds. // Billy my_ds. Example The following example positions the current iterator at the first item in the collection. moves the current iterator’s position forward or backward in the collection by the amount specified by offSet. id:110. id:106. gradeLevel:4}).Returns Nothing.addItem({name:"Billy". If the specified offset is beyond the beginning (or end) of the collection. gradeLevel:4}). trace(my_ds. // Mally DataSet.Ascending or DataSetIterator. my_ds.name). id:104. id:105. var itemsToSkip:Number = 3.first().

} else { my_ds. Example The following example uses DataSet.useSort() to make "customer" the current sort.hasSort() to determine if a sort named "customer" exists. DataSetIterator.addSort(). Description Method. ["customer"].applyUpdates(). To create a sort.Descending).useSort("customer"). } See also DataSet. if it exists. if (my_ds.hasSort() 388 ActionScript 2.hasSort("customer")) { my_ds. use DataSet.0 Components Dictionary . DataSet. If it does. switches the sort for the current iterator to the one specified by sortName. the code calls DataSet.addSort(). the code creates a sort by that name using DataSet. a DataSetError exception is thrown.addSort("customer". Otherwise. If the specified sort does not exist.Returns Nothing.

The date field is cleared when a user selects the same date twice. a date chooser pops up and displays the dates in the month of the selected date.0 in its Publish Settings. users can use the month scroll buttons to scroll through months and years and select a date. the date chooser closes and the selection is entered in the date field. NOTE TI P 15 The DateField component is supported only if you are working in a document that specifies ActionScript 2.selectedDate on page 455.CHAPTER 15 DateField component The DateField component is a nonselectable text field that displays the date with a calendar icon on its right side. When a user clicks anywhere inside the bounding box of the date field. see the example for DateField. To prevent users from accidentally deselecting their desired date. The live preview of the DateField component does not reflect the values indicated by the Property inspector or Component inspector during authoring. When the date chooser is open. 429 . When a date is selected. because it is a pop-up component that is not visible during authoring. the text field is blank and the month of today’s date is displayed in the date chooser. If no date has been selected.

methods. such as performances or meetings. so all Mondays must be disabled for those flights. which is "S" for sunday. "T".Using the DateField component The DateField component can be used anywhere you want a user to select a date. The default value is true. The default value is 0. You can write ActionScript to control these and additional options for the DateField component using its properties. The value is an array and the default value is ["January". For more information. "February". when a user chooses a date. showToday indicates whether to highlight today’s date. This parameter is an array that can have up to seven values. firstDayOfWeek dayNames monthNames sets the month names that are displayed in the heading row of the calendar. "July". This property changes the display order of the day columns. "W". You could also use the DateField component in an application that displays current events. "August". sets the names of the days of the week. "T". some flights are not available on Mondays. "December"]. "September". "October". you could use a DateField component in a hotel reservation system with certain dates selectable and others disabled. with 0 being the first element of array) is displayed in the first column of the date chooser."November". 430 DateField component . indicates which day of the week (0-6. "S"]. In this example. Also. "May". "F". "March". a 15-day range in December must be disabled to create a holiday black-out period. For example. The value is an array and the default value "M". All dates before today’s date must be disabled. Creating an application with the DateField component The following procedure explains how to add a DateField component to an application while authoring. "April". DateField parameters You can set the following authoring parameters for each DateField component instance in the Property inspector or in the Component inspector: dayNames is ["S". the DateField component allows a user to pick a date for an airline reservation system. see “DateField class” on page 435. disabledDays indicates the disabled days of the week. Also. "June". The default value is [] (an empty array). and events.

6. 9. 31)}.disabledDays=[1]. This adds the component to the library. 7. Select File > New and choose Flash File (ActionScript 2. 1). In the Actions panel.selectableRange = {rangeStart:new Date(2001.createClassObject() to create the DateField instance. 4.controls. rangeEnd:new Date(2003.DateField. 16)}]. Select Control > Test Movie. 1)}. 11. enter the instance name flightCalendar.0). Control > Test Movie. enter the following code on Frame 1 of the timeline to disable Mondays: flightCalendar. Double-click the DateField component in the Components panel to add it to the Stage. one during December. 11. In the Actions panel. Select File > New and choose Flash File (ActionScript 2. {rangeEnd: new Date(2003.disabledRanges = [{rangeStart: new Date(2003. 6. 11. This code assigns a value to the selectableRange property in an ActionScript object that contains two Date objects with the variable names rangeStart and rangeEnd. In the Actions panel. Drag the DateField component from the Components panel to the current document’s library. To create a DateField component instance using ActionScript: 1. enter the following code on Frame 1 of the timeline to set the ranges of disabled dates.createClassObject(mx. 3. Using the DateField component 431 . 2. "my_df". and enter the following code: this. 2. enter the following code on Frame 1 of the timeline to set the range of selectable dates: flightCalendar.To create an application with the DateField component: 1. 5. 3.0). Select the first frame in the main Timeline. This defines an upper and lower end of a range within which the user can select a date. and one for all dates before the current date: flightCalendar. rangeEnd: new Date(2003. In the Property inspector. 15). but doesn’t make it visible in the application. This script uses the method UIObject. 1). 4. open the Actions panel.

setSize()). This border cannot be modified through styles or skinning. The background color for the today’s date. select the component on the Stage and use the Free Transform tool or any of the Modify > Transform commands. see “Using styles to customize component color and text” in Using ActionScript 2. The default value is a 0xCDFFC1 (light green) with the Halo theme and 0xEEEEEE (very light gray) with the Sample theme. Possible values are "haloGreen". For more information. The default value is "haloGreen" The background color. The default value is 0xEFEBEF (light gray). you can use the pullDown property to access the DateChooser component and set its dimensions. The default value is 0x919999. At runtime. use the setSize() method (see UIObject. The default color is white.Customizing the DateField component You can transform a DateField component horizontally while authoring and at runtime. The default value is 0xE3FFD6 (bright green) with the Halo theme and 0xAAAAAA (light gray) with the Sample theme. The background color of the selected date. The DateField component’s drop-down list uses a solid single-pixel line as its border. Using styles with the DateField component You can set style properties to change the appearance of a date field instance. and "haloOrange". Setting the width does not change the dimensions of the date chooser in the DateField component. While authoring. The default value is 0x666666 (dark gray). However. "haloBlue". The border color. The DateField component supports the following styles: Style themeColor Theme Halo Description The glow color for the rollover and selected dates.0 Components. backgroundColor Both Both borderColor headerColor Both Both The background color for the drop-down heading. it is a color style property and behaves differently than noncolor style properties. rollOverColor selectionColor Both todayColor Both 432 DateField component . The background color of a rolled-over date. If the name of a style property ends in “Color”.

The point size for the font. The default color is 0x848384 (dark gray). The text style properties set on the DateField component itself control the regular date text and the text displayed in the collapsed state.styles. no text is displayed.setStyle("color". A Boolean value that indicates whether the font specified in fontFamily is an embedded font. To set text styles for specific categories of text. All components can also accept the value "normal" in place of "none" during a setStyle() call. 0x660000). 0x660000).WeekDayStyle. The text decoration: either "none" or "underline". Today’s date. today’s date. and provide defaults for the other text.setStyle("color". _global. Declaration name HeaderDateText WeekDayStyle TodayStyle Description The month name. Customizing the DateField component 433 . The default value is "_sans". The default value is 0x0B333C with the Halo theme and blank with the Sample theme. disabledColor embedFonts fontFamily fontSize fontStyle Both Both Both Both fontWeight textDecoration Both The DateField component uses four categories of text to display the month name. The default value is "normal". The default value is 10. The font name for text. The default value is "none". The days of the week. The following example demonstrates how to set the month name and days of the week to a deep red color. but subsequent calls to getStyle() return "none". use the following class-level style declarations.styles. If this style is set to true and fontFamily does not refer to an embedded font. The font weight: either "none" or "bold". the embedded font is not used. the days of the week. The default value is false. Otherwise. The font style: either "normal" or "italic". and regular dates. The default value is "none". The color for text when the component is disabled.Style color Theme Both Both Both Description The text color. This style must be set to true if fontFamily refers to an embedded font. _global.HeaderDateText.

see “RectBorder class” on page 1065 and “Using skins with the DateChooser component” on page 336. 4. To skin the pop-up icon while authoring. 9. Expand the DateField Assets/States folder in the library of your document. and a DateChooser instance for the pop-up. For example. This file is located in the application-level configuration folder. Select File > New and choose Flash File (ActionScript 2. For information about skinning the RectBorder and DateChooser instances. Customize the symbol as desired. 7. draw a down arrow over the calendar image. The disabled state of the pop-up icon. Make sure that the DateFieldAssets symbol is selected for Export in First Frame.fla file. 8.0 Components. For the exact location on your operating system. Open the symbols that you want to customize for editing. modify skin symbols in the Flash UI Components 2/Themes/MMDefault/DateField Assets/States folder in the library of one of the themes’ FLA files. The down state of the pop-up icon. open the openIconUp symbol. the Back button to return to the main timeline. 3. Click 434 DateField component . Expand the DateField Assets folder in the library of your document. expand the Flash UI Components 2/Themes/MMDefault folder and drag the DateField Assets folder to the library of your document. For more information. To create movie clip symbols for DateField skins: 1. 2. Select File > Import > Open External Library and then select the HaloTheme.0 Components.0). draw a down arrow over all of the symbols. see “About themes” in Using ActionScript 2. 10. 6.Using skins with the DateField component The DateField component uses skins to represent the visual states of the pop-up icon. Repeat steps 7-8 for all symbols that you want to customize. For example. In addition to the skins used by the subcomponents mentioned earlier. a DateField component uses the following skin properties to dynamically skin the pop-up icon: Property openDateUp openDateDown openDateOver openDateDisabled Description The up state of the pop-up icon. The over state of the pop-up icon. In the theme’s Library panel. For example. 5. see “About skinning components” in Using ActionScript 2. a RectBorder instance for the border around the text input.

Setting a property of the DateField class with ActionScript overrides the parameter of the same name set in the Property inspector or Component inspector. and indicate whether the current date should be highlighted. Method DateField. NO TE The code trace(myDateFieldInstance. returns undefined.close() DateField.version). DateField class 435 . Each component class has a version property. Opens the pop-up DateChooser subcomponent.controls.DateField. Select DateField class Inheritance MovieClip > UIObject class > UIComponent class > ComboBase > DateField mx. which is a class property. Drag a DateField component to the Stage. Control > Test Movie.version). indicate disabled dates and selectable dates. Method summary for the DateField class The following table lists methods of the DateField class.DateField ActionScript Class Name The properties of the DateField class let you access the selected date and the displayed month and year. use the following code: trace(mx.controls.11. Class properties are available only on the class itself. You can also set the names of the days and months. set the first day of the week. 12. The version property returns a string that indicates the version of the component.open() Description Closes the pop-up DateChooser subcomponent. To access this property.

Destroys a component instance. Sets the style property on the style declaration or object.destroyObject() Creates a subobject on an object.move() UIObject. Sets a skin in the object.Methods inherited from the UIObject class The following table lists the methods the DateField class inherits from the UIObject class. When calling these methods from the DateField object. use the form dateFieldInstance.methodName. Gets the style property from the style declaration or object.getFocus() UIComponent.methodName.redraw() UIObject.setSkin() UIObject. UIObject.getStyle() UIObject. UIObject.setStyle() Methods inherited from the UIComponent class The following table lists the methods the DateField class inherits from the UIComponent class. Sets focus to the component instance. Moves the object to the requested position. Method Description UIObject.createObject() UIObject.setSize() UIObject. Method UIComponent. Forces validation of the object so it is drawn in the current frame. use the form dateFieldInstance. Marks the object so it is redrawn on the next frame interval. Calls a function when parameters have been set in the Property and Component inspectors. When calling these methods from the DateField object.setFocus() Description Returns a reference to the object that has focus.doLater() UIObject.invalidate() UIObject. Resizes the object to the requested size.createClassObject() Creates an object on the specified class. 436 DateField component .

firstDayOfWeek DateField. The left edge of the object.pullDown DateField. Property DateField. A number indicating an element in the dayNames array to display in the first column of the DateField component. UIObject. A single selectable date or a range of selectable dates.left UIObject.selectableRange DateField.showToday Properties inherited from the UIObject class The following table lists the properties the DateField class inherits from the UIObject class. Read-only. This property is read-only. DateField. relative to the bottom edge of its parent.propertyName.Property summary for the DateField class The following table lists properties of the DateField class.displayedMonth DateField. The position of the right edge of the object.dateFormatter Description A function that formats the date to be displayed in the text field. Read-only. use the form dateFieldInstance. A reference to the DateChooser subcomponent.right DateField class 437 . An array of strings indicating the month names. A range of disabled dates or a single disabled date. Read-only.displayedYear DateField. A number indicating which element in the monthNames array to display. The height of the object. A Boolean value indicating whether the current date is highlighted. Property UIObject. Read-only.disabledDays DateField. An array indicating the disabled days of the week.disabledRanges DateField. in pixels.selectedDate DateField. in pixels. A Date object indicating the selected date.dayNames DateField. relative to the right edge of its parent. When accessing these properties from the DateField object. An array indicating the names of the days of the week. A number indicating the year to display.monthNames DateField.height UIObject.bottom Description The position of the bottom edge of the object.

relative to its parent. 438 DateField component .propertyName. relative to its parent.close DateField. The left edge of the object.Property UIObject. relative to its parent. use the form dateFieldInstance. in pixels.scroll Description Broadcast when a date is selected.scaleY UIObject.top UIObject. The top edge of the object. Event DateField. A number indicating the tab order for a component in a document.scaleX Description A number indicating the scaling factor in the x direction of the object. The position of the top edge of the object.x UIObject. Broadcast when the DateChooser subcomponent closes. Broadcast when the DateChooser subcomponent opens. UIObject. Broadcast when the month buttons are clicked.tabIndex Event summary for the DateField class The following table lists events of the DateField class.change DateField. in pixels.enabled Description Indicates whether the component can receive focus and input. Read-only. When accessing these properties from the DateField object.visible UIObject.y Properties inherited from the UIComponent class The following table lists the properties the DateField class inherits from the UIComponent class. Read-only. The width of the object. A Boolean value indicating whether the object is visible (true) or not (false). in pixels. A number indicating the scaling factor in the y direction of the object. UIComponent. Property UIComponent. Read-only. Read-only.width UIObject.open DateField.

reveal UIObject. UIObject. Broadcast when the object has moved. Broadcast when an object’s state changes from invisible to visible.draw UIObject. Broadcast when a key is released.resize Description Broadcast when an object is about to draw its graphics. Broadcast when an object loses focus.move UIObject. Broadcast when the subobjects are being unloaded. Event UIComponent. Broadcast when subobjects are being created. DateField class 439 . Broadcast when a key is pressed.focusOut UIComponent.Events inherited from the UIObject class The following table lists the events the DateField class inherits from the UIObject class. Event UIObject.keyUp Description Broadcast when an object receives focus. Broadcast when an object’s state changes from visible to invisible.hide UIObject.load UIObject.focusIn UIComponent. Broadcast when an object has been resized.keyDown UIComponent.unload Events inherited from the UIComponent class The following table lists the events the DateField class inherits from the UIComponent class.

0. dateFieldInstance...change = function(eventObject:Object) { // . The first usage example uses a dispatcher/listener event model. You can use these properties to write code that handles the event. Usage Usage 1: var listenerObject:Object = new Object().addEventListener() method on the component instance that broadcasts the event to register the listener with the instance. listenerObject). the method is called when the event is triggered. }. also called a handler. } Description Event.my_df ” to the Output panel: on (change) { trace(this). you call the EventDispatcher.addEventListener("change". For more information. When the instance dispatches the event. You define a method with the same name as the event on the listener object. Finally. on a listener object (listenerObject) that you create. The keyword this. change) and the event is handled by a function. the listener is called. listenerObject. used inside an on() handler attached to a component. broadcast to all registered listeners when a date is selected.. refers to the component instance. Each event object has properties that contain information about the event. For example. Edition Flash MX Professional 2004. } 440 DateField component .79. attached to the date field my_df.0). it automatically passes an event object (eventObject) to the listener object method. The second usage example uses an on() handler and must be attached directly to a DateField instance. A component instance (dateFieldInstance) dispatches an event (in this case.change Availability Flash Player 6 (6. Usage 2: on (change) { // . see “EventDispatcher class” on page 495. the following code.DateField. When the event is triggered.. sends “_level0.

addEventListener("change". my_df. closes the pop-up menu. The DateField. Inside the function is a trace() statement that uses the event object that is automatically passed to the function. dfListener. var dfListener:Object = new Object(). // Create listener object.change = function(evt_obj:Object){ var thisDate:Date = evt_obj. The first line of code creates a listener object called dfListener.0). my_df. trace("date selected: " + thisDate). Edition Flash MX Professional 2004.close() Returns Nothing.79.close() Availability Flash Player 6 (6. dfListener).target. The last line calls EventDispatcher. } // Add listener object to DateField.selectedDate. written on a frame of the timeline. DateField. Usage dateFieldInstance. The second line defines a function for the change event on the listener object. DateField. in this example evt_obj. The target property of an event object is the component that generated the event—in this example. Description Method. sends a message to the Output panel when a date field called my_df is changed. to generate a message.Example The following example.close() 441 .addEventListener() from my_df and passes it the change event and the dfListener listener object as parameters.selectedDate property is accessed from the event object’s target property.0.

.click = function() { my_df.0. 442 DateField component .addEventListener("close".close = function(eventObject:Object) { // ... btnListener). DateField.0). }.79.close(). listenerObject). broadcast to all registered listeners when the DateChooser subcomponent closes after a user clicks outside the icon or selects a date.. Usage 2: on (close) { // . } Description Event. my_btn.Example The following code closes the date chooser pop-up of the my_df date field instance when the button my_btn is clicked: //Create listener object. }. Edition Flash MX Professional 2004. dateFieldInstance. listenerObject.addEventListener("click". var btnListener:Object = new Object(). //Add Button listener. btnListener.close Availability Flash Player 6 (6. Usage Usage 1: var listenerObject:Object = new Object().

The second usage example uses an on() handler and must be attached directly to a DateField instance. written on a frame of the timeline. //Create listener object. sends a message to the Output panel when the date chooser in my_df closes. The target property of an event object is the component that generated the event—in this example. it automatically passes an event object (eventObject) to the listener object method. Finally. The second line defines a function for the close event on the listener object. DateField. For more information.addEventListener() from my_df and passes it the close event and the dfListener listener object as parameters. When the event is triggered.selectedDate). dfListener. dfListener). When the instance dispatches the event. see “EventDispatcher class” on page 495. The selectedDate property is accessed from the event object’s target property. close) and the event is handled by a function. my_df. used inside an on() handler attached to a component. in this example evt_obj.my_df ” to the Output panel: on (close) { trace(this). the method is called when the event is triggered. sends “_level0.close 443 .addEventListener() method on the component instance that broadcasts the event to register the listener with the instance. The first line of code creates a listener object called dfListener. var dfListener:Object = new Object(). to generate a message.target. } Example The following example. my_df. the listener is called. The keyword this. also called a handler. refers to the component instance. The last line calls EventDispatcher. attached to the date field my_df.close = function(evt_obj:Object){ trace("PullDown Closed" + evt_obj. Each event object has properties that contain information about the event. you call the EventDispatcher. on a listener object (listenerObject) that you create.The first usage example uses a dispatcher/listener event model.addEventListener("close". the following code. For example. You can use these properties to write code that handles the event. } //Add listener object to DateField. Inside the function is a trace() statement that uses the event object that is automatically passed to the function. You define a method with the same name as the event on the listener object. A component instance (dateFieldInstance) dispatches an event (in this case.

DateField. DateField. 444 DateField component .getMonth()+1)+"/ "+d. }. Usage dateFieldInstance.79.getFullYear()+"/ "+(d. Example The following example sets the function to return the format of the date to be displayed: my_df. "W".getDate(). "M".dateFormatter Description Property.0.0. an array containing the names of the days of the week.dateFormatter Availability Flash Player 6 (6. Edition Flash MX Professional 2004.dayNames Availability Flash Player 6 (6. "T".dateFormatter = function(d:Date){ return d.79. "S"]. The function must receive a Date object as parameter. Sunday is the first day (at index position 0) and the other day names follow in order.0). a function that formats the date to be displayed in the text field. The default value is ["S". Edition Flash MX Professional 2004.0). "F". Usage dateFieldInstance.dayNames Description Property. "T". and return a string in the format to be displayed.

The default value is [] (an empty array).disabledRanges 445 .disabledRanges Availability Flash Player 6 (6. "Th".disabledDays Availability Flash Player 6 (6. Edition Flash MX Professional 2004. accordingly: my_df.disabledRanges DateField. Usage dateFieldInstance. The following example changes the value of all the days.Example The following example changes the value of the fifth day of the week (Thursday) from “T” to “R”: my_df.79. an array indicating the disabled days of the week. Edition Flash MX Professional 2004. "We".disabledDays = [0. "Tu". Example The following example disables Sundays and Saturdays so that users can select only weekdays: my_df.0.0). The elements of this array can have values between 0 (Sunday) and 6 (Saturday). 6]. Usage dateFieldInstance. "Fr".0. All the dates in a month that fall on the specified day are disabled. DateField.79.dayNames = new Array("Su".dayNames[4] = "R". "Sa"). DateField. "Mo".0).disabledDays Description Property.

0).24) rather than new Date(). The following example disables all dates after November 7: my_df. The following example disables only December 7: my_df. Specify a full date when you define dates for the disabledRanges property—for example. 7) ]. 7)}]. The rangeStart and rangeEnd properties describe the boundaries of the date range.displayedMonth 446 DateField component .Description Property. 7)} ].disabledRanges = [ new Date(2003. Example The following example defines an array with rangeStart and rangeEnd Date objects that disable the dates between May 7 and June 7: my_df. new Date(2003. each of whose value must be a Date object. 11. 11. DateField. rangeEnd: new Date(2003.disabledRanges = [ {rangeStart: new Date(2003. The default value of disabledRanges is undefined. 4.displayedMonth Availability Flash Player 6 (6. the range is unbounded in that direction. 7)} ]. new Date(2003.disabledRanges = [ {rangeStart: new Date(2003. Edition Flash MX Professional 2004. 7).6. The following example disables all dates before October 7: my_df. The following example disables December 7 and December 20: my_df. the time returns as 00:00:00. 7).79. This property is an array of objects. If you don’t specify a full date. 11. 9.disabledRanges = [ {rangeEnd: new Date(2002. 20)]. Each object in the array must be either a Date object specifying a single day to disable. If either property is omitted. 10. or an object containing either or both of the properties rangeStart and rangeEnd. disables a single day or a range of days.disabledRanges = [ new Date(2003. 5.0. Usage dateFieldInstance.

Example The following example sets the displayed month to December: my_df.displayedYear Description Property.Description Property. The default value is the current year. a number indicating which month is displayed. with 0 being the first month. See also DateField.displayedYear 447 .displayedYear DateField.displayedYear = 2010. See also DateField. a number indicating which year is displayed. Usage dateFieldInstance. Edition Flash MX Professional 2004. The default value is the month of the current date. Example The following example sets the displayed year to 2010: my_df.displayedYear Availability Flash Player 6 (6.displayedMonth DateField.displayedMonth = 11.0). The number indicates an element in the monthNames array.79.0.

The default value is ["January".0.dayNames DateField. Edition Flash MX Professional 2004. Changing this property changes the order of the day columns but has no effect on the order of the dayNames property.0.firstDayOfWeek = 1.0).firstDayOfWeek Availability Flash Player 6 (6. Usage dateFieldInstance.DateField. "December"]. "May". Edition Flash MX Professional 2004. an array of strings indicating the month names at the top of the DateField component. 0 being the first element of the dayNames array) is displayed in the first column of the DateField component. "November".79. Usage dateFieldInstance.0). 448 DateField component . "February". "July".79. "June".monthNames Availability Flash Player 6 (6.firstDayOfWeek Description Property. "March". "October". "August". See also DateField. "April". a number indicating which day of the week (0-6. Example The following example sets the first day of the week to Monday: my_df. The default value is 0 (Sunday). "September".monthNames Description Property.

"Mar". btnListener. Description Method."Apr". var btnListener:Object = new Object().open() 449 . "Feb".open() Returns Nothing.addEventListener("click". DateField."July". "May".open() Availability Flash Player 6 (6. my_btn. }. DateField. Edition Flash MX Professional 2004. //Add Button listener. "Dec"].0).79.Example The following example sets the month names for the instance my_df: my_df. Usage dateFieldInstance."Oct".open(). "Sept". btnListener). Example The following code opens the date chooser pop-up of the my_df date field instance when the button my_btn is clicked: //Create listener object. "Nov". opens the pop-up DateChooser subcomponent.0.click = function() { my_df. "Aug". "June".monthNames = ["Jan".

addEventListener() method on the component instance that broadcasts the event to register the listener with the instance. Usage 2: on (open) { // . } Description Event.79..addEventListener("open". Finally. you call the EventDispatcher. broadcast to all registered listeners when a DateChooser subcomponent opens after a user clicks the icon. Usage Usage 1: var listenerObject:Object = new Object(). When the event is triggered. dateFieldInstance. the method is called when the event is triggered. open) and the event is handled by a function. on a listener object (listenerObject) that you create. You can use these properties to write code that handles the event. listenerObject. A component instance (dateFieldInstance) dispatches an event (in this case. also called a handler..0).open Availability Flash Player 6 (6.open = function(eventObject:Object) { // .. the listener is called. The first usage example uses a dispatcher/listener event model. listenerObject). When the instance dispatches the event. Each event object has properties that contain information about the event.. }.0. Edition Flash MX Professional 2004. For more information. You define a method with the same name as the event on the listener object. see “EventDispatcher class” on page 495. 450 DateField component . it automatically passes an event object (eventObject) to the listener object method.DateField.

Inside the function is a trace() statement that uses the event object that is automatically passed to the function.open = function(evt_obj:Object){ trace("PullDown Opened" + evt_obj.addEventListener("open".pullDown DateField. DateField. For example. sends “_level0.79.pullDown 451 . written on a frame of the timeline.selectedDate property is accessed from the event object’s target property. Usage dateFieldInstance. The target property of an event object is the component that generated the event—in this example. The message ends with the index number for the current month. dfListener). var dfListener:Object = new Object(). attached to the date field my_df. The keyword this. refers to the component instance.my_df ” to the Output panel: on (open) { trace(this). to generate a message. The second line defines a function for the open event on the listener object. // Create listener object. my_df. used inside an on() handler attached to a component. Edition Flash MX Professional 2004. dfListener. sends a message to the Output panel when a date field called my_df is opened. the following code. The last line calls EventDispatcher.pullDown Availability Flash Player 6 (6.0.The second usage example uses an on() handler and must be attached directly to a DateField instance. } // Add listener object to DateField. in this example evt_obj. The DateField.target. The first line of code creates a listener object called dfListener. my_df.displayedMonth). } Example The following example.addEventListener() from my_df and passes it the open event and the dfListener listener object as parameters.0).

the DateChooser is instantiated and then hidden.setSize(300. Usage Usage 1: var listenerObject:Object = new Object(). DateField.Description Property (read-only). Usage 2: on (scroll) { // . However. my_df. }. Example The following example sets the visibility of the DateChooser subcomponent to false and then sets the size of the DateChooser subcomponent to 300 pixels high and 300 pixels wide: my_df.0). The DateChooser subcomponent is instantiated when a user clicks on the DateField component..79._visible = false. broadcast to all registered listeners when a month button is clicked.0. listenerObject. if the pullDown property is referenced before the user clicks on the component. 452 DateField component . } Description Event. a reference to the DateChooser component contained by the DateField component.pullDown..pullDown.scroll = function(eventObject:Object) { // . dateFieldInstance. listenerObject). 300)...addEventListener("scroll". Edition Flash MX Professional 2004.scroll Availability Flash Player 6 (6.

}. sends “_level0. nextYear.scroll = function(evt_obj:Object) { trace(evt_obj. my_df The last line calls EventDispatcher. The second usage example uses an on() handler and must be attached directly to a DateField instance. the following code. dfListener). to generate a message. The scroll event’s event object has an additional property. The target property of an event object is the component that generated the event—in this example. Finally. refers to the component instance. Inside the function is a trace() statement that uses the event object that is automatically passed to the function. in this example evt_obj. that can have one of the following values: nextMonth.scroll 453 . previousYear. } Example The following example. You define a method with the same name as the event on the listener object. dfListener. var dfListener:Object = new Object(). The first line of code creates a listener object called dfListener. scroll) and the event is handled by a function. attached to the date field my_df. written on a frame of the timeline.addEventListener() method on the component instance that broadcasts the event to register the listener with the instance. also called a handler. Each event object has properties that contain information about the event. When the event is triggered. the listener is called.addEventListener() from my_df and passes it the scroll event and the dfListener listener object as parameters. // Add listener object to DateField. The second line defines a function for the scroll event on the listener object. you call the EventDispatcher. on a listener object (listenerObject) that you create. A component instance (dateFieldInstance) dispatches an event (in this case.detail). You can use these properties to write code that handles the event. it automatically passes an event object (eventObject) to the listener object method. DateField. my_df. the method is called when the event is triggered. detail. // Create listener object.addEventListener("scroll".my_df ” to the Output panel: on (scroll) { trace(this). previousMonth. For example. used inside an on() handler attached to a component. see “EventDispatcher class” on page 495. The keyword this. When the instance dispatches the event. sends a message to the Output panel when a user clicks a month button on a DateField instance called my_df.The first usage example uses a dispatcher/listener event model. For more information.

For example. all the dates after rangeStart are enabled. If only rangeStart is defined.0). The values of DateField.selectedDate is set to undefined if it falls outside the selectable range. If you want to enable only a single day.displayedMonth and DateField.displayedYear are set to the nearest last month in the selectable range if the current month falls outside the selectable range.DateField. The default value is undefined. if the current displayed month is August. Specify a full date when you define dates—for example.6. The rangeStart and rangeEnd properties designate the boundaries of the selectable date range. Usage dateFieldInstance. all the dates before rangeEnd are enabled. the time returns as 00:00:00.selectableRange Availability Flash Player 6 (6.selectableRange Description Property. If only rangeEnd is defined.0. and the selectable range is from June 2003 to July 2003. The value of DateField. you can use a single Date object as the value of selectableRange. new Date(2003. sets a single selectable date or a range of selectable dates.24) rather than If you don’t specify a full date.79. Edition Flash MX Professional 2004. 454 DateField component . new Date(). the displayed month changes to July 2003. The value of this property is an object that consists of two Date objects named rangeStart and rangeEnd.

5.0. 7). } my_df.0).Example The following example defines the selectable range as the dates between and including May 7 and June 7: my_df. DateField.selectableRange = {rangeEnd: new Date(2003.addEventListener("change".selectedDate = new Date(2003. 5.selectableRange = new Date(2003. dfListener). The following example defines the selectable range as the dates before and including June 7: my_df. 7). 5. The following example uses a DateField instance named my_df on the Stage to show how to disable an already selected date (otherwise. Usage dateFieldInstance. DateField. The following example defines the selectable range as the dates after and including May 7: my_df. The default value is undefined.selectedDate]. 7)}.79. Edition Flash MX Professional 2004. 4.selectedDate Description Property. The following example defines the selectable date as June 7 only: my_df. Example The following example sets the selected date to June 7: my_df. rangeEnd: new Date(2003. 5.disabledRanges = [my_df.selectableRange = {rangeStart: new Date(2003.selectableRange = {rangeStart: new Date(2001. a Date object that indicates the selected date if that value falls within the value of the selectableRange property.selectedDate 455 . 7)}. the user can click it again to clear the date field entry): function dfListener(evt_obj:Object):Void { my_df.selectedDate Availability Flash Player 6 (6. 4. 7)}. 7).

0. 456 DateField component .79. Example The following example turns off the highlighting on today’s date: my_df.showToday = false.0).DateField. a Boolean value that determines whether the current date is highlighted. The default value is true.showToday Availability Flash Player 6 (6. Usage dateFieldInstance. Edition Flash MX Professional 2004.showToday Description Property.

0 in its Publish Settings. This class is provided so that you can dispatch the same event to two different functions (see “Delegating events to functions” in Using ActionScript 2.CHAPTER 16 Delegate class Inheritance 16 Object > Delegate mx.create() Description A static method that allows you to run a function in a specific scope. and so that you can call functions within the scope of the containing class.addEventListener().create() to call the function within the scope of the declaring object. When you pass a function as a parameter to EventDispatcher. Method summary for the Delegate class The following table lists the method of the Delegate class.0 Components). Method Delegate.Delegate ActionScript Class Name The Delegate class lets you run a function in a specific scope. the function is invoked in the scope of the broadcaster component instance.utils.0 Components). 457 . not the object in which it is declared (see “Delegating the scope of a function” in Using ActionScript 2. You can call Delegate. NOT E The Delegate class is supported only if you are working in a document that specifies ActionScript 2.

Use the following syntax: import mx. Delegate. See also EventDispatcher.0. function) Parameters scopeObject function A reference to an object. compInstance.utils.addEventListener("eventName".79.Delegate.0).create(). allows you to delegate events to specific scopes and functions. function)). Usage Delegate. The scopeObject parameter specifies the scope in which the specified function is called. Edition Flash MX Professional 2004. Description Method (static). This is the scope in which to run the function. see “Delegating events” in Using ActionScript 2.Delegate. A reference to a function.create(scopeObject.create(scopeObject. Example For examples of Delegate.addEventListener() 458 Delegate class .create() Availability Flash Player 6 (6.0 Components.

The associated delta for the DeltaItem object.getItemByName() or Delta. For example.datasetclasses. which returns an iterator of deltas. the DeltaItem object contains information about any field that was edited.getChangeList().DeltaItem The DeltaItem class provides information about an individual operation performed on a transfer object. this is the array of values that were passed to the method.components. Each delta contains zero or more DeltaItem instances.data. It indicates whether a change was made directly to a property of the transfer object or whether the change was made by a method call. use DeltaPacket. Use the DeltaItem class when accessing the changes in a delta packet. which you can access through Delta. Property DeltaItem. If a change is made to a property. NOT E The DeltaItem class is supported only if you are working in a document that specifies ActionScript 2.argList Description If a change is made through a method call. Property summary for the DeltaItem class The following table lists the properties of the DeltaItem class.curValue DeltaItem. this is the current server value of the property. DeltaItem.getIterator(). if the source of the delta packet was a data set. This property is read-only. To access these changes. In addition to the above.delta 459 . a DeltaItem object can contain server response information such as current value and a message.CHAPTER 17 DeltaItem class ActionScript Class Name 17 mx.0 in its Publish Settings. It also provides the original state of properties on a transfer object. This property is read-only. This property is read-only.

DeltaItem.kind DeltaItem. this is the old value of the property. The server message associated with the DeltaItem object.Method. this is the new value of the property. This property is read-only.Property DeltaItem. Usage deltaitem.curValue 460 DeltaItem class . If a change was made to a property. This property applies only if the change’s kind is DeltaItem. The name of the property or method that changed.curValue Availability Flash Player 7. an array of values passed to the change method. This property is read-only. This property is read-only. If a change was made to a property.argList Availability Flash Player 7. Edition Flash MX Professional 2004.argList Description Property (read-only).message Description The type of change. Usage deltaitem.oldValue DeltaItem. DeltaItem. Edition Flash MX Professional 2004.name DeltaItem.newValue DeltaItem.

DeltaItem.Description Property (read-only). Use the following constants to evaluate this property: ■ ■ DeltaItem. This property applies only if the change’s kind is DeltaItem. a number that indicates the type of change. The change was made through a method call on the transfer object.kind 461 . DeltaItem. Usage deltaitem.Property. This property provides a reference to the delta that this item belongs to.delta Availability Flash Player 7. DeltaItem. Edition Flash MX Professional 2004. Edition Flash MX Professional 2004.Method The change was made to a property on the transfer object. an object containing the current property value on the server’s copy of the transfer object. Usage deltaitem. When a DeltaItem object is created.kind Description Property. a delta associated with the DeltaItem object. and the property is relevant only in a delta that has been returned from a server and is being applied to the data set for user resolution.kind Availability Flash Player 7. it is associated with a delta and adds itself to the delta’s list of changes.Property DeltaItem.delta Description Property (read-only).

message Availability Flash Player 7.name Availability Flash Player 7. This can be any message for the property or method call change attempted in the delta packet. Usage deltaitem. DeltaItem.DeltaItem. 462 DeltaItem class . a string containing the name of the changed property (if the change’s kind is DeltaItem.name Description Property (read-only).message Description Property.Method). Edition Flash MX Professional 2004. Usage deltaitem. This message is usually relevant only in a delta that has been returned from a server and is being applied to the DataSet for resolution. a string containing a server message associated with this DeltaItem object. Edition Flash MX Professional 2004.Property) or the name of the method that made the change (if the change’s kind is DeltaItem.

oldValue 463 .newValue Description Property (read-only). Edition Flash MX Professional 2004. Usage deltaitem. DeltaItem.newValue Availability Flash Player 7.oldValue Availability Flash Player 7. an object containing the old value of the property. Usage deltaitem.DeltaItem. This property applies only if the change’s kind is DeltaItem. This property applies only if the change’s kind is DeltaItem.oldValue Description Property (read-only). DeltaItem. an object containing the new value of the property.Property.Property. Edition Flash MX Professional 2004.

464 DeltaItem class .

or deleted row. With this interface you can access the new and previous values in a transfer object. Delta. Returns the specified DeltaItem object. if the delta packet was obtained from a data set. NOTE The Delta interface is supported only if you are working in a document that specifies ActionScript 2. Returns the delta packet that contains the delta.components.addDeltaItem() Delta.datasetclasses.getChangeList() Delta. Method Delta. and transfer object-level changes. Returns the message associated with the current item.CHAPTER 18 Delta interface ActionScript Interface Name 18 mx. collection.getDeltaPacket() Delta.getId() Description Adds the specified DeltaItem instance.0 in its Publish Settings. Use the Delta interface to examine the delta packet before sending changes to the server and to review messages returned from server-side processing.getItemByName() Delta.Delta The Delta interface provides access to the transfer object. Method summary for the Delta interface The following table lists the methods of the Delta interface. For example. The Delta interface also provides access to messages returned by the associated server-side process. Returns an array of changes made to the current item.data.getMessage() 465 . see “RDBMSResolver component” on page 1049. each delta would represent an added. For more information on client-server interactions. edited. Returns the unique ID of the current item within the DeltaPacket collection.

"ID".Property. curItem. //.Method Delta. Edition Flash MX Professional 2004. If the specified DeltaItem instance already exists.. Usage delta. var d:Delta = new DeltaImpl("ID1345678". d.addDeltaItem(new DeltaItem(DeltaItem. 466 Delta interface . Description Method. false). Example The following example calls the addDeltaItem() method: //.addDeltaItem() Availability Flash Player 7.getOperation() Description Returns the operation that was performed on the current item within the original collection.getSource() Delta.. Delta. {oldValue:15. "". Returns Nothing.addDeltaItem(deltaitem) Parameters deltaitem DeltaItem instance to add to this delta. newValue:16})).. Returns the transfer object on which the changes were performed. this method replaces it. DeltaPacketConsts. adds the specified DeltaItem instance..Added.

Delta. Edition Flash MX Professional 2004. } //.: //. Each DeltaItem instance in the array describes a change made to the item. Returns An array of associated DeltaItem instances.getChangeList() Parameters None.getChangeList().data.getChangeList() Availability Flash Player 7. var changes:Array = dpDelta.. changeMsg = _parent. Description Method. Usage delta.Delta.Modified: { // dpDelta is a variable of type Delta. Example The following example calls the getChangeList() method.. for(var i:Number = 0. trace(changeMsg). returns an array of associated DeltaItem instances.DeltaPacketConsts.components.getChangeMessage(changes[i])..getChangeList() 467 .datasetclasses. i<changes.length. case mx. i++) { // getChangeMessage is a user-defined method..

} 468 Delta interface . Returns The delta packet that contains this delta. Description Method.next()).getDeltaPacket().getSource()). This method lets you write code that can handle delta packets generically at the delta level.hasNext()) { dpDelta = Delta(dpCursor. Example The following example uses the getDeltaPacket() method to access the delta packet’s data source: while(dpCursor. Edition Flash MX Professional 2004. returns the delta packet that contains this delta.getDeltaPacket() Availability Flash Player 7.Delta. trace("DeltaPacket source is: " + dpDelta.getDeltaPacket() Parameters None. Usage delta.

hasNext()) { dpDelta = Delta(dpCursor. this method allows the DataSet component to examine the resulting delta packet.Delta.getId() Availability Flash Player 7. trace("id ["+dpDelta.getId()+"]"). assuming that the DataSet component sends updates to a server and the server returns new key field values. Usage delta. Description Method. returns a unique identifier for this item within the DeltaPacket collection. find the original transfer object. Use this ID in the source component for the delta packet to receive updates and make changes to items that the delta packet was generated from.getId() Parameters None. Example The following example calls the getId() method: while(dpCursor. Edition Flash MX Professional 2004.next()). } Delta. and make the appropriate updates to it. For example.getId() 469 . Returns An object. returns the unique ID of this item within the DeltaPacket collection.

Example The following example calls the getItemByName() method: private function buildFieldTag(deltaObj:Delta. this method provides the most efficient access.name. var oldValue:String. Usage delta.Delta.getOperation() != DeltaPacketConsts. result+= " key=\"" + isKey.name + "\"". Description Method. var newValue:String.newValue) : __nullValue).name. returns the DeltaItem object specified by name.toString() + "\" />". chgItem. If no DeltaItem object is found that matches name. if (deltaObj.getItemByName(field. field:Object.getItemByName() Availability Flash Player 7.name])). deltaObj.type.name + "\" type=\"" + field.oldValue) : __nullValue) : encodeFieldValue(field.Added) { oldValue = (chgItem != null ? (chgItem. this method returns null. } 470 Delta interface . newValue = (chgItem. var result:String= "<field name=\"" + field.getSource()[field. result+= " oldValue=\"" + oldValue + "\"".oldValue != null ? encodeFieldValue(field. Returns The DeltaItem object specified by name.name.name).getItemByName(name) Parameters name A string that specifies the name of the property or method for the associated DeltaItem object. result+= chgItem != null ? " newValue=\"" + newValue + "\"" : "". Edition Flash MX Professional 2004. isKey:Boolean):String { var chgItem:DeltaItem = deltaObj. chgItem. When method calls or property changes on a transfer object are needed by name.newValue != null ? encodeFieldValue(field.

getMessage() 471 .getSource()[field.next()..name]) + "\"". Typically this message is only populated if the delta packet has been returned from a server in response to attempted updates. var dpi:Iterator = dp.getMessage() Parameters None. var d:Delta. } return result. result+= " key=\"" + isKey.else { result+= " newValue=\"" +encodeFieldValue(field. Delta. Example The following example calls the getMessage() method: //...getMessage()). returns the associated message for this delta.hasNext()) { d= dpi. } //. returns the message associated with delta.name. Usage delta. see “RDBMSResolver component” on page 1049.getMessage() Availability Flash Player 7.getIterator(). Returns A string. Description Method. trace(d.toString() + "\" />". while(dpi. For more information.. Edition Flash MX Professional 2004. deltaObj. } Delta.

Delta.Modified: { trace("***In case DeltaPacketConsts. } } 472 Delta interface . op=dpDelta. DeltaPacketConsts.data. Returns A number. Description Method. Usage delta.getOperation() Availability Flash Player 7.Removed. You must either import mx.Modified.Added: trace("***In case DeltaPacketConsts.Modified ***").components. trace("DeltaPacket source is: " + dpDelta. Edition Flash MX Professional 2004.next()).components. returns the operation that was performed on the item within the original collection.datasetclasses.DeltaPacketConsts or fully qualify each constant.data. Example The following example calls the getOperation() method: while(dpCursor.getOperation() Parameters None.data.DeltaPacketConsts.datasetclasses.Added.hasNext()) { dpDelta = Delta(dpCursor.Added ***"). and DeltaPacketConsts.datasetclasses. returns the operation that was performed on this item within the original collection.DeltaPacketConsts. switch(op) { case mx. Valid values for this are DeltaPacketConsts.getSource()).getOperation(). case mx.getDeltaPacket().components.

DeltaPacketConsts.data.getSource() Availability Flash Player 7.hasNext()) { dpDelta = Delta(dpCursor.getOperation().Delta.getDeltaPacket(). Description Method. for(var i in src){ if(typeof(src[i]) != "function"){ trace(i+"="+src[i]). Returns The transfer object on which the changes were performed.Modified: { // the original values are trace("Unmodified source is: "). switch(op) { case mx.getSource() Parameters None. Usage delta.getSource() 473 . Example The following example calls the getSource() method: while(dpCursor. var src = dpDelta.datasetclasses.getSource(). returns the transfer object on which the changes were performed.next()). } } } } Delta. op=dpDelta. Edition Flash MX Professional 2004.components.

474 Delta interface .

Typically. A delta packet contains one or more deltas (see “Delta interface” on page 465). Typically the delta packet is used internally by resolver components. this property is connected (by data binding) to a resolver component such as RDBMSResolver.DeltaPacket The DeltaPacket interface is provided by the deltaPacket property of the DataSet component.The DeltaPacket interface and the related Delta interface and DeltaItem class let you manage changes made to the data.components.data.CHAPTER 19 DeltaPacket interface ActionScript Interface Name 19 mx. the DataSet component populates the DataSet. These components have no visual appearance at runtime.0 in its Publish Settings. and each delta contains zero or more delta items (see “DeltaItem class” on page 459).deltaPacket property. Unless you are writing your own custom resolver. it is unlikely you will ever need to know about or write code that accesses methods or properties of a delta packet.applyUpdates() method is called. A delta packet is an optimized set of instructions that describe all changes that have been made to the data in a data set. NOT E TI P The DeltaPacket interface is supported only if you are working in a document that specifies ActionScript 2. 475 .datasetclasses. The resolver converts the delta packet into an update packet in the appropriate format. When the DataSet. which is part of the data management functionality.

DeltaPacket.getSource() DeltaPacket. contains information specific to the implementation. Indicates whether the consumer of the delta packet should log the changes it specifies.getIterator() DeltaPacket.getConfigInfo(info) Properties info Object. Returns the source of the delta packet. Returns the transaction ID for this delta packet. Returns An object that contains information required for the specific DeltaPacket implementation.getConfigInfo() Availability Flash Player 7. This is the component that has exposed this delta packet.getTimestamp() DeltaPacket. Returns the date and time at which the delta packet was instantiated. Edition Flash MX Professional 2004.getConfigInfo() Description Returns configuration information that is specific to the implementation of the DeltaPacket interface. Returns the iterator for the delta packet that iterates through the delta packet’s list of deltas.Method summary for the DeltaPacket interface The following table lists the methods of the DeltaPacket interface.logChanges() DeltaPacket. 476 DeltaPacket interface .getTransactionId() DeltaPacket. Usage deltaPacket. Method DeltaPacket.

This method allows implementations of the DeltaPacket interface to access custom information..getIterator() 477 . Usage deltaPacket. logChanges().. returns configuration information that is specific to the implementation of the DeltaPacket interface. For a complete description of this interface. This provides a mechanism for looping through the changes in the delta packet.Description Method. Example The following example calls the getConfigInfo() method: // .getIterator() Availability Flash Player 7. DeltaPacket. see “Iterator interface” on page 745. null. getTransactionId(). getConfigInfo()). DeltaPacket. Edition Flash MX Professional 2004. // ..getIterator() Parameters None.. new DeltaPacketImpl(source. returns the iterator for the DeltaPacket collection. Description Method. Returns An interface to the iterator for the DeltaPacket collection that iterates through the delta packet’s list of deltas.

getTransactionId() + " ***"). var dpCursor:Iterator = deltapkt. var op:Number. trace("*** Test deltapacket. this object might be _level0.myDataSet.getSource() Availability Flash Player 7. while(dpCursor. if the source is a data set.getSource() Parameters None. "removed". Usage deltaPacket. var dpDelta:Delta. "modified"). var changeMsg:String.myDataSet. For example. Edition Flash MX Professional 2004. var OPS:Array = new Array("added". Description Method. op=dpDelta. but this is not required. Returns An object. This object is typically a descendant of MovieClip.next()).hasNext()) { dpDelta = Delta(dpCursor. the source of the DeltaPacket collection.Example The following example uses the getIterator() method to access the iterator for the deltas in a delta packet and uses a while statement to loop through the deltas: var deltapkt:DeltaPacket = _parent.getOperation().getIterator(). } DeltaPacket.deltaPacket. 478 DeltaPacket interface . returns the source of the DeltaPacket collection. Trans ID is: " + deltapkt.

. Example The following example calls the getTimestamp() method: // . Usage deltaPacket. var dpSourceText:String = "Source: " + deltapkt.Example The following example calls the getSource() method: // . trace(dpSourceText).. DeltaPacket. var deltapkt:DeltaPacket = _parent. Edition Flash MX Professional 2004. returns the date and time at which the delta packet was created. Returns A Date object containing the date and time at which the delta packet was created. // . DeltaPacket.deltaPacket. trace(dpTime).getTimestamp() 479 ... var deltapkt:DeltaPacket = _parent.deltaPacket..getTimestamp() Parameters None.getTimestamp() Availability Flash Player 7. Description Method... var dpTime:String = " Time: " + deltapkt. // .myDataSet.getSource().myDataSet.getTimestamp()..

getTransactionId() + " ***"). Example The following example calls the getTransactionId() method: // . returns the transaction ID for the delta packet. Usage deltaPacket. Returns A string. trace("*** Trans ID is: " + deltapkt. var deltapkt:DeltaPacket = _parent.. This unique identifier is used to group a send/receive transaction for a delta packet. Edition Flash MX Professional 2004.myDataSet....DeltaPacket.getTransactionId() Parameters None. the unique transaction ID for a single transaction grouping of delta packets.applyUpdates() call. 480 DeltaPacket interface . Description Method. The data set uses this to determine if the delta packet is part of the same transaction it originated with the DataSet. // .getTransactionId() Availability Flash Player 7.deltaPacket.

Edition Flash MX Professional 2004. Usage deltaPacket. } DeltaPacket.deltaPacket.logChanges() 481 . } else { trace("*** We do not need to log changes"). ***"). Example The following example calls the logChanges() method: var deltapkt:DeltaPacket = _parent.myDataSet. if(deltapkt.DeltaPacket.logChanges() Availability Flash Player 7. returns true if the consumer of this delta packet should log the changes it specifies. In both cases. This value is used mainly for communication of changes between data sets by means of shared objects or from a server to a local data set.logChanges()) { trace("*** We need to log changes. Description Method. Returns A Boolean value. true if the consumer of the delta packet should log changes found in the delta packet.logChanges() Parameters None. the data set should not record the changes specified.

482 DeltaPacket interface .

DepthManager" at the beginning of your ActionScript. you need to have a component in the library or on the Stage.setDepthTo() The following methods constitute the reserved depth space API: DepthManager.createClassObjectAtDepth() DepthManager.createClassChildAtDepth() DepthManager. Depth Manager manages components automatically. It also lets you manage reserved depths in a special highest-depth clip on _root for system-level services such as the pointer and tooltips.0 in its Publish Settings. In general.managers. TIP To use the DepthManager class for movie clip instances. You do not need to use its APIs unless you are an advanced Flash developer. and use "import mx.createObjectAtDepth() 483 .managers. N OTE ■ ■ ■ ■ ■ ■ ■ The DepthManager class is supported only if you are working in a document that specifies ActionScript 2.setDepthBelow() DepthManager. The following methods constitute the relative depth-ordering API: DepthManager.createChildAtDepth() DepthManager.setDepthAbove() DepthManager. using its own “shuffling” algorithm. including _root.DepthManager The DepthManager class allows you to manage the relative depth assignments of any component or movie clip.CHAPTER 20 DepthManager class ActionScript Class Name 20 mx.

createClassChildAtDepth() DepthManager. you will see those constant values in the Output panel. based on other scripts. Sets the depth above the specified instance. specified depth in the special highest-depth clip. Sets the depth to the specified instance in the highest-depth clip.createObjectAtDepth() Creates an object at a specified depth in the highest-depth clip.kCursor Description A static property with the constant value 202.createChildAtDepth() Description Creates a child of the specified symbol at the specified depth. using one of the following properties.kTooltip 484 DepthManager class .setDepthTo() Property summary for the DepthManager class The following table lists the properties of the DepthManager class. A static property with the constant value 101.Method summary for the DepthManager class The following table lists the methods of the DepthManager class. This is the cursor depth. DepthManager.setDepthAbove() DepthManager. The algorithm increments depths in case Flash needs to insert something else in the middle. and so on. components.kBottom DepthManager. Property DepthManager.setDepthTo(). A static property with the constant value 102. The constant values shown are the default values that the DepthManager algorithm uses to arrange depth. after you implement a DepthManager method.setDepthBelow() DepthManager.createClassObjectAtDepth() Creates an instance of the specified class at a DepthManager. If you trace the following properties. A static property with the constant value 204. This is the tooltip depth. such as DepthManager. DepthManager. you see that DepthManager sets the depths in increments of 20. Sets the depth below the specified instance. DepthManager. and then trace the component or movie clip depth. Method DepthManager.kNotopmost DepthManager. However. Creates an object of the specified class at the specified depth.

DepthManager.kBottom.kTop.kTopmost. All depth flags are static properties of the DepthManger class.kTop DepthManager. A static property with the constant value 203. initObj An initialization object. DepthManager. mx.DepthManager.createChildAtDepth("MinuteSymbol". Description Method. Usage movieClipInstance. One of the following values: DepthManager. DepthManager.kTop).Property DepthManager. minuteHand = clock. This parameter is optional. DepthManager. This parameter is a string. Example The following example creates a minuteHand instance of the MinuteSymbol movie clip and places it in front of the clock: import mx.managers.kTopmost). creates a child instance of the symbol specified by linkageName at the depth specified by depthFlag.kNotopmost.kTopmost Description A static property with the constant value 201. or use the import statement to import the DepthManager package. Edition Flash MX 2004. depthFlag[.0. The return type is MovieClip. DepthManager.createChildAtDepth(linkageName. initObj]) Parameters linkageName depthFlag A linkage identifier.createChildAtDepth() 485 .0).createChildAtDepth() Availability Flash Player 6 (6. You must either reference the DepthManager package (for example. Returns A reference to the object created.79. DepthManager.managers. DepthManager.

This parameter is optional.kTopmost.DepthManager button1 = createClassChildAtDepth(mx.ring = createClassChildAtDepth(mx.managers.DepthManager. or use the import statement to import the DepthManager package.kTopmost).managers. initObj An initialization object. DepthManager. Description Method. initObj]) Parameters className depthFlag A class name. The return type is UIObject. All depth flags are static properties of the DepthManger class. One of the following values: DepthManager. mx.createClassChildAtDepth() Availability Flash Player 6 (6. {label: "Top Button"}).controls.kTop).kTop.DepthManager. DepthManager.managers.0.RectBorder.createClassChildAtDepth(className. Example The following code draws a focus rectangle in front of all NoTopmost objects: import mx. You must either reference the DepthManager package (for example. Returns A reference to the created child. DepthManager.skins. Usage movieClipInstance. depthFlag[.kBottom. DepthManager.kNotopmost. The following code creates an instance of the Button class and passes it a value for its label property as an initObj parameter: import mx. This parameter is a of type Function. DepthManager. creates a child of the class specified by className at the depth specified by depthFlag.79. Edition Flash MX 2004.0).DepthManager this.kTop. 486 DepthManager class .Button.

Usage DepthManager.kTooltip. mx. creates an object of the class specified by className at the depth specified by depthSpace. initObj]) Parameters className depthSpace A class name.kCursor. You must either reference the DepthManager package (for example. Edition Flash MX 2004.managers.DepthManager.createClassObjectAtDepth() 487 . Returns A reference to the created object.managers.79. One of the following values: DepthManager. All depth flags are static properties of the DepthManger class. initObj An initialization object. {label: "Cursor"}).createClassObjectAtDepth() Availability Flash Player 6 (6.Button.controls.kCursor. This parameter is optional.0. or use the import statement to import the DepthManager package. Description Method. This method is used for accessing the reserved depth spaces in the special highest-depth clip. DepthManager.createClassObjectAtDepth(mx. DepthManager. The return type is UIObject.kCursor). DepthManager.createClassObjectAtDepth(className.DepthManager.0). This parameter is of type Function. Example The following example creates an object from the Button class: import mx.DepthManager myCursorButton = DepthManager. depthSpace[.

Usage DepthManager.createObjectAtDepth(linkageName.kCursor).kCursor. or use the import statement to import the DepthManager package. This method is used for accessing the reserved depth spaces in the special highest-depth clip. Returns A reference to the created object.DepthManager myCursorTooltip = DepthManager. depthSpace[.kTooltip.createObjectAtDepth("TooltipSymbol".kTooltip). Example The following example creates an instance of the TooltipSymbol symbol and places it at the reserved depth for tooltips: import mx. DepthManager. You must either reference the DepthManager package (for example. One of the following values: DepthManager. DepthManager. The return type is MovieClip. This parameter is of type String. Edition Flash MX 2004.managers.DepthManager. initObj An optional initialization object. Description Method.79. All depth flags are static properties of the DepthManger class.createObjectAtDepth() Availability Flash Player 6 (6.managers.0. mx.DepthManager.0). creates an object at the specified depth. 488 DepthManager class . initObj]) Parameters linkageName depthSpace A linkage identifier.

DepthManager.79.kCursor 489 . DepthManager. Usage DepthManager. Edition Flash MX 2004.kBottom Availability Flash Player 6 (6.kCursor Description Property (static). DepthManager.79.0. This property is passed as a parameter in calls to DepthManager. Usage DepthManager. a property with the constant value 202.createClassObjectAtDepth() and DepthManager.createClassChildAtDepth() and DepthManager.0). Edition Flash MX 2004.0). a property with the constant value 101.kCursor Availability Flash Player 6 (6.0.createObjectAtDepth() to request placement at cursor depth.createChildAtDepth() to place content behind other content.kBottom Description Property (static). This property is passed as a parameter in calls to DepthManager.

0).0. Usage DepthManager.0). a property with the constant value 102.createClassChildAtDepth() and DepthManager.79.0.kTooltip Availability Flash Player 6 (6. Usage DepthManager.79.kNotopmost Availability Flash Player 6 (6. Edition Flash MX 2004. a property with the constant value 204.kNotopmost Description Property (static). 490 DepthManager class .createClassObjectAtDepth() and DepthManager.DepthManager.createChildAtDepth() to request removal from the topmost layer. Edition Flash MX 2004. This property is passed as a parameter in calls to DepthManager.kTooltip Description Property (static). DepthManager.createObjectAtDepth() to place an object at the tooltip depth. This property is passed as a parameter in calls to DepthManager.

createClassChildAtDepth() and DepthManager.kTop Availability Flash Player 6 (6.0.79.DepthManager.0. a property with the constant value 203.kTopmost 491 .kTop Description Property (static). This property is passed as a parameter in calls to DepthManager.79.kTop objects.createClassChildAtDepth() and DepthManager. DepthManager.0). a property with the constant value 201.kTopmost Description Property (static). Usage DepthManager.0). This property is used in calls to DepthManager.createChildAtDepth() to request placement on top of other content. Usage DepthManager. DepthManager. Edition Flash MX 2004. Edition Flash MX 2004.kTopmost Availability Flash Player 6 (6. including DepthManager.kTopmost content.createChildAtDepth() to request placement on top of other content but below DepthManager.

setDepthAbove() Availability Flash Player 6 (6. Description Method. Edition Flash MX 2004 and Flash MX Professional 2004.setDepthBelow(instance) Parameters instance An instance name. Returns Nothing. This parameter is of type MovieClip.DepthManager. This parameter is of type MovieClip.setDepthBelow() Availability Flash Player 6 (6. 492 DepthManager class . Usage movieClipInstance. Usage movieClipInstance. Returns Nothing. sets the depth of a movie clip or component instance above the depth of the instance specified by the instance parameter and moves other objects if necessary. Edition Flash MX 2004.setDepthAbove(instance) Parameters instance An instance name. DepthManager.79.0.0).0.79.0).

setDepthTo() 493 . The algorithm increments depths in case Flash needs to insert something else in the middle. Description Method. DepthManager. sets the depth of a movie clip or component instance below the depth of the specified instance and moves other objects if necessary.setDepthTo() Availability Flash Player 6 (6. You must either reference the DepthManager package (for example. DepthManager. DepthManager.managers. Usage movieClipInstance. mx. This method moves an instance to another depth to make room for another object.0.DepthManager.kTopmost) or use the import statement to import the DepthManager package.79. and so on. Example The following code sets the depth of the textInput instance below the depth of button: textInput. components. sets the depth of movieClipInstance to the value specified by depthFlag. Returns Nothing.0). Edition Flash MX 2004. based on other scripts.kTopmost. DepthManager uses a “shuffling” algorithm to set the depths in increments of 20.setDepthBelow(button). depthFlag DepthManager.kBottom.Description Method.kNotopmost.kTop. All depth flags are static properties of the DepthManger class.setDepthTo(depthFlag) Parameters One of the following values: DepthManager. DepthManager.

getDepth().onRelease = function() { a_btn.DepthManager. you may need to add a UI component to your library (if one isn’t already there) for DepthManager to operate properly. trace(a_depth). When you click the top button. } b_btn. var b_depth:Number = b_btn. a_btn. N OTE 494 If you use DepthManager with movie clip instances instead of component instances. then 40. For more information about depth and stacking order. } Test the SWF file.kTop).managers.kTop).setDepthTo(DepthManager.onRelease = function() { b_btn. var a_depth:Number = a_btn. trace(b_depth).getDepth(). DepthManager class . incremented by 20 each time you click. First add a Button component to the Stage and give it instance name a_btn Then add another Button component to the Stage and give it instance name b_btn. the other button changes depth and moves to the front. DepthManager requires a component on the Stage or in the library to function.0 in Adobe Flash.setDepthTo(DepthManager. and the Output panel displays that button’s depth.Example The following example uses two components (or movie clips) to raise their depth alternately in increments of 20 as each one is clicked. The values are 20. see “Determining the next highest available depth” in Learning ActionScript 2. Make sure the buttons overlap as follows: import mx. then 60.

} myButton. listener.label + " button was clicked"). NOT E 21 The EventDispatcher class is supported only if you are working in a document that specifies ActionScript 2. Event objects An event object is passed to a listener as a parameter.click = function(evtObj){ trace("The " + evtObj.CHAPTER 21 EventDispatcher class Events let your application know when the user has interacted with a component.target. the following code uses the target property of the evtObj event object to access the label property of the myButton instance and send the value to the Output panel: listener = new Object(). 495 . For example. The event object is an ActionScript object that has properties that contain information about the event that occurred.addEventListener() method to register a listener with a component instance. destruction. you use the EventDispatcher. You can use the event object inside the listener callback function to access the name of the event that was broadcast. and when important changes have occurred in the appearance or life cycle of a component—such as its creation. listener). or the instance name of the component that broadcast the event. The listener is invoked when a component’s event is triggered.addEventListener("click". If you want to write a custom object that emits events that aren’t related to the user interface.0 in its Publish Settings. For example. or resizing. The methods of the EventDispatcher class let you add and remove event listeners so that your code can react to events appropriately. EventDispatcher is smaller and faster to use as a mix-in for UIComponent than UIEventDispatcher.

listener) Parameters event A string that is the name of the event.w3. and if so. component instance.addEventListener(event. Some events have additional properties defined.addEventListener() Availability Flash Player 6 (6. Edition Flash MX 2004 and Flash MX Professional 2004. listener 496 EventDispatcher class . A reference to a listener object or function.0.EventDispatcher Method summary for the EventDispatcher class The following table lists the methods of the EventDispatcher class.addEventListener() EventDispatcher.removeEventListener() Removes an event listener from a EventDispatcher.events. EventDispatcher. EventDispatcher class (API) ActionScript Class Name mx. Property type target Description A string indicating the name of the event.79. Every event object has the properties listed in the table below. Method EventDispatcher.Some event object properties are defined in the W3C specification (www.0). A reference to the component instance broadcasting the event. Dispatches an event programmatically. the properties are listed in the event’s entry.html) but aren’t implemented in version 2 of the Adobe Component Architecture. Usage componentInstance.org/TR/DOMLevel-3-Events/events.dispatchEvent() Description Registers a listener with a component instance.

target. lo). For example. the function is invoked when the event occurs. EventDispatcher. You must define the listener as either an object or a function before you call addEventListener() to register the listener with the component instance. Usually. For example.label + " clicked"). An event object is passed to the listener as a parameter. it must have a callback function defined that is invoked when the event occurs. } button1. myListener). For more information. You cannot expect one listener to be called before another. the event object is evt (you can use any identifier as the event object name). You can use the event object inside the listener callback function to access information about the type of event that occurred and which instance broadcast the event. whose label properties are button1 and button2. the following code defines one listener object and assigns it to two Button component instances. Execution order is not guaranteed. see “About the event object” in Using ActionScript 2.addEventListener() 497 .click = function(evt){ trace(evt. You can call this method from any component instance. When the event occurs. see “Using listeners to handle events” in Using ActionScript 2. respectively: lo = new Object(). In the example above. For more information. but you must use a separate call to addEventListener() for each instance.Returns Nothing. The event object has properties that contain information about the event that occurred. lo). but you must use a separate call to addEventListener() for each listener.addEventListener("click". If the listener is a function.addEventListener("click". Description Method. button2. lo. the listener object or function is notified. that callback function has the same name as the event with which the listener is registered. If the listener is an object. and it is used in the if statements to determine which button instance was clicked. the following code registers a listener to the component instance myButton: myButton. You can register multiple listeners to a single component instance. registers a listener object with a component instance that is broadcasting an event. Also.0 Components.addEventListener("click". you can register one listener to multiple component instances.0 Components.

0. The event object must have a type property that is a string indicating the name of the event.Example The following example defines a listener object.type + " triggered"). Returns Nothing. Description Method. the SimpleButton. myListener. } myButton. myListener). place a Button component on the Stage with the instance name myButton. myListener = new Object(). myListener.click = function(evt){ trace(evt.as class file dispatches the click event.0). dispatches an event to any listener registered with an instance of the class. Usage dispatchEvent(eventObject) Parameters eventObject A reference to an event object.dispatchEvent() Availability Flash Player 6 (6. EventDispatcher.addEventListener("click". This method is usually called from within a component’s class file. Generally. the event object also has a target property that is the name of the instance broadcasting the event. It then calls addEventListener() to register the myListener listener object with the component instance myButton. and place this code in Frame 1. Edition Flash MX 2004 and Flash MX Professional 2004. You can define other properties on the event object that help a user capture information about the event when it is dispatched. 498 EventDispatcher class . For example. and defines the callback function for the click event. To test this code.79.

unregisters a listener object from a component instance that is broadcasting an event.0).removeEventListener() Availability Flash Player 6 (6.79. Description Method. Edition Flash MX 2004 and Flash MX Professional 2004. EventDispatcher.removeEventListener() 499 . A reference to a listener object or function. EventDispatcher.removeEventListener(event. Usage componentInstance.Example The following example dispatches a click event: dispatchEvent({type:"click"}). listener Returns Nothing.0. listener) Parameters event A string that is the name of the event.

500 EventDispatcher class .

0 Components. NOT E ■ ■ ■ ■ ■ ■ 22 A FLVPlayback component is supported for both ActionScript 2. graphics.0 and ActionScript 3.CHAPTER 22 FLVPlayback Component The FLVPlayback component lets you easily include a video player in your Flash application to play progressively downloaded Flash video (FLV) files over HTTP or play streaming FLV files from a Flash Media Server (FMS) or from a Flash Video Streaming Service (FVSS).0. The easy-to-use FLVPlayback component has the following characteristics and benefits: Can be dragged to the Stage and implemented quickly and successfully Provides a collection of predesigned skins that allow you to customize the appearance of its playback controls Allows advanced users to create their own skins Provides cue points that allow you to synchronize your video with text. see “Using the CheckBox” in Using ActionScript 3. This document discusses the version 2 component. and animation Provides live preview of customizations Maintains a reasonably sized SWF file 501 . If you are using the version 3 component.

you have the following choices: ■ ■ Select from an collection of predesigned skins Select individual controls from the FLV Playback Custom UI components and customize them Create a custom skin and add it to the collection of predesigned skins ■ After you select a different skin. The FLVPlayback component is a combination of the display area. and otherwise control the FLV file. seek. StopButton. The FLV Playback Custom UI components provide control buttons and mechanisms that you can use to play.swf. PlayButton. as shown in the following figure: The process of adding playback controls to the FLVPlayback component is called skinning. The FLVPlayback component has an initial default skin. or video player. the selected skin becomes the new default skin. ClearOverPlaySeekMute. that provides transparent controls for the play. These controls include the BackButton. PauseButton. SeekBar. see “Customizing the FLVPlayback component” on page 520. BufferingBar. PlayPauseButton. MuteButton. and VolumeBar.The FLVPlayback component includes the FLV Playback Custom UI components. pause. The FLVPlayback component and the FLV Playback Custom UI controls appear in the Components panel. 502 FLVPlayback Component . and mute functions. stop. For more information about selecting or creating a skin for the FLVPlayback component. ForwardButton. To change this skin. in which you view the FLV file and the controls that allow you to operate it.

The API includes the FLVPlayback. you can also set various parameters that govern its behavior and describe the FLV file. and enter a string that specifies one of the following: ■ ■ ■ A local path to an FLV file A URL to an FLV file A URL to an XML file that describes how to play an FLV file For information on how to create an XML file to describe one or more FLV files. On the Parameters tab in the Component inspector. however. locate the Value cell for the contentPath parameter in the Parameters tab of the Component inspector. assuming the component is in the library. 4. with the FLVPlayback component selected on the Stage. the “VideoPlayer class” on page 702. 2. Using the FLVPlayback component Using the FLVPlayback component basically consists of putting it on the Stage and specifying an FLV file for it to play. Select File > New and choose Flash File (ActionScript 2. Creating an application with the FLVPlayback component You can include the FLVPlayback component in your application in the following ways: ■ Drag the FLVPlayback component from the Components panel to the Stage. see “Using a SMIL file” on page 707. see “FLVPlayback class” on page 535.0). Using the FLVPlayback component 503 . and customize it by selecting a skin. ■ ■ To drag the FLVPlayback component from the Components panel: 1. For more information on these classes. Drag the FLVPlayback component to the Stage. 3. and specify a value for the contentPath parameter. double-click the Skin parameter to open the Select Skin dialog box.The FLVPlayback component also includes an ActionScript application programming interface (API). In addition. With the FLVPlayback component selected on the Stage. VideoError. and the “VideoError class” on page 694. Use the Video Import wizard to create the component on the Stage. Use the MovieClip attachMovie() method to dynamically create an FLVPlayback instance on the Stage. and VideoPlayer classes.

Indicate the location of the video file by selecting one of the following options: ■ ■ On my local computer Already deployed to a web. the URL for the SWF file that contains the skin. in the URL text box. Click OK to close the Select Skin dialog box. Click Next W A R N I NG 504 FLVPlayback Component . Depending on your choice. enter either the path or the URL that specifies the location of the video file. you’ll see a Deployment dialog box next where you can select one of the options listed to specify how you would like to deploy your video: ■ ■ ■ ■ 5. If you created a custom skin. Select your desired encoding settings. 2. Select None. a preview of the skin appears in the viewing pane above the pop-up menu. or FVSS server 4. To use the Video Import wizard: 1. 6. Progressive download from a standard web server Stream from Flash Video Streaming Service Stream from Flash Media Server Embed video in SWF and play in timeline Do not select the Embed Video option. and enter. 3. If you selected a file path. 7. select Custom Skin URL from the pop-up menu. Select one of the following options: ■ From the drop-down Skin list.5. Click Next. and drag individual FLV Playback Custom UI components to the Stage to add playback controls. 8. This option will not place an FLVPlayback component on the Stage. 7. Select File > New and choose Flash File (ActionScript 2. 6. NOT E ■ ■ In the first two cases. Select File > Import > Import Video. Select Control > Test Movie to execute the SWF file and start the video.0). FMS. The FLVPlayback component plays only external streaming video. select one of the predesigned skins to attach a set of playback controls to the component. then click Next.

attachMovie("FLVPlayback".0). select Custom Skin URL from the pop-up menu. Select None.swf" my_FLVPlybk. select one of the predesigned skins to attach a set of playback controls to the component.com/flash/video/ water. Click 11. Next. and drag individual FLV Playback Custom UI components to the Stage to add playback controls. 3. and enter the URL for the SWF file that contains the skin in the URL text box. Change install_drive to the drive on which you installed Flash and modify the path to reflect the location of the Skins folder for your installation: import mx.contentPath = "http://www.video.9. 4. your FLA file. my_FLVPlybk. You can use it create an instance of the FLVPlayback component because the FLVPlayback class extends the MovieClip class.*. Using the FLVPlayback component 505 . and then click Finish. Add the following code to the Actions panel on Frame 1 of the Timeline.0/ ClearOverPlaySeekMute. Drag the FLVPlayback component from the Components panel to the Library (Window > Library). 2. The attachMovie() method belongs to the MovieClip class. If you created a custom skin for the component. Select Control > Test Movie to execute the SWF file. height:240. Select File > New and choose Flash File (ActionScript 2. 10. a preview of the skin appears in the viewing pane above the pop-up menu. Read the Finish Video Import dialog box to note what happens next. the generated movie clip will appear to be empty. this. 12. y:100}). NOT E ■ ■ In the first two cases. {width:320.flv". NO TE Without setting the contentPath and skin properties. To create an instance dynamically using ActionScript: 1.skin = "file:///install_drive|/Program Files/Adobe/Adobe Flash CS3/en/Configuration/FLVPlayback Skins/ActionScript 2. Save 13. Select one of the following options: ■ From the drop-down Skin list. "my_FLVPlybk". Select Control > Test Movie to execute the SWF file and start the FLV file. 10. and start the video.helpexamples. x:100.

the component plays the FLV file immediately when it is loaded. the FLVPlayback component automatically rewinds the FLV file to the beginning when the playhead reaches the end or when the user clicks the Stop button. see FLVPlayback. Cue points allow you to synchronize specific points in the FLV file with Flash animation. If true. the component stops play on the last frame of the FLV file and does not rewind automatically. For an FLV file that is progressively downloaded over HTTP. NOT E Setting this parameter does not guarantee that a certain amount of the FLV file will download before playback begins. see “Using cue points” on page 510. the component loads the first frame and pauses.bufferTime on page 567. The default value is false. For more information about using multiple video players in a single FLVPlayback instance. The default value is an empty string. The default value is true for the default video player (0) and false for others. bufferTime The number of seconds to buffer the FLV file in memory before beginning playback.autoSize on page 554. if true. Double-click the value cell for this parameter to open the Content Path dialog box. graphics. If true. contentPath A string that specifies the URL to an FLV file or an XML file that describes how to play one or more FLV files. If false. This parameter affects streaming FLV files. autoSize A Boolean value that.1 For more information. slower computer. there is little advantage to increasing this value. see “Specifying the contentPath parameter” on page 508. If false. you can set the following parameters in the Component inspector or the Property inspector: autoPlay A Boolean value that determines how to play the FLV file. nothing happens when Flash executes the FLVPlayback instance. although it can improve viewing a high-quality video on an older. which are buffered in memory but not downloaded. autoRewind A Boolean value that determines whether the FLV file will rewind automatically when it finishes playing. or text. see “Playing multiple FLV files” on page 517. an HTTP path. resizes the component at runtime to use the source FLV file dimensions. The default is an empty string. 506 FLVPlayback Component . These dimensions are encoded in the FLV file and are different than the default dimensions of the FLVPlayback component. see FLVPlayback. or a Real-Time Messaging Protocol (RTMP) path. The default value is 0. You can specify a path on your local computer. For more information. cuePoints A string that describes the cue points for the FLV file. The default value is true. For more information. If you do not specify a value for the contentPath parameter.FLVPlayback component parameters For each instance of the FLVPlayback component. For more information.

it tries to take the time from the FLV file metadata. If you use FMS or FVSS. the source FLV file is scaled to the dimensions of the FLVPlayback component on the Stage. see FLVPlayback. the FLV file plays automatically. The default value is initially a predesigned skin. totalTime The total number of seconds. Using the FLVPlayback component 507 . Each of these parameters has an equivalent property in the FLVPlayback class. Otherwise. For more information.totalTime on page 680.isLive A Boolean value that. if true. but it subsequently becomes the last selected skin. skin A parameter that opens the Select Skin dialog box from which you can select a skin for the component. maintainAspectRatio A Boolean value that. see FLVPlayback. The default value is 0. if it is an external skin that is not on the FLV file viewing area. the component always takes the total time from the server. For more information. skinAutoHide A Boolean value that. see FLVPlayback.volume on page 686. The autoSize parameter takes precedence over this parameter.isLive on page 597. For more information. For more information. the FLVPlayback instance does not have control elements to operate the FLV file. see FLVPlayback. hides the skin when the mouse is not over the FLV file or the skin region. specifies that the FLV file is streaming live from Flash Media Server. If the autoPlay parameter is set to true. in the source FLV file. If you select None. see FLVPlayback.maintainAspectRatio on page 602. One example of a live stream is a video of news events as they are taking place. Setting the property overrides the parameter setting in the Component inspector or the Property inspector. volume A number from 0 to 100 that represents a percentage of the maximum volume (100). The default value is false. if true. If you use progressively download over HTTP.skin on page 667. For more information. to a precision of milliseconds. see “Customizing the FLVPlayback component” on page 520. resizes the video player within the FLVPlayback component to retain the aspect ratio of the source FLV file. The default value is false. if true. the component uses this number if it is set to a value greater than zero. The default value is true. For more information.

the FLV file plays as a progressive download. When browsing for an FLV file. if it is at or below the location of the target SWF file. The content path Enter the URL or local path for either the FLV file or an XML file that describes how to play the FLV file. Open the Content Path dialog box by double-clicking the Value cell for the contentPath parameter in the Component inspector. A URL to an XML file could also be a streaming FLV file from a FMS or a FVSS. (You will not lose disabled cue points if the new FLV file contains the same cue points. you could lose any disabled cue points. both of which inform Flash how to play the file. The dialog box looks like the following figure: The dialog box provides two check boxes that can determine the dimensions of the FLVPlayback instance and specify whether to acquire the dimensions and cue point information from the FLV file.Specifying the contentPath parameter The contentPath parameter lets you specify the name and location of the FLV file. but not ActionScript cue points. you might want to disable non-ActionScript cue points through ActionScript rather than through the Cue Points dialog box. the FLV file streams from a FMS or a FVSS. C A UTI ON 508 When you click OK in the Content Path dialog box. Flash automatically makes the path relative to that location so you can serve it from a web server. Otherwise. For more information.) For this reason. see “The FLV file options” on page 509. the path is an absolute Windows or Macintosh path. FLVPlayback Component . click the folder icon to open a Browser dialog box to help you find the correct location. you must type the path and name. the component updates the value of the cuePoints parameter because it might no longer apply if the content path changed. If you specify an HTTP URL. If you specify a URL that is an RTMP URL. which can happen if you simply change the path. As a result. If you do not know the exact location of an FLV file. To enter the name of a local XML file.

Using the FLVPlayback component 509 . see FLVPlayback. Match Source FLV Dimensions. You can also specify the name and location of the FLV file using the ActionScript FLVPlayback. If this option is not selected. which means the FLV file is not local. Flash uses the dimensions to resize the FLVPlayback instance.load() on page 599. Download FLV for Cue Points and Dimensions. The source FLV file contains preferred height and width dimensions for playing. These three alternatives take precedence over the contentPath parameter in the Component inspector. The second option.play() and FLVPlayback. However.You can also specify the location of an XML file that describes how to play multiple FLV file streams for multiple bandwidths. The first option.load() methods. This option specifies whether to download or stream a portion of the FLV file to acquire the FLV file dimensions and any cue point definitions that are embedded within it. For more information. the first option is disabled. and it loads the cue point definitions into the cuePoints parameter in the Component inspector. If you select the first option. Any path that does not end in .play() on page 617 and FLVPlayback. this option is available only if the second option is also checked. For a description of the XML SMIL file. FLVPlayback. The XML file uses the Synchronized Multimedia Integration Language (SMIL) to describe the FLV files. the dimensions of the FLVPlayback instance are resized to match these preferred dimensions. see “Using a SMIL file” on page 707.contentPath on page 575. The FLV file options The Content Path dialog box also has two options.contentPath property and the FLVPlayback. is enabled only if the content path is an HTTP or RTMP URL. specifies whether the FLVPlayback instance on the Stage should match the dimensions of the source FLV file.flv is also considered a network path because it must be an XML file and could point to FLV files anywhere.

A keyframe is a data segment that occurs between image frames in the FLV file stream.mmm) when the cue point occurs. When you seek to a navigation cue point. seeking to a different point in time. see “Working with Video” in Using Flash. For more information on the Video Import wizard and the Flash Video encoder. The cuePoint event occurs precisely at the specified time.Using cue points A cue point is a point at which the video player dispatches a cuePoint event while an FLV file plays. The navigation and event cue points are also known as embedded cue points because they are embedded in the FLV file stream and in the FLV file’s metadata packet. You might want to display text or a graphic. The type property is a string whose value is "navigation". An ActionScript cue point is an external cue point that you can add either through the component’s Flash Video Cue Points dialog box or through the FLVPlayback. In ActionScript and within the FLV file’s metadata. The time property is a number representing the time in hours. type. and ActionScript. see “FLVPlayback. The parameters property is an array of specified name-and-value pairs. a cue point is represented as an object with the following properties: name. An event cue point enables you to synchronize a point in time within the FLV file with an external event on the web page. A navigation cue point allows you to seek to a particular frame in the FLV file because it creates a keyframe within the FLV file as near as possible to the time that you specify. You can embed navigation and event cue points in an FLV file using either the Video Import wizard or the Flash Video encoder. ActionScript cue points are accurate to a tenth of a second. or switching to a different FLV file. For more information. or synchronize with a Flash animation or affect the playing of the FLV file by pausing it. for example. or "actionscript". and consequently.playheadUpdateInterval” on page 623. "event". and parameters. they are less accurate than embedded cue points. There are three types of cue points: navigation. the component seeks to the keyframe and starts the cuePoint event. Cue points let you receive control in your ActionScript code and synchronize those points in your FLV file with other actions on the web page. You can add cue points to an FLV file at times that you want to interact with another element on the web page. seconds. 510 FLVPlayback Component . and milliseconds (HH:MM:SS. minutes. time.addASCuePoint() method. The name property is a string that contains the assigned name of the cue point. event. The component stores and tracks ActionScript cue points apart from the FLV file. You can increase the accuracy of ActionScript cue points by lowering the value of the playheadUpdateInterval property because the component generates the cuePoint event for ActionScript cue points when the playhead updates. depending on the type of cue point that you created.

4. Double-click the value cell of the cuePoints parameter in the Component inspector to open the Flash Cue Points dialog box.When a cuePoint event occurs. Using the Flash Video Cue Points dialog box Open the Flash Video Cue Points dialog box by double-clicking the Value cell of the cuePoints parameter in the Component inspector. see “Listening for cuePoint events” on page 513. above the list of cue points. you cannot add. Click the plus (+) sign in the upper-left corner. and edit the text to name the cue point. 2. The dialog box looks like the following figure: The dialog box displays embedded and ActionScript cue points. To add an ActionScript cue point: 1. However. change. You can also enable or disable embedded cue points. to add a default ActionScript cue point entry. Using cue points 511 . 3. Click the New Cue Point text in the Name column. Select an instance of the FLVPlayback component. For more information. You can use this dialog box to add and delete ActionScript cue points as well as cue point parameters. the cue point object is available in the event object through the info property. or delete embedded cue points.

To add a parameter for the selected cue point. repeat the steps above for each cue point that you want to add. You can specify the time in hours. 3. Select the cue point that you want to delete. Repeat this step for each parameter. and remove a cue point. 2. Click the value in the Type column to trigger the pop-up menu. 4. To delete an ActionScript cue point: 1. If multiple cue points exist. To enable or disable an embedded FLV file cue point: 1. Select an instance of the FLVPlayback component. and milliseconds (HH:MM:SS. 3. 5. click the plus (+) sign above the Parameters section. Event or Navigation) to enable it. enable or disable a cue point. to delete it. Select an instance of the FLVPlayback component. the dialog box moves the new cue point to its chronological position in the list. Click Disabled to disable it. 6. Click the name of the type of cue point (for example. or click the Down arrow. and enter values in the Name and Value columns. find cue points of any type or a specific type. Double-click the value cell of the cuePoints parameter in the Component inspector to open the Flash Cue Points dialog box. 6. Click the minus (-) sign in the upper-left corner. Double-click the value cell of the cuePoints parameter in the Component inspector to open the Flash Cue Points dialog box. 512 FLVPlayback Component . check whether a cue point is enabled. and assign a time for the cue point to occur. Using ActionScript with cue points You can use ActionScript to add ActionScript cue points. seek to a navigation cue point. minutes. 8. 6. 2. To add more ActionScript cue points. 7. Click OK to save your changes.5.mmm). Click OK to save your changes. 5. Select the cue point you want to enable or disable. Click the Time value of 00:00:00:000 to edit it. 4. Click OK to save your changes. Repeat the steps above for each cue point that you want to delete. listen for cuePoint events. above the list of cue points. seconds.

listenerObject). //create cue point object cuePt.com/flash/video/ cuepoints. trace("Cue point type is: " + eventObject.name). When cue points occur in the following example. and type of the cue point in its properties. For more information on the cuePoint event. Using cue points 513 .type).info. which specifies the time.video.*.time = 2. trace("Cue point name is: " + eventObject.name = "ASpt1". It adds the first cue point using a cue point object. the cuePoint listener calls an event handler function that displays the value of the playheadTime property and the name and type of the cue point. which contains the following three cue points: Name point1 point2 point3 Time 00:00:00. Listening for cuePoint events The cuePoint event allows you to receive control in your ActionScript code when a cuePoint event occurs. my_FLVPlybk. The following example adds two ActionScript cue points to the FLV file when it is ready to play. var listenerObject:Object = new Object(). see FLVPlayback.cuePoint = function(eventObject:Object):Void { trace("Elapsed time in seconds: " + my_FLVPlybk.020 Type Navigation Navigation Navigation Adding ActionScript cue points You can add ActionScript cue points to an FLV file using the addASCuePoint() method. my_FLVPlybk. "ASpt2"). For more information.type = "actionscript".02.addASCuePoint(cuePt). } my_FLVPlybk. see FLVPlayback.flv" var cuePt:Object = new Object().info.cuePoint on page 576. cuePt. The second call specifies the time and name using the method’s time and name parameters.contentPath = "http://www.flv. name.addASCuePoint() on page 548.addASCuePoint(5. listenerObject.addEventListener("cuePoint". import mx.The examples in this section use an FLV file called cuepoints.748 00:00:16.playheadTime). cuePt.helpexamples.418 00:00:07. //add AS cue point // add 2nd AS cue point using time and name parameters my_FLVPlybk.

} 514 FLVPlayback Component . "ASpt"). you can find a cue point of any type.contentPath = "http://www.addASCuePoint(2.type).type). //add 2nd Aspt var listenerObject:Object = new Object().findNearestCuePoint(rtn_obj. traceit(rtn_obj).ready = function(eventObject:Object):Void { rtn_obj = my_FLVPlybk.video.flv" var rtn_obj:Object = new Object(). listenerObject). listenerObject).com/flash/video/ cuepoints.name).addASCuePoint(3. my_FLVPlybk.findNextCuePointWithName(rtn_obj). //add AS cue point my_FLVPlybk. The ready event handler in the following example calls the findCuePoint() method to find the cue point ASpt1 and then calls the findNearestCuePoint() method to find the navigation cue point that is nearest to the time of cue point ASpt1: import mx. trace("Cue point type is: " + cuePoint.02.time).*. } my_FLVPlybk. function traceit(cuePoint:Object):Void { trace("Cue point name is: " + cuePoint.ready = function(eventObject:Object):Void { rtn_obj = my_FLVPlybk. trace("Cue point time is: " + cuePoint. FLVPlayback.addASCuePoint(2.name). listenerObject. traceit(rtn_obj).contentPath = "http://www. //create cue point object my_FLVPlybk. } my_FLVPlybk.*.com/flash/video/ cuepoints. rtn_obj = my_FLVPlybk.findCuePoint("ASpt1"). //create cue point object my_FLVPlybk.time.Finding cue points Using ActionScript.time). traceit(rtn_obj).findCuePoint("ASpt"). "ASpt").NAVIGATION). } In the following example. my_FLVPlybk. the ready event handler finds cue point ASpt and calls the findNextCuePointWithName() method to find the next cue point with the same name: import mx.helpexamples. rtn_obj = my_FLVPlybk. function traceit(cuePoint:Object):Void { trace("Cue point name is: " + cuePoint. trace("Cue point type is: " + cuePoint. trace("Cue point time is: " + cuePoint.4. or find the next cue point with a specific name. find the nearest cue point to a time. //add AS cue point var listenerObject:Object = new Object(). listenerObject.video. traceit(rtn_obj).flv" var rtn_obj:Object = new Object().helpexamples.addEventListener("ready".addEventListener("ready". "ASpt1").02.

if(eventObject. Enabling and disabling embedded FLV file cue points You can enable and disable embedded FLV file cue points using the setFLVCuePointEnabled() method. When that cuePoint event occurs.*. FLVPlayback. and seek to the previous navigation cue point from a specified time.time.seekToNavCuePoint("point2").seekToPrevNavCuePoint() on page 660.contentPath = "http://helpexamples.seekToNavCuePoint() on page 656. listenerObject. which is the time of the current cue point.flv".flv and seeks to the cue point at 7.addEventListener("cuePoint". The following example plays the FLV file cuepoints.ready = function(eventObject:Object) { my_FLVPlybk. and FLVPlayback. For more information. and findNextCuePointWithName() methods.info.info.seekToPrevNavCuePoint(eventObject.time == 7. You can find disabled cue points. the example calls the seekToPrevNavCuePoint() method to seek to the first cue point.time).seekToNextNavCuePoint() on page 658.748 when the ready event occurs.info.findCuePoint() on page 582.cuePoint = function(eventObject:Object) { trace(eventObject.addEventListener("ready".info. the example calls the seekToNextNavCuePoint() method to seek to the last cue point by adding 10 seconds to eventObject. var listenerObject:Object = new Object().com/flash/video/ cuepoints. see FLVPlayback.. however. Disabled cue points do not trigger cuePoint events and do not work with the seekToCuePoint().findNextCuePointWithName() on page 588. import mx. When the cuePoint event occurs.time + 10).time .For more information about finding cue points. see FLVPlayback.005). } my_FLVPlybk.info. seekToNextNavCuePoint(). listenerObject).video. Seeking navigation cue points You can seek to a navigation cue point. FLVPlayback. and FLVPlayback. listenerObject. my_FLVPlybk.748) my_FLVPlybk.seekToNextNavCuePoint(eventObject. var listenerObject:Object = new Object(). and seekToPrevNavCuePoint() methods. with the findCuePoint(). } my_FLVPlybk. else my_FLVPlybk. seek to the next navigation cue point from a specified time. listenerObject).findNearestCuePoint() on page 585. Using cue points 515 . findNearestCuePoint().

removeASCuePoint("ASpt2"). var listenerObject:Object = new Object(). "point3"). see FLVPlayback. For more information.name).cuePoint = function(eventObject:Object):Void { trace("Cue point time is: " + eventObject.info.info.addEventListener("ready". trace("Cue point type is: " + eventObject. listenerObject).You can test whether an embedded FLV file cue point is enabled using the isFLVCuePointEnabled() method.name).*.name == "ASpt1") { my_FLVPlybk.contentPath = "http://www.setFLVCuePointEnabled(false. For more information. } } my_FLVPlybk.addEventListener("cuePoint". } } my_FLVPlybk. see FLVPlayback. the event handler tests to see if cue point point3 is disabled and.type). "point2"). Removing an ActionScript cue point You can remove an ActionScript cue point using the removeASCuePoint() method. listenerObject.info. When the first cuePoint event occurs. trace("Removed cue point ASpt2"). listenerObject).helpexamples. if so. var listenerObject:Object = new Object(). my_FLVPlybk.info.isFLVCuePointEnabled() on page 595 and FLVPlayback.info.setFLVCuePointEnabled() on page 662. import mx. The following example disables the embedded cue points point2 and point3 when the video is ready to play. trace("Cue point name is: " + eventObject. listenerObject. if (eventObject.isFLVCuePointEnabled("point2") == false) { my_FLVPlybk.time). enables it.removeASCuePoint() on page 634.setFLVCuePointEnabled(false. listenerObject).com/flash/video/ cuepoints. } my_FLVPlybk.flv".cuePoint = function(eventObject:Object):Void { trace("Cue point name is: " + eventObject. "point2").video. however.ready = function(eventObject:Object):Void { my_FLVPlybk. The following example removes the cue point ASpt2 when cue point ASpt1 occurs: var listenerObject:Object = new Object().addEventListener("cuePoint". listenerObject. 516 FLVPlayback Component . if (my_FLVPlybk.setFLVCuePointEnabled(true. my_FLVPlybk.

which is the one that will be affected by the properties and methods of the FLVPlayback class. To make the video player visible. To create an additional video player.Playing multiple FLV files You can play FLV files sequentially in an FLVPlayback instance simply by loading a new URL in the contentPath property when the previous FLV file finishes playing. listenerObject). } }. You create the initial video player when you drag the FLVPlayback component to the Stage. The component automatically assigns the initial video player the number 0 and makes it the default player.flv". my_FLVPlybk. For more information on how these properties interact with the methods and properties of the FLVPlayback class. however. simply set the activeVideoPlayerIndex property to a new number. my_FLVPlybk. Setting the activeVideoPlayerIndex property also makes the specified video player the active video player.helpexamples. Using multiple video players You can also open multiple video players within a single instance of the FLVPlayback component to play multiple videos and switch between them as they play. which occurs when an FLV file finishes playing.video. the following ActionScript code listens for the complete event. play new FLV listenerObject. For example.contentPath == "http://www.flv").*. set the visibleVideoPlayerIndex property to the video player’s number.contentPath = "http://www.activeVideoPlayerIndex on page 545 and FLVPlayback. Playing multiple FLV files 517 .com/flash/video/water.helpexamples. see FLVPlayback. import mx. Setting the activeVideoPlayerIndex property does not make the video player visible.helpexamples.play("http://www.complete = function(eventObject:Object):Void { if (my_FLVPlybk. var listenerObject:Object = new Object().flv") { my_FLVPlybk. the code sets the name and location of a new FLV file in the contentPath property and calls the play() method to play the new video.com/flash/video/ clouds.visibleVideoPlayerIndex on page 684.com/flash/video/ clouds. When this event occurs.addEventListener("complete". // listen for complete event.

helpexamples. //pause the first FLV my_FLVPlybk.flv".addASCuePoint(3. When the ready event occurs.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ // add a cue point to the default player import mx.activeVideoPlayerIndex = 0. my_FLVPlybk.video.cuePoint = function(eventObject:Object):Void { // display the no. "2nd_switch"). listenerObject).*. // add a handler function for the cuePoint event listenerObject. the event handler opens a second video player by setting the activeVideoPlayerIndex property to the number 1. It specifies an FLV file and a cue point for the second video player and then makes the default player (0) the active video player again.helpexamples. To switch to another FLV file while one is playing. "1st_switch").vp == 0) { my_FLVPlybk. my_FLVPlybk. // make the 2nd player visible my_FLVPlybk.activeVideoPlayerIndex = 1.vp == 1) { my_FLVPlybk. listenerObject. my_FLVPlybk.com/flash/video/ clouds.ready = function(eventObject:Object):Void { // add a second video player and create a cue point for it my_FLVPlybk.pause(). switches to the second player (1). and plays its FLV file: // create a listener object var listenerObject:Object = new Object(). my_FLVPlybk. // test for the video player and switch FLVs accordingly if (eventObject. // make the 1st player active 518 FLVPlayback Component .activeVideoPlayerIndex = 1. my_FLVPlybk. my_FLVPlybk.addEventListener("ready".play(). /** Requires: . // pause the 2nd FLV my_FLVPlybk. }. Cue points allow you to intervene at specific points in the FLV file using a cuePoint event.addASCuePoint(3. var listenerObject:Object = new Object(). of the video player causing the event trace("Hit cuePoint event for player: " + eventObject.contentPath = "http://www. you must obtain control to make the switch in your ActionScript code.pause(). // begin playing the new player/FLV } else if (eventObject.activeVideoPlayerIndex = 0.flv".The following ActionScript code loads the contentPath property to play an FLV file in the default video player and adds a cue point for it.com/flash/video/ water. The following code creates a listener for the cuePoint event and calls a handler function that pauses the active video player (0).visibleVideoPlayerIndex = 1. // make the 2nd player active my_FLVPlybk.contentPath = "http://www.vp).

you must add the main. It sets the autoPlay property.play(). which defaults to true for the default video player.activeVideoPlayerIndex on page 545.asc file to your Flash Media Server FLV application. my_FLVPlybk. Properties and methods that control dimensions do interact with the property. to false. see “FLVPlayback. and it has no effect on a subsequent load into the default video player. respectively.play().vp == 0) { my_FLVPlybk.visibleVideoPlayerIndex = 0. and user interface controls are always global and their behavior is not affected by setting the activeVideoPlayerIndex property.adobe. see FLVPlayback. For more information. The remaining properties and methods target the video player identified by the value of the activeVideoPlayerIndex property.my_FLVPlybk. // make the 1st player visible my_FLVPlybk.addEventListener("cuePoint".addEventListener("complete". and give it a name such as my_application.visibleVideoPlayerIndex = 1. For more information on these methods and properties and the effect of setting the activeVideoPlayerIndex property.complete = function(eventObject:Object):Void { trace("Hit complete event for player: " + eventObject. Create a folder in your FMS application folder. The cuePoints property has no effect. // begin playing the 1st player } } // add listener for a cuePoint event my_FLVPlybk. dimensions.visibleVideoPlayerIndex” on page 684. visibleVideoPlayerIndex Streaming FLV files from a FMS If you use a FMS to stream FLV files to the FLVPlayback component. 0. Streaming FLV files from a FMS 519 . my_FLVPlybk. totalTime. listenerObject. } else { my_FLVPlybk. and false. however. The methods and properties that control volume.vp). and isLive properties. which the FLVPlayback instance always sets to the default values: empty string. except for the contentPath. } } my_FLVPlybk. listenerObject). if (eventObject.com/go/learn_fl_samples.activeVideoPlayerIndex = 1. You can find the main. visibility. To set up your FMS for streaming FLV files: 1. positioning. the FLVPlayback instance sets its properties to the value of the default video player.asc file in the samples available online at www. listenerObject). When you create a new video player.closeVideoPlayer(1).

isLive on page 597. or create a new skin. For more information. which includes terminology and the basic concepts of working with styles. Customizing the FLVPlayback component This section explains how to customize the FLVPlayback component. N OTE 520 You must upload your skin SWF file to the web server along with your application SWF file for the skin to work with your FLVPlayback component. and themes. see FLVPlayback. You have the following choices for customizing the FLVPlayback component: select a predesigned skin. use only the techniques described in this section. 3. Copy the main. 4. skin FLV Playback Custom UI components individually. When playing a live stream with FMS. Most of the methods used to customize other components. skins.com/support/documentation/en/flashcom/. Place your FLV files in the _definst_ folder. you need to set the FLVPlayback property isLive to true.flv.adobe. To access your FLV files on the Flash Media Server.2. You can also use FLVPlayback properties to modify the behavior of a skin. For more information on administering the Flash Media Server. FLVPlayback Component . For a comprehensive overview of customizing components. To customize the FLVPlayback component. however. see the documentation at www. 5. including how to set up a live stream. Create a folder named _definst_ inside the streams folder. do not work with the FLVPlayback component. see “Customizing Components” in Using ActionScript 2. Create a folder named streams in the my_application folder.0 Components. use a URL such as rtmp://my_servername/ my_application/stream.asc file into the my_application folder.

you can select a skin or provide a URL that specifies the location of the skin SWF file.Selecting a predesigned skin You can select a skin for the FLVPlayback component by double-clicking the Skin field on the Parameters tab in the Component inspector. For this reason. You should edit a movie clip and its contents to be a specific size.swf extension.0 folder.0 folder. You can make new skins available to this dialog box by creating them and placing the SWF file in the FLVPlayback Skins/ActionScript 2. If you want to skin the FLVPlayback component using the FLV Playback Custom UI components. with the autoSize and maintainAspectRatio properties set to false. however. Skinning FLV Playback Custom UI components individually The FLV Playback Custom UI components allow you to customize the appearance of the FLVPlayback controls within your FLA file and allow you to see the results when you preview your web page. These components are not designed to be scaled. For more information about creating a skin set. The name appears in the pop-up menu with a . select None from the pop-up menu. In the Select Skin dialog box. Customizing the FLVPlayback component 521 . see “Creating a new skin” on page 528. it is generally best to have the FLVPlayback component on the Stage at the desired size. Skins that are listed in the Skin pop-up menu are located in the Flash CS3 Configuration/ FLVPlayback Skins/ActionScript 2.0 folder or in the user’s local Configuration/FLVPlayback Skins/ActionScript 2.

in the second case. they have extra movie clips that you can use as a frame around one or both of the buttons. down and disabled. you edit them as you would any other symbol. either don’t use them or delete them from your Library panel. place them where you want them on the Stage. you simply edit each of these movie clips. It simply stops the playhead on Frame 1 and specifies which movie clips to use for which states. simply drag them on the Stage from your Library panel and place them where you want them. The buttons include the BackButton. simply drag the FLV Playback Custom UI components that you want from the Components panel. these movie clips are placed here to make editing more convenient and to force them to load into the SWF file without checking the Export in First Frame check box in the Symbol Properties dialog box. 522 FLVPlayback Component . On that frame.To begin. however. PlayButton. You can change their size as well as their appearance. one on top of the other—in the first case. you can see that each one is set up a little differently from the others. a Mute-on and a Mute-off button. they have only one frame with two layers and no script. PlayPauseButton and MuteButton buttons The PlayPauseButton and MuteButton buttons are set up differently than the other buttons. Button components The button components have a similar structure. skin each of these two internal buttons as described in “Skinning FLV Playback Custom UI components individually” on page 521. To skin the PlayPauseButton or MuteButton buttons. MuteButton. and give each one an instance name in the Property inspector. This is usually an instance of the normal state for the button. If you don’t want them. BackButton and ForwardButton buttons The BackButton and ForwardButton buttons are also set up differently than the other buttons.) To skin the button. (At runtime. ForwardButton. After you open the components. there are four movie clips on the Stage for each display state: normal. there are two buttons. but not necessarily so. You should not need to change this script. You must still select the Export for ActionScript option. These movie clips are not required and have no special capability. On Frame 2. PauseButton. PlayPauseButton. On Frame 2. they are provided only as a convenience. over. Most have a single movie clip on Frame 1 with the instance name placeholder_mc. the component never actually goes to Frame 2. no additional action is required. After your components are on the Stage. and StopButton. To use them. Some ActionScript usually appears on Frame 1. a Play and a Pause button.

uses the same handle tracking mechanisms. but there is nothing special about this configuration. you might have problems with handles and with progress and fullness movie clips. you might want to change its contents rather than scale it. although they have different functions. so it is important to maintain this convention. You still must select the Export for ActionScript option. By default. BufferingBar component The buffering bar component is simple: It consists of an animation that is made visible when the component enters the buffering state. or you can replace those common clips and make every button look different. and has support for clips nested within to track progress and fullness. There are many places where the ActionScript code in the FLVPlayback component assumes that the registration point of your SeekBar or VolumeBar component is at the upper-left corner of the content. Although the buffering bars in the skin SWF files use 9-slice scaling because they need to be scaled at runtime. these movie clips are placed here to make editing more convenient and as a way to force them to be loaded into the SWF file without checking the Export in First Frame check box in the Symbol Properties dialog box. SeekBar and VolumeBar components The SeekBar and VolumeBar components are similar. you might want to change its contents rather than scale it. and it does not require any special ActionScript to configure it. If you want to make the SeekBar wider or taller. as supplied. the SeekBar FLV Custom UI component does not and cannot use 9-slice scaling because it has nested movie clips. it is a striped bar moved from left to right with a rectangular mask on it to give it a “barber pole” effect. the BufferingBar FLV Custom UI Component does not and cannot use 9slice scaling because it has nested movie clips. Although the seek bars in the skin SWF files use 9-slice scaling because they need to be scaled at runtime. are based on a common set of movie clips so that you can change the appearance of all the buttons at once. Otherwise. Customizing the FLVPlayback component 523 . Handle An instance of the handle movie clip is on Frame 2. You can use this capability. however. As with the BackButton and ForwardButton components. If you want to make the BufferingBar wider or taller. the component never actually goes to Frame 2. Each has handles.Most of the buttons.

This rectangle increases the size of the handle’s hit area. the handle can range from 98 to 202 horizontally and stay at 89 vertically. the FLVPlayback component creates an instance of the specified movie clip on the Stage as a sibling of the Bar component instance. the bar movie clip must keep its registration point as the upper-left corner of its content to work properly. and it is 100 pixels wide. A seek bar movie clip must have its registration point as the upper-left corner of its content to work properly. The following ActionScript code is on Frame 1 of the SeekBar component to manage the handle: stop(). Because the handle is created dynamically at runtime. generally. handleLinkageID = "SeekBarHandle". The call to the stop() function is necessary due to the content of Frame 2. you can replace the inside of the handle with any image you want. This is based on the registration points of each movie clip. The second line specifies which symbol to use as the handle. and the variable handleRightMargin determines where it is at the end (100%). relative to the bar instance. So. to keep the registration point centered horizontally in the middle of the handle movie clip. handleY = 11. however. similar to the hit state of a button. If you change the handleLeftMargin and handleRightMargin to -2 and handleY to -11. with these limits. The numbers give the offsets from the left and right ends of the bar control. if there a bar control is set at (100. disregarding the invisible hit state rectangle. your handle must also be at the root level. handleLeftMargin = 2. The registration point in the sample handle is at the tip of the triangle to place it relative to the visible part. Also. This rectangle with alpha set to 0 is not necessary for any other reason and. The variable handleLeftMargin determines the handle’s original location (0%). The variable handleY determines the y position of the handle. the handle’s far left and right sides will go past the margins. and negative numbers marking the limits outside the bar. for example. which means that they have the same parent movie clip. At runtime. with positive numbers marking the limits within the bar. making it easier to grab without changing its appearance. So. If you put your registration point in the middle of the handle. 100). and you should not need to change this if you simply edit the handle movie clip instance on Frame 2. These offsets specify where the handle can go. if your bar is at the root level. it must be a movie clip and not a button. handleRightMargin = 2. based on its registration point. the handle can range from 102 to 198 horizontally and stay at 111 vertically. 524 FLVPlayback Component . It works best.You might notice that the handle movie clip has a rectangle in the background with alpha set to 0.

You can set the progress and fullness movie clips with or without the fill_mc movie clip instance nested inside.slideReveal is true or false. so that none of it shows through the mask. and the SeekBar progress_mc movie clip shows the method without the fill_mc movie clip. The FLVPlayback component finds these movie clip instances by looking for a specific instance name. If you do not that distortion. or both of these movie clips.slideReveal is false or undefined (the default behavior). As the percentage increases. but it distorts the fill horizontally. Customizing the FLVPlayback component 525 . or a mask will be created dynamically at runtime. it reveals all of fill_mc. it moves to the right until. the mask will be resized from left to right to reveal more of fill_mc. If fill_mc. then fill_mc is moved from left to right to expose it through the mask. This is not necessarily _xscale = 100 because mask_mc might have been scaled when it was created. it is all the way to the left. the dynamically created mask will be rectangular and the same size as fill_mc at 100%. and as the percentage increases.slideReveal is true. at 100%. The SeekBar progress_mc illustrates this method. If you do not mask fill_mc. When it is at 0%. The VolumeBar fullness_mc movie clip shows the method with the fill_mc movie clip. but in practice. so your progress movie clip instance must have your bar movie clip as its parent and have the instance name progress_mc. the nested fill_mc movie clip instance is masked. The fullness movie clip instance must have the instance name fullness_mc. In the VolumeBar fullness_mc movie clip. At 0%. The method with the fill_mc movie clip nested inside is useful when you want a fill that cannot be scaled without distorting the appearance. name the instance mask_mc and set it up so that fill_mc appears as it would when percentage is 100%. A progress movie clip fills up as the FLV file downloads (which is useful for an HTTP download only. You can either mask it when you create the movie clip. They are structurally the same and behave similarly but track different values. the mask will be scaled to 05 horizontally. depending on whether fill_mc. because it is always full if streaming from FMS) and a fullness movie clip fills up as the handle moves from left to right. it is back where it was created on the Stage.Progress and fullness movie clips The SeekBar component has a progress movie clip and the VolumeBar has a fullness movie clip. The method without fill_mc is simpler than the method with fill_mc. If you mask it with a movie clip. The fill_mc movie clip is revealed with the mask in one of two ways. any SeekBar or VolumeBar can have either. at 100%. you must use fill_mc. neither. the _xscale increases until. If fill_mc.

playPauseButton = playpausebtn. my_FLVPlybk. Again.bufferingBar = bufbar.forwardButton = forbtn. my_FLVPlybk. making it invisible. MuteButton. and SeekBar controls: 1. my_FLVPlybk. my_plypausbttn. 526 FLVPlayback Component . the FLVPlayback instance is my_FLVPlybk. Drag a StopButton. my_FLVPlybk. my_FLVPlybk.volumeBar = volbar. 3. Set the contentPath parameter through the Component inspector to http:// www. Example The following steps create custom StopButton. a PlayPauseButton. my_FLVPlybk. my_FLVPlybk.stopButton = stopbtn. the instance’s _xscale is set to 0. and place them over the FLVPlayback instance. and give it an instance name of my_FLVPlybk. // set playButton property to playbtn. at 100%. As the percentage grows. Connecting your FLV Playback Custom UI components You must write ActionScript code to connect your FLV Playback Custom UI components to your instance of the FLVPlayback component. etc. 2. PlayPauseButton.com/flash/video/cuepoints.helpexamples. Drag the FLVPlayback component to the Stage. stacking them vertically on the left.backButton = backbtn. and a MuteButton to the Stage. my_FLVPlybk. First. 4. and the FLV Playback Custom UI control instances are to the right of the equal (=) signs: //FLVPlayback instance = my_FLVPlybk my_FLVPlybk. the clip is the same size it was on the Stage when it was created.seekBar = seekbar.playButton = playbtn.muteButton = mutebtn. this is not necessarily _xscale = 100 because the clip instance might have been scaled when it was created. In the following example. the FLVPlayback property names follow the periods (. At 0%. and my_mutebttn).). the _xscale is adjusted until. Set the Skin parameter to None.flv.The progress or fullness movie clip is scaled horizontally based on the percentage.pauseButton = pausebtn. you must assign a name to the FLVPlayback instance and then use ActionScript to assign your FLV Playback Custom UI component instances to the corresponding FLVPlayback properties. my_FLVPlybk. Give each button an instance name in the Property inspector (such as my_stopbttn.

0 and y-coordinate (Y:) to 0. In the Library panel. Scale by 300%. such as Play. 19. you avoid opening every button state and moving the icon movie clip instance. a SeekBar component to the Stage. 8. Select Customizing the FLVPlayback component 527 . Set the xcoordinate (X:) to 0. 6. Select the Select All option. and set the fill to blue #(0033FF). 14. draw an oval in the same location. the Library panel. MuteOffIcon. and then open the SquareButton folder below it. Double-click SeekBarProgress in the FLVPlayback Skins/Seek Bar folder. and delete the symbol. SeekBarHandle in the FLVPlayback Skins/Seek Bar folder and set the color to red (#FF0000). and give it an instance name of my_seekbar. MuteOnIcon.0. Select the SquareBgDown movie clip. the blue Back arrow above the Timeline to return to Scene 1. 7. 12. Frame 1. and double-click it to open it on the Stage. select Select All from the menu. set the width (W:) to 40 and the height (H:) to 20. 10.5. and StopIcon). Repeat 11. Drag 15. 18. Select the oval tool. and place it in the lower-right corner of the FLVPlayback instance. Click the blue Back arrow above the Timeline to return to Scene 1. open the FLVPlayback Skins folder. In 16. Do the following steps for each one: a. 9. Frame 1. c. but change the fill to yellow (#FFFF00). Right-click (Windows) or Control-click (Macintosh). Change the color to red (#FF0000). and so on. but change the fill to green (#006600). double-click the SeekBar to open it on the Stage. and set the color to red (#FF0000). where Label is the name of the button. b. d. steps 6 to 8 for SquareBgNormal. In Property inspector. PlayIcon. 17. 13. the SeekBar instance on the Stage. You can find these movie clips in the Library panel under FLV Playback Skins/Label Button/Assets. Edit the movie clips for the various symbol icons within the buttons (PauseIcon.Click 21. Repeat steps 6 to 8 for SquareBgOver. and set the color to yellow (#FFFF00). Change the X: location of the content to 7. Double-click 20. Select the outline. N OTE By changing the location this way.0 to alter the horizontal placement of the icon in every button state. Scale it to 400%. Pause.

22. BufferingBar. Creating a new skin The best way to create a skin SWF file is to copy one of the skin files that come with Flash. as shown in the following example: import mx. without changing the dimensions. because 9-slice scaling is not in effect when you are authoring. The following sections cover more complex customizations and changes to the SeekBar. You can make changes. To quickly see what actually appears in the SWF file. my_FLVPlybk.0 folder. You can see these changes exactly as they will appear in the finished SWF file. You will find that simple modifications that change the appearance of a button or of the chrome (the background) of a button. and assign the button and seek bar names to the corresponding FLVPlayback properties.0 folder. This will also show you how 9-slice scaling affects certain controls.0 folder either in the Flash application folder or in a user’s local Configuration/FLVPlayback Skins/ActionScript 2. it might seem that certain things on the Stage are unnecessary. so you can make dramatic changes by simply changing the color of the chrome. 528 FLVPlayback Component . my_FLVPlybk. To make your finished skin SWF file available as an option in the Select Skin dialog box. but many of these things are put into guide layers.Press Control+Enter to test the movie. All the installed skins have the same buttons based on different-colored chromes.video. by simply moving the placeholder clips.playPausebutton = my_plypausbttn. When looking at the installed skin FLA files.*.stopButton = my_stopbttn. my_FLVPlybk. 23. such as rearranging controls in the layout movie clip. add an import statement for the video classes.In the Actions panel on Frame 1 of the Timeline.muteButton = my_mutebttn. my_FLVPlybk. select Control > Test Movie to test the movie. You can find the FLA files for these skins in the Flash CS3 application Configuration/FLVPlayback Skins/FLA/ActionScript 2. and VolumeBar movie clips. are fairly easy.seekBar = my_seekbar. and use it as a starting point. put it in the Configuration/FLVPlayback Skins/ActionScript 2.

and so on for foreground clips. The names of the placeholder clips are: playpause_mc. play_mc. stop_mc. seekBar_mc. Customizing the FLVPlayback component 529 . It is used only to calculate where to place the controls. bg2_mc. If you set the FlvPlayback. However. The other controls on the Stage will be used at runtime. The bg1_mc clip is special. Generally. and some use bg2_mc for the border around the Forward and Back buttons. All the other controls are laid out relative to video_mc. and so on for background clips. bg1_mc is used for the chrome. with fg1_mc first and fg2_mc above fg1_mc. see “Modifying skin behavior” on page 534. This scheme is designed to put background clips behind the controls. For information on the skinAutoHide property. All that is important are the x (horizontal) and y (vertical) location and the height and the width of the placeholder. Which clip is used for a control is not important. bufferingBar_mc. This is important for skins that appear outside the bounds of the video player. the layered relationship of the clips is actually determined by the ordering of the corresponding controls on the Stage. pause_mc.Using layout_mc When you open a skin FLA file. bg3_mc will not be used. and volumeBar_mc. the contents of this clip are not visible at runtime. For other controls the clip for that control is used. so make sure that is correct. the skin shows when the mouse is over the bg1_mc clip. if you have bg1_mc and bg3_mc but no bg2_mc.skinAutoHide property to true. back_mc. and the foreground clips above the controls. volumeMute_mc. with bg1_mc on the bottom and bg2_mc above it. You can also have as many background and foreground clips as you want besides the standard controls. and fg1_mc. for buttons the normal state clip is used. but this is only for convenience. Although layout_mc looks a lot like how the skin will look like at runtime. and so on. Each of the placeholder clips has a specific instance name. you can probably fix the layout by moving these placeholder clips. If you start with one of the FLA files and change the size of the controls. Within layout_mc is a placeholder for the FLVPlayback component named video_mc. you will find a movie clip named layout_mc in the upper-left corner of the Stage. fg2_mc. The layout_mc clip and the ActionScript code that you find on the same frame define how the controls will be laid out at runtime. You must use the following naming convention. For example. You cannot skip numbers. This clip must be named layout_mc. however: bg1_mc. In the FLA files.

// minimum width and height of video recommended to use this skin. If you do not want to specify a minimum size. Defaults to false. and they are laid on top of one another and have both the anchorLeft and anchorRight properties set to true. Positions the control relative to the bottom of the FLVPlayback instance. // leave as undefined or <= 0 if there is no minimum layout_mc. Defaults to true. see how they are used in the skins. Some controls have specific ActionScript that defines additional behavior. Each placeholder can have the following properties applied to it: Property mc:MovieClip Description The instance on the Stage for this control. layout_mc. the control will be scaled horizontally at runtime. To see the effects of these properties. Positions the control relative to the left side of the FLVPlayback instance.ActionScript The following ActionScript code applies to all controls generally. and all controls to their right have anchorRight set to true. All controls to the left of the BufferingBar and SeekBar have anchorLeft set to true. Positions the control relative to the top of the FLVPlayback instance. If not set. layout_mc. All controls have anchorBottom set to true.foo_mc. Defaults to false.minHeight = 60. unless anchorTop is explicitly set to true. and then it defaults to false anchorLeft:Boolean anchorRight:Boolean Positions the control relative to the right side of the FLVPlayback instance. Defaults to true unless anchorRight is explicitly set to true.minWidth = 270. The initial ActionScript code defines the minimum width and height for the skin. If both the anchorTop and anchorBottom properties are true. 530 FLVPlayback Component . and that is explained in the section for that control. and then it defaults to false. the control will be scaled vertically at runtime. The BufferingBar and SeekBar controls are the only ones that scale. leave it as undefined or less than or equal to zero. anchorBottom:Boolean anchorTop:Boolean If both the anchorLeft and anchorRight properties are true. The Select Skin dialog box shows these values and they are used at runtime to prevent the skin from scaling below its minimum size.mc would default to foo_mc.

down_mc. simply place the play_mc and pause_mc clips on the Stage without wrapping them with a playpause_mc clip. 0) as it is in most of the button skins. so if some states are bigger than others. over_mc. in some cases. but where these movie clip instances are placed on the Stage is not important. down_mc. You simply need to move the controls to the top. you might not be able to place your art at (0. down_mc. over_mc.You can try editing the layout_mc movie clip to make a skin where the controls sit at the top rather than at the bottom. disabled_mc back_mc up_mc. Customizing the FLVPlayback component 531 . that they are nested within movie clips in a specific way and that every clip instance has the correct instance name. The structure of the clip instances and their instance names are shown in the following example: playpause_mc play_mc up_mc. You might find it easier. down_mc. relative to video_mc. These are on guide layers and are there to show the use of the ForwardBackBorder. see “Background and foreground clips” on page 534. rather than a combined Play-Pause button. ForwardBorder. over_mc. disabled_mc forward_mc up_mc. The up_mc clip is used for omitted states. Button states All the button states are laid out on the Stage. For more information. over_mc. If you do not want to use all the states. down_mc. disabled_mc pause_mc up_mc. You can edit the various states as desired. however. and set anchorTop equal to true for all controls. to keep the registration point in the center of the art. over_mc. and BackBorder movie clips. down_mc. Remember that all states are placed in the same place by their registration points. disabled_mc volumeMute_mc on_mc up_mc. It is important. disabled_mc stop_mc up_mc. over_mc. you can omit some. If you want to have separate Play and Pause buttons. disabled_mc off_mc up_mc. down_mc. but you should include up_mc. over_mc. disabled_mc Notice that the FLA files have additional Forward and Back buttons on the Stage.

Seek bar and volume bar The seek bar also has two movie clips: seekBar_mc and seekBarProgess_mc. Buffering bar The buffering bar has two movie clips: bufferingBar_mc and bufferingBarFill_mc. based on the difference between the x (horizontal) positions of bufferingBar_mc and bufferingBarFill_mc. You can customize the positioning with ActionScript code. For more information. It is automatically masked at runtime to show only the portion above the stretched bufferingBar_mc. see “BufferingBar component” on page 523. Each clip’s position on the Stage relative to the other clip is important because this relative positioning is maintained. you could set it up like the FLV Playback Custom UI BufferingBar component. The seekBarProgress_mc clip also scales. The bufferingBarFill_mc clip is extremely wide. The seekBar_mc clip has 9-slice scaling applied to it. but it does distort. By default. The bufferingBar_mc clip has 9-slice scaling applied to it. the exact dimensions of the mask will maintain an equal margin on the left and right within the bufferingBar_mc. the seekBarProgress_mc cannot be nested within seekBar_mc because seekBar_mc uses 9-slice scaling. which does not work well with nested movie clips. Although both clips scale. If your buffering bar does not need to scale or does not use 9-slice scaling.No additional ActionScript code is necessary to set up the buttons besides the code described in “Using layout_mc” on page 529. The buffering bar uses two separate clips because the component scales bufferingBar_mc but not bufferingBarFill_mc. 532 FLVPlayback Component . which looks fine when distorted. The buffering bar has the following additional property: Property fill_mc:MovieClip Description Specifies the instance name of the buffering bar fill. It does not use 9-slice scaling because it is a fill. so the borders won’t distort when it scales. Each clip’s position on the Stage relative to the other clip is important because this relative positioning is maintained. Defaults to bufferingBarFill_mc. so that it will always be wide enough without needing to be scaled. so the borders won’t distort when it scales.

handleRightMargin = 2. For more information. set up the same way as they are in the FLV Playback Custom UI components. The exact dimensions of the bufferingBarProgress_mc at 100% is defined by left and right margins within the bufferingBar_mc clip. Handle The SeekBar and VolumeBar handles are placed on the Stage next to the bar. it is not masked and is scaled horizontally. much like the way a progress_mc clip works in FLV Playback Custom UI Components. Both have rectangle backgrounds with the alpha property set to 0. The left margin is set by the difference between the handle’s x (horizontal) location and the bar’s x (horizontal) location. it is possible to create a fullness movie clip for the seek bar. by default. as shown in the following example: progressLeftMargin = 2. or if it does scale but does not use 9-slice scaling. equal and based on the difference between the x (horizontal) positions of seekBar_mc and seekBarProgress_mc. fullnessLeftMargin = 2. Beyond these properties. For more information on that.The seekBarProgress_mc clip works without a fill_mc. handleY = 11. see “Progress and fullness movie clips” on page 525. and the right margin is equal to the left margin. The following example is the same ActionScript code that is used with the FLV Playback Custom UI components: handleLeftMargin = 2. progressRightMargin = 2. see “SeekBar and VolumeBar components” on page 523. In other words. the handle’s left margin. and y-axis values are set by its position relative to the bar movie clip. right margin. Customizing the FLVPlayback component 533 . you could set up your progress_mc or fullness_mc using any of the methods used for FLV Playback Custom UI components. As with the FLV Playback Custom UI SeekBar component. progressY = 11. You can customize the dimensions with ActionScript in the seek bar movie clip. These are present only to increase the hit region and are not required. The exception is that the handle is implemented differently. These dimensions are. By default. For more information. You can customize these values through ActionScript in the SeekBar or VolumeBar movie clip. fullnessRightMargin = 2. fullnessY = 11. the handles are simple movie clips. If your seek bar does not need to scale. Because the volume bar in the skins does not scale. see the following section. it is constructed the same way as the VolumeBar FLV Playback Custom UI component.

progress_mc:MovieClip fullness_mc:MovieClip Background and foreground clips The movie clips chrome_mc and forwardBackBorder_mc are implemented as background clips. and BackBorder movie clips on the Stage and the placeholder Forward and Back buttons. Setting the bufferingBarHidesAndDisablesOthers property to true causes the FLVPlayback component to hide the SeekBar and its handle as well as disable the Play and Pause buttons when the component enters the buffering state. Of the ForwardBackBorder. Defaults to seekBarProgress_mc or volumeBarProgress_mc. You can prevent this activity by setting bufferingBarHidesAndDisablesOthers to true and disabling the SeekBar element and the Pause and Play buttons while the component is in the buffering state. an impatient user might try to start seeking by clicking the Play and Pause buttons. ForwardBorder. This can be useful when an FLV file is streaming from FMS over a slow connection with a high setting for the bufferTime property (10. It is only in the skins that actually use the Forward and Back buttons. the FLVPlayback component hides the skin when the mouse is not over the viewing area. 534 FLVPlayback Component . The default value of this property is true. No additional ActionScript is required to set up the background and foreground clips. Modifying skin behavior The bufferingBarHidesAndDisablesOthers property and the skinAutoHide property allow you to customize the behavior of your FLVPlayback skin. Defaults to seekBarFullness or volumeBarFullness. which could delay playing the file even longer. In this situation. The skinAutoHide property affects only predesigned skin SWF files and not controls created from the FLV Playback Custom UI components. The movie clip for fullness. the only one that is not on a guide layer is ForwardBackBorder. Defaults to seekBarHandle_mc or volumeBarHandle_mc The movie clip for progress.ActionScript The seek bar and volume bar support the following additional properties: Property handle_mc:MovieClip Description The movie clip for the handle. If set to true. for example).

createClassObject().FLVPlayback ActionScript Class Name FLVPlayback extends the MovieClip class and wraps a VideoPlayer object. For information on the VideoPlayer class. FLVPlayback. attachMovie(). Setting a property of the FLVPlayback class with ActionScript overrides an equivalent parameter that initially set the property in the Property inspector or the Component inspector. Brings a video player to the front of the stack of video players. the FLVPlayback component does not extend UIObject or UIComponent and. Method summary for the FLVPlayback class The following table lists the methods of the FLVPlayback class: Method FLVPlayback.closeVideoPlayer() FLVPlayback class 535 .addASCuePoint() FLVPlayback. Unlike other components. therefore.version). to create an instance of the component in ActionScript. which is a class property. Class properties are available only on the class itself. The following code shows the version in the Output panel: trace(mx. Close NetStream for the video player with the specified index and deletes the video player. you must call the MovieClip method. The methods and properties of the FLVPlayback class enable you to play and manipulate FLV files using the FLVPlayback component in your Flash application.FLVPlayback class Inheritance MovieClip > FLVPlayback class mx.bringVideoPlayerToFront() Description Adds an ActionScript cue point. rather than the UIObject method. does not support the methods and properties of these classes.addEventListener() FLVPlayback. For example. Each component class has a version property. NOT E The FLVPlayback class is supported only if you are working in a document that specifies ActionScript 2. The version property returns a string that indicates the version of the component.0 in its Publish Settings.video.video. Creates a listener for a specified event. see “VideoPlayer class” on page 702.FLVPlayback.

setScale() FLVPlayback. Seeks to the navigation cue point with the given name at or after the specified time. with decimal precision up to milliseconds. or the specified time and name.findNearestCuePoint() FLVPlayback.seek() FLVPlayback.getVideoPlayer() FLVPlayback.setFLVCuePointEnabled() FLVPlayback.findCuePoint() Description Finds the specified type of cue point that has the specified time. Sets width and height simultaneously. Seeks to a given time in the file.seekPercent() FLVPlayback. Same as FLVPlayback. the specified name. Removes an event listener. Finds the next cue point with the same name as a cue point returned by the findCuePoint() or findNearestCuePoint() methods.stop() Seeks to the previous navigation cue point. Stops playing the video stream. Begins playing the video stream and also allows loading and playing of a new FLV file.isFLVCuePointEnabled() FLVPlayback.seekSeconds() FLVPlayback.seek(). given in seconds. 536 FLVPlayback Component .pause() FLVPlayback. Enables or disables one or more FLV file cue points. Seeks to a percentage of the way through the file. Pauses playing the video stream.removeASCuePoint() FLVPlayback. FLVPlayback.seekToNextNavCuePoint() Seeks to the next navigation cue point. Gets the video player specified by the index parameter.seekToNavCuePoint() FLVPlayback.setSize() FLVPlayback. FLVPlayback. Removes an ActionScript cue point.findNextCuePointWithName() FLVPlayback.load() FLVPlayback.play() FLVPlayback. Begins loading the FLV file with the autoPlay property set to false.removeEventListener() FLVPlayback.seekToPrevNavCuePoint() FLVPlayback. Returns false if the FLV file embedded cue point is disabled by ActionScript. Sets scaleX and scaleY simultaneously. Finds the specified type of cue point at or near the given time or with the given name.Method FLVPlayback. based on the specified time. based on the specified time.

A value for testing state property.REWINDING FLVPlayback. Can use as type parameter for findCuePoint() and findNearestCuePoint() methods.PLAYING FLVPlayback. Can use as type parameter for findCuePoint() and findNearestCuePoint() methods. A value for testing state property. A value for testing state property.NAVIGATION "loading" "navigation" FLVPlayback. A value for testing state property. A value for testing state property.EVENT "buffering" "connectionError" "disconnected" "event" FLVPlayback. A value for testing state property. FLVPlayback Class properties The following properties occur only for the FLVPlayback class. A value for testing state property. Can use as type parameter for findCuePoint() and findNearestCuePoint() methods.PAUSED FLVPlayback.CONNECTION_ERROR FLVPlayback. A value for testing state property.SEEKING FLVPlayback. Can use as type parameter for findCuePoint() and findNearestCuePoint() methods.LOADING FLVPlayback.STOPPED FLVPlayback. A value for testing state property.DISCONNECTED FLVPlayback. To determine what version of the FLVPlayback component you are using.version "paused" "playing" "rewinding" "seeking" "stopped" A number that is the component’s version number FLVPlayback class 537 .FLV "flv" FLVPlayback. Property FLVPlayback.BUFFERING FLVPlayback.ACTIONSCRIPT Value "actionscript" Description Can use as type parameter for findCuePoint() and findNearestCuePoint() methods.Property summary for the FLVPlayback class The FLVPlayback class has both class and instance properties. They are read-only constants that apply to all instances of the FLVPlayback component in your application.ALL "all" FLVPlayback. FLVPlayback.

properties.backButton FLVPlayback.bitrate FLVPlayback. specifies that the component plays the FLV file immediately when it is loaded. A MovieClip object that is the backButton control. causes the FLV file to rewind to the Frame 1 when play stops. component enters the buffering state. FLVPlayback.bufferTime A number that specifies the number of seconds to buffer in memory before beginning playback of a video stream.bufferingBarHidesAndDisablesOthers Affects behavior of controls when the FLVPlayback.activeVideoPlayerIndex Description A number that specifies which FLV file stream is affected by other methods.autoSize FLVPlayback. if true.autoPlay FLVPlayback. Use this property to manage multiple FLV file streams. Used in some cases to decide which FLV file to play. A Boolean value that is true if the video is in a buffering state. if true. A MovieClip object that is the bufferingBar control. For example. if you drag two instances of the FLVPlayback component to the Stage.autoRewind A Boolean value that. and events. if true.buffering FLVPlayback. each instance has a set of these properties. 538 FLVPlayback Component . A Boolean value that. Default is true.bufferingBar FLVPlayback. Default is 0. A Boolean value that. Read-only. causes the video to automatically size to the source dimensions.Instance properties The following table lists the instance properties of the FLVPlayback class This set of properties applies to each instance of an FLVPlayback component in the application. FLVPlayback. A number that specifies the user’s bandwidth in bits per second. Property FLVPlayback.

A Boolean value that is true if the video stream is live. A string that specifies the URL of an FLV file to load. Should be set only through the Cue Points dialog box.cuePoints FLVPlayback. maintains the video aspect ratio. Read-only. A MovieClip object that is the ForwardButton control. FLVPlayback. A Boolean value that.maintainAspectRatio FLVPlayback. The amount of time.contentPath FLVPlayback. A MovieClip object that is the MuteButton control.metadataLoaded FLVPlayback. Should never be used directly with ActionScript. Read-only.isRTMP FLVPlayback. A Boolean value that is true if the FLV file is streaming from an FMS or an FVSS.metadata FLVPlayback.muteButton FLVPlayback class 539 .idleTimeout FLVPlayback. if available.bytesTotal FLVPlayback.forwardButton FLVPlayback.bytesLoaded Description A number that indicates the extent of downloading in number of bytes for an HTTP download. Read-only. An object that is a metadata information packet that is received from a call to the onMetaData() callback function. A Boolean value that is true if a metadata packet has been encountered and processed or if it is clear that it will not be processed. An array that describes ActionScript cue points and disabled embedded FLV file cue points. before Flash terminates an idle connection to the FMS because playing is paused or stopped.Property FLVPlayback. Read only.height FLVPlayback.isLive FLVPlayback. in milliseconds. A number that specifies the height of the video in pixels. if true. A number that specifies the total number of bytes downloaded for an HTTP download. Read-only.

playheadTime FLVPlayback.scrubbing 540 FLVPlayback Component .ncMgr Description An INCManager object that provides access to an instance of the class implementing INCManager. between each playheadUpdate event.paused FLVPlayback.scaleY FLVPlayback. Read-only. A Boolean value that is true if the FLV file is in a paused state.playing FLVPlayback. A number that specifies the height of the source FLV file. A number that is the current playhead time or position. A MovieClip object that is the PauseButton control.preferredHeight FLVPlayback.playheadUpdateInterval FLVPlayback. A number that specifies the width of the source FLV file. A Boolean value that is true if the FLV file is playing.scaleX FLVPlayback. A number that specifies the vertical scale. A number that is the amount of time. in milliseconds.Property FLVPlayback.pauseButton FLVPlayback. in milliseconds. A number that specifies playhead time as a percentage of the total FLV file duration. A number that is the amount of time.playheadPercentage FLVPlayback. Read-only. between each progress event. A Boolean value that is true if the user is dragging the seekBar handle.playButton FLVPlayback. which can be a fractional value. Readonly.progressInterval FLVPlayback. A number that specifies the horizontal scale. A MovieClip object that is the PlayButton control. measured in seconds.playPauseButton FLVPlayback. FLVPlayback. A MovieClip object that is the PlayPauseButton control.preferredWidth FLVPlayback. Read-only.

A Boolean value that is true if the state is stopped.stateResponsive FLVPlayback. FLVPlayback. stop(). ranging from 1 to 100. A string that specifies the state of the component. in milliseconds. The value is specified as a percentage. Read-only.skin FLVPlayback.totalTime FLVPlayback.state FLVPlayback. A MovieClip object that is the StopButton control. hides the component skin when the mouse is not over the video. A string that specifies the name of a skin SWF file. The default value is 250. A number (percentage) that specifies how far a user can move the scrubBar handle before an update occurs.getTransform() methods to provide more sound control.Property FLVPlayback.visible FLVPlayback class 541 . that the seekToPrevNavCuePoint() method uses when it compares its time against the previous cue point.stopped FLVPlayback.seekToPrevOffset FLVPlayback. A Boolean value that. Read-only. pause() and seek() methods.seekBar Description A MovieClip object that is the SeekBar control.stopButton FLVPlayback. A number. Set with the load(). how often to check the seekBar handle when scrubbing. in seconds.seekBarScrubTolerance FLVPlayback. play(). Read-only. if true.seekBarInterval FLVPlayback. A number that is the total playing time for the video in seconds An object that provides direct access to the Sound. A Boolean value that.setTransform() and Sound. if true. A number that specifies. Defaults to false. A Boolean value that is true if the state is responsive.transform FLVPlayback. makes the FLVPlayback component visible.skinAutoHide FLVPlayback.

Dispatched when a cue point is reached.close Description Dispatched when the buffering state is entered. FLVPlayback.visibleVideoPlayerIndex Description A number that you can use to manage multiple FLV file streams. A MovieClip object that is the VolumeBar control.volumeBar FLVPlayback. Dispatched when playing completes by reaching the end of the FLV file. A number that specifies the vertical location of the video player in pixels.volume FLVPlayback.buffering FLVPlayback. Dispatched the first time the FLV file metadata is reached. A number in the range of 0 to 100 that indicates the volume control setting. A number (percentage) that specifies how far a user can move the volume bar handle before an update occurs.complete FLVPlayback. A number that specifies the horizontal location of the video player in pixels. how often to check the volumeBar handle when scrubbing. in milliseconds.metadata 542 FLVPlayback Component . A number that specifies. The default value is 250. Dispatched when the location of the playhead is moved forward by a call to the seek() method. FLVPlayback.width FLVPlayback.fastForward FLVPlayback.volumeBarInterval FLVPlayback. whether through timeout or a call to the close() method. A number that specifies the width of the component instance in pixels.x FLVPlayback. Default is 0. Sets which video player instance is visible and audible.volumeBarScrubTolerance FLVPlayback.cuePoint FLVPlayback. Dispatched when NetConnection is closed.Property FLVPlayback.y Event summary for the FLVPlayback class The following table lists the events of the FLVPlayback class: Event FLVPlayback.

Dispatched when the user stops scrubbing the timeline with the SeekBar. Dispatched when the stopped state is entered.scrubFinish FLVPlayback. Dispatched when the location of the playhead is changed by a call to seek() or by using the corresponding control.Event FLVPlayback. Dispatched every . Dispatched when the video is resized. Dispatched when the FLV file is loaded and ready to display. Dispatched when the volume is changed through the volume property.paused FLVPlayback. Dispatched every .25 seconds by default while the FLV file is playing.stateChange FLVPlayback.seek FLVPlayback. Dispatched when a skin SWF file is loaded. Dispatched when an error occurs loading a skin SWF file. FLVPlayback. starting when the load() method is called and ending when all bytes are loaded or there is a network error.progress FLVPlayback.playing FLVPlayback.rewind FLVPlayback.scrubStart FLVPlayback.volumeUpdate FLVPlayback class 543 .ready FLVPlayback.playheadUpdate Description Dispatched when the pause state is entered. Dispatched when the playing state is entered.25 seconds. Dispatched when the playback state changes. You can specify frequency with the progressInterval property.stopped FLVPlayback. You can specify frequency with the playheadUpdateInterval property.resize FLVPlayback. Dispatched when the location of the playhead is moved backward by a call to seek() or when the automatic rewind operation completes.skinError FLVPlayback. Dispatched when user begins scrubbing the timeline with the SeekBar.skinLoaded FLVPlayback.

Edition Flash Professional 8.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . my_FLVPlybk.ACTIONSCRIPT Description A read-only FLVPlayback class property that contains the string constant.FLVPlayback.time = 2. my_FLVPlybk.addEventListener("ready". for use as the type property with the findCuePoint() and findNearestCuePoint() methods.video. Drag an FLVPlayback component to the Stage.*.flv".name). //add AS cue point } my_FLVPlybk.findCuePoint(2.com/flash/video/ water. var listenerObject:Object = new Object(). } } my_FLVPlybk. listenerObject) listenerObject.video.addASCuePoint(cuePt). listenerObject.FLVPlayback. Usage mx. Example The following example uses the ACTIONSCRIPT constant to set the type property of the findCuePoint() method.ready = function(eventObject:Object) { var cuePt:Object = new Object(). // create cue point object cuePt. cuePt.playing = function(eventObject:Object) { var rtn_obj:Object = new Object(). "actionscript".name = "ASCuePt1". if(rtn_obj = my_FLVPlybk.ACTIONSCRIPT)){ trace("Found cue point " + rtn_obj. FLVPlayback.ACTIONSCRIPT Availability Flash Player 8.contentPath = "http://www.444.444. listenerObject) 544 FLVPlayback Component .helpexamples.addEventListener("playing". and give it an instance name of my_FLVPlybk.

use the visibleVideoPlayerIndex property to do that. 0). 0. The cuePoints property has no effect. a number that specifies which video player instance is affected by other APIs.activeVideoPlayerIndex Description Property. and isLive. respectively). which is always false (the default is true only for the default video player. which are always set to the default values (empty string. Use this property to manage multiple FLV file streams.activeVideoPlayerIndex Availability Flash Player 8. Usage my_FLVPlybk.See also FLVPlayback. and autoPlay. Edition Flash Professional 8. FLVPlayback class 545 . totalTime. This property does not make the video player visible. When the new video player is created. The default value is 0. A new video player is created the first time activeVideoPlayerIndex is set to a number. as it would have no effect on a subsequent load into the default video player. its properties are set to the value of the default video player (activeVideoPlayerIndex == 0) except for contentPath. and false.findCuePoint() FLVPlayback.

set activeVideoPlayerIndex to 1 and call the load() method. use the event’s vp property.visibleVideoPlayerIndex” on page 684. setting the activeVideoPlayerIndex property does not affect the following properties and methods. It sets the activeVideoPlayerIndex property to switch between the video players and their respective FLV files.APIs that control volume. set visibleVideoPlayerIndex to 1. The remaining APIs target a specific video player based on the setting of activeVideoPlayerIndex. When listening for events. visibility. Example The following example creates two video players to play two FLV files consecutively in a single FLV file instance. 546 N OTE The visibleVideoPlayerIndex property. a number corresponding to the number set in activeVideoPlayerIndex and visibleVideoPlayerIndex. which are not specific to a video player but are global for the FLVPlayback instance. positioning. To distinguish which video player the event is for. and their behavior is not affected by setting activeVideoPlayerIndex. Specifically. When you are ready to show this FLV file and hide the first one. For example. FLVPlayback Component . For more information. not the activeVideoPlayerIndex property. you get all events for all video players. see “FLVPlayback. however. to load a second FLV file in the background. Properties and Methods Not Affected by activeVideoPlayerIndex backButton bufferingBar playPauseButton scaleX skin stopButton transform visible volume volumeBar volumeBarInterval volumeBarScrubTolera nce width x y setSize() setScale() bufferingBarHidesAndDisablesOthers forwardButton height muteButton pauseButton playButton scaleY seekBar seekBarInterval seekBarScrubTolerance seekToPrevOffset APIs that control dimensions do interact with the visibleVideoPlayerIndex property. determines which video player the skin controls. All events have this property except for resize and volume. and UI controls are always global. dimensions.

See also FLVPlayback.contentPath = "http://www. FLVPlayback class 547 .visibleVideoPlayerIndex.com/flash/video/ clouds.addEventListener("complete".FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. listenerObject). // reset to default video player.helpexamples.visibleVideoPlayerIndex = 0.play(). } }.*.activeVideoPlayerIndex = 1. } else { // make 2nd player active & visible and play FLV my_FLVPlybk. // specify name and location of FLV for default player my_FLVPlybk.complete = function(eventObject:Object):Void { // if complete is for 2nd FLV.flv".com/flash/video/ water.activeVideoPlayerIndex = 1. and give it an instance name of my_FLVPlybk.video. my_FLVPlybk. which plays its FLV automatically my_FLVPlybk.helpexamples. listenerObject. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . my_FLVPlybk.Drag an FLVPlayback component to the Stage. my_FLVPlybk.addEventListener("ready". }.vp == 1) { my_FLVPlybk. // add listener for complete event my_FLVPlybk. var listenerObject:Object = new Object(). listenerObject.activeVideoPlayerIndex = 0.flv".getVideoPlayer(). FLVPlayback.visibleVideoPlayerIndex = 1.ready = function(eventObject:Object):Void { // add a second video player and specify the name and loc of its FLV my_FLVPlybk. listenerObject). VideoPlayer class. FLVPlayback.contentPath = "http://www.bringVideoPlayerToFront(). my_FLVPlybk.activeVideoPlayerIndex = 0. make default active and visible if (eventObject. my_FLVPlybk.

all cue points with the same name and time are removed. except that it occurs when an application executes rather than during application development. ■ index Description Method. Cue point information is wiped out when the contentPath property is set. If type is missing or set to something else. It also might have a parameters:Object property that holds name/ value pairs. cuePoint time A number that is the time for the new cue point to be added. name A string that specifies the name of the cue point if you submit a time parameter instead of the CuePoint object. 548 FLVPlayback Component . which describe the cue point. it is set automatically. The index into the array for the returned cue point. It is valid to add multiple ActionScript cue points with the same name and time.addASCuePoint() Availability Flash Player 8. When you remove ActionScript cue points with the removeASCuePoint() method. Usage my_FLVplybk.addASCuePoint(time:Number. It may have type:String set to "actionscript". parameters Optional parameters for the cue point. Treat this array as read-only. If you use the time parameter. Returns A copy of the cue point object that was added with the following additional properties: ■ array The array of cue points that were searched. parameters:Object]) Parameters An object having name:String and time:Number (in seconds) properties. the method throws a VideoError error. because adding. set the contentPath property first. Edition Flash Professional 8. name:String[. or editing objects within it can cause cue points to malfunction.FLVPlayback. removing. To set cue point information for the next FLV file to be loaded. If the object does not conform to these conventions. adds an ActionScript cue point and has the same effect as adding an ActionScript cue point using the Cue Points dialog box.addASCuePoint(cuePoint:Object) my_FLVplybk. the name parameter must follow.

cuePt. and give it an instance name of my_FLVPlybk.addEventListener("cuePoint".TextArea component on the Stage with an instance name of my_ta */ import mx. // create cue point object cuePt. "ASCuePt2"). FLVPlayback.findCuePoint(). my_ta.contentPath = "http://www.text = "Elapsed time in seconds: " + my_FLVPlybk. and give it an instance name of my_ta.*. The example adds the first one using a CuePoint parameter and the second one using the time and name parameters.time = 2.flv". my_FLVPlybk. When each cue point occurs while playing. my_FLVPlybk.video.visible = false.name = "ASCuePt1".444. }. Drag a TextArea component to the Stage below the FLVPlayback instance. See also FLVPlayback.helpexamples. a listener for cuePoint events shows the value of the playheadTime property in a text area. cuePt.type = "actionscript".addASCuePoint(cuePt). listenerObject. //add AS cue point // add 2nd AS cue point using time and name parameters my_FLVPlybk.addASCuePoint(5. Drag an FLVPlayback component to the Stage.Example The following example adds two ActionScript cue points to an FLV file.visible = true.com/flash/video/ water. my_FLVPlybk.playheadTime.removeASCuePoint() FLVPlayback class 549 . listenerObject). var listenerObject:Object = new Object(). my_ta. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .FLVPlayback component on the Stage with an instance name of my_FLVPlybk . // create cue point object var cuePt:Object = new Object().cuePoint = function(eventObject:Object):Void { my_ta.

FLVPlayback.addEventListener() Availability Flash Player 8. Drag a TextArea component to the Stage below the FLVPlayback instance. registers a listener object or function for a specified event. Description Method.TextArea component on the Stage with an instance name of my_ta */ 550 FLVPlayback Component . If the listener is an object.FLVPlayback component on the Stage with an instance name of my_FLVPlybk . it is the name of the function that will be called to handle the event. this is also the name of the listener object function to call.addEventListener(event:String. The name of the listener object or function that you are registering for the event. Usage: my_FLVPlybk. Drag an FLVPlayback component to the Stage. listener Returns Nothing. and give it an instance name of my_ta.addEventListener(event:String. Edition Flash Professional 8. listener:Object):Void my_FLVPlybk. listener:Function):Void Parameters event A string that specifies the name of the event for which you are registering a listener. Example The following example listens for a complete event and displays a message in a text area when it occurs. the object must have a function defined for it with the same name as the event. If the listener is an object. and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline: Usage 1:: listener object /** Requires: . If the listener is a function.

function the_end(eventObject:Object):Void { my_ta.complete = function(eventObject:Object):Void { my_ta.text = "That's All Folks!". }. the_end).contentPath = "http://www. FLVPlayback.import mx.visible = false.visible = false. }.addEventListener("complete". FLVPlayback class 551 .*. my_FLVPlybk.text = "That's All Folks!".TextArea component on the Stage with an instance name of my_ta */ import mx.*.contentPath = "http://www.video.video. See also Event summary for the FLVPlayback class.helpexamples.com/flash/video/ water.visible = true.addEventListener("complete". listenerObject).removeEventListener(). Edition Flash Professional 8.flv".video. Usage mx.ALL Description A read-only FLVPlayback class property that contains the string constant.flv".ALL Availability Flash Player 8. Usage 2: listener function /** Requires: . my_ta. my_ta. my_ta. my_FLVPlybk. my_FLVPlybk. my_FLVPlybk. "all". // create listener object listenerObject.helpexamples.FLVPlayback component on the Stage with an instance name of my_FLVPlybk . my_ta.FLVPlayback. var listenerObject:Object = new Object().com/flash/video/ water. You can use this property as the type parameter for the findCuePoint() and findNearestCuePoint() methods. FLVPlayback.visible = true.

Edition Flash Professional 8.findCuePoint(cuePt. // create cue point object cuePt. Usage my_FLVPlybk.flv". listenerObject. else trace("cue point not found").time). FLVPlayback.com/flash/video/ cuepoints.findCuePoint() FLVPlayback.helpexamples.*.ALL)) //find cue point trace("found a " + cuePt.name = "point2". Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . // create cue point object var listenerObject = new Object().748.contentPath = "http://www. my_FLVPlybk.type + " cue point at " + cuePt.autoPlay Availability Flash Player 8. and give it an instance name of my_FLVPlybk. The example shows the type and time properties for the cue point that was found.748. listenerObject). } my_FLVPlybk.ready = function(eventObject:Object):Void { var cuePt:Object = new Object().Example The following example looks among all cue points for a cue point named point2 that has a time of 7. See also FLVPlayback. cuePt. Drag an FLVPlayback component to the Stage.autoPlay 552 FLVPlayback Component .addEventListener("ready".FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. if(cuePt = my_FLVPlybk.video.time = 7.

listenerObject.autoPlay = false.video. If you set the property to true between the loading of new FLV files.Description Property. the component loads the content immediately.*. Usage my_FLVPlybk.autoRewind FLVPlayback class 553 .seekPercent(30).activeVideoPlayerIndex FLVPlayback. my_FLVPlybk.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. a Boolean value that. my_FLVPlybk. causes the FLV file to play immediately when the contentPath property is set.helpexamples.autoRewind Availability Flash Player 8.com/flash/video/ water.flv".addEventListener("ready".contentPath = "http://www. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .play(). the component waits for the play command. listenerObject). Example The following example disables the FLV file from playing to set the playhead 30 percent into the playing time and begin playing at that point. my_FLVPlybk. Drag an FLVPlayback component to the Stage. Edition Flash Professional 8. }. If set to false. var listenerObject:Object = new Object(). my_FLVPlybk. See also FLVPlayback. The default value is true. if set to true. Even if autoPlay is set to false.ready = function(eventObject:Object):Void { my_FLVPlybk. it has no effect until contentPath is set. and give it an instance name of my_FLVPlybk.

If this property is set from false to true after an FLV file has been loaded.autoRewind = false.flv". Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .helpexamples. a Boolean value that. if true. FLVPlayback. causes the FLV file to rewind to Frame 1 when play stops. 554 FLVPlayback Component . Example The following example sets the autoRewind property to false to prevent the FLV file from automatically rewinding when it finishes playing. Drag an FLVPlayback component to the Stage. Edition Flash Professional 8. if true. Usage my_FLVPlybk.autoSize Description Property. my_FLVPlybk. either because the player reached the end of the stream or the stop() method was called.Description Property. a Boolean value that. This property is meaningless for live streams. causes the video to size automatically to the dimensions of the source FLV file.autoSize Availability Flash Player 8.FLVPlayback component in the Library */ my_FLVPlybk.com/flash/video/ water. The default value is true.contentPath = "http://www. and give it an instance name of my_FLVPlybk. The default value is false. the automatic resizing starts immediately.

listenerObject. and give it an instance name of my_FLVPlybk. See also FLVPlayback.helpexamples. my_FLVPlybk.width + ". triggering a resize event.Example The following example first show the source dimensions of the FLV file (preferredWidth and preferredHeight) when the FLV file is ready to play. Then it calls the setSize() to change the dimensions of the FLVPlayback instance.resize = function(eventObject:Object) { trace("my_FLVPlybk width is: " + my_FLVPlybk.maintainAspectRatio = false.FLVPlayback component in the Library */ import mx. triggering another resize event that restores the size to the dimensions of the source FLV file.height is: " + my_FLVPlybk. listenerObject).maintainAspectRatio. my_FLVPlybk.contentPath = "http://www. my_FLVPlybk. 400). my_FLVPlybk.addEventListener("resize".com/flash/video/ water. var listenerObject:Object = new Object(). The resize event handler displays the dimensions of the FLVPlayback instance in the Output panel after each event. my_FLVPlybk. it sets the autoSize property to true.preferredWidth + " FLV height is: " + my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . FLVPlayback.setSize(400.autoSize = true. }.addEventListener("ready".preferredHeight). }. FLVPlayback. FLVPlayback. my_FLVPlybk. my_FLVPlybk. listenerObject.*.preferredWidth.video.flv".height).preferredHeight.resize FLVPlayback class 555 . Drag an FLVPlayback component to the Stage. listenerObject). Next.ready = function(eventObject:Object) { trace("FLV width is: " + my_FLVPlybk.

Usage my_FLVPlybk. For more information on using FLV Playback Custom UI components for playback controls. Example The following example uses the backButton. 556 FLVPlayback Component .helpexamples. Drag an FLVPlayback component to the Stage. PauseButton. and stopButton properties to attach individual FLV Playback Custom UI controls to an FLVPlayback component.stopButton = my_stopbttn. my_FLVPlybk. Edition Flash Professional 8.backButton Availability Flash Player 8. PauseButton (my_pausbttn).backButton Description Property. ForwardButton (my_fwdbttn). pauseButton.com/flash/video/ water. and StopButton components in the Library */ import mx.forwardButton = my_fwdbttn. Next.FLV Custom UI BackButton. playButton. Set the Skin parameter to None in the Component inspector. PlayButton (my_plybttn).FLVPlayback component on the Stage with an instance name of my_FLVPlybk . a MovieClip object that is the BackButton playback control.flv". ForwardButton. my_FLVPlybk.FLVPlayback. my_FLVPlybk. see “Skinning FLV Playback Custom UI components individually” on page 521. forwardButton. my_FLVPlybk.backButton = my_bkbttn. and give it an instance name of my_FLVPlybk. my_FLVPlybk.contentPath = "http://www.playButton = my_plybttn.video.pauseButton = my_pausbttn. my_FLVPlybk.*. add the following individual FLV Playback Custom UI components and give them the instance names shown in parentheses: BackButton (my_bkbttn). Then add the following lines of code to the Actions panel: /** Requires: . PlayButton. and StopButton (my_stopbttn). Clicking the BackButton control causes a rewind event.

Usage my_FLVplybk. a number that specifies the bits per second at which to transfer the FLV file. bitrate is ignored. you can use the SMIL format. you can provide a SMIL file that describes how to switch between multiple streams based on bandwidth. The relevant video tags in the SMIL file are shown in the following code: <switch> <video src="myvideo_mdm. FLVPlayback. For higher speed connections. if it is set.forwardButton.1"> </switch> dur="3:00. and. FLVPlayback class 557 . For more information on using a SMIL file. Edition Flash Professional 8.rewind FLVPlayback.bitrate Availability Flash Player 8.flv" system-bitrate="56000" <video src="myvideo_isdn. When streaming video from a FMS. Example The following example checks two radio buttons to determine what bit rate to use when selecting an FLV file from the specified SMIL file. in this case.1"> For a low-speed connection.flv" dur="3:00.See also FLVPlayback. see “Using a SMIL file” on page 707.bitrate Description Property. it takes advantage of automatic bandwidth detection for streaming from FMS and does not set the bit rate. but you must set the bit rate because there is no automatic detection. When doing a progressive download. the code sets the bitrate property to force selection of the appropriate FLV file. Bandwidth is automatically detected by FMS.

video. Drag a RadioButton component and then a Label component to the Library panel.Drag an FLVPlayback component to the Stage.autoSize = "left". rbListener.x. replace the italicized text with the name and location of your SMIL file.com/video/sample. 30.y + my_FLVPlybk. 30).RadioButton component in the Library . my_FLVPlybk. dialup.setSize(200. dialup. this. 558 FLVPlayback Component . rbListener). Then add the following code to the Actions panel on Frame 1 of the Timeline. this.x. my_prompt.height + 5).controls.y + 15). // Create listener object var rbListener:Object = new Object(). "dialup".move(my_FLVPlybk.createClassObject(RadioButton. isdn. 20.click = function(eventObject:Object){ if(dialup. {label:"ISDN (128 KB)".move(my_FLVPlybk.bitrate = 56000.addEventListener("click".text = "Please indicate your connection speed: ". 10). isdn.contentPath = "http://www.*.FLVPlayback component in the Library . dialup.height + 40). my_FLVPlybk. "my_prompt".someserver. this. In the statement that loads the contentPath property.setSize(200. my_prompt.y + my_prompt.smil". import mx. 30).selected) { // for modem my_FLVPlybk.move(my_FLVPlybk. // Position RadioButtons on Stage.*.Label component in the Library */ import mx.createClassObject(RadioButton. /** Requires: . my_prompt. groupName:"radioGroup"}). groupName:"radioGroup"}).x. "isdn".createClassObject(Label. {label:"Dialup modem (56 KB)". } // for isdn (or higher bandwidths) allow automatic detection } // Add listener radioGroup. and give it an instance name of my_FLVPlybk. my_prompt.

Usage my_FLVPlybk. Edition Flash Professional 8. brings a video player to the front of the stack of video players. the FLV file (plane_cuepoints) playing in that player is transparent. FLVPlayback class 559 . making both FLV files visible simultaneously when that FLV file is in front.FLVPlayback. Because the example sets the _alpha property to 75 for video player number 1. 1 is above it.bringVideoPlayerToFront(index:Number) Parameters index A number that is the index of the video player to move to the front Description Method. Useful for custom transitions between video players. 2 is above 1. the example calls the bringVideoPlayerToFront() method to bring the other FLV file to the front. Example The following example uses two video players to play two FLV files. and so on.flv) occurs. The stack order is the same as it is for the activeVideoPlayerIndex property: 0 is on the bottom.bringVideoPlayerToFront() Availability Flash Player 8. When each of the three cue points in the first FLV file (cuepoints.

play().activeVideoPlayerIndex = 0.addEventListener("cuePoint". }else if (eventObject.Drag an FLVPlayback component to the Stage.target.target._visible = true. } else if (eventObject. var listenerObject:Object = new Object().helpexamples.addEventListener("ready".info. eventObject.load("http://www.com/flash/video/cuepoints.target.helpexamples. layerOnTop.bringVideoPlayerToFront(0). layerOnTop.contentPath == "http://www.getVideoPlayer(1).target.info. bring one or the other to the front if (eventObject.com/ flash/video/cuepoints.play().bringVideoPlayerToFront(1).load("http://www.target. var listenerObject:Object = new Object().flv").info. and give it an instance name of my_FLVPlybk. eventObject.target.name == "point3") { trace(eventObject.flv").flv") { //this fires after the first flv is ready my_FLVPlybk. } } my_FLVPlybk.target. listenerObject).info.activeVideoPlayerIndex = 1.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ my_FLVPlybk._alpha = 75.info. } } my_FLVPlybk.name + " : 1 to front").name + " : 0 to front"). eventObject.target. listenerObject.name == "point2") { trace(eventObject.name == "point1") { trace(eventObject.helpexamples. 560 FLVPlayback Component . Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . eventObject.activeVideoPlayerIndex = 1. eventObject. } else { //this fires after the second flv is ready eventObject.target. eventObject. listenerObject.cuePoint = function(eventObject:Object) { //based upon the cue name. my_FLVPlybk. listenerObject).ready = function(eventObject:Object) { if (eventObject.info.name + " : 0 to front").bringVideoPlayerToFront(1).com/flash/video/ plane_cuepoints. var layerOnTop:MovieClip = eventObject.

Usage var listenerObject:Object = new Object(). dispatched when the FLVPlayback instance enters the buffering state.activeVideoPlayerIndex. The FLVPlayback instance typically enters this immediately after a call to the play() method or when the Play control is clicked. VideoPlayer FLVPlayback.visibleVideoPlayerIndex on page 684.buffering Availability Flash Player 8. When a buffering event occurs. The FLVPlayback instance also dispatches the stateChange event when buffering begins. my_FLVplybk. listenerObject. Example The following example creates a listener for the buffering event.addEventListener("buffering".buffering = function(eventObject:Object):Void { // insert event-handling code here }.getVideoPlayer(). FLVPlayback. FLVPlayback. Description Event. and vp. playheadTime. listenerObject). FLVPlayback class 561 . the event handler calls the trace() method to display the values of the state and vp properties. The event object has the properties state. which is the index number of the video player to which the event applies. before entering the playing state.See also FLVPlayback.visibleVideoPlayerIndex class. See FLVPlayback.activeVideoPlayerIndex on page 545 and FLVPlayback. Edition Flash Professional 8.

my_FLVPlybk. listenerObject. var listenerObject:Object = new Object().com/flash/video/ water.contentPath = "http://www.BUFFERING property when the component enters a buffering state. FLVPlayback. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . my_FLVPlybk.BUFFERING Description Property.removeEventListener() FLVPlayback.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.vp).flv".target. listenerObject). FLVPlayback.Drag an FLVPlayback component to the Stage. 562 FLVPlayback Component . See also FLVPlayback. and give it an instance name of my_FLVPlybk.buffering = function(eventObject:Object) { trace("The state property has a value of " + eventObject.FLVPlayback.state. a read-only FLVPlayback class property that contains the string constant. Example The following example displays the value of the FLVPlayback.addEventListener().*. Usage mx. "buffering". trace("The video player number is: " + eventObject.helpexamples.BUFFERING Availability Flash Player 8. Edition Flash Professional 8. You can compare this property to the state property to determine whether the component is in the buffering state.addEventListener("buffering".state). }.video.video.

listenerObject. and give it an instance name of my_FLVPlybk.contentPath = "http://www. Edition Flash Professional 8. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .video.state.stateChange FLVPlayback. Example The following example creates a listener for the buffering event and displays a message in the Output panel when the event occurs.*. }. See also FLVPlayback.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. my_FLVPlybk. FLVPlayback. var listenerObject:Object = new Object().Drag an FLVPlayback component to the Stage. a Boolean value that is true if the video is in a buffering state.com/flash/video/ water.stateChange = function(eventObject:Object):Void { if(eventObject.addEventListener("stateChange".helpexamples.BUFFERING) trace(FLVPlayback.flv".state == FLVPlayback. Read-only.buffering Availability Flash Player 8. my_FLVPlybk. listenerObject).buffering Description Property. Usage my_FLVPlybk. FLVPlayback class 563 .BUFFERING).

buffering){ trace("The video is buffering").buffering. See “Skinning FLV Playback Custom UI components individually” on page 521 for more information on using FLV Playback Custom UI components for playback controls. } }.bufferingBar Description Property.com/flash/video/ water. This control displays when the FLV file is in a loading or buffering state. and give it an instance name of my_FLVPlybk. Edition Flash Professional 8. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .helpexamples. listenerObject). my_FLVPlybk.bufferingBar Availability Flash Player 8.contentPath = "http://www.state. Usage my_FLVPlybk.video.stateChange FLVPlayback. FLVPlayback.addEventListener("stateChange". listenerObject.flv".Drag an FLVPlayback component to the Stage. See also FLVPlayback. a MovieClip object that is the buffering bar control.BUFFERING. 564 FLVPlayback Component . my_FLVPlybk. FLVPlayback.stateChange = function(eventObject:Object):Void { if(my_FLVPlybk.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.*. FLVPlayback. var listenerObject:Object = new Object().

video. See also FLVPlayback. StopButton.Example The following example attaches individual FLV Playback Custom UI controls to an FLVPlayback component by setting the following properties: playPauseButton. backButton. stopButton. The buffering bar appears only while the FLV file is buffering before it begins to play. Next.*. my_FLVPlybk.FLV Playback Custom UI PlayPauseButton. add the following individual FLV Playback Custom UI components and give them the instance names shown in parentheses: PlayPauseButton (my_plypausbttn). Then add the following lines of code to the Actions panel on Frame 1 of the Timeline: /** Requires: . ForwardButton (my_fwdbttn). my_FLVPlybk. and give it an instance name of my_FLVPlybk. and BufferingBar (my_buffrgbar). Set the Skin parameter to None in the Component inspector. StopButton (my_stopbttn).com/flash/video/ water. my_FLVPlybk. my_FLVPlybk. BackButton.helpexamples.stopButton = my_stopbttn.contentPath = "http://www. my_FLVPlybk.FLVPlayback component on the Stage with an instance name of my_FLVPlybk .forwardButton = my_fwdbttn. BufferingBar components in the Library */ import mx.backButton = my_bkbttn.bufferingBar = my_buffrgbar. ForwardButton. BackButton (my_bkbttn). and bufferingBar. my_FLVPlybk. Drag an FLVPlayback component to the Stage.bufferingBarHidesAndDisablesOthers FLVPlayback class 565 .playPauseButton = my_plypausbttn.flv". forwardButton.

*. Pause. and give it an instance name of my_FLVPlybk.bufferingBarHidesAndDisablesOthers Description Property. and ForwardButton controls and to hide the SeekBar control while the FLV file is buffering.video.bufferingBarHidesAndDisablesOthers Availability Flash Player 8.flv". BackButton and ForwardButton controls while the FLV file is in the buffering state. Edition Flash Professional 8. PlayPause.bufferTime = 15. hides the SeekBar control and disables the Play. In the statement that loads the contentPath property. Example The following example assumes playing a streaming FLV file from a FMS or FVSS. my_FLVPlybk.FLVPlayback. Pause.contentPath = "rtmp://host_name/somefolder/vid_name. /** Requires: . Usage my_FLVPlybk. if set to true. replace the italicized text with the name and location of an FLV file on your FMS. my_FLVPlybk. Drag an FLVPlayback component to the Stage. PlayPause.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. This can be useful to prevent a user from using these controls to try to speed up playing the FLV file when it is downloading or streaming over a slow connection. Then add the following code to the Actions panel on Frame 1 of the Timeline.bufferingBar 566 FLVPlayback Component . It sets the bufferingBarHidesAndDisablesOthers property to disable the Play. BackButton. See also FLVPlayback.bufferingBarHidesAndDisablesOthers = true. my_FLVPlybk.

it can be important to increase this setting from the default value of 0. slower computer. FLVPlayback class 567 .flv".bufferTime Availability Flash Player 8.1. In the statement that loads the contentPath property. which are not downloaded and buffer only in memory. For a progressively downloaded FLV file over HTTP. and give it an instance name of my_FLVPlybk. Drag an FLVPlayback component to the Stage.bufferTime Description Property. /** Requires: .bufferTime = 8. there is little benefit to increasing this value although it could improve viewing a high-quality video on an older. N OTE This property does not specify the amount of the FLV file to download before starting playback.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. my_FLVPlybk.*. replace the italicized text with the name and location of an FLV file on your FMS. Usage my_FLVPlybk.video.contentPath = "rtmp://host_name/somefolder/vid_name. For FLV files streaming over RTMP. Edition Flash Professional 8. a number that specifies the number of seconds to buffer in memory before beginning to play a video stream. Example The following example sets the buffer time to 8 seconds for an FLV file streaming from a FMS. Then add the following code to Frame 1 of the Timeline in the Actions panel. my_FLVPlybk.FLVPlayback.

state + ". Read-only. listenerObject). Example The following example shows the initial value of the bytesLoaded property and its value when the ready event occurs.FLVPlayback. ready to play"). Usage my_FLVPlybk. Edition Flash Professional 8. }. // display the no. in number of bytes. or if the information is not yet available. The returned value is useful only for an HTTP download. of bytes loaded at this point trace("Bytes loaded: " + my_FLVPlybk. my_FLVPlybk.contentPath = "http://www.helpexamples.bytesLoaded). // -1 if loading not begun 568 FLVPlayback Component .FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. var listenerObject:Object = new Object(). Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .com/flash/video/ water.bytesLoaded). listenerObject. my_FLVPlybk.flv".video. Returns –1 when there is no stream. when the stream is from a FMS. Drag an FLVPlayback component to the Stage. trace("Bytes loaded: " + my_FLVPlybk. for an HTTP download.addEventListener("ready".bytesLoaded Description Property. a number that indicates the extent of downloading.*.bytesLoaded Availability Flash Player 8.ready = function(eventObject:Object):Void { trace("State is " + eventObject. and give it an instance name of my_FLVPlybk.

FLVPlayback class 569 . var listenerObject:Object = new Object().bytesTotal Availability Flash Player 8.FLVPlayback component on the Stage with an instance name of my_FLVPlybk . or if the information is not yet available. my_FLVPlybk. a number that specifies the total number of bytes downloaded for an HTTP download. }. Returns -1 when there is no stream. Drag a TextArea component to the Stage below the FLVPlayback instance and give it an instance name of my_ta. the event handler displays this value in the text area my_ta. When the metadataReceived event occurs.visible = true.".bytesTotal + " bytes.com/flash/video/ water.helpexamples.visible = false. Drag an FLVPlayback component to the Stage.text = "Loading: " + my_FLVPlybk.metadataReceived = function(eventObject:Object):Void { my_ta.flv".video.addEventListener("metadataReceived".contentPath = "http://www. Edition Flash Professional 8. my_ta. listenerObject. Read-only.bytesTotal Description Property. my_ta. The returned value is useful only for an HTTP download. when the stream is from a FMS.FLVPlayback. Then add the following code to Frame 1 of the Timeline in the Actions panel: /** Requires: . and give it an instance name of my_FLVPlybk. listenerObject). Example The following example uses the bytesTotal property to display the number of bytes being loaded for an HTTP download. Usage my_FLVPlybk.TextArea component on the Stage with an instance name of my_ta */ import mx.*. my_FLVPlybk.

Edition Flash Professional 8. When the FLV file completes. Usage var listenerObject:Object = new Object(). or when you call the load() method or the play() method or set contentPath and cause the RTMP connection to close as a result.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ 570 FLVPlayback Component . Description Event. Event has property vp.addEventListener("close". The FLVPlayback instance dispatches this event only when streaming from FMS or FVSS. Example The following example assumes playing a streaming FLV file from a FMS or FVSS. a listener for the complete event sets the contentPath property to the location of a new FLV file. Drag an FLVPlayback component to the Stage. by timing out or through a call to the closeVideoPlayer() method. Then add the following code to the Actions panel on Frame 1 of the Timeline. and give it an instance name of my_FLVPlybk. The event object has the properties state and playheadTime.close = function(eventObject:Object):Void { // insert event-handling code here }. which is the index number of the video player to which this event applies.close Availability Flash Player 8. the FLVPlayback instance dispatches this event when it closes the NetConnection. which triggers a close event on the RTMP connection for the first FLV file.FLVPlayback. In the statement that loads the contentPath property. listenerObject. listenerObject). The listener for the close event displays the index number of the video player for which the event occurred. replace the italicized text with the name and location of an FLV file on your FMS. /** Requires: . my_FLVplybk.

}. Usage my_FLVPlybk. FLVPlayback.play("http://www. my_FLVPlybk.closeVideoPlayer(index:Number) Parameters index A number that is the index of the video player to close.complete = function(eventObject:Object) { if (my_FLVPlybk. var listenerObject:Object = new Object(). Edition Flash Professional 8.closeVideoPlayer().addEventListener("close".visibleVideoPlayerIndex. FLVPlayback. listenerObject).vp). my_FLVPlybk. // listen for close event on RTMP connection. See also FLVPlayback.com/flash/video/water.import mx.addEventListener("complete". play new FLV listenerObject.*.contentPath = "rtmp://my_servername/my_application/stream. FLVPlayback. // listen for complete event.flv".contentPath != "http://www. FLVPlayback. FLVPlayback. } }.helpexamples.load(). listenerObject).helpexamples.close = function(eventObject:Object) { trace("Closed connection for video player: " + eventObject.flv") { my_FLVPlybk. Returns The VideoPlayer object that closed. FLVPlayback class 571 .activeVideoPlayerIndex.com/flash/video/ water. my_FLVPlybk. display index of video player listenerObject.play(). FLVPlayback.flv").closeVideoPlayer() Availability Flash Player 8.video.contentPath.

activeVideoPlayerIndex = 0. listenerObject. var listenerObject:Object = new Object().flv". }.visibleVideoPlayerIndex = 1.complete = function(eventObject:Object):Void { // if complete is for 2nd FLV.activeVideoPlayerIndex = 0. 572 FLVPlayback Component . You cannot close the default player. my_FLVPlybk. // reset to default video player.*. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .ready = function(eventObject:Object):Void { // add a second video player and specify the name and loc of its FLV my_FLVPlybk. closes NetStream and deletes the video player specified by the index parameter.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ // specify name and location of FLV for default player import mx. If you click the Play button to play the FLV files a second time. which plays its FLV automatically my_FLVPlybk. my_FLVPlybk.vp == 1) { my_FLVPlybk. which causes the component to throw an error (VideoError) and show a message that says the FLVPlayback instance cannot find the FLV file. Drag an FLVPlayback component to the Stage.helpexamples.play(). Example The following example creates two video players to play two FLV files consecutively in a single FLVPlayback instance. my_FLVPlybk.addEventListener("ready". my_FLVPlybk. my_FLVPlybk. If the closed video player is the active or visible video player.closeVideoPlayer(1). listenerObject. listenerObject).activeVideoPlayerIndex = 1.helpexamples.// close 2nd video player } else { // make 2nd player active & visible and play FLV my_FLVPlybk.com/flash/video/ clouds. the FLVPlayback instance sets the active and or visible video player to the default player (with index 0). When the second FLV file finishes. make default active and visible if (eventObject. you see that the video player for the second player is gone.video.com/flash/video/ water. the event handler for the complete event calls the closeVideoPlayer() method to close the second player. and trying to do so causes the component to throw an error.contentPath = "http://www.visibleVideoPlayerIndex = 0. my_FLVPlybk.contentPath = "http://www.Description Method. my_FLVPlybk.activeVideoPlayerIndex = 1.flv". and give it an instance name of my_FLVPlybk.

The video player also dispatches the stateChange and stopped events. FLVPlayback. The component does not dispatch the event if you call the stop() or pause() methods or click the corresponding controls.complete = function(eventObject:Object):Void { // insert event-handling code here }.visibleVideoPlayerIndex FLVPlayback. When the application uses progressive download. listenerObject. Drag an FLVPlayback component to the Stage. // add listener for complete event my_FLVPlybk.} }. and give it an instance name of my_FLVPlybk. Edition Flash Professional 8. my_FLVplybk. The event object has the properties state and playheadTime. dispatched when playing completes because the player reached the end of the FLV file. See also FLVPlayback. Description Event. FLVPlayback.addEventListener("complete". Usage var listenerObject:Object = new Object(). does not set the totalTime property explicitly. the video player sets totalTime to an approximate total value before it dispatches this event.activeVideoPlayerIndex. and downloads an FLV file that does not specify the duration in the metadata. listenerObject). listenerObject).close.addEventListener("complete". Then add the following code to the Actions panel on Frame 1 of the Timeline: FLVPlayback class 573 .complete Availability Flash Player 8. Example The following example uses the playheadTime property to show the elapsed playing time of the FLV file in the Output panel when the complete event occurs.

playheadTime. FLVPlayback.video.FLVPlayback.totalTime FLVPlayback. Example The following example forces a connection error by specifying an invalid FLV filename (nosuch. FLVPlayback.CONNECTION_ERROR Description A read-only FLVPlayback class property that contains the string constant "connectionError".addEventListener("complete". FLVPlayback.contentPath = "http://www.complete = function(eventObject:Object):Void { trace("Elapsed play time at completion is: " + my_FLVPlybk.video. listenerObject). See also FLVPlayback. my_FLVPlybk. FLVPlayback.flv) in the contentPath property.*. The example uses the CONNECTION_ERROR property to detect the error in a listener for the stateChange event.helpexamples.state.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.flv". You can compare this property to the state property to determine if a connection error state has occurred./** Requires: . Usage mx. var listenerObject:Object = new Object().com/flash/video/ water. my_FLVPlybk. Edition Flash Professional 8.playheadTime).stateChange. listenerObject. }. 574 FLVPlayback Component .stopped.CONNECTION_ERROR Availability Flash Player 8.

listenerObject.state.contentPath Description Property.Drag an FLVPlayback component to the Stage. which affect loading. among others. FLVPlayback.stateChange = function(eventObject:Object):Void { if(my_FLVPlybk.CONNECTION_ERROR) trace("State: " + FLVPlayback. or an HTTP URL to an XML file.flv". The delay provides time to set the isLive. } my_FLVPlybk. listenerObject). Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. Usage my_FLVPlybk.video. the FLV file begins loading and playing at the next MovieClip. an RTMP URL to a stream. Edition Flash Professional 8. See also FLVPlayback. var listenerObject:Object = new Object(). The URL can be an HTTP URL to an FLV file.CONNECTION_ERROR).onEnterFrame event.*. If you set this property through the Component inspector or the Property inspector.addEventListener("stateChange". and cuePoints properties.helpexamples.state == FLVPlayback. It also allows ActionScript that is placed on the first Frame to affect the FLVPlayback component before it starts playing. and give it an instance name of my_FLVPlybk. a string that specifies the URL of the FLV file to stream and how to stream it.stateChange FLVPlayback. my_FLVPlybk.contentPath Availability Flash Player 8. autoPlay. FLVPlayback class 575 .com/flash/video/ no_such.contentPath = "http://www.

contentPath = "http://www.addEventListener("metadataReceived".video.preferredWidth.addEventListener("cuePoint".cuePoint Availability Flash Player 8. listenerObject. FLVPlayback.If you set this property through ActionScript. my_FLVPlybk. my_FLVplybk.com/flash/video/ water. Drag an FLVPlayback component to the Stage. the FLVPlayback instance closes the current FLV file and immediately begins loading the new FLV file.metadataReceived = function(eventObject:Object):Void { my_FLVPlybk. Edition Flash Professional 8. Set the autoPlay property to false to prevent the new FLV file from playing automatically. Do not assign a value to the contentPath parameter in the Component inspector. FLVPlayback. listenerObject. Add the following code to Frame 1 of the Timeline: /** Requires: . Example The following example sets the contentPath property in ActionScript to specify the location of the FLV file to play. my_FLVPlybk.preferredHeight).flv". See also FLVPlayback.autoPlay. and give it an instance name of my_FLVPlybk.totalTime FLVPlayback.helpexamples. var listenerObject:Object = new Object().FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. so if you set these properties.play().setSize(my_FLVPlybk. } my_FLVPlybk. listenerObject). The autoPlay. and isLive properties affect how the new FLV file is loaded.*. listenerObject). FLVPlayback.isLive.cuePoint = function(eventObject:Object):Void { // insert event-handling code here }. totalTime. 576 FLVPlayback Component . you must set them before setting contentPath property. Usage var listenerObject:Object = new Object().

and give it an instance name of my_ta. When each cue point occurs.onCuePoint callback for FLV file cue points. my_FLVPlybk.FLVPlayback component on the Stage with an instance name of my_FLVPlybk .3.visibleVideoPlayerIndex FLVPlayback class 577 . var listenerObject:Object = new Object(). For ActionScript cue points. cuePt.text = "Cue at: " + eventObject.type = "actionscript".helpexamples. FLVPlayback.*. dispatched when a cue point is reached. This event has a vp property.video. my_ta. See also FLVPlayback.activeVideoPlayerIndex. //add AS cue point // add 2nd AS cue point using time and name parameters my_FLVPlybk.time + " occurred". Drag a TextArea component to the Stage below the FLVPlayback instance.name = "elapsed_time".time = 1. Drag an FLVPlayback component to the Stage.com/flash/video/ water. cuePt.444. it contains the object that was passed into the ActionScript cue point methods or properties.addEventListener("cuePoint". The example adds the first one using a cuePoint parameter and the second one using the time and name parameters.cuePoint = function(eventObject:Object):Void { my_ta. and give it an instance name of my_FLVPlybk. //create cue point object cuePt.addASCuePoint(cuePt). listenerObject). // create cue point object var cuePt:Object = new Object().flv". Example The following example adds two ActionScript cue points to an FLV file.TextArea component on the Stage with an instance name of my_ta */ import mx.Description Event.contentPath = "http://www. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .addASCuePoint(5. which is the index number of the video player to which this event applies. a listener for cuePoint events shows the value of the playheadTime property in a text area.visible = false. listenerObject.visible = true. The event object has an info property that contains the info object received by the NetStream. "elapsed_time2"). } my_FLVPlybk.info. my_FLVPlybk. my_ta.

Usage my_FLVPlybk. FLVPlayback. FLVPlayback. Edition Flash Professional 8.removeASCuePoint().isFLVCuePointEnabled().addASCuePoint().findNearestCuePoint(). remove. FLVPlayback. FLVPlayback.seekToNextNavCuePoint(). FLVPlayback. or setFLVCuePointEnabled(). To add.seekToPrevNavCuePoint(). use addASCuePoint(). FLVPlayback. FLVPlayback.setFLVCuePointEnabled() FLVPlayback Component . or disable cue points with ActionScript. See also FLVPlayback.metadataReceived.findCuePoint(). FLVPlayback. removeASCuePoint(). an array that describes ActionScript cue points and disabled embedded FLV file cue points. This property is created specifically for use by the Component inspector and does not work if it is set any other way. To access cue point information in ActionScript.cuePoints Description Property. FLVPlayback.findNextCuePointWithName(). NO TE 578 This property is not accessible in ActionScript. FLVPlayback.contentPath.FLVPlayback. FLVPlayback.metadata. Its value has an effect only on the first FLV file loaded and only if it is loaded by setting the contentPath property in the Component inspector or the Property inspector. FLVPlayback. use the metadata property.cuePoints Availability Flash Player 8.seekToNavCuePoint(). enable.

Usage mx. See also FLVPlayback. Edition Flash Professional 8.state FLVPlayback class 579 . You can compare this property to the state property to determine if a disconnected state exists. Drag an FLVPlayback component to the Stage. my_FLVPlybk. and give it an instance name of my_FLVPlybk.contentPath = "http://www.DISCONNECTED) trace("FLVPlayback instance is currently disconnected").contentPath.helpexamples. The FLVPlayback instance is in a disconnected state until you set the contentPath property.FLVPlayback.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.DISCONNECTED Availability Flash Player 8.video. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .*. if(my_FLVPlybk. Example The following example simply shows a message in the Output panel that confirms that the FLVPlayback instance is in a disconnected state before setting the contentPath property.DISCONNECTED Description A read-only FLVPlayback class property that contains the string constant "disconnected". FLVPlayback.state == FLVPlayback.com/flash/video/ water.FLVPlayback.flv".

video.helpexamples.findCuePoint("myCue". } } 580 FLVPlayback Component .EVENT Availability Flash Player 8.*.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. my_FLVPlybk. Example The following example uses the FLVPlayback. Edition Flash Professional 8.FLVPlayback. trace("Cue point time is: " + rtn_cuePt. listenerObject. Usage mx. You can use this property as the type parameter for the findCuePoint() and findNearesstCuePoint() methods. trace("Cue point type is: " + rtn_cuePt. Drag an FLVPlayback component to the Stage. and the cuePoint listener displays “Hit it!” in the Output panel when the cue point occurs.flv". and give it an instance name of my_FLVPlybk.FLVPlayback.contentPath = "http://www.EVENT property to specify that it wants to find a cue point named myCue that is of the event type.com/flash/video/ plane_cuepoints. and type properties.EVENT Description A read-only FLVPlayback class property that contains the String constant. "event".EVENT)){ trace("Cue point name is: " + rtn_cuePt. time. var listenerObject:Object = new Object().ready = function(eventObject:Object):Void { if(rtn_cuePt = my_FLVPlybk.name).video.type). It shows the returned cue point name.time). Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . FLVPlayback.

listenerObject. Usage var listenerObject:Object = new Object(). See also FLVPlayback. and vp. dispatched when the location of the playhead moves forward by seeking. var listenerObject:Object = new Object(). listenerObject).addEventListener("ready". playheadTime.addEventListener("cuePoint". listenerObject). either manually or through ActionScript. Example The following example catches occurrences of the fastForward event as it occurs and shows the elapsed playhead time in the Output panel.cuePoint = function(eventObject:Object):Void { if(eventObject. my_FLVplybk. The event object has the properties state.my_FLVPlybk. and the vp property is the index number of the video player to which the event applies.fastForward Availability Flash Player 8. When the ready event occurs. The FLVPlayback instance also dispatches the seek and playheadUpdate events. The playheadTime property reflects the destination time. listenerObject.info.findCuePoint() FLVPlayback. a call to the seekPercent() method triggers the fastForward event. or by clicking the ForwardButton control.addEventListener("fastForward". Edition Flash Professional 8.fastForward = function(eventObject:Object):Void { // insert event-handling code here }. listenerObject). Event.name == "myCue") trace("Hit it!"). FLVPlayback class 581 . } my_FLVPlybk.

playheadTime).addEventListener("ready".*.helpexamples. my_FLVPlybk.findCuePoint(name:String[.addEventListener("fastForward". listenerObject.flv".state.seek(). }. my_FLVPlybk. FLVPlayback.com/flash/video/ water.playheadTime FLVPlayback.findCuePoint() Availability Flash Player 8.fastForward = function(eventObject:Object):Void { trace("fastforward event. Usage my_FLVplybk. FLVPlayback. FLVPlayback.seekToNavCuePoint(). }. var listenerObject:Object = new Object().FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. type:String]):Object my_FLVplybk. and give it an instance name of my_FLVPlybk.ready = function(eventObject:Object):Void { my_FLVPlybk. FLVPlayback.seekToPrevNavCuePoint(). FLVPlayback.seekToNextNavCuePoint().seek.contentPath = "http://www.Drag an FLVPlayback component to the Stage. FLVPlayback. playhead time is: " + eventObject.seekToPrevOffset. listenerObject). type:String]):Object my_FLVplybk.findCuePoint(time:Number[. See also FLVPlayback.seekBar. FLVPlayback. my_FLVPlybk. FLVPlayback. listenerObject.forwardButton.activeVideoPlayerIndex. type:String]):Object 582 FLVPlayback Component . FLVPlayback. FLVPlayback. listenerObject).findCuePoint(cuePoint:Object[. FLVPlayback.seekPercent(35). FLVPlayback. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . Edition Flash Professional 8.seekPercent().video.seekSeconds().

is null. FLVPlayback. If this parameter is not specified. and FLVPlayback. If the name property has no value or is null. which means the method will search all cue point types. "all". see “VideoError class” on page 694. If you do not provide a value for either the time or name of the cue point. If you provide both the time and name properties and a cue point exists that matches those values. finds the cue point of the type specified by the type parameter and having the time.Parameters time A number that is the time.EVENT. or is less than zero. "event". in seconds. or it returns null if it does not find a match. with the following additional properties: array The array of cue points that were searched. FLVPlayback. or editing objects within it can cause cue points to malfunction. the search behaves as if the parameter is a number representing the time for which to search.NAVIGATION.ALL. The index into the array for the returned cue point. Treat this array as read-only because adding. "flv". then the search behaves as if the parameter is a string containing a name for which to search. The method returns the cue point that matches this time. the method returns it. FLVPlayback class 583 . It returns null if it does not find a match. the method returns only the name that is first in alphabetical order. For more information. If the time property has no value. Description Method. the default is "all". or less than zero and the name is null or undefined. If multiple ActionScript cue points have the same time. or "navigation". the method throws VideoError error 1002. A string that specifies the type of cue point for which to search. The possible values for this parameter are: "actionscript". Otherwise. A string that is the name of the cue point for which to search. removing. type Returns An object that is a copy of the found cue point object. the method returns null. name cuePoint An object that is a cue point object containing time and name properties for which to search. FLVPlayback. or if the time is null. undefined. index Returns null if no match is found. The method returns the first cue point that matches this name.ACTIONSCRIPT. The method uses only the first three decimal places and rounds any additional decimal places that you provide. of the cue point for which to search.FLV. Optional. or combination of time and name that you specify through the parameters. name. You can specify these values using the following class properties: FLVPlayback.

The method includes disabled cue points in the search. Use the isFLVCuePointEnabled() method to determine if a cue point is disabled.
Example

The following example adds two ActionScript cue points to an FLV file, and then calls the findCuePoint() method three times. The first call looks for a navigation cue point with a time of 7.748. The second call looks for cue point "ASCue1", using only a name value. The third call uses a cue point object that specifies both a time, 10, and a name, "ASCue2". After the third call, the example shows the content of the returned cue point object, including the array of cue points that were searched, which, in this example, were ActionScript cue points. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ // create cue point object import mx.video.*; my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ cuepoints.flv"; var cuePt:Object = new Object(); var rtn_cuePt:Object = new Object(); // create object for return value cuePt.time = 4.444; cuePt.name = "AScue1"; my_FLVPlybk.addASCuePoint(cuePt); //add AS cue point // add 2nd AS cue point using time and name parameters my_FLVPlybk.addASCuePoint(10, "AScue2"); // find navigation cue point using time rtn_cuePt = my_FLVPlybk.findCuePoint(7.748, FLVPlayback.NAVIGATION); //find actionscript cue point using name only rtn_cuePt = my_FLVPlybk.findCuePoint("AScue1"); //find actionscript cue point using cue point object cuePt.time = 10; cuePt.name = "AScue2"; rtn_cuePt = my_FLVPlybk.findCuePoint(cuePt, FLVPlayback.ACTIONSCRIPT); // see what returned cue point object contains for (i in rtn_cuePt) { //if an array object, open it up and trace contents if (typeof rtn_cuePt[i] == "object") { tracer(rtn_cuePt[i]); // else trace name (i) and value (rtn_cuePt[i]) pair } else { trace(i+ " " + rtn_cuePt[i]); } }

584

FLVPlayback Component

// trace array of cue points function tracer(cuepts:Array) { for (i in cuepts) { if (typeof cuepts[i] == "object") { //if object in object tracer(cuepts[i]); //trace object } else { // trace the name : value pair trace(i + " " + cuepts[i]); } } }

See also
FLVPlayback.addASCuePoint(), FLVPlayback.cuePoints,

FLVPlayback.findNearestCuePoint(), FLVPlayback.findNextCuePointWithName(), FLVPlayback.isFLVCuePointEnabled(), FLVPlayback.removeASCuePoint(), FLVPlayback.seekToNavCuePoint(), FLVPlayback.seekToNextNavCuePoint(), FLVPlayback.seekToPrevNavCuePoint(), FLVPlayback.setFLVCuePointEnabled()

FLVPlayback.findNearestCuePoint()
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVplybk.findNearestCuePoint(time:Number[, type:String]):Object my_FLVplybk.findNearestCuePoint(name:String[, type:String]):Object my_FLVplybk.findNearestCuePoint(cuePoint:Object[, type:String]):Object

Parameters
time

A number that is the time, in seconds, of the cue point for which to search. The method uses only the first three decimal places and rounds any additional decimal places that you provide. The method returns the cue point that matches this time or the nearest earlier cue point of the specified type. If multiple cue points have the same time, which can only occur with ActionScript cue points, the method returns only the name that is first in alphabetical order. It returns null if it does not find a match. A string that is the name of the cue point for which to search. The method returns the first cue point that matches this name or null, if it does not find a match.

name

FLVPlayback class

585

cuePoint An object that is a cue point object containing time and name properties for which to search. If you provide a time and the name property has no value or is null, the search behaves as if the parameter is a number representing the time for which to search. If you provide a name and the time property has no value, is null, or is less than zero, the search behaves as if the parameter is a string containing a name for which to search. If you provide both the time and name properties and a cue point exists that matches those values, the method returns it. If it does not find a match for both the time and name, it returns the first cue point that matches the name and has an earlier time. If there is no earlier cue point with that name, it returns the first cue point that matches that name. Otherwise, the method returns null.

Optional. A string that specifies the type of cuepoint for which to search. The possible values for this parameter are: "actionscript", "all", "event", "flv", or "navigation". You can specify these values using the following class properties: FLVPlayback.ACTIONSCRIPT, FLVPlayback.ALL, FLVPlayback.EVENT, FLVPlayback.FLV, and FLVPlayback.NAVIGATION.If this parameter is not specified, the default is "all", which means the method will search all cue point types.
type

Returns

An object that is a copy of the found cue point object with the following additional properties:
array

The array of cue points searched. Treat this array as read-only as adding, removing or editing objects within it can cause cue points to malfunction. The index into the array for the returned cue point.

index

Returns null if no match was found.
Description

Method; finds a cue point of the specified type that matches or is earlier than the time that you specify, or that matches the name that you specify, if you specify both a time and a name and no earlier cue point matches that name. Otherwise, it returns null. The method includes disabled cue points in the search. Use the isFLVCuePointEnabled() method to determine if a cue point is disabled. If the time is null, undefined, or less than 0 and the name is null or undefined, the method throws a VideoError error (1002).

586

FLVPlayback Component

Example

The following example creates an ActionScript cue point for the FLV file at 4.07 seconds. When this cue point occurs, the cuePoint event handler calls the findNearestCuePoint() method to find a cue point of any type that is nearest to 5 seconds later. The Output panel shows the name, time, and type of the cue point that is returned. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ cuepoints.flv"; var cuePt:Object = new Object(); //create cue point object cuePt.time = 4.07; cuePt.name = "ASpt1"; cuePt.type = "actionscript"; my_FLVPlybk.addASCuePoint(cuePt); //add AS cue point function cuePoint(eventObject:Object):Void { if (eventObject.info.name == "ASpt1") { var rtn_obj:Object = new Object(); rtn_obj = my_FLVPlybk.findNearestCuePoint(eventObject.info.time + 5); trace("Cue point name is: " + rtn_obj.name); trace("Cue point time is: " + rtn_obj.time); trace("Cue point type is: " + rtn_obj.type); } } my_FLVPlybk.addEventListener("cuePoint", cuePoint);

See also

FLVPlayback.findCuePoint(), FLVPlayback.isFLVCuePointEnabled(), FLVPlayback.removeASCuePoint(), FLVPlayback.seekToNavCuePoint(), FLVPlayback.seekToNextNavCuePoint(), FLVPlayback.seekToPrevNavCuePoint(), FLVPlayback.setFLVCuePointEnabled()
FLVPlayback.findNextCuePointWithName(),

FLVPlayback.addASCuePoint(), FLVPlayback.cuePoints,

FLVPlayback class

587

FLVPlayback.findNextCuePointWithName()
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVplybk.findNextCuePointWithName(my_cuePoint:Object)

Parameters
my_cuePoint A cue point object that has been returned by either the findCuePoint() method, the findNearestCuePoint() method, or a previous call to this method.

Returns

An object that is a copy of the found cue point object with the following additional properties:
array

The array of cue points searched. Treat this array as read-only because adding, removing or editing objects within it can cause cue points to malfunction. The index into the array for the returned cue point.

index

Returns null if no match was found.
Description

Method; finds the next cue point in my_cuePoint.array that has the same name as my_cuePoint.name. The my_cuePoint object must be a cue point object that has been returned by the findCuePoint() method, the findNearestCuePoint() method, or a previous call to this method. This method uses the array property that these methods add to the cue point object. The method includes disabled cue points in the search. Use the isFLVCuePointEnabled() method to determine if a cue point is disabled. Returns null if there are no more cue points in the array with a matching name.
Example

The following example creates three ActionScript cue points with the name "transition". When the ready event occurs, the event handler calls the findCuePoint() method to find the first cue point with this name. If it finds a match, it calls the findNextName() function, which calls the findNextCuePointWithName() method, passing the returned cue point object (rtn_obj), to find any additional cue points with the same name.

588

FLVPlayback Component

Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ cuepoints.flv"; var cuePt:Object = new Object(); //create cue point object cuePt.time = 6.27; cuePt.name = "transition"; cuePt.type = "actionscript"; my_FLVPlybk.addASCuePoint(cuePt); //add AS cue point cuePt.time = 7.06; my_FLVPlybk.addASCuePoint(cuePt); //add AS cue point cuePt.time = 11.13; my_FLVPlybk.addASCuePoint(cuePt); //add AS cue point var listenerObject:Object = new Object(); listenerObject.ready = function():Void { var rtn_obj:Object = new Object(); // Find cue point using name string if (rtn_obj = my_FLVPlybk.findCuePoint("transition")) { trace("Cue point name is: " + rtn_obj.name); trace("Cue point time is: " + rtn_obj.time); trace("Cue point type is: " + rtn_obj.type); findNextName(rtn_obj); } } my_FLVPlybk.addEventListener("ready", listenerObject); // Find additional cue points with the same name function findNextName(cuePt:Object):Void { while(cuePt = my_FLVPlybk.findNextCuePointWithName(cuePt)) { trace("Cue point name is: " + cuePt.name); trace("Cue point time is: " + cuePt.time); trace("Cue point type is: " + cuePt.type); } }

See also
FLVPlayback.addASCuePoint(), FLVPlayback.cuePoints,

FLVPlayback.findCuePoint(), FLVPlayback.findNearestCuePoint(), FLVPlayback.isFLVCuePointEnabled(), FLVPlayback.removeASCuePoint(), FLVPlayback.seekToNavCuePoint(), FLVPlayback.seekToNextNavCuePoint(), FLVPlayback.seekToPrevNavCuePoint(), FLVPlayback.setFLVCuePointEnabled()

FLVPlayback class

589

FLVPlayback.FLV
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
mx.video.FLVPlayback.FLV

Description

A read-only FLVPlayback class property that contains the string constant, "flv". You can use this property as the type parameter for the findCuePoint() and findNearestCuePoint() methods.
Example

The following example looks for a cue point named point2 with a time of 7.748 among FLV file cue points and displays the type and time found. FLV file cue points are navigation and event cue points. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ cuepoints.flv"; // create cue point object var listenerObject = new Object(); listenerObject.ready = function(eventObject:Object):Void { var cuePt:Object = new Object(); // create cue point object cuePt.name = "point3"; cuePt.time = 16.02; if(cuePt = my_FLVPlybk.findCuePoint(cuePt, FLVPlayback.FLV)) //find cue point trace("found a " + cuePt.type + " cue point at " + cuePt.time); else trace("cue point not found"); } my_FLVPlybk.addEventListener("ready", listenerObject);

590

FLVPlayback Component

See also

FLVPlayback.findCuePoint(), FLVPlayback.findNearestCuePoint()

FLVPlayback.forwardButton
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVPlybk.forwardButton

Description

Property; a MovieClip object that is the Forward button control. For more information on using FLV Playback Custom UI components for playback controls, see “Skinning FLV Playback Custom UI components individually” on page 521.
Example

The following example uses the backButton, forwardButton, playButton, pauseButton, and stopButton properties to attach individual FLV Playback Custom UI controls to an FLVPlayback component. Drag an FLVPlayback component to the Stage and give it an instance name of my_FLVPlybk. Set the Skin parameter to None in the Component inspector. Next, add the following individual FLV Custom UI components and give them the instance names shown in parentheses: BackButton (my_bkbttn), ForwardButton (my_fwdbttn), PlayButton (my_plybttn), PauseButton (my_pausbttn), and StopButton (my_stopbttn). Then add the following lines of code to the Actions panel:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk - FLV Custom UI BackButton, ForwardButton, PlayButton, PauseButton, and StopButton components in the Library */ import mx.video.*; my_FLVPlybk.backButton = my_bkbttn; my_FLVPlybk.forwardButton = my_fwdbttn; my_FLVPlybk.playButton = my_plybttn; my_FLVPlybk.pauseButton = my_pausbttn; my_FLVPlybk.stopButton = my_stopbttn; my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ water.flv";
FLVPlayback class 591

See also
FLVPlayback.fastForward, FLVPlayback.stateChange

FLVPlayback.seek, FLVPlayback.state,

FLVPlayback.getVideoPlayer()
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVplybk.getVideoPlayer(index:Number)

Returns

A VideoPlayer object.
Description

Method; gets the video player specified by index. When possible, it is best to access VideoPlayer methods and properties using FLVPlayback methods and properties. Each VideoPlayer._name property is its index.
Example

The following example uses two video players to play two FLV files. When the second FLV file triggers the ready event, the example calls the getVideoPlayer() method to obtain video player number 1 and set its _alpha property to 50. This causes the FLV file (plane_cuepoints) in that player to be transparent and makes both FLV files visible simultaneously. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */

592

FLVPlayback Component

my_FLVPlybk.load("http://www.helpexamples.com/flash/video/cuepoints.flv"); var listenerObject:Object = new Object(); listenerObject.ready = function(eventObject:Object) { if (eventObject.target.contentPath == "http://www.helpexamples.com/ flash/video/cuepoints.flv") { //this fires after the first flv is ready my_FLVPlybk.activeVideoPlayerIndex = 1; my_FLVPlybk.load("http://www.helpexamples.com/flash/video/ plane_cuepoints.flv"); } else { //this fires after the second flv is ready eventObject.target.activeVideoPlayerIndex = 0; eventObject.target.play(); eventObject.target.activeVideoPlayerIndex = 1; eventObject.target.play(); var layerOnTop:MovieClip = eventObject.target.getVideoPlayer(1); layerOnTop._alpha = 50; layerOnTop._visible = true; } } my_FLVPlybk.addEventListener("ready", listenerObject);

See also

FLVPlayback.activeVideoPlayerIndex, FLVPlayback.bringVideoPlayerToFront(),
FLVPlayback.visibleVideoPlayerIndex

FLVPlayback.height
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVPlybk.height

Description

Property; a number that specifies the height of the FLVPlayback instance. This property affects only the height of the FLVPlayback instance and does not include the height of a skin SWF file that might be loaded. Use the FLVPlayback height property and not the MovieClip._height property because the _height property might give a different value if a skin SWF file is loaded.

FLVPlayback class

593

Example

The following example sets the width and height properties to change the size of the video player. It first sets the maintainAspectRatio property to false to prevent the video player from resizing automatically when the dimensions change. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; my_FLVPlybk.maintainAspectRatio = false; my_FLVPlybk.width = 300; my_FLVPlybk.height = 350; my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ water.flv";

See also
FLVPlayback.preferredHeight, FLVPlayback.preferredWidth,

FLVPlayback.maintainAspectRatio, FLVPlayback.resize, FLVPlayback.setSize(), FLVPlayback.width

FLVPlayback.idleTimeout
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVPlybk.idleTimeout

Description

Property; the amount of time, in milliseconds, before Flash terminates an idle connection to a FMS because playing paused or stopped. This property has no effect on an FLV file downloading over HTTP. If this property is set when a video stream is already idle, it restarts the timeout period with the new value. The default value is 300,000, or 5 minutes.

594

FLVPlayback Component

Example

The following example assumes playing a streaming FLV file from a FMS or FVSS. The example sets the idleTimeout property to a low value of 10 milliseconds, which triggers a timeout and, consequently, a close event on the RTMP connection. The listener for the close event shows the index number of the video player for which the event occurred. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. In the Component inspector, assign the contentPath parameter a value that specifies the location of a streaming FLV file from a FMS or FVSS. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; my_FLVPlybk.idleTimeout = 10; var listenerObject:Object = new Object(); //listen for close event on RTMP connection; display index of video player listenerObject.close = function(eventObject:Object) { trace("Closed connection for video player: " + eventObject.vp); }; my_FLVPlybk.addEventListener("close", listenerObject);

See also
FLVPlayback.close

FLVPlayback.isFLVCuePointEnabled()
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVplybk.isFLVCuePointEnabled(time:Number) my_FLVplybk.isFLVCuePointEnabled(name:String) my_FLVplybk.isFLVCuePointEnabled(cuePoint:Object)

Parameters
time name

A number that is the time, in seconds, of the cue point for which to search. A string that is the name of the cue point for which to search.

FLVPlayback class

595

A cue point object with time and name properties for the cue point. The method does not check any other properties on the incoming cue point object. If time or name is undefined, the method uses only the property that is defined.
cuePoint

Returns

A Boolean value that is false if the cue point or cue points are found and are disabled, and true if the cue point is not disabled or does not exist. If the time given is undefined, null, less than 0, or only a cue point name is provided, the method returns false only if all cue points with this name are disabled.
Description

Method; returns false if the FLV file embedded cue point is disabled. You can disable cue points either by setting the cuePoints property through the Flash Video Cue Points dialog box or by calling the setFLVCuePointEnabled() method. The return value from this function is meaningful only when the metadataLoaded property is true, the metadata property is not null, or after a metadataReceived event. When metadataLoaded is false, this function always returns true.
Example

The following example disables the point2 cue point when the ready event occurs. When the first cuePoint event occurs, the event handler calls the isFLVCuePointEnabled() method to see if the cue point is disabled and, if so, the event handler enables it. The FLV file contains the following embedded cue points: point1, 00:00:00:418; point2, 00:00:07.748; point3, 00:00:16:020. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; function ready(eventObject:Object) { my_FLVPlybk.setFLVCuePointEnabled(false, "point2"); }

596

FLVPlayback Component

my_FLVPlybk.addEventListener("ready", ready); var listenerObject:Object = new Object(); listenerObject.cuePoint = function(eventObject:Object) { trace("Elapsed time in seconds: " + my_FLVPlybk.playheadTime); trace("Cue point name is: " + eventObject.info.name); trace("Cue point type is: " + eventObject.info.type); if (my_FLVPlybk.isFLVCuePointEnabled("point2") == false) { my_FLVPlybk.setFLVCuePointEnabled(true, "point2"); } } my_FLVPlybk.addEventListener("cuePoint", listenerObject); my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ cuepoints.flv";

See also

FLVPlayback.findCuePoint(), FLVPlayback.findNearestCuePoint(), FLVPlayback.findNextCuePointWithName(), FLVPlayback.setFLVCuePointEnabled(), FLVPlayback.seekToNavCuePoint(), FLVPlayback.seekToNextNavCuePoint(), FLVPlayback.seekToPrevNavCuePoint()

FLVPlayback.cuePoint,

FLVPlayback.isLive
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVPlybk.isLive

Description

Property; a Boolean value that is true if the video stream is live. This property is effective only when streaming from a FMS or FVSS. The value of this property is ignored for an HTTP download. If you set this property between loading new FLV files, it has no effect until the contentPath parameter is set for the new FLV file.
Example

The following example assumes playing a live stream from a FMS. When the playing event occurs, the example shows the value of the isLive property.

FLVPlayback class

597

Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline. In the statement that loads the contentPath property, replace the italicized text with the name and location of an FLV file on your FMS.
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; var listenerObject:Object = new Object(); listenerObject.playing = function(eventObject:Object) { trace("The isLive property is " + my_FLVPlybk.isLive); }; my_FLVPlybk.addEventListener("playing", listenerObject); my_FLVPlybk.contentPath = "rtmp://my_servername/my_application/stream.flv";

See also

FLVPlayback.contentPath, FLVPlayback.load()

FLVPlayback.isRTMP
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVPlybk.isRTMP

Description

Property; a Boolean value that is true if the FLV file is streaming from a FMS or FVSS using RTMP. Its value is false for any other FLV file source. Read-only.
Example

The following example assumes playing a streaming FLV file from a FMS or FVSS. When the playing event occurs, the example shows the value of the isRTMP property to indicate whether the FLV file is coming from an RTMP URL.

598

FLVPlayback Component

Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline. In the statement that loads the contentPath property, replace the italicized text with the name and location of an FLV file on your FMS.
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; my_FLVPlybk.bufferTime = 7; var listenerObject:Object = new Object(); // listen for playing event on RTMP connection; display result of isRTMP listenerObject.playing = function(eventObject:Object) { trace("Value of isRTMP property is: " + my_FLVPlybk.isRTMP); }; my_FLVPlybk.addEventListener("playing", listenerObject); my_FLVPlybk.contentPath = "rtmp://my_servername/my_application/stream.flv";

See also

FLVPlayback.contentPath, FLVPlayback.load(), FLVPlayback.play()

FLVPlayback.load()
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVplybk.load(contentPath:String[, totalTime:Number, isLive:Boolean])

Parameters
contentPath

A string that specifies the URL of the FLV file to stream and how to stream it. The URL can be a local path, an HTTP URL to an FLV file, an RTMP URL to an FLV file stream, or an HTTP URL to an XML file. A number that is the total playing time for the video. Optional.

totalTime isLive

A Boolean value that is true if the video stream is live. This value is effective only when streaming from FVSS or FMS. The value of this property is ignored for an HTTP download. Optional.

FLVPlayback class

599

Returns

Nothing.
Description

Method; begins loading the FLV file and provides a shortcut for setting the autoPlay property to false and setting the contentPath, totalTime, and isLive properties, if given. If the totalTime and isLive properties are undefined, they are not set. If the contentPath property is undefined, null, or an empty string, this method does nothing.
Example

The following example calls the load() method to load an FLV file that is specified by the contentPath parameter. It shows the value of the autoPlay property before and after loading the FLV file and calls the play() method to begin playing the FLV file. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; trace("Before load, autoPlay is: " + my_FLVPlybk.autoPlay); my_FLVPlybk.load("http://www.helpexamples.com/flash/video/water.flv"); trace("After load, autoPlay is: " + my_FLVPlybk.autoPlay); my_FLVPlybk.play();

See also

FLVPlayback.contentPath, FLVPlayback.isLive, FLVPlayback.totalTime

600

FLVPlayback Component

FLVPlayback.LOADING
Availability Flash Player 8.
Edition

Flash Professional 8.
Usage
mx.video.FLVPlayback.LOADING

Description

A read-only FLVPlayback class property that contains the string constant, "loading". You can compare this property to the state property to determine whether the component is in the loading state.
Example

The following example displays the value of the FLVPlayback.LOADING property if the FLV file is in the loading state. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; var listenerObject:Object = new Object(); listenerObject.stateChange = function(eventObject:Object):Void { if(my_FLVPlybk.state == FLVPlayback.LOADING) trace("State is " + FLVPlayback.LOADING); } my_FLVPlybk.addEventListener("stateChange", listenerObject); my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ water.flv";

See also

FLVPlayback.state, FLVPlayback.stateChange

FLVPlayback class

601

FLVPlayback.maintainAspectRatio
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVPlybk.maintainAspectRatio

Description

Property; a Boolean value that, if true, maintains the video aspect ratio. If this property is changed from false to true and the autoSize property is false after an FLV file has been loaded, an automatic resize of the video starts immediately. The default value is true.
Example

The following example calls the setSize() method to change the size of the FLVPlayback instance, causing a resize event. The maintainAspectRatio property, which defaults to true, forces a second resize event to maintain the aspect ratio. The resize event handler displays the width and height of the resized FLVPlayback instance for both occurrences in the Output panel. If you set maintainAspectRatio to false, the dimensions specified by the setSize() method take effect. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; // maintainAspectRatio defaults to true, causing resize when size changes. // Remove the comment delimiters from the following line to disable resize.

602

FLVPlayback Component

// my_FLVPlybk.maintainAspectRatio = false; var listenerObject:Object = new Object(); listenerObject.resize = function(eventObject:Object) { trace("resize event; Width is: " + eventObject.target.width + " Height is: " + eventObject.target.height); }; my_FLVPlybk.addEventListener("resize", listenerObject); my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ water.flv"; my_FLVPlybk.setSize(300, 300);

See also

FLVPlayback.autoSize, FLVPlayback.height, FLVPlayback.preferredHeight, FLVPlayback.preferredWidth, FLVPlayback.resize, FLVPlayback.setSize(), FLVPlayback.width

FLVPlayback.metadata
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVPlybk.metadata

Description

Property; an object that is a metadata information packet that is received from a call to the NetSteam.onMetaData() callback function, if available. Read only.

FLVPlayback class

603

If the FLV file is encoded with the Flash CS3 encoder, the metadata property contains the following information. Older FLV files contain only the height, width, and duration values.
Parameter
canSeekToEnd

Description
A Boolean value that is true if the FLV file is encoded with a keyframe on the last frame that allows seeking to the end of a progressive download movie clip. It is false if the FLV file is not encoded with a keyframe on the last frame. An array of objects, one for each cue point embedded in the FLV file. Value is undefined if the FLV file does not contain any cue points. Each object has the following properties: • type a string that specifies the type of cue point as either "navigation" or "event". • name a string that is the name of the cue point. • time a number that is the time of the cue point in seconds with a precision of three decimal places (milliseconds). • parameters an optional object that has name-value pairs that are designated by the user when creating the cue points. A number that indicates the audio codec (code/decode technique) that was used. A number that indicates what time in the FLV file “time 0” of the original FLV file exists. The video content needs to be delayed by a small amount to properly synchronize the audio. A number that is the kilobytes per second of audio. A number that is the codec version that was used to encode the video. A number that is the frame rate of the FLV file. A number that is the video data rate of the FLV file. A number that is the height of the FLV file. A number that is the width of the FLV file. A number that specifies the duration of the FLV file in seconds.

cuePoints

audiocodecid

audiodelay

audiodatarate videocodecid

framerate videodatarate height width duration

Example

The following example shows in the Output panel a sampling of metadata values from the FLV file cuepoints.flv. It displays the data when the metadataReceived event occurs. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:

604

FLVPlayback Component

/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; var listenerObject:Object = new Object(); listenerObject.metadataReceived = function(eventObject:Object):Void { trace("canSeekToEnd is " + my_FLVPlybk.metadata.canSeekToEnd); trace("Number of cue points is " + my_FLVPlybk.metadata.cuePoints.length); trace("Frame rate is " + my_FLVPlybk.metadata.framerate); trace("Height is " + my_FLVPlybk.metadata.height); trace("Width is " + my_FLVPlybk.metadata.width); trace("Duration is " + my_FLVPlybk.metadata.duration + " seconds"); }; my_FLVPlybk.addEventListener("metadataReceived", listenerObject); my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ cuepoints.flv";

See also
FLVPlayback.metadataLoaded, FLVPlayback.metadataReceived

FLVPlayback.metadataLoaded
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVPlybk.metadataLoaded

Description

Property; a Boolean value that is true if a metadata packet has been encountered and processed or if the FLV file was encoded without the metadata packet. In other words, the value is true if the metadata is received, or if you are never going to get any metadata. So, you know if you have the metadata; and if you don’t have the metadata, you know not to wait around for it. If you just want to know whether or not you have metadata, you can check the value with:
FLVPlayback.metadata != null

Use this property to check whether you can retrieve useful information with the methods for finding and enabling or disabling cue points. Read-only.

FLVPlayback class

605

Example

The following example creates a listener for the progress event. When the event occurs, the example checks whether the metadataLoaded property is true and, if so, shows the metadata values height, width, and duration in the Output panel. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; var listenerObject:Object = new Object(); listenerObject.progress = function(eventObject:Object):Void { if(my_FLVPlybk.metadataLoaded){ trace("Height is " + my_FLVPlybk.metadata.height); trace("Width is " + my_FLVPlybk.metadata.width); trace("Duration is " + my_FLVPlybk.metadata.duration + " seconds"); } }; my_FLVPlybk.addEventListener("progress", listenerObject); my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ water.flv";

See also

FLVPlayback.metadata, FLVPlayback.metadataReceived

FLVPlayback.metadataReceived
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
var listenerObject:Object = new Object(); listenerObject.metadataReceived = function(eventObject:Object):Void { // insert event-handling code here }; my_FLVplybk.addEventListener("metadataReceived", listenerObject);

606

FLVPlayback Component

Description

Event; dispatched the first time the FLV file metadata is reached. The event object has an info property that contains the info object received by the NetStream.onMetaData callback. The event also has the vp property, which is the index number of the video player to which the event applies. For more information, see FLVPlayback.activeVideoPlayerIndex on page 545 and FLVPlayback.visibleVideoPlayerIndex on page 684.
Example

The following example creates a listener for the metadataReceived event. When the event occurs, the event handler sends the name, time, and type of each cue point that is described in the metadata property to the Output panel. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; var listenerObject:Object = new Object(); listenerObject.metadataReceived = function(eventObject:Object):Void { var i:Number = 0; trace("This FLV contains the following cue points:"); while(i < my_FLVPlybk.metadata.cuePoints.length) { trace("\nName: " + my_FLVPlybk.metadata.cuePoints[i].name); trace(" Time: " + my_FLVPlybk.metadata.cuePoints[i].time); trace(" Type is " + my_FLVPlybk.metadata.cuePoints[i].type); ++i; } }; my_FLVPlybk.addEventListener("metadataReceived", listenerObject); my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ cuepoints.flv";

See also

FLVPlayback.metadata, FLVPlayback.metadataLoaded

FLVPlayback class

607

FLVPlayback.muteButton
Availability Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVPlybk.muteButton

Description

Property; a MovieClip object that is the mute button control. For more information on using FLV Playback Custom UI components for playback controls, see “Skinning FLV Playback Custom UI components individually” on page 521. Clicking the muteButton control dispatches a volumeUpdate event.
Example

The following example uses the backButton, forwardButton, playPauseButton, stopButton, and muteButton properties to attach individual FLV Custom UI controls to an FLVPlayback component. Drag an FLVPlayback component to the Stage and give it an instance name of my_FLVPlybk. Set the Skin parameter to None in the Component inspector. Next, add the following individual FLV Custom UI components and give them the instance names shown in parentheses: BackButton (my_bkbttn), ForwardButton (my_fwdbttn), PlayPauseButton (my_plypausbttn), StopButton (my_stopbttn), and MuteButton (my_mutebttn). Then add the following lines of code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk - FLV Custom UI BackButton, ForwardButton, PlayPauseButton, StopButton, and MuteButton components in the Library */ import mx.video.*; my_FLVPlybk.backButton = my_bkbttn; my_FLVPlybk.forwardButton = my_fwdbttn; my_FLVPlybk.playPauseButton = my_plypausbttn; my_FLVPlybk.stopButton = my_stopbttn; my_FLVPlybk.muteButton = my_mutebttn; my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ water.flv";

608

FLVPlayback Component

See also
FLVPlayback.skin, FLVPlayback.volume, FLVPlayback.volumeBar, FLVPlayback.volumeUpdate

FLVPlayback.NAVIGATION
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
mx.video.FLVPlayback.NAVIGATION

Description

A read-only FLVPlayback class property that contains the string constant, "navigation". You can use this property for the type parameter of the findCuePoint() and findNearestCuePoint() methods.
Example

The following example uses the FLVPlayback.NAVIGATION property to specify the type of cue point to find. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; // find navigation cue point using time var listenerObject:Object = new Object(); listenerObject.ready = function(eventObject:Object):Void { var rtn_cuePt:Object = new Object(); rtn_cuePt = my_FLVPlybk.findCuePoint(7.748, FLVPlayback.NAVIGATION); trace("Found cue point at " + rtn_cuePt.time + " of type " + rtn_cuePt.type); } my_FLVPlybk.addEventListener("ready", listenerObject) my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ cuepoints.flv";

FLVPlayback class

609

See also

FLVPlayback.findCuePoint(), FLVPlayback.findNearestCuePoint()

FLVPlayback.ncMgr
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVPlybk.ncMgr

Description

Property; an INCManager object that provides access to an instance of the class implementing INCManager, which is an interface to the NCManager class. You can use this property to implement a custom INCManager that requires custom initialization. Read-only.
Example

The following example shows the value of the NetConnection DEFAULT_TIMEOUT property when the ready event occurs. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; // specify name and location of FLV my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ clouds.flv"; var listenerObject:Object = new Object(); listenerObject.ready = function(eventObject:Object):Void { var NC:Object = new Object(); NC = my_FLVPlybk.ncMgr; trace("Net connection timeout is " + NC.DEFAULT_TIMEOUT + " milliseconds"); }; my_FLVPlybk.addEventListener("ready", listenerObject);

610

FLVPlayback Component

See also
VideoPlayer class

FLVPlayback.pause()
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVplybk.pause()

Parameters

None.
Returns

Nothing.
Description

Method; pauses playing the video stream.
Example

The following example creates a listener for the playheadUpdate event. When it occurs, the event handler checks to see whether the playhead time is between 5 and 5.05 seconds. If it is, the event handler calls the pause() method to suspend playing the FLV file. The paused event handler prompts you to push the Play button to continue. Drag an FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk. Drag a TextArea component to the Stage below the FLVPlayback instance, and give it an instance name of my_ta. Then add the following code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.video.*; my_ta.visible = false; my_FLVPlybk.playheadUpdateInterval = 5; my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ water.flv";

FLVPlayback class

611

var listenerObject:Object = new Object(); listenerObject.playheadUpdate = function(eventObject:Object):Void { if ((eventObject.playheadTime >= 5) && (eventObject.playheadTime < 5.05)) { my_FLVPlybk.pause(); } }; my_FLVPlybk.addEventListener("playheadUpdate", listenerObject); listenerObject.paused = function(eventObject:Object):Void { my_ta.text = "Paused; push Play to continue"; my_ta.visible = true; }; my_FLVPlybk.addEventListener("paused", listenerObject);

See also
FLVPlayback.paused,

FLVPlayback.play(), FLVPlayback.rewind

FLVPlayback.pauseButton
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
my_FLVPlybk.pauseButton

Description

Property; a MovieClip that is the PauseButton control. For more information on using the FLV Playback Custom UI components for playback control, see “Skinning FLV Playback Custom UI components individually” on page 521.
Example

The following example uses the backButton, forwardButton, playButton, pauseButton, and stopButton properties to attach individual FLV Custom UI controls to an FLVPlayback component.

612

FLVPlayback Component

Drag an FLVPlayback component to the Stage and give it an instance name of my_FLVPlybk. Set the Skin parameter to None in the Component inspector. Next, add the following individual FLV Custom UI components and give them the instance names shown in parentheses: BackButton (my_bkbttn), ForwardButton (my_fwdbttn), PlayButton (my_plybttn), PauseButton (my_pausbttn), and StopButton (my_stopbttn). Then add the following lines of code to the Actions panel on Frame 1 of the Timeline:
/** Requires: - FLVPlayback component on the Stage with an instance name of my_FLVPlybk - FLV Custom UI BackButton, ForwardButton, PlayButton, PauseButton, and StopButton components in the Library */ import mx.video.*; my_FLVPlybk.backButton = my_bkbttn; my_FLVPlybk.forwardButton = my_fwdbttn; my_FLVPlybk.playButton = my_plybttn; my_FLVPlybk.pauseButton = my_pausbttn; my_FLVPlybk.stopButton = my_stopbttn; my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/ water.flv";

See also
FLVPlayback.playButton,

FLVPlayback.playPauseButton, FLVPlayback.skin

FLVPlayback.PAUSED
Availability

Flash Player 8.
Edition

Flash Professional 8.
Usage
mx.video.FLVPlayback.PAUSED

Description

A read-only FLVPlayback class property that contains the string constant, "paused". You can compare this property to the state property to see if the component is in the paused state.
Example

The following example uses the FLVPlayback.PAUSED property to show the state of the FLV file when the user clicks the Pause button.

FLVPlayback class

613

FLVPlayback.addEventListener("paused".paused = function(eventObject:Object):Void { // insert event-handling code here }. Edition Flash Professional 8. my_FLVplybk.video.PAUSED).state == FLVPlayback. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . listenerObject. Usage var listenerObject:Object = new Object().com/flash/video/ water.*.paused Availability Flash Player 8. listenerObject). and give it an instance name of my_FLVPlybk.flv".FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.state. See also FLVPlayback.contentPath = "http://www. 614 FLVPlayback Component . listenerObject) my_FLVPlybk.helpexamples.stateChange FLVPlayback. listenerObject.Drag an FLVPlayback component to the Stage. } my_FLVPlybk.addEventListener("stateChange".stateChange = function(eventObject:Object):Void { if(eventObject.PAUSED) trace("FLV is " + FLVPlayback. var listenerObject:Object = new Object().

my_FLVPlybk. and vp.helpexamples. playheadTime.state + "!").addEventListener("playheadUpdate".paused. “The FLV is paused!” Drag an FLVPlayback component to the Stage. When the event occurs.addEventListener("paused". Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .com/flash/video/ water. See also FLVPlayback.playheadUpdate = function(eventObject:Object):Void { if ((eventObject.flv".visibleVideoPlayerIndex on page 684.stateChange FLVPlayback class 615 . listenerObject.05 seconds. } } my_FLVPlybk. For more information on the vp property. This happens when you call the pause() method or click the corresponding control and it also happens in some cases when the FLV file is loaded if autoPlay is false (the state may be stopped instead).Description Event. The stateChange event is also dispatched.playheadUpdateInterval = 5. see FLVPlayback. The event object has the properties state.state.pause(). which is the index number of the video player to which this event applies. FLVPlayback. }. listenerObject. the event handler checks to see whether the playheadTime property is between 5 and 5.activeVideoPlayerIndex on page 545 and FLVPlayback. listenerObject).contentPath = "http://www. Example The following example creates a listener for the playheadUpdate event. and give it an instance name of my_FLVPlybk.paused = function(eventObject:Object) { trace("FLV is " + my_FLVPlybk. This triggers a paused event for which the paused event handler shows. the event handler calls the pause() method to suspend playing the FLV file.video.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. var listenerObject:Object = new Object().playheadTime < 5.playheadTime >= 5) && (eventObject. If so. listenerObject). my_FLVPlybk. FLVPlayback.05)) { my_FLVPlybk. dispatched when the player enters the paused state. FLVPlayback. my_FLVPlybk.*.pause().

contentPath = "http://www. FLVPlayback. 616 FLVPlayback Component . Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . it checks the paused property to determine whether the component is in the paused state.stateChange FLVPlayback. Read-only. Usage my_FLVPlybk. listenerObject). a Boolean value that is true if the FLV file is in a paused state.paused Description Property. When the event occurs. }. FLVPlayback.addEventListener("stateChange".FLVPlayback.*.paused) trace("FLV is in " + FLVPlayback.paused. it shows a message to that effect in the Output panel. Example The following example creates a listener for the stateChange event.PAUSED. and give it an instance name of my_FLVPlybk. my_FLVPlybk. Edition Flash Professional 8.flv".state.video.helpexamples.com/flash/video/ water. See also FLVPlayback.stateChange = function(eventObject:Object) { if(my_FLVPlybk. You must click the Pause button while the FLV file is playing to cause the paused state to occur. Drag an FLVPlayback component to the Stage.PAUSED + " state"). var listenerObject:Object = new Object().paused Availability Flash Player 8.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. If so. my_FLVPlybk. listenerObject.

Drag an FLVPlayback component to the Stage. but the contentPath property must be set either through the Component inspector or through ActionScript. and calls the play() method to begin playing the FLV file at that point. Optional. Description Method. calls the seekSeconds() method to set the playhead 20 seconds into the video. they are not set.play() Availability Flash Player 8.play ([contentPath:String. The URL can be a local path. the method acts as a shortcut for setting the autoPlay property to true and setting the isLive. If parameters are used. With no parameters. the method simply takes the FLV file from a paused or stopped state to the playing state. Returns Nothing. or an HTTP URL to an XML file. If the totalTime and isLive properties are undefined. A number that is the total playing time for the video. totalTime:Number. Optional. an RTMP URL to an FLV file stream. an HTTP URL to an FLV file. totalTime and. This value is effective only when streaming from a FMS or FVSS. totalTime isLive A Boolean value that is true if the video stream is live. It is optional. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** FLVPlayback class 617 . plays the video stream. and give it an instance name of my_FLVPlybk. isLive:Boolean]) Parameters contentPath A string that specifies the URL of the FLV file to stream and how to stream it. contentPath properties. Edition Flash Professional 8.FLVPlayback. The value of this property is ignored for an HTTP download. or this method has no effect. Usage my_FLVplybk. Example The following example disables the FLV file from playing automatically.

Example The following example uses the backButton.stop() FLVPlayback. See also FLVPlayback.autoPlay. and stopButton properties to attach individual FLV Custom UI controls to an FLVPlayback component. var listenerObject:Object = new Object(). forwardButton. my_FLVPlybk. my_FLVPlybk.helpexamples. FLVPlayback.flv".*.autoPlay = false. For more information on using FLV Playback Custom UI components for playback controls. Edition Flash Professional 8.contentPath = "http://www. FLVPlayback. my_FLVPlybk.Requires: . FLVPlayback.play(). a MovieClip object that is the Play button.video.playButton Availability Flash Player 8. pauseButton. Usage my_FLVPlybk. }. listenerObject).load().contentPath. listenerObject. my_FLVPlybk.ready = function(eventObject:Object):Void { my_FLVPlybk.pause().com/flash/video/ water. playButton.addEventListener("ready".FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. see “Skinning FLV Playback Custom UI components individually” on page 521.playButton Description Property.seekSeconds(4). 618 FLVPlayback Component . FLVPlayback.

The value of this property is relative to the value of the totalTime property.playing. a number that specifies the current playheadTime as a percentage of the totalTime property. or less than or equal to zero. my_FLVPlybk. my_FLVPlybk. it causes a seek operation to the point representing that percentage of the FLV file’s playing time.skin FLVPlayback.FLV Custom UI BackButton.Drag an FLVPlayback component to the Stage. PlayButton (my_plybttn). Edition Flash Professional 8. See also FLVPlayback.playheadPercentage Availability Flash Player 8.FLVPlayback component on the Stage with an instance name of my_FLVPlybk .stopButton = my_stopbttn. my_FLVPlybk. ForwardButton (my_fwdbttn).pauseButton = my_pausbttn.*. PauseButton. and StopButton (my_stopbttn). my_FLVPlybk. FLVPlayback class 619 .video. PlayButton.playheadPercentage Description Property. and give them the instance names shown in parentheses: BackButton (my_bkbttn). and StopButton components in the Library */ import mx. If you set this property. PauseButton (my_pausbttn). add the following individual FLV Custom UI components. Next. null. Usage my_FLVPlybk. and give it an instance name of my_FLVPlybk. it contains the percentage of playing time that has elapsed.backButton = my_bkbttn. my_FLVPlybk. FLVPlayback.forwardButton = my_fwdbttn.playButton = my_plybttn. Then add the following lines of code to the Actions panel: /** Requires: . If you access this property. The component throws a VideoError if you specify a percentage that is invalid or if the totalTime property is undefined. ForwardButton.

addEventListener("cuePoint".Example The following example displays the percentage of the FLV file that has played when the point2 cue point occurs. var listenerObject:Object = new Object().info. and give it an instance name of my_FLVPlybk. } my_FLVPlybk. which can be a fractional value. Setting this property triggers a seek and has all the restrictions of a seek. listenerObject).info.name == "point2") trace("point2 occurred at " + my_FLVPlybk. Edition Flash Professional 8. At the point3 cue point.helpexamples. 620 FLVPlayback Component .totalTime FLVPlayback.playheadPercentage + " percent of FLV"). a number that is the current playhead time or position.flv". FLVPlayback. FLVPlayback.cuePoint = function(eventObject:Object):Void { if(eventObject. measured in seconds. causing a seek operation to the point that is 10 percent from the beginning of the FLV file and creating a playback loop. it sets playheadPercentage to 10.video.com/flash/video/ cuepoints. if(eventObject.playheadPercentage = 10. See also FLVPlayback.*. Drag an FLVPlayback component to the Stage. Usage my_FLVPlybk.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.playheadTime Description Property.playheadTime Availability Flash Player 8.seekPercent(). my_FLVPlybk.playheadTime. listenerObject.contentPath = "http://www.name == "point3") my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .

com/flash/video/ water.) Second. (When streaming. var listenerObject:Object = new Object().playheadUpdate.state + ": playhead time is: " + my_FLVPlybk.25 seconds while the FLV file plays. the playheadTime property might not have the expected value immediately after calling one of the seek methods or setting playheadTime to cause seeking. for a progressive download. FLVPlayback. so a seek takes you to the time of the first keyframe after the specified time.When the playhead time changes.playheadTime). First. FLVPlayback.flv". seeking is asynchronous. which does not fire until the playheadTime property has updated. See also FLVPlayback.*. the component dispatches the playheadUpdate event.playheadUpdateInterval. FLVPlayback. listen for the seek event.video. my_FLVPlybk.stateChange = function(eventObject:Object):Void { trace(my_FLVPlybk.contentPath = "http://www. you can seek only to a keyframe. which includes once every . }. Drag an FLVPlayback component to the Stage. To obtain the time after the seek is complete. playheadTime does not update immediately.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. a seek always goes to the precise specified time even if the source FLV file doesn’t have a keyframe there.helpexamples.seek().stateChange FLVPlayback class 621 .addEventListener("stateChange". Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . so if you call a seek method or set the playheadTime property. listenerObject. my_FLVPlybk. Example The following example catches occurrences of the stateChange event as it occurs while the FLV file plays and shows the elapsed playhead time in the Output panel. For several reasons. and give it an instance name of my_FLVPlybk. listenerObject).

addEventListener("playheadUpdate". Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . var listenerObject:Object = new Object(). listenerObject).playheadTime.playheadUpdate = function(eventObject:Object):Void { trace(my_FLVPlybk. Drag an FLVPlayback component to the Stage.video. Example The following example catches occurrences of the playheadUpdate event as it occurs while the FLV file plays and displays the elapsed playhead time in the Output panel. The component does not dispatch this event when the video player is paused or stopped unless a seek occurs. my_FLVPlybk. The default is .playheadTime).state + ": playhead time is: " + eventObject. listenerObject. and vp properties. Description Event. The event object has the state. }.addEventListener("playheadUpdate".*. playheadTime. my_FLVplybk. my_FLVPlybk.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. Usage var listenerObject:Object = new Object().FLVPlayback.flv".com/flash/video/ water.helpexamples. FLVPlayback.playheadUpdate Availability Flash Player 8. See also FLVPlayback. and give it an instance name of my_FLVPlybk.25 seconds.playheadUpdate = function(eventObject:Object):Void { // insert event-handling code here }.playheadUpdateInterval 622 FLVPlayback Component . dispatched while the FLV file is playing at the frequency specified by the playheadUpdateInterval property. listenerObject. Edition Flash Professional 8.contentPath = "http://www. listenerObject).

the event handler shows the elapsed playhead time in the Output panel. Because ActionScript cue points start on playhead updates. lowering the value of the playheadUpdateInterval property can increase the accuracy of ActionScript cue points. as an example. as with any interval that is set this way. Because the playhead update interval is set by a call to the global setInterval() function.playheadUpdateInterval = 3000.playheadTime).video. and give it an instance name of my_FLVPlybk.playheadUpdateInterval Availability Flash Player 8. Example The following example sets the playheadUpdateInterval property to 3000 and creates a listener that catches occurrences of the playheadUpdate event as it occurs while the FLV file plays.*. Setting this property while the FLV file is playing restarts the timer. FLVPlayback class 623 . between each playheadUpdate event. for the default frame rate of 12 frames per second. So. in milliseconds.playheadUpdateInterval Description Property. my_FLVPlybk. Drag an FLVPlayback component to the Stage. When the event occurs. Usage my_FLVPlybk. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . var listenerObject:Object = new Object(). The default is 250.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. listenerObject. the lowest effective interval that you can create is approximately 83 milliseconds.playheadUpdate = function(eventObject:Object):Void { trace("playhead time is: " + eventObject. Edition Flash Professional 8. a number that is the amount of time. or one second (1000 milliseconds) divided by 12.FLVPlayback. }. the update cannot fire more frequently than the SWF file frame rate.

and give it an instance name of my_FLVPlybk.PLAYING).flv".addEventListener("stateChange".contentPath = "http://www. listenerObject). var listenerObject:Object = new Object(). You can compare this property to the state property to determine if the component is in the playing state.playheadUpdate FLVPlayback. } my_FLVPlybk.*.stateChange = function(eventObject:Object):Void { if(eventObject.contentPath + " is now " + FLVPlayback. my_FLVPlybk. listenerObject).com/flash/video/ water. FLVPlayback.contentPath = "http://www. Edition Flash Professional 8.video.PLAYING) trace(my_FLVPlybk.flv".FLVPlayback.playheadTime. Drag an FLVPlayback component to the Stage. See also FLVPlayback.PLAYING Description A read-only FLVPlayback class property that contains the string constant. 624 FLVPlayback Component .addEventListener("playheadUpdate".PLAYING property to see if the state equals "playing" when a stateChange event occurs. my_FLVPlybk. listenerObject.video. Usage mx.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. Example The following example uses the FLVPlayback.helpexamples. "playing".state == FLVPlayback.helpexamples. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .my_FLVPlybk. It also includes the constant as part of a message in the Output panel.PLAYING Availability Flash Player 8.com/flash/video/ water.

The event object has the state. listenerObject. Description Event. Then add the following code to Frame 1 of the Timeline in the Actions panel: /** Requires: . dispatched when the playing state is entered. which is the index number of the video player to which this event applies. see FLVPlayback. The FLVPlayback instance also dispatches the stateChange event.addEventListener("playing". Example The following example shows the value of the contentPath property in a text area when the playing event occurs. and vp properties. Drag a TextArea component to the Stage below the FLVPlayback instance.visibleVideoPlayerIndex on page 684. playheadTime. FLVPlayback. and give it an instance name of my_ta. often the buffering state is entered first. listenerObject).playing Availability Flash Player 8. and then the playing state. Edition Flash Professional 8. my_FLVplybk.playing = function(eventObject:Object):Void { // insert event-handling code here }. For more information on the vp property.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ FLVPlayback class 625 . This may not occur immediately after the play() method is called or the corresponding control is clicked.activeVideoPlayerIndex on page 545 and FLVPlayback. and give it an instance name of my_FLVPlybk.stateChange FLVPlayback.state.See also FLVPlayback. Usage var :Object = new Object(). Drag an FLVPlayback component to the Stage.

play(). listenerObject).playing Description Property.contentPath = "http://www. FLVPlayback. Example The following example listens for occurrences of the stateChange event as it occurs while the FLV file plays. listenerObject. } my_FLVPlybk. FLVPlayback.contentPath.video. Usage my_FLVPlybk.import mx.playing Availability Flash Player 8. my_FLVPlybk.addEventListener("playing".*. and give it an instance name of my_FLVPlybk.text = "Now playing: " + my_FLVPlybk.state.FLVPlayback.playing = function(eventObject:Object):Void { my_ta. a Boolean value that is true if the FLV file is in the playing state. Drag an FLVPlayback component to the Stage. var listenerObject:Object = new Object().stateChange FLVPlayback. When the event occurs.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ 626 FLVPlayback Component .helpexamples. the example shows the value of the playing property in the Output panel.com/flash/video/ water.flv". See also FLVPlayback. Edition Flash Professional 8. Read-only. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .playing.

com/flash/video/ water. PlayPauseButton (my_plypausebttn).addEventListener("stateChange".stateChange = function(eventObject:Object):Void { trace(my_FLVPlybk.state.state + ": playing property is " + my_FLVPlybk.playPauseButton Description Property.playPauseButton Availability Flash Player 8. Drag an FLVPlayback component to the Stage. ForwardButton (my_fwdbttn).playing). and forwardButton properties to attach individual FLV Custom UI controls to an FLVPlayback component.*.flv". See also FLVPlayback. Next. backButton. a MovieClip object that is the PlayPauseButton. FLVPlayback. my_FLVPlybk. and StopButton (my_stopbttn).stateChange FLVPlayback.helpexamples. For more information on using FLV Playback Custom UI components for playback controls. FLVPlayback. trace(my_FLVPlybk. and give it an instance name of my_FLVPlybk. listenerObject. my_FLVPlybk. var listenerObject:Object = new Object().import mx.playing).contentPath = "http://www.video. see “Skinning FLV Playback Custom UI components individually” on page 521. and give them the instance names shown in parentheses: BackButton (my_bkbttn). Example The following example uses the playPauseButton. add the following individual FLV Custom UI components. Edition Flash Professional 8. listenerObject).state + ": playing property is " + my_FLVPlybk. Then add the following lines of code to the Actions panel: FLVPlayback class 627 .playing. Usage my_FLVPlybk. stopButton. }.

and give it an instance name of my_FLVPlybk. Edition Flash Professional 8. my_FLVPlybk.playPauseButton = my_plypausbttn.stopButton = my_stopbttn. my_FLVPlybk./** Requires: . it resets the size to the size specified by preferredHeight and preferredWidth properties. and ForwardButton components in the Library */ import mx. BackButton. my_FLVPlybk. StopButton. Usage my_FLVPlybk. When the cuePoint event occurs. If the value of the autoSize property or maintainAspectRatio property is true. Then add the following code to the Actions panel on Frame 1 of the Timeline: 628 FLVPlayback Component . my_FLVPlybk.paused.skin FLVPlayback.helpexamples.forwardButton = my_fwdbttn. FLVPlayback. my_FLVPlybk.*.playPauseButton. See also FLVPlayback. Read-only.preferredHeight Description Property. Example The following example sets the size of the FLVPlayback instance when the ready event occurs. it is best to read the value when the resize event starts.com/flash/video/ water.flv".playButton. It is valid when the ready event starts.video. a number that specifies the height of the source FLV file. Drag an FLVPlayback component to the Stage.preferredHeight Availability Flash Player 8.backButton = my_bkbttn.FLV Custom UI PlayPauseButton.FLVPlayback component on the Stage with an instance name of my_FLVPlybk . FLVPlayback.contentPath = "http://www. FLVPlayback. This information is not valid immediately upon calling the play() or load() methods.

FLVPlayback. See also FLVPlayback.maintainAspectRatio. Usage my_FLVPlybk.5. FLVPlayback. }. my_FLVPlybk.addASCuePoint(1. it is valid when the ready event starts. listenerObject.width FLVPlayback.ready = function(eventObject:Object):Void { my_FLVPlybk. my_FLVPlybk. var listenerObject:Object = new Object(). FLVPlayback. FLVPlayback.resize = function(eventObject:Object):Void { trace("width is: " + my_FLVPlybk. This information is not valid immediately when the play() or load() methods are called. listenerObject. my_FLVPlybk.height.helpexamples. trace("height is: " + my_FLVPlybk. listenerObject).setSize(250. Read-only.addEventListener("resize". listenerObject). FLVPlayback class 629 . }. FLVPlayback. listenerObject). it is best to read the value when the resize event starts.setSize(my_FLVPlybk. }.preferredHeight).autoSize.addEventListener("ready".height).video.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.addEventListener("cuePoint". my_FLVPlybk./** Requires: .setScale().preferredWidth. my_FLVPlybk. Edition Flash Professional 8. FLVPlayback. "AScp1"). listenerObject.com/flash/video/ water. 350).preferredWidth. my_FLVPlybk. gives the width of the source FLV file. If the value of the autoSize or maintainAspectRatio properties is true.contentPath = "http://www.cuePoint = function(eventObject:Object):Void { my_FLVPlybk.ready.setSize().flv".width).preferredWidth Description Property. FLVPlayback.*.preferredWidth Availability Flash Player 8.

Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .preferredWidth.setSize(my_FLVPlybk. FLVPlayback.contentPath = "http://www. listenerObject). trace("height is: " + my_FLVPlybk. listenerObject. my_FLVPlybk.preferredHeight). 350).addEventListener("ready".setScale(). listenerObject.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.5. FLVPlayback.maintainAspectRatio. When the cuePoint event occurs.addASCuePoint(1. FLVPlayback. my_FLVPlybk.width). my_FLVPlybk.video. listenerObject).resize = function(eventObject:Object):Void { trace("width is: " + my_FLVPlybk.cuePoint = function(eventObject:Object):Void { my_FLVPlybk. my_FLVPlybk.*.flv". it resets the size to the size specified by preferredHeight and preferredWidth properties. FLVPlayback. var listenerObject:Object = new Object().addEventListener("cuePoint". See also FLVPlayback. my_FLVPlybk.addEventListener("resize". and give it an instance name of my_FLVPlybk. FLVPlayback. FLVPlayback.height.height). }.ready. "AScp1").setSize(250. my_FLVPlybk.preferredHeight.Example The following example sets the size of the FLVPlayback instance when the ready event occurs. listenerObject). listenerObject. }. }.autoSize.com/flash/video/ water.ready = function(eventObject:Object):Void { my_FLVPlybk. FLVPlayback.setSize(). Drag an FLVPlayback component to the Stage.width 630 FLVPlayback Component .helpexamples.

25 seconds. Description Event. starting when the load begins and ending when all bytes are loaded or there is a network error. Usage var listenerObject:Object = new Object(). Indicates progress in number of downloaded bytes.visibleVideoPlayerIndex.activeVideoPlayerIndex and FLVPlayback. which is the index number of the video player to which this event applies. The event object has the bytesLoaded and bytesTotal properties. and give it an instance name of my_FLVPlybk.addEventListener("progress". Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . my_FLVplybk.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ FLVPlayback class 631 . Edition Flash Professional 8. listenerObject). For more information on the vp property. see FLVPlayback. Dispatched only for a progressive HTTP download.progress Availability Flash Player 8. Drag an FLVPlayback component to the Stage. which are the same as the FLVPlayback properties of the same names. dispatched at the frequency specified by the progressInterval property. Example The following example sets the progressInterval property to 001 milliseconds because the FLV file is short and then shows the number of bytes loaded for each occurrence of the progress event. listenerObject.progress = function(eventObject:Object):Void { // insert event-handling code here }.FLVPlayback. Default is every . The event also has the property vp.

FLVPlayback.visibleVideoPlayerIndex FLVPlayback.bytesLoaded). between each progress event. listenerObject).bytesLoaded. See also FLVPlayback. my_FLVPlybk.bytesTotal. } my_FLVPlybk. Drag an FLVPlayback component to the Stage. Edition Flash Professional 8.progressInterval = 001. in milliseconds. FLVPlayback. FLVPlayback. the timer restarts.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ 632 FLVPlayback Component .progressInterval Description Property. Usage my_FLVPlybk.helpexamples.progressInterval Availability Flash Player 8. a number that is the amount of time. and give it an instance name of my_FLVPlybk.contentPath = "http://www.flv".activeVideoPlayerIndex. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: .*.progressInterval. FLVPlayback. listenerObject.video. Default value is 250.import mx.com/flash/video/ water.progress = function(eventObject:Object):Void { trace(eventObject. If you set this property while the video stream is playing.addEventListener().addEventListener("progress". Example The following example sets the progressInterval property to 001 millisecond because the FLV file is small. my_FLVPlybk. var listenerObject:Object = new Object(). and then shows the number of bytes loaded for each occurrence of the progress event. FLVPlayback.

progress FLVPlayback.import mx.contentPath = "http://www.addEventListener("ready". See also FLVPlayback.video. my_FLVplybk. Example /** Requires: . playheadTime.*. listenerObject). It starts the first time you enter a responsive state after you load a new FLV file with the play() or load() method. my_FLVPlybk. see FLVPlayback. and vp properties.com/flash/video/ water.bytesLoaded).helpexamples. The vp property is the index number of the video player to which this event applies.activeVideoPlayerIndex on page 545 and FLVPlayback.progressInterval = 001. Usage var listenerObject:Object = new Object().flv". my_FLVPlybk. Description Event.*. var listenerObject:Object = new Object().progress = function(eventObject:Object):Void { trace(eventObject.visibleVideoPlayerIndex on page 684.FLVPlayback component on the Stage with an instance name of my_FLVPlybk .addEventListener("progress".video. listenerObject. dispatched when FLV file is loaded and ready to display. For more information on the vp property. listenerObject.TextArea component on the Stage with an instance name of my_ta */ import mx.ready = function(eventObject:Object):Void { // insert event-handling code here }. Edition Flash Professional 8. listenerObject). } my_FLVPlybk.ready Availability Flash Player 8. FLVPlayback class 633 . The event object has the state. It starts only once for each FLV file that is loaded.

my_FLVPlybk.state. Usage my_FLVplybk.text = "The FLV is ready. my_FLVPlybk. the method removes the first cue point with this name. 30).addEventListener("ready".visibleVideoPlayerIndex FLVPlayback.removeASCuePoint(name:String):Object Parameters A cue point object containing the time and name properties for the cue point to remove. If only name is given. }. If time or name is null or undefined. my_FLVPlybk. Push Play to start playing". the method uses only the available property. my_ta. Edition Flash Professional 8. name 634 FLVPlayback Component .setSize(260. The method does not check any other properties on the incoming cue point object.visible = true. The method removes the first cue point with this name.addEventListener(). FLVPlayback.activeVideoPlayerIndex. var listenerObject:Object = new Object(). See also FLVPlayback. FLVPlayback. listenerObject).helpexamples.removeASCuePoint(time:Number):Object my_FLVplybk.autoPlay = false.contentPath = "http://www.com/flash/video/ water.removeASCuePoint(CuePoint:Object):Object my_FLVplybk.flv". my_ta.ready = function(eventObject:Object):Void { my_ta.my_ta. CuePoint time A number containing the time of the cue point to remove.visible = false. The method removes the first cue point with this time. listenerObject. FLVPlayback.removeASCuePoint() Availability Flash Player 8. A string that contains the name of the cue point to remove.

findCuePoint().name). Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . // create cue point object var rtn_cuePt:Object = new Object(). It shows the name of the removed cue point in the Output panel. Only the name and time properties are used from CuePoint parameter to find the cue point to remove. only one is removed.name = "ripples".flv".com/flash/video/ water. } See also FLVPlayback.findNextCuePointWithName() FLVPlayback class 635 . // create object for return value cuePt.*.addASCuePoint(). // add AS cue point if ((rtn_cuePt = my_FLVPlybk. Drag an FLVPlayback component to the Stage. Cue point information is wiped out when the contentPath property is set. my_FLVPlybk. the method returns null. removes an ActionScript cue point from the currently loaded FLV file.444. Example The following example adds an ActionScript cue point to the FLV file. FLVPlayback. If there is no matching cue point.Returns The cue point object that was removed.removeASCuePoint(cuePt)) != null) { trace("Removed cue point: " + rtn_cuePt. and then calls the removeASCuePoint() method to remove it.addASCuePoint(cuePt).FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. call this function repeatedly in a loop with the same parameters until it returns null. FLVPlayback. so to set cue point information for the next FLV file to be loaded.video. FLVPlayback.findNearestCuePoint(). Description Method. set the contentPath property first. and give it an instance name of my_FLVPlybk.helpexamples.contentPath = "http://www. To remove all. // create cue point object var cuePt:Object = new Object(). my_FLVPlybk. If multiple ActionScript cue points match the search criteria. cuePt.time = 4.

Then add the following code to the Actions panel on Frame 1 of the Timeline: Usage 1: listener object /** Requires: .com/flash/video/ cuepoints. listenerObject). Example The following example removes the listener for a cuePoint event when the first cue point occurs.*. Drag an FLVPlayback component to the Stage.contentPath = "http://www.helpexamples. Edition Flash Professional 8.FLVPlayback. var listenerObject:Object = new Object().flv". }.info. Description Method. Usage my_FLVPlybk. listener:Object):Void my_FLVPlybk.video. my_FLVPlybk. This causes only the first of three cue points to be detected.addEventListener("cuePoint". listenerObject).removeEventListener(event:String. 636 FLVPlayback Component . my_FLVPlybk. listener Returns Nothing. removes an event listener from a component instance.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx.removeEventListener("cuePoint".time). // create listener object listenerObject.removeEventListener(event:String. A reference to the listener object or function that you are removing. listener:Function):Void Parameters event A string that specifies the name of the event for which you are removing a listener.removeEventListener() Availability Flash Player 8. my_FLVPlybk. and give it an instance name of my_FLVPlybk.cuePoint = function(eventObject:Object):Void { trace("Hit cue point at " + eventObject.

video. }. x.removeEventListener("cuePoint". my_FLVPlybk. function cuePoint(eventObject:Object):Void { trace("Hit cue point at " + eventObject.flv". see FLVPlayback. my_ta. my_FLVPlybk.activeVideoPlayerIndex on page 545 and FLVPlayback. y. height and vp.*.com/flash/video/ cuepoints.Usage 2: listener function /** Requires: . my_FLVplybk. Edition Flash Professional 8. Description Event. dispatched when video is resized. FLVPlayback class 637 .visibleVideoPlayerIndex on page 684. cuePoint).helpexamples. listenerObject).addEventListener() FLVPlayback. width. listenerObject. The event object has the properties auto.resize Availability Flash Player 8. cuePoint). Usage var listenerObject:Object = new Object().addEventListener("resize".contentPath = "http://www. my_FLVPlybk.visible = false. This occurs when you set the visibleVideoPlayerIndex property and switch to a video player with different dimensions.info.resize = function(eventObject:Object):Void { // insert event-handling code here }. For more information on the vp property. See also FLVPlayback.FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. which is the index number of the video player to which the event applies.time).addEventListener("cuePoint".

autoSize = false. The event might be dispatched even if the dimensions do not actually change after an attempt to automatically resize the component occurs. var listenerObject:Object = new Object().FLVPlayback component on the Stage with an instance name of my_FLVPlybk */ import mx. The component dispatches the event (with auto set to false) when you set the visibleVideoPlayerIndex property if you are switching to a video player with different dimensions than the currently visible player. 638 FLVPlayback Component .flv". When the auto property is false. which displays the size and location of the current video player. when the cuePoint event occurs. It adds an ActionScript cue point to the first FLV file and. Then add the following code to the Actions panel on Frame 1 of the Timeline: /** Requires: . it switches to a second.contentPath = "http://www. // play this FLV my_FLVPlybk.com/flash/video/ clouds. Drag an FLVPlayback component to the Stage. the event might be dispatched for a video player other than the visible video player. The vp property still appears but will always be equal to the visibleVideoPlayerIndex property. "switch_here").contentPath = "http://www.com/flash/video/ water. smaller video player to play the second FLV file.helpexamples.// create listener listenerObject. Example The following example plays two FLV files. When it sets the visibleVideoPlayerIndex property for the video player.The auto property is true when the resizing is automatic because the autoSize or maintainAspectRatio property is true.maintainAspectRatio = false. In this case. // add a cue point my_FLVPlybk.cuePoint = function(eventObject:Object):Void { // add a second video player my_FLVPlybk.addASCuePoint(3. it triggers the resize event.helpexamples. // play this FLV my_FLVPlybk. and give it an instance name of my_FLVPlybk. my_FLVPlybk.*.video. // turn off autoSize and maintainAspectRatio my_FLVPlybk. the event always applies to the visible video player.flv".activeVideoPlayerIndex = 1.

play().x).maintainAspectRatio. }. FLVPlayback.rewind Availability Flash Player 8.autoSize.height. // make it visible my_FLVPlybk. FLVPlayback class 639 .width. my_FLVplybk. FLVPlayback.setSize(240.visibleVideoPlayerIndex = 1.x.height). trace("Width is: " + eventObject.state. 180). Description Event.addEventListener("rewind".activeVideoPlayerIndex.preferredWidth. listenerObject. FLVPlayback.// change size of this video player my_FLVPlybk. See also FLVPlayback.addEventListener("resize".resize = function(eventObject:Object):Void { // display location and dimensions trace("Video player is #" + my_FLVPlybk.rewind = function(eventObject:Object):Void { // insert event-handling code here }. trace("Y coordinate is: " + eventObject. FLVPlayback.activeVideoPlayerIndex). FLVPlayback.y). dispatched when the