About skinning Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements. These elements can be made up of bitmap images, SWF files, or class files that contain drawing methods that define vector images. Skins can define the entire appearance, or only a part of the appearance, of a component in various states. For example, a Button control has eight possible states, and eight associated skin properties, as the following example shows: The default skins for the up, over, and down states appear as follows: A. up B. over C. down Other controls have similar states with associated skins. For example, the RadioButton and RadioButton controls, which are subclasses of Button, also have an up, down, and over skins. The ComboBox control has skins the define the appearance of the control when it is in the disabled, down, and over states. State Skin property Default skin class down downSkin mx.skins.halo.ButtonSkin over overSkin mx.skins.halo.ButtonSkin up upSkin mx.skins.halo.ButtonSkin disabled disabledSkin mx.skins.halo.ButtonSkin selectedDisabled selectedDisabled Skin mx.skins.halo.ButtonSkin selectedDown selectedDownSkin mx.skins.halo.ButtonSkin selectedOver selectedOverSkin mx.skins.halo.ButtonSkin selectedUp selectedUpSkin mx.skins.halo.ButtonSkin All Flex components have a default skin class that ships with Flex, where a skin class can represent more than one state of the component. As you can see in the previous table, the eight states of the Button control use the same default skin class, mx.skins.halo.ButtonSkin, to draw the skin. Logic within the class determines the appearance of the Button control based on its current state. For more information on Flex skins, see ” Creating Skins ” in Flex Developer’s Guide . Types of skins You typically define a skin as a bitmap graphic or as a vector graphic. Bitmap graphics, called graphical skins in Flex, are made up of individual pixels that together form an image. The downside of a bitmap graphic is that it is typically defined for a specific resolution and, if you modify the image by scaling or transforming it, you might notice a degradation in image quality. A vector graphic, called a programmatic skin in Flex, consists of a set of line definitions that specify the starting and end point of a line, its thickness, color, and other information required by Flash Player to draw the line. When a vector graphic is scaled, rotated, or modified in some other way, it is relatively simple for Flash Player to calculate the new layout of the vector graphic by transforming the line definitions. Therefore, you can perform many types of modifications to vector graphics without noticing any degradation in quality…

Download Importing Skins into Flex Builder.Pdf