Flex Skin Preparation tutorial

The FLEX3.0 component can use CSS to control styles. the CSS here is different from the CSS mentioned when compiling a webpage. It can be said that it is a style sheet customized for FLEX, with the help of ActionScript, you can achieve powerful display effects. The following example describes how to use it.
The black style of Express Photoshop released by Adobe is fascinating, and KingnareStyle is a FLEX skin prototype made with it. There are many components contained in the skin, limited by space, you can only select representative components for demonstration. The following uses the Button component as an example to get started with FLEX skin preparation.
First, create a new project FlexSkinTest In Flex Builder 3.

Create a new file folder styleand create a new style.css file under the stylefolder:

Double-click style.css, switch to the Design panel, and create a new style:

Select the Button component:

After you press OK, You can see eight statuses of the button. To facilitate testing, we adjusted the background color to 0 × 333333:

Switch to the Source panel to adjust the font style:
Button
{
Color: # AAAAAA;/* Color */
Textrolovercolor: # FFFFFF;/* text rolling over color */
TextSelectedColor: # FFFFFF;/* SelectedColor */
DisabledColor: # 5A5A5A;/* disabledColor */
FontWeight: normal;/* fontweight */
}
The result is as follows:

The next step is to replace the eight States of the button with the custom skin.
There are four common implementation methods. We will introduce them step by step.
First, we will learn how to implement the button component skin in kingnarestyle: embed the skin components in the external SWF file into the component style file.
Embed elements in the SWF File
First, create the file skin. fla in the style folder, and set the background color to #333333.
CTRL + F8 create a new video clip button_upskin. The attribute settings are as follows:

We recommend that you enable 9 slice. You do not need to set 9 slice when embedding the flex style.
For details about 9 slices, refer to the figure below (derived from the Flex Developer Center ):

Enlarge the stage to 400%. Use a rectangle tool to draw a hollow rectangle. The coordinates are (0, 0), the thickness is 1 pixel, the width is 23 pixels, the fill color is # ffffff, and the transparency is 10%.

Create a new layer and draw a hollow rectangle in the same way. The coordinates are (000000), the thickness is 1 pixel, the height and width are 21 pixels, the fill color is # 60%, and the transparency is.

Fill in the blank area below.
Create a new layer and draw a solid rectangle. The coordinates are (2, 2). the height and width are 19 pixels. Fill the linear gradient white color with the transparency from 10% to 0%:

Add a highlighted box. Create a new layer and draw a hollow rectangle. The coordinates are (8%), the thickness is 1, and the height and width are 19 pixels. Fill the linear gradient color white with the transparency from 3%.

At this point, the image is partially completed, and the line of the 9 slices is located again:

