flex : create custum skin with flashdevelop or gedit and inkscape extension fxg

hi this tut is for question
"how create application and custom skin flex 4 with open source soft or free soft"
ok my response "it's very very simple"
1- you must download  inkscape from this link
http://inkscape.org/download/
and install
in ubuntu you can install from terminal
why i like inkscape  : because is great tool for create vector graphic; and it's open source and free
2- you must download fxg exporter extension for inkscape  from this topic
https://bugs.launchpad.net/inkscape/+bug/625140
in this page go to response of JazzyNico topic #24 and download extension from link in top ; and for add extension:

On GNU/Linux: $HOME/.config/inkscape/extensions
On Windows (English localisation): C:\Documents and Settings\User\Application Data\Inkscape\extensions
On OS-X: /Applications/Inkscape.app/Contents/Resources/extensions

 3- create for example you custom button 

you must  resize you scene from menu file -> Document Properties

choose for example size equal a size of your button

and go to menu file->save as ->and choose .fxg

for examples graphicButton.fxg

3-open file graphicButton.fxg and delete

<mask><Group><Rect width="any" height="any"><fill><SolidColor color="#ffffff" alpha="1"/></fill></Rect></Group></mask>

if excise ; it s just after the first tag <Graphic

4- download flex sdk from site official of adobe  ; use google for search

5- for flex sdk 4 you can use a flashdevelop IDE it's free ; you can download from

http://www.flashdevelop.org/community/viewforum.php?f=11

for instructions of installation go to link :

http://www.flashdevelop.org/wikidocs/index.php?title=Installation 

note : before install you must install jre of java and .net

for linux link for highlight gedit :

http://www.flashiology.com/flash-actionscript-video-tutorials/watch/6-programming-actionscript-3-on-linux-%28developing-pure-actionscript-3-applications%29.html?task=ShowTutorial

 6- create project flex 4 : in flashdevelop

you have

folder src : and inside src you have a main application for example main.mxml

folder bin : for .swf result

folder obj : you have a configuration file

in main.mxml ; you have very basic code create with syntax mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" >
   
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>

</s:Application>  

7 - create a button : and you must have

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" >
   
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>

<s:Button id="button1"   />

</s:Application>

8- create a folder comp inside src and copy graphicButton.fxg ;
 paste inside comp

9- inside folder src create a file MyButtonSkin.mxml ; and copy paste

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:graphics="comp.*">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

  

 <graphics:graphicButton  /> 

</s:Skin>

explication :

  with :<s:Skin

you open a skin tag for declare or say a flex compiler : a want this file for creating a skin class

  with :    xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"

for using spark library it s new in flex 4

and use historic mxml library

   with : xmlns:graphics="comp.*" 

you say a flex sdk : i want use my custum namespace (my custom library or graphic) in our example its all file .fxg or .mxml or .as or .swc inside comp folder

with :     <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata> 

you specifier what component you want skin  (customise) ;  in our case is Button

with : <graphics:graphicButton  /> 

you create a dependant with content graphic of fxg and your button 

10 - ok inside file main.mxml you must declare a skin class if you want customise your button

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" >
   
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>

 <s:Button id="button1"  skinClass="MyButtonSkin" />

</s:Application>

11 -  test with :

button build or debug  in flashdevelop or ctrl+entre

or compile with terminal in ubuntu with commande mxmlc

12 - you can create interactive skin : 

over button with different color or graphic  

and out button over button with different color or graphic

13- you custumise you graphic in inkscape :

one for over and save with graphicButton.fxg

other for out save with graphicButton1.fxg

14 - for combine all inside MyButtonSkin.mxml change content :

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:graphics="comp.*">
        <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 <graphics:graphicButton   includeIn="up"/>
 <graphics:graphicButton1   includeIn="over"/>
 <graphics:graphicButton1   includeIn="down"/>
</s:Skin>