About skinning for Flexbuilder using Adobe Creative Suite
Posted on October 26, 2010 | Comments Off on About skinning for Flexbuilder using Adobe Creative Suite
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.
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.
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.
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.
One advantage of programmatic skins is that you can create vector graphics that allow you a great deal of programmatic
control over the skin. For example, you can control the radius of a Button control’s corners by using programmatic
skins, something you cannot do with graphical skins. You can develop programmatic skins directly in your
Flex authoring environment or any text editor, without using a graphics tool such as Adobe Flash. Programmatic
skins also tend to use less memory because they contain no external image files.
About skinning with Adobe tools
You can create Flex skins using several tools from Adobe, including: Flash CS3, Illustrator CS3, Photoshop CS3, and
Fireworks CS3. By supporting these different tools, Flex lets you use the tool that you are most familiar with to create
your skins.
The main difference between these tools is that Flash Professional and Illustrator let you create vector graphics for
you skins, while Photoshop and Fireworks let you create bitmap graphics for your skins. For more information on
the different types of skins.
Adobe supplies an extension for each tool that you install before you create your Flex skins. The extension includes
utilities to create and export skins, and templates that let you edit the existing Flex skins, rather than having to create
skins from scratch.
Naming skin assets
By default, Flex Builder only recognizes skins that use the following naming convention:
Style_Selector_Part
where:
• Style specifies the CSS style type, and is typically the name of the component being skinned.
• Selector optionaly specifies the CSS style selector.
• Part specifies the style property of the component that corresponds to the skin, such as upSkin or downSkin
for the Flex Button control.
For example, the skin named Button_upSkin defines the skin for the up state of the Button control and the skin
named Tree_borderSkin defines the skin for the border of the Tree control. The Flex skins that you can modify by
using one of the Adobe tools all use this naming convention.
If you define a custom component, and create skins for it using the Adobe tools, use the same naming convention to
enable Flex Builder to recognize it and assign it to your component. For example, if you have a custom component
named MyComponent with skin properties named borderSkin and mainSkin, your skins could be named
MyComponent_borderSkin cheap levitra online and MyComponent_mainSkin.
If you do not use this naming convention, you can still assign your skins to a component, but you will have to
explicitly assign the skin when you import the skin into your Flex Builder project.
Tips for creating skins
Before you get started, here are a few tips for working with the skin template files that are part of the extensions added
to each tool:
• Make your skins the same size as the skins in the template. If you change the size, you might have to edit the
9-slice scaling grids as well.
• The CSS file created by Flex Builder assumes that the exported symbols names for the skins have specific names,
so you should avoid changing the names of the symbols when creating skins.
• The default Halo skins are semi-transparent, so that they can pick up the background color of their container.
• Because of the way Flex handles scrollbars, the symbols for the different states of the scrollbar thumb skins are
offset to the right by one pixel from the registration point. The Slider control and its highlight use similar adjustments
for alignment. Make sure any custom skins that you create are offset in the same way.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Sameera at LinkedIn
