Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex–KingnareStyle skin produce introduction

Fuji-Finder-256x256 In previou articles 5+ Strongly Recommend Tutorials You Must Read for Creating Skins and Themes( UI Design ) in Flex and 480+ free and fresh icon sets help you to create your beautiful skins and themes in Flex, We have done lots of preparation.Now, it’s time to do! Following this introduction step by step then you can build your beautiful skin. Let’s go!


It could control the style by using CSS in Flex3.0 component. Of course the CSS mentioned here is different with the CSS which used in writing the website. It is the style sheet which is tailored for Flex specially. By using ActionScript could realize the powerful display effect. It will be introduced in following example.

The black style of “Express Photoshop” released by Adobe is very attractive. KingnareStyle is one of Flex Skin from Express Photoshop prototype. The Skin contains many components but limited by the article length, we could only choose the typical components for example. Following we will begin our Skin production by Button Component(Full Component effect Screenshot ). KingnareStyle-Skin

Search-256x256 Demo | Download Full Project | Download project from Downloadhere.
First, Create a new project FlexSkinTest in Flex Builder 3

clip_image002[1]

Create new document Style, and create new file style.css

clip_image004[1]

Double click style.css, switch to Design board and create a new style.

clip_image006[1]

Choose the Component: Button.

clip_image008[1]

After clicking OK bottom, there are eight states. Convenience for testing we setup the background as 0×333333:

clip_image010[1]

Switch to the Source board and adjust the Front Style:

Button
{
color:#AAAAAA;/*Color*/
textRollOverColor:#FFFFFF; /*text rolling over color*/
textSelectedColor:#FFFFFF; /*SelectedColor*/
disabledColor:#5A5A5A; /* disabledColor */
fontWeight:normal; /*fontweight*/
}

The result as below:
clip_image012[1]

The next work is to replace the button’s eight states skin with customized skin.

Generally, there are four ways, we will introduce one by one.

First, let’s study the skin of Button component in KingnareStyle: embed the external swf files’ skin components into the component style files.

Embedded component in swf file

First create new file skin.fla under style file, setup background as #333333.

CTRL+F8 create new Button_upSkin and setup properties as below:

clip_image014[1]

It is better to use the nine slices.

About nine slices, please refer to the graphic below (from Flex Developer Center)

clip_image015[1]

Enlarge the stage to 400%, paint a hollow rectangular by rectangular painting tool and the coordinate is (0,0), the thickness is 1 pixel, height & width are all 23 pixels, filled color is #FFFFFF, transparency is 10%.

clip_image017[1]

Create a new layer, use the same way to paint a hollow rectangular inside, the coordinate is (1,1), thickness is 1 pixel, height & width are all 21 pixel, filled color is #000000, transparency is 60%.

clip_image019[1]

Next filled the blank area.

Create a new layer, paint a solid rectangular, the coordinate is (2,2), height & width are all 19 pixel, linear gradient color is white, transparency from 10% to 0%.

clip_image021[1]

Last add the high-light frame. Create a new level, paint a hollow rectangular, the coordinate is (2,2), the thickness is 1 pixel, height & width are all 19 pixel, linear gradient color is white, transparency from 8% to 3%.

clip_image023[1]

Then, the part of graph is finished, re-posit the line of 9 slices.

clip_image025[1]

CTRL+ENTER public the program.

The flash part is finished, return to the style.css in Flex. Switch to the Source board and add the following sentence in Button Style.

upSkin:Embed(source=”skin.swf”, symbol=”Button_upSkin”);

Explain: upSkin is the state of skin up. Embed is used for the external source was embedded. In this example embedded the Button_upSkin of skin.swf into the style.

After saving, switch to Design board, you will find the up state have been updated with current produced component.

clip_image027[1]

Use the same method to produce other state skin, pay attention give the suitable name to each component. At last CCS as following

Application
{
backgroundGradientAlphas: 1.0, 1.0;
backgroundGradientColors: #333333, #333333;
}