Press Ctrl + enter to publish the program.
Flashlinks are reported to flex's style.css. Switch to the source panel and add the following statement to the button style:
Upskin: embed(source1_1_skin.swf ", symbol =" button_upskin ");
To explain, upskin and button are in the pop-up state. Embedsyntax, used to embed the button_upskin in skin.swf into the style.
After saving, switch to the Design panel and you will find that the up status has been updated to the component we just created:

Use the same method to create skin in other States. Be sure to assign a proper name to the component. Finally, CCS is as follows:
Application
{
BackgroundGradientAlphas: 1.0, 1.0;
BackgroundGradientColors: #333333, #333333;
}

Button
{
Color: # AAAAAA;
Textrolovercolor: # FFFFFF;
TextSelectedColor: # FFFFFF;
DisabledColor: # 5A5A5A;
FontWeight: normal;
UpSkin: embed(source1_1_skin.swf ", symbol =" Button_upSkin ");
OverSkin: embed(source1_1_skin.swf ", symbol =" Button_overSkin ");
DownSkin: embed(source1_1_skin.swf ", symbol =" Button_downSkin ");
DisabledSkin: embed(source%%skin.swf ", symbol =" Button_disabledSkin ");
SelectedUpSkin: embed(source%'skin.swf ', symbol = 'button _ selectedUpSkin ');
SelectedOverSkin: Embed(source='skin.swf ', symbol = 'button _ selectedOverSkin ');
SelectedDownSkin: embed(source+'skin.swf ', symbol = 'button _ selectedDownSkin ');
SelectedDisabledSkin: embed(source+'skin.swf ', symbol = 'button _ selectedDisabledSkin ');
}
:

Next, open the FlexSkinTest. mxml file and switch to the Source panel,
Add <mx: Style source = "style/style.css"/>
<Mx: Button x = "10" y = "10" label = "Button"/>
Switch to the Design panel. You can see that the newly added Button component has applied our style. You can also drag several buttons to the program and set different sizes, we can see that the edges are not blurred due to deformation. This is the result of 9 slices.

We can say that our Button component skin has been completed.
Use Flex Skin Design Extensions for Flash CS3
Let's start the second method of Skin Preparation.
Prepare for the activity:
Download the flex Component Kit for Flash CS3 from http://www.adobe.com/go/flex3_cs3_swfkit.
Download flex Skin Design Extensions for Flash CS3. restart Flash CS3. from http://www.adobe.com/go/flex3_skinning.
Go to http://livedocs.adobe.com/flex/3/skinning_extensions_flex3.pdfto download the operation manual.
From the above address, we can also see FLEX skin production plug-ins such as For Fireworks and For Photoshop. We may introduce the implementation methods in subsequent articles.
Open Flash CS3, CTRL + N to create a file, switch "new document" to the "template" panel, and select Flex Skins-> Button, for example:

Name the file skintemplate. fla, and adjust the background color #333333.
After the button is created, the button component on the stage is displayed. Double-click the button component to enter the editing status, or double-click the Button_skin component in the library. You can see the timeline shown in:

This section briefly introduces the usage of these layers.
States: defines the key frames of each state time line of the corresponding component, as shown in the key frame name
Transitions: defines the transition animation for component state switching. By default, the last two key frames in each State are the start and end frames. For example, the transition animation is switched to the over state in the up state, in the Transitions layer, the up-over: start frame is the starting frame, and the up-over: end frame is the ending frame. You can create a transitional animation in the art layer.
Art: component graphics
You will find that the program generates only four States. The previous learning shows that the Button component can have eight States. It doesn't matter, we add four more States after disabled (case sensitive ):

Take the selectedUp status as an example:
The key frame in the States layer is named selectedUp.
In the Transitions layer, add down-selectedOver: start, down-selectedOver: start two key frames in the last two frames as the start and end frames of the Transition animation.
Transplant the skin of the Button component in the previous skin. fla.
For example:

After all the statuses are completed, ctrlw.enter.pdf program will generate two files: skintemplate.swf and skintemplate. SWC.
Switch to flex builder 3 and open style.css. To test the new skin, comment out all the previous eight skin embedding statements. Switch to the design panel. Pay attention to the skin attribute in the right attribute panel:

Select "Flash symbols ..."

Add the generated skintemplate. SWC path, select the button_skin component, and click OK.

The preview area on the left is automatically refreshed to the latest skin:

In fact, the principles of the first two methods are similar, but the implementation process is somewhat different.
Embed an image file
In addition to selecting the SWF file element to embed Skin Resources, you can also select image as the embedded resource.
First, create the desired image. Take the Up Status of the button component as an example. Here, we use fireworks cs3to make buttonup.png. The production process is similar to method 1. We will not repeat it here, as shown in the figure below:

Next, go to flex builder 3, open style.css, and delete the skin embedding code in the first two examples.

Then select "image files…" in the right-side pane ..."

In the pop-up dialog box, enter the upstatus imageaddress to the buttonup.png file we just created.

After OK, you can see that the up status has been updated in the left-side preview area, but an important step is not done.
Click "Edit scale grid" in the upper-right corner to edit 9 slice values.

Adjust the four dotted lines to the appropriate position:

Click "Edit scale grid" again"
Switch to the source panel and you can see the automatically generated code:
Upskin: embed(source%%buttonup.png ", scalegridleft =" 3 ", scalegridtop =" 3 ", scalegridright =" 61 ", scalegridbottom =" 20 ″);
After being proficient, you can directly write code without manual settings.
Due to time and space restrictions, only skin in the up state is completed here, and skin in other States can be completed by you.
ActionScript skin Programming
Through the above three methods, you may have a rough understanding of the entire skin preparation process. If you want to make a more advanced skin, you must use ActionScript.
Let's take a look at the example in CSS:
Upskin: classreference ("upskinclass ");
Upskinclass is the skin class we want to implement.
Open flex builder 3, create a new skins folder under the SRC folder, and create a class file: buttonskin. As in the skins folder, as shown in:

We chose MX. Skins. border as the superclass.
Why should we select the border class? Let's take a look at several superclasses that can be used for skin programming.
Programmaticskin: implements the iflexdisplayobject, ilayoutmanagerclient, iinvalidating, and isimplestyleclient interfaces. It is the easiest and most common superclass.
Border: a subclass of programmaticskin, and added the bordermetrics attribute. This class can be used if the skin has the border attribute.
Rectangularborder: a subclass of border. It supports the backgroundimage style.
UIComponent: implements the IStateCleint interface, which is easy to create multi-state component skin and also required for MXML skin.
For more information about the above four categories, see the official documentation.
Let's go back to the program and rewrite the updateDisplayList method of the Border class to re-paint the skin:
Override protected function updateDisplayList (w: Number, h: Number): void
{
// Draw your Graphics.
}
Fill in the following code:
Override protected function updateDisplayList (w: Number, h: Number): void
{
Var g: Graphics = graphics;
G. clear ();
// Draw outside border
G. lineStyle (1, 0 xFFFFFF, 0.1 );
G. drawRect (0, 0, w, h );
// Draw
G. lineStyle (1, 0 × 000000, 0.6 );

Var gradientBoxMatrix: Matrix = new Matrix ();

GradientBoxMatrix. createGradientBox (w, h, Math. PI/2, 0, 0 );
G. beginGradientFill (GradientType. LINEAR, [0 xFFFFFF, 0 xFFFFFF], [0.1, 0.0], null, gradientBoxMatrix );
G. drawRect (1, 1, W-2, H-2 );
G. endFill ();
G. lineGradientStyle (GradientType. LINEAR, [0 xFFFFFF, 0 xFFFFFF], [0.08, 0.03], null, gradientBoxMatrix );
G. drawRect (2, 2, W-4, H-4 );
}
After saving the file, open the style.css file, switch to the Source panel, and add the code under the Button component style:
UpSkin: ClassReference ("skins. ButtonSkin ");
Note that the class package name must be fully written.
Switch to the Design panel and click Refresh.

Our program has already taken effect:

What about other States? Do I need to write a class for each state? No!
Another important property is not used: name
This is the name of the Status instance, such as "upSkin" and "overSkin.
Use the switch statement to determine different instance names and draw them differently:
Override protected function updateDisplayList (w: Number, h: Number): void
{
Var g: Graphics = graphics;
G. clear ();

Var gradientBoxMatrix: Matrix = new Matrix ();

Switch (name)
{
Case "upSkin ":
{
// Draw external border
G. lineStyle (1, 0 xFFFFFF, 0.1 );
G. drawRect (0, 0, w, h );
// Draw inner border and fill in gradual color
G. lineStyle (1, 0 × 000000, 0.6 );
GradientBoxMatrix. createGradientBox (w, h, Math. PI/2, 0, 0 );
G. beginGradientFill (GradientType. LINEAR, [0 xFFFFFF, 0 xFFFFFF], [0.1, 0.0], null, gradientBoxMatrix );
G. drawRect (1, 1, W-2, H-2 );
G. endFill ();
// Draw inner high-light border
G. lineGradientStyle (GradientType. LINEAR, [0 xFFFFFF, 0 xFFFFFF], [0.08, 0.03], null, gradientBoxMatrix );
G. drawRect (2, 2, W-4, H-4 );
Break;
}
Case "overSkin ":
{
G. linestyle (1, 0 xffffff, 0.1 );
G. drawrect (0, 0, W, H );
G. linestyle (1, 0 × 000000, 0.6 );
Gradientboxmatrix. creategradientbox (W, H, math. PI/2, 0, 0 );
G. begingradientfill (gradienttype. Linear, [0 xffffff, 0 xffffff], [0.15, 0.05], null, gradientboxmatrix );
G. drawrect (1, 1, W-2, H-2 );
G. endfill ();
G. linegradientstyle (gradienttype. Linear, [0 xffffff, 0 xffffff], [0.08, 0.03], null, gradientboxmatrix );
G. drawrect (2, 2, W-4, H-4 );
Break;
}
Case "downskin ":
{
Break;
}
Case "disabledskin ":
{
Break;
}
Case "selectedupskin ":
{
Break;
}
Case "selectedoverskin ":
{
Break;
}
Case "selectedDownSkin ":
{
Break;
}
Case "selectedDisabledSkin ":
{
Break;
}
}
}
The Code shows that only skin in the upSkin and overSkin statuses is drawn. You can try to finish other skins.
If it is difficult to specify skin classes in each State in the style sheet, you can use the following statement:
Skin: Embed (skinClass = 'Skins. buttonskin ');
Or:
Skin: ClassReference ("skins. ButtonSkin ");
The final effect is as follows:

(Note: because other styles are not implemented, only labels are displayed)
MXML skin programming:
In addition, we can use the MXML file to create skin. Take the Button component as an example.
Open Flex Builder 3, create a folder components in the FlexSkinTest project, create a folder skins in the components folder, and create a new ButtonSkin. mxml file in the skins Folder:

Override the updateDisplayList method and fill in the drawing statement in the previous example.
// Fill in the inner array: alpha
Private var _ innerFrameAlphas: Array = [0.1, 0.0];
// Inner high-light alpha
Private var _ innerHighlightAlphas: Array = [0.08, 0.03];

Override protected function updateDisplayList (w: Number, h: Number): void
{
Var g: Graphics = graphics;
G. clear ();

Var gradientBoxMatrix: Matrix = new Matrix ();
G. lineStyle (1, 0 xFFFFFF, 0.1 );
G. drawRect (0, 0, w, h );

// Draw inner border and fill in gradual color
G. lineStyle (1, 0 × 000000, 0.6 );
GradientBoxMatrix. createGradientBox (w, h, Math. PI/2, 0, 0 );
G. beginGradientFill (GradientType. LINEAR, [0 xFFFFFF, 0 xFFFFFF], _ innerFrameAlphas, null, gradientBoxMatrix );
G. drawRect (1, 1, W-2, H-2 );
G. endFill ();

// Draw inner high-light border
G. linegradientstyle (gradienttype. Linear, [0 xffffff, 0 xffffff], _ innerhighlightalphas, null, gradientboxmatrix );
G. drawrect (2, 2, W-4, H-4 );

}
Open style.css and change the embedded statement:
Skin: classreference ("components. Skins. buttonskin ");
Now we can see that the skin has been updated:

However, all skins are the same. Next we will set different property values to differentiate skin in different States.
The invalidatedisplaylist method is used. This method calls the updatedisplaylist method to update the component.
We encapsulate the preceding two variables _ innerframealphas and innerhighlightalphas:
Public Function get innerframealphas (): Array
{
Return _ innerframealphas;
}
Public Function get innerhighlightalphas (): Array
{
Return _ innerhighlightalphas;
}
Public Function set innerframealphas (Alphas: array): void
{
_ Innerframealphas = Alphas;
InvalidateDisplayList ();
}

Public function set innerHighlightAlphas (alphas: Array): void
{
_ InnerHighlightAlphas = alphas;
InvalidateDisplayList ();
}
Then, in the over State, set the innerFrameAlphas and innerHighlightAlphas attributes to repaint the component.
<Mx: State name = "over">
<Mx: SetProperty target = "{this}" name = "innerFrameAlphas" value = "{[0.15, 0.05]}"/>
<Mx: SetProperty target = "{this}" name = "innerHighlightAlphas" value = "{[0.08, 0.03]}"/>
</Mx: State>
Now let's release it again, and you will find that the skin in the over status has been updated. For skin in other states, you can try to finish it. I will not repeat it here.
Finally, if you want to load the skin at runtime, you should compile the skin as a SWF file separately.
Right-click the CSS file and choose Comile CSS to SWF.
You can also use the command line "mxmlc style.css" to compile.

OK. These methods are commonly used in the FLEX Skin Preparation Process. Flexible use can increase the color of your program.