RIA Developer Specializing in Adobe Technology

Flash XML Graphics (FXG), Apa itu ?

Flash XML Graphics (FXG) adalah sintax untuk medefinisikan grafik dalam Flex. Mungkin bagi anda yang pernah membaca artikel saya mengenai degrafa yang berjudul “Degrafa untuk Pemula” di http://www.indonesianflexcommunity.org/tutorial-flex/41-design/91-degrafa-untuk-pemula , anda akan mudah dalam memahami FXG.

Sebenarnya FXG dibuat agar para designer bisa bekerja terpisah dengan developer. Maksudnya ?, ya maksud saya adalah dengan menggunakan tools seperti Adobe Photoshop CS4, Illustrator CS4 and Fireworks CS4, kita akan bisa merubahnya kedalah format FXG dan bisa dipakai dalam aplikasi Flex kita. Namun sayangnya format FXG bisa digunakan menggunakan Flex 4 SDK dan termasuk dalam bagian spark .  Maaf ya

Anda bisa menggunakan FXG element langsung didalam sintax MXML ataupun berdiri sendiri sebagai Custom Component.

Contoh :

<?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/halo” minWidth=”1024″ minHeight=”768″>

<mx:Panel title=”Ellipse”

height=”247″ width=”279″ layout=”horizontal”

paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″ x=”259″ y=”154″>

<s:Graphic x=”0″ y=”0″>

<s:Ellipse height=”100″ width=”250″>

<s:stroke>

<s:SolidColorStroke color=”0×000000″ weight=”2″/>

</s:stroke>

<s:fill>

<s:RadialGradient>

<s:entries>

<s:GradientEntry color=”0×1c64a7″/>

<s:GradientEntry color=”0×114371″/>

</s:entries>

</s:RadialGradient>

</s:fill>

<s:filters>

<mx:DropShadowFilter/>

</s:filters>

</s:Ellipse>

</s:Graphic>

</mx:Panel>

</s:Application>

FXG bisa berada dalam file *.mxml dan *.fxg dengan syarat berada didalam tag <Graphic>

Tidak hanya itu, kita juga bisa menggunakan tag <Library> dan <Definition>, yang berfungsi semacam deklarasi FXG yang nantinya bisa kita pakai dengan memanggil namanya.

Contoh :

<?xml version=”1.0″ encoding=”utf-8″?>

<!– Ahmad Fathi Hadi/FXGLibraryExample.mxml –>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/halo”

xmlns:s=”library://ns.adobe.com/flex/spark” >

<fx:Library>

<fx:Definition name=”EllipseFathi”>

<s:Graphic x=”0″ y=”0″>

<s:Ellipse height=”100″ width=”250″>

<s:stroke>

<s:SolidColorStroke color=”0×000000″ weight=”2″/>

</s:stroke>

<s:fill>

<s:RadialGradient>

<s:entries>

<s:GradientEntry color=”0×1c64a7″/>

<s:GradientEntry color=”0×114371″/>

</s:entries>

</s:RadialGradient>

</s:fill>

<s:filters>

<mx:DropShadowFilter/>

</s:filters>

</s:Ellipse>

</s:Graphic>

</fx:Definition>

</fx:Library>

<mx:Panel title=”Library Example”

height=”314″ width=”528″ layout=”absolute”

paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″ x=”93″ y=”31″>

<fx:EllipseFathi x=”0″ y=”0″/>

<fx:EllipseFathi x=”255″ y=”105″/>

<fx:EllipseFathi x=”0″ y=”105″/>

<fx:EllipseFathi x=”255″ y=”0″/>

</mx:Panel>

</s:Application>

Mungkin dengan anda melihat contoh kode yang saya berikan, anda bisa mengerti maksud saya. (^_^)

Well, mungkin sekian dari saya untuk penjelasan singkat mengenai FXG.

Tags: Artikel, Flash XML Graphics, Flex, FXG

This entry was posted on Sunday, June 7th, 2009 at 23:23 and is filed under Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.