Button
{
color: #AAAAAA;
textRollOverColor: #FFFFFF;
textSelectedColor:#FFFFFF;
disabledColor:#5A5A5A;
fontWeight:normal;
upSkin: Embed(source=”skin.swf”, symbol=”Button_upSkin”);
overSkin: Embed(source=”skin.swf”, symbol=”Button_overSkin”);
downSkin: Embed(source=”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’);
}

Screenshort:

clip_image029[1]

Then next open the file FlexSkinTest.mxml, switch to the Source board. Add:

<mx:Style source="style/style.css"/>
<mx:Button x="10" y="10" label="Button"/>

Switch to the Design board, then you will find the new added Button component have benn applied the new produced style. Also could drag several Buttons to program and setup different size, you will find the edge didn’t become blur since the size changed. The reason is we have used the 9 slices.

clip_image031[1]

Here, the Skin of Button component has been finished.

Using Flex Skin Design Extensions for Flash CS3

Let’s begin the second way of skin production.

First do the preparations:

1. Download Flex Component Kit for Flash CS3 from http://www.adobe.com/go/flex3_cs3_swfkit.

2. Download Flex Skin Design Extensions for Flash CS3 from http://www.adobe.com/go/flex3_skinning. After installation, restart Flash CS3.

3. Download operation manual from http://livedocs.adobe.com/flex/3/skinning_extensions_flex3.pdf.

From above address we could also see other flex skin production inserters for Fireworks or Photoshop, we will introduce how to use them in following text.

clip_image033[1]

Name the file as skintemplate.fla, background color as #333333.

After new created, you could find the button component on the stage. Double-click the button component enter the edit state, or Double-click the Button_skin component. You will get the timeline as below.

clip_image035[1]

Briefly introduce the use way of them:

◆States: It definite the key frame of state time line in corresponding component. Reference the key frames in above example.

◆Transitions: It definite the transition animation when components switched. It default the last two key frames as initial and termination frames. For example, switch up state to over state. The up-over of level transitions: start frame is the initial frame, end frame as termination frame. It could do transition animation in art level.

◆Art: graphic part of component.

You will find the program only created four states, but we knew there are eight states in Button component. We will add four states behind the disabled. (pay attention the capital and lowercase)

clip_image037[1]

For example the selectedUp.

◆The key frame’s name of States level is selectedUp

◆Add two frames at last: down-selectedOver:start, down-selectedOver:start as the initial and termination frame of transition animation.

◆Move above produced skin.fla Button Component to here.

For example the up state:

clip_image039[1]

After all the states finished, CTRL+ENTER public the program then it will create two files skintemplate.swf and skintemplate.swc.

Then we switch to the FLEX Builder 3, open style.css. To test new skin, we should remark all the statements embedded in 8 skin. Switch to the design board, pay attention the skin properties at right Properties board.

clip_image041[1]

Choose ”Flash symbols…”

clip_image043[1]

Add the file skintemplate.swc, choose Button_skin, click OK.

clip_image045[1]

It has been updated the latest skin in left preview area

clip_image047[1]

In fact, the principle of above two way is similar, just difference between the realize process.

Embed the Image File

In addition to select the components of SWF files embedded in the Skin Resource, we can also choose the image as the embedded resources.

First, do the needed image. For example: the up state of Button component. Use Firework CS to made the buttonUp.png. The process like the way one and no repeat here, we get the image as below.

clip_image049[1]

Next, use Flex Builder 3 and open the style.css, delete the embedded code of two example above.

Then, choose the “Image files” in right board.

clip_image051[1]

Input the image buttonUp.png address.

clip_image053[1]

After click OK, in left preview area, you will find the up state have been updated. Next we need to do an important step.

Click the “Edit Scale Grid” at top right corner to edit the nine slices.

clip_image055[1]

Adjust the four dotted line to suitable position:

clip_image057[1]

Finished, click the “Edit Scale Grid” again.

Switch to the Source board, you will find the automatic code:

upSkin: Embed(source=”buttonUp.png”,scaleGridLeft=”3″,scaleGridTop=”3″,scaleGridRight=”61″,scaleGridBottom=”20″);

You could write the code directly after you have been familiar with it.

Because of the time and text limited, only complete the up state skin here, others need yourself to finish.

