AdvancED Flex 4

CREATING THEMES IN FLEX 4

187

Creating Horizontal Scroll Bar Component

1. Select graphic and in HUD Convert Artwork to Component ➤ Horizontal Scrollbar. See

Figure 6-10.

Figure 6-10. Converting artwork to horizontal scrollbar

2. The HUD menu shows the option to edit the appearance of the Horizontal Scrollbar. Click

Edit Parts (see Figure 6-11).

Figure 6-11. HUD menu allowing you to edit the scrollbar appearance

CHAPTER 6

188

3. The next step is to set the Thumb and Track. In the HUD you can see the Group menu (see

Figure 6-12) and set the Thumb and Track, which are required, by selecting the graphics that

make these components. Then click the check box.

Figure 6-12. HUD menu to convert the horizontal scrollbar part

4. Compile and run the project, and you will be able to see the application we created in the

browser and use the components. Save the project by selecting File

➤ Save as

DarkNight.fxp.

Import FXP into Flash Builder

The project was saved as FXP, which Flash Builder 4 recognizes, allowing it to import FXP projects. Open

Flash Builder 4 and select File

➤ Import Flex Project (FXP)… Browse and select DarkNight.fxp, and then

select Finish.

Adjust Flash Catalyst Generated Code

We often need to do some tweaking before using the Flash Catalyst code. Flash Catalyst generated code

places elements with a hard-coded x, y, width, or height, but it doesn’t take into account other ways of

using the component, which require resizing. Since we are building a theme we need be able to resize the

component properly. What we need to do is to find places where there is a hard-coded x, y, width, or

height and convert these to use un-constraints based values.

For instance, in our code we need to adjust the button component so it can get resized properly. What we

had to do is change the rectangle width from 112 pixels to an un-constraints–based value, in our case

100%. See the following.

Original code:

<s:Rect height="24" d:id="4" radiusX="3.00067" radiusY="3.00067" width="112" x="1" y="0">

New code:

<s:Rect height="24" d:id="4" radiusX="3.00067" radiusY="3.00067" width="100%" x="1" y="0">

CREATING THEMES IN FLEX 4

189

We also changed the RichText label component from a hard-coded value to be centered. See the

following.

Original code:

<s:RichText ai:aa="2" color="#212121" columnCount="1" 

fontFamily="Myriad Pro Semibold" fontSize="14" d:id="5" kerning="on" 

d:label="ATE Text To TLF Text" text="Button" textAlign="center" 

d:userLabel="Button" flm:variant="1" whiteSpaceCollapse="preserve" 

x="36" y="6" buttonMode.over="true">

New code:

<s:RichText color="#212121"

textAlign="center"

maxDisplayedLines="1"

horizontalCenter="0"

left="10" right="10" top="0" bottom="2"

fontFamily="Myriad Pro Semibold" fontSize="14"

kerning="on" verticalAlign="middle"

text="Button"

flm:variant="1" whiteSpaceCollapse="preserve"

buttonMode.over="true">

Create a CSS document

The last step is creating a CSS document that will be used to define the component’s skin in Spark or MX.

Flash Catalyst already created for us the CSS automatically, Main.css, however, that class is not

implemented.

What you should do is define the skinClass and focusColor in the CSS file. Take a look at the implemented

code:

/*

Dark Night - Flex 4 Theme by Elad Elrom.

*/

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/halo";

@namespace d "http://ns.adobe.com/fxg/2008/dt";

@namespace fc "http://ns.adobe.com/flashcatalyst/2009";

@namespace components "components.*";

s|Button

{

focusColor: #0d103f;

skinClass: ClassReference("components.Button1");

}

s|HScrollBar

{

skinClass: ClassReference("components.HorizontalScrollbar1");

}