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>