ActionScript Skin programming

Through above three ways about skin production process, perhaps you have a general understanding about it. If want to do advanced skin, we need to use ActionScript.

First, let’s see the example in CSS:

upSkin:ClassReference(“UpSkinClass”);

UpSkinClass is the skin class which we need realize.

Open the Flex Builder 3, create new folder skins under folder src and create new class file: ButtonSkin.as under folder skins. As below screenshot.

clip_image059[1]

We choose mx.skin.Border as superclass.

Why we choose it? Let’s study some superclass which could be used in skin program.

ProgrammaticSkin: Implementation of IFlexDisplayObject,ILayoutManagerClient,IInvalidating,ISimpleStyleClient interface. It is the easiest and common superclass.

Border: the sub-class of ProgrammaticSkin, has been added the property of borderMetrics. If the skin has the border property could use this class.

RectangularBorder: the sub-class of Border, supports the backgroundImage style.

UIComponent: Implementation of IStateCleint interface. Easily to produce multi-state skin component

More information about above superclass please refer to the official documents.

Then, let’s back to the program. Through rewriting the updateDisplayList of Border to realize the skin redraw.

override protected function updateDisplayList(w:Number, h:Number):void
{
//Draw your Graphics.
}

Filled with following code.

override protected function updateDisplayList(w:Number, h:Number):void
{
var g:Graphics = graphics;
g.clear();
//draw outside border
g.lineStyle(1, 0xFFFFFF, 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,[0xFFFFFF, 0xFFFFFF],[0.1,0.0],null,gradientBoxMatrix);
g.drawRect(1, 1, w-2, h-2);
g.endFill();
g.lineGradientStyle(GradientType.LINEAR,[0xFFFFFF, 0xFFFFFF],[0.08,0.03],null,gradientBoxMatrix);
g.drawRect(2, 2, w-4, h-4);
}

After saving, open the file style.css, switch to the Source board, add the following code under the Button style:

upSkin: ClassReference(”skins.ButtonSkin”);

Pay attention write the full class name.

Then switch to the Design board and click refresh button.

clip_image061[1]

Our program have been actived.

clip_image063[1]

How about other states? Whether every state need to write a class? The answer is NO!

There is another important property: name. It is the name of state example, such as “upSkin”,”overSkin” etc.

Using “switch” to judge different example name and do different draw.

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, 0xFFFFFF, 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,[0xFFFFFF, 0xFFFFFF],[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,[0xFFFFFF, 0xFFFFFF],[0.08,0.03],null,gradientBoxMatrix);
g.drawRect(2, 2, w-4, h-4);
break;
}
case “overSkin”:
{
g.lineStyle(1, 0xFFFFFF, 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,[0xFFFFFF, 0xFFFFFF],[0.15,0.05],null,gradientBoxMatrix);
g.drawRect(1, 1, w-2, h-2);
g.endFill();
g.lineGradientStyle(GradientType.LINEAR,[0xFFFFFF, 0xFFFFFF],[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;
}
}
}

Above code only introduced the upSkin and overSkin, others need yourself to finish.

If you fell trouble to specify each state of skin class in style, please use the following statement:

skin: Embed(skinClass=’skins.ButtonSkin’);

or:

skin: ClassReference(”skins.ButtonSkin”);

Then the final effect as follows:

clip_image065[1]

(PS: other styles didn’t realize, so just display the Label.)

Build Skin using MXML:

In addition, we could also use MXML document to produce the skin. Use Button component as sample.

Open Flex Builder 3, create new document name components in project FlexSkinTest. Create new document name skins under document components. Create new file name ButtonSkin.mxml under document skins.

clip_image067[1]

Rewrite updateDisplayList and fill in the graphics expression of above 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, 0xFFFFFF, 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,[0xFFFFFF, 0xFFFFFF],_innerFrameAlphas,null,gradientBoxMatrix);
g.drawRect(1, 1, w-2, h-2);
g.endFill();

//draw inner high-light border
g.lineGradientStyle(GradientType.LINEAR,[0xFFFFFF, 0xFFFFFF],_innerHighlightAlphas,null,gradientBoxMatrix);
g.drawRect(2, 2, w-4, h-4);

}

