Using Components Trademarks 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev, and WebHelp are either registered trademarks or trademarks of Macromedia, Inc. and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases mentioned within this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally. Third-Party Information This guide contains links to third-party websites that are not under the control of Macromedia, and Macromedia is not responsible for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites. Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com). SorensonTM SparkTM video compression and decompression technology licensed from Sorenson Media, Inc. Opera ® browser Copyright © 1995-2002 Opera Software ASA and its suppliers. All rights reserved. Macromedia Flash 8 video is powered by On2 TrueMotion video technology. © 1992-2005 On2 Technologies, Inc. All Rights Reserved. http://www.on2.com. Visual SourceSafe is a registered trademark or trademark of Microsoft Corporation in the United States and/or other countries. Copyright © 2005 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or converted to any electronic or machine-readable form in whole or in part without written approval from Macromedia, Inc. Notwithstanding the foregoing, the owner or authorized user of a valid copy of the software with which this manual was provided may print out one copy of this manual from an electronic version of this manual for the sole purpose of such owner or authorized user learning to use such software, provided that no part of this manual may be printed out, reproduced, distributed, resold, or transmitted for any other purposes, including, without limitation, commercial purposes, such as selling copies of this documentation or providing paid-for support services. Acknowledgments Project Management: Sheila McGinn Writing: Bob Berry, Jen deHaan, Peter deHaan, David Jacowitz, Wade Pickett Managing Editor: Rosana Francescato Lead Editor: Lisa Stanziano Editing: Mary Ferguson, Mary Kraemer, Lisa Stanziano Production Management: Patrice O'Neill, Kristin Conradi, Yuko Yagi Media Design and Production: Adam Barnett, Aaron Begley, Paul Benkman. John Francis, Geeta Karmarkar, Masayo Noda, Paul Rangel, Arena Reed, Mario Reynoso Special thanks to Jody Bleyle, Mary Burger, Lisa Friendly, Stephanie Gowin, Bonnie Loo, Nivesh Rajbhandari, Mary Ann Walsh, Erick Vera, the beta testers, and the entire Flash and Flash Player engineering and QA teams. First Edition: September 2005 Macromedia, Inc. 601 Townsend St. San Francisco, CA 94103 Contents Intended audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 System requirements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 About the documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Terms used in this manual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Chapter 1: About Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Installing components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Where component files are stored . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Modifying the component files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Benefits of using components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Component categories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 About version 2 component architecture . . . . . . . . . . . . . . . . . . . . . . . . . 17 Version 2 component features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 About compiled clips and SWC files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Accessibility and components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Chapter 2: Creating an Application with Components (Flash Professional Only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 About the Fix Your Mistake tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Build the main page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Bind data components to display gift ideas . . . . . . . . . . . . . . . . . . . . . . 29 Display gift details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Create the checkout screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Test the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 Viewing the completed application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 3 Chapter 3: Working with Components. . . . . . . . . . . . . . . . . . . . . .49 The Components panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Adding components to Flash documents . . . . . . . . . . . . . . . . . . . . . . . . 50 Components in the Library panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Setting component parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Sizing components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Deleting components from Flash documents . . . . . . . . . . . . . . . . . . . . . 57 Using code hints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Creating custom focus navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Managing component depth in a document . . . . . . . . . . . . . . . . . . . . . . 59 Components in Live Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Using a preloader with components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 About loading components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Upgrading version 1 components to version 2 architecture . . . . . . . . . 62 Chapter 4: Handling Component Events . . . . . . . . . . . . . . . . . . . .63 Using listeners to handle events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Delegating events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 About the event object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Using the on() event handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Chapter 5: Customizing Components . . . . . . . . . . . . . . . . . . . . . . 81 Using styles to customize component color and text . . . . . . . . . . . . . . 82 About skinning components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 About themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Combining skinning and styles to customize a component . . . . . . . . . 118 Chapter 6: Creating Components . . . . . . . . . . . . . . . . . . . . . . . . . 125 Component source files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Overview of component structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Building your first component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Selecting a parent class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Creating a component movie clip. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Creating the ActionScript class file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Incorporating existing components within your component . . . . . . . 173 Exporting and distributing a component . . . . . . . . . . . . . . . . . . . . . . . . 182 Final steps in component development . . . . . . . . . . . . . . . . . . . . . . . . . 185 4 Contents Chapter 7: Collection Properties . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Defining a collection property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Simple collection example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189 Defining the class for a collection item . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Accessing collection information programmatically . . . . . . . . . . . . . . . 191 Exporting components that have collections to SWC files . . . . . . . . .194 Using a component that has a collection property . . . . . . . . . . . . . . . .194 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 Contents 5 6 Contents Introduction Macromedia Flash Basic 8 and Macromedia Flash Professional 8 are the standard authoring tools for producing high-impact web experiences. Components are the building blocks for the Rich Internet Applications that provide these experiences. A component is a movie clip with parameters that are set during authoring in Macromedia Flash, and with ActionScript methods, properties, and events that allow you to customize the component at runtime. Components are designed to allow developers to reuse and share code, and to encapsulate complex functionality that designers can use and customize without using ActionScript. Components are built on version 2 of the Macromedia Component Architecture, which allows you to easily and quickly build robust applications with a consistent appearance and behavior. This book describes how to build applications with version 2 components. The related Components Language Reference describes each component's application programming interface (API). It includes usage scenarios and procedural samples for using the Flash version 2 components, as well as descriptions of the component APIs, in alphabetical order. You can use components created by Macromedia, download components created by other developers, or create your own components. This chapter contains the following sections: Intended audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 System requirements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 About the documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Terms used in this manual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 7 Intended audience This book is for developers who are building Flash applications and want to use components to speed development. You should already be familiar with developing applications in Flash and writing ActionScript. If you are less experienced with writing ActionScript, you can add components to a document, set their parameters in the Property inspector or Component inspector, and use the Behaviors panel to handle their events. For example, you could attach a Go To Web Page behavior to a Button component that opens a URL in a web browser when the button is clicked without writing any ActionScript code. If you are a programmer who wants to create more robust applications, you can create components dynamically, use ActionScript to set properties ...