User manual MACROMEDIA FLEX DEVELOPING COMPONENTS AND THEMES

[. . . ] Developing Flex Components and Themes in Flash Authoring Trademarks ActiveEdit, ActiveTest, Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware, Authorware Star, Backstage, Blue Sky Software, Blue Sky, Breeze, Bright Tiger, Captivate, Clustercats, ColdFusion, Contents Tab Composer, Contribute, Design In Motion, Director, Dream Templates, Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, FlashHelp, Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, Help To Source, HomeSite, Hotspot Studio, HTML Help Studio, JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live Effects, MacRecorder Logo and Design, Macromedia, Macromedia Action!, Macromedia Central, Macromedia Flash, Macromedia M Logo and Design, Macromedia Spectra, Macromedia xRes Logo and Design, MacroModel, Made with Macromedia, Made with Macromedia Logo and Design, MAGIC Logo and Design, Mediamaker, Movie Critic, Open Sesame!, RoboDemo, RoboEngine JFusion, RoboHelp, RoboHelp Office, RoboInfo, RoboInsight, RoboPDF, 1-Step RoboPDF, RoboFlash, RoboLinker, RoboScreenCapture, ReSize, Roundtrip, Roundtrip HTML, Shockwave, Sitespring, Smart Publishing Wizard, Software Video Camera, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be, WinHelp, WinHelp 2000, WinHelp BugHunter, WinHelp Find+, WinHelp Graphics Locator, WinHelp Hyperviewer, WinHelp Inspector, and Xtra 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. [. . . ] The Create New Symbol dialog box appears. This new symbol will be the new component. 3. In the Create New Symbol dialog box, do the following: a Select the MovieClip for Behavior option (the default). b Select the Export for ActionScript check box. c Enter the appropriate name, identifier, and class file in the Name, Identifier, and AS 2. 0 Class fields. d Clear the Export in First Frame check box. In Edit Symbols mode for the new symbol, rename the Timeline's first layer to main, and add a stop() action in the Actions Frame. 40 Chapter 2: Creating Basic Components in Flash MX 2004 5. Add a second layer called assets, and add a second blank keyframe to this layer. Insert a new symbol by selecting Insert > New Symbol. The Create New Symbol dialog box appears. This new symbol will be the new skin. 8. In the Create New Symbol dialog box, do the following: a Select the MovieClip for Behavior option (the default). b Select the Export for ActionScript check box. c Enter a symbol Name. Do not specify an AS 2. 0 Class name or an Identifier for this symbol. For more information on creating a new symbol, see "Adding new symbols" on page 12. d Clear the Export in First Frame check box. Draw the new skin on the second symbol's Stage in Edit Symbols mode. The new skin can be a simple graphic or a composite of MovieClips. 10. Return to Edit Symbols mode and edit the component's symbol (the first symbol you created). Drag the skin symbol you created onto the second frame of the component's assets layer. In this file, extend the existing control, set the value of the skin to the new skin name, and apply the skin as a clip parameter in the constructObject2() method. The following example overrides the falseUpSkin skin with the symbol named redbox in a new Button control called SkinnedButton: class SkinnedButton extends mx. controls. Button { // Set the value of the falseUpSkin state to the new skin. var falseUpSkin:String = "redbox"; static var symbolName:String="SkinnedButton"; static var symbolOwner:Object = SkinnedButton; var className:String = "SkinnedButton"; function SkinnedButton() { } function init() { super. init(); invalidate(); } static var clipParameters:Object = { redbox:1 }; function constructObject2(o:Object):Void { super. constructObject2(o); applyProperties(o, SkinnedButton. clipParameters); } } Skinning custom components 41 13. Right-click the component's symbol in the Library and select Component Definition. [. . . ] Any components created with the createClassObject() method as subcomponents of your component must be placed in your component symbol. For more information, see "Adding dependent components" on page 15. A good practice is to create a hidden frame and place components on that frame. Then put a action in the preceding frame, so the hidden frame never gets played. [. . . ]