Then add eight states that is the eight states of Button component.
Open the style.css again and revise the embedded statement.

skin: ClassReference(”components.skins.ButtonSkin”);

You will find the skin have been updated.

clip_image069[1]

But all the skins are same, next step is to set the different properties to identify the different state skin.

Now we need to use the way: invalidateDisplayList, it will call updateDisplayList to update the component.

Package the 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();
}

Set up property: innerFrameAlphas and innerHighlightAlphas in state over and redraw the components.

<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>

After public, you will find the skin of above have been updated. Other skin state you could try to finish by yourself.

Finally, if load the skin when running, the skin should be compiled to a SWF file.

Right click the CSS file ->Comile CSS to SWF is OK.

Another way by using the command “mxmlc style.css”.

clip_image071[1]

Ok, these methods are more common in flex skin production. If you could use them flexibly it will make your program more lively.

Cheers!

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

30 Responses to “Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex–KingnareStyle skin produce introduction”

  1. mayur says:

    Very Nice, superb post.

    But I will be more thankful if you change the chines / japanes characters in screen shots, so it would be more undersandable.

    Once again a nice Post.

  2. [...] Read Tutorial and download support files No Comments Leave a Commenttrackback addressThere was an error with your comment, please try again. name (required)email (will not be published) (required)url [...]

  3. [...] auzn 为我们带来一篇很好的教程:Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex–KingnareStyle skin produce introducti…. [...]

  4. shutao says:

    thank you for your clear tutorial.

  5. minidxer says:

    @mayur

    Im sorry but i also only have Chinese Flash CS version… if anyone who can send me the english screen shots , i will update them.

    Thanks
    minidxer

  6. Great tutorial hopefully after this I can customize more my website :)

  7. YiYiDu says:

    very cool! thanks for your tutorial!
    Does anyone know is there a wordpress’s theme like this?

  8. chrm says:

    Great work!

    Stay skined!
    chrm.

  9. Heian says:

    Thank you for your tutorial!
    it is very helpful to me

  10. [...] Cheers! Permalink:http://ntt.cc/2008/06/11/using-flexbuilder-3-and-flash-cs3-to-build-your-skin-in-flex-kingnarestyle-… [...]

  11. fathor says:

    This post is the best, get a publisher we need people like you

  12. [...] 6 – Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex–KingnareStyle [...]

  13. [...] Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex–KingnareStyle skin produce introducti… [...]

  14. [...] on a site called Ntt.cc, there’s a tutorial on how to create the same skin three different ways: using bitmaps, a SWF or programmatically. The final skin created is called “Kingnare [...]

  15. [...] Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex :Skinning using Flex 3 and Flash CS3 [...]

  16. [...] 6 – Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex–KingnareStyle [...]

  17. [...] 6 – Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex–KingnareStyle [...]

  18. [...] 6 – Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex–KingnareStyle [...]

  19. maxiom caron says:

    i got it working but not the horizontal scrollbar.
    And it seem you dont.
    i wonder if someone know how to make it work for horizontall scrollbar too

  20. [...] 5. Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex–KingnareStyle skin produce introducti… [...]

  21. hi i want to know about flex i know something about flex but where i will run the flex program and how to use with action script . pls help me. pls send some example .i will wait ur respnse.

  22. Ntt.cc says:

    @chakra dhari pandey
    You can get compiler “flex Builder” from Adobe office site:
    http://www.adobe.com/products/flex/

  23. randygland says:

    why the f–k have u used japanese flash you bellend?

  24. Ntt.cc says:

    @randygland
    That is not Japanese Flash, is Chinese… :)

  25. [...] Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex–KingnareStyle skin produce introducti… [...]

  26. [...] KingnareStyle Skin It is not only a skin for Flex applications but also a great tutorial on how to build your skin in Flex skin produce introduction. Following this introduction step by step then you can build your beautiful skin. [...]

  27. bobo says:

    haha,this is chinese ,哈哈。。。。Flex在第一帧导出

  28. Frames says:

    Great blog! Well done!

Leave a Reply