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 following table describes the general structure of a FLA file that includes new skins for the component: Name Main Symbol: custom component Frame Layer 1 Frame 1 Layer 1 Frame 1 Layer 2 Frame 1 Layer 2 Frame 2 Symbol: skin graphics Layer 1 Frame 1-x Description The top level of the FLA file, which contains a single blank frame. Second layer, named assets, which contains the skin symbol plus any additional graphical assets used by this component. The new symbol, which contains as many frames as are necessary to represent the new skin. For a simple, static graphic, you can draw the new skin on a single frame. Skinning custom components 39 In the component's class file, you must also override the name of the skin. Macromedia recommends that you apply the skin to your component as a clip parameter in the constructObject2() method rather than rely on the timing of the instantiation process. This is especially true when the component creates child components that rely on the positioning of the skin. For example, the Button control has the following basic skins, each representing a state of the control: · · · · · · · · falseUpSkin falseDownSkin falseOverSkin falseDisabledSkin trueUpSkin trueDownSkin trueOverSkin trueDisabledSkin Each state is represented as a variable in the class file, or is an inherited variable. By setting the value of one of these variables, you instruct Flex to apply a new skin, using the symbol name to find the skin. When you add a new skin, it should respond to resizing and drawing methods of the component. For a list of what skins are used by what controls, see each control's entry in Developing Flex Applications. This section describes a simple method for changing the skin for one of the states of the standard Button control. You can use the steps in this procedure to change the skin for any visual control in Flex. To create a custom component with a different skin: 1. In the Flash environment, create a FLA file and set the classpath settings to include the Flex classes and the local directory. For more information, see "Changing the Flash classpath" on page 10. 2. In the Create New Symbol dialog box, do the following: a Select the MovieClip for Behavior option (the default). 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. In the Create New Symbol dialog box, do the following: a Select the MovieClip for Behavior option (the default). 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. [. . . ] --> <zz:mycomponent id="foo" xmlns:zz="zz. custom. mycomponents" /> <mx:TextArea id="output" /> <mx:Button label="Print Output" click="output. text = foo" /> I tried the verification test and I got nothing or "undefined" in the output. This means that one of your dependent classes was either not loaded or was loaded too late. Print various classes to the output to see whether they are being created. 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. [. . . ]