海賊王をめざす男 マツです。こんにちは。

Flash Builder 4 がついにリリースです。

Flex SDK 4 によるコンパイラの高速化やコード補完の強化など期待が高まるポイントが満載です。

今回は、FXG という新しい画像ファイルフォーマットを触ってみます。

src/component/GraphicComponent.fxg

<?xml version="1.0" encoding="utf-8"?>
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
	<Rect id="rect1" width="200" height="200">
		<fill>
			<SolidColor color="#cccccc"/>
		</fill>
		<stroke>
			<SolidColorStroke color="#666666" weight="2"/>
		</stroke>
	</Rect>
</Graphic>

この FXG は 200 × 200 px のグレー色のボックスを表現しています。
FXG は MXML Graphics という XMLベース言語で構成されています。

src/Main.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" minWidth="955" minHeight="600"
							 xmlns:component="component.*">
	<component:GraphicComponent id="graphicComponent"/>
</s:Application>

FXG をコンポーネントとして利用することができます。
【デモ】

続いて、FXG ファイルを Illustrator CS4 で書き出してみます。

星を描いたら、[ファイル]_[別名で保存]します。ファイルの種類は FXG を選択します。

src/component/StarComponent.fxg

<?xml version="1.0" encoding="utf-8" ?>
<Graphic version="1.0" viewHeight="300" viewWidth="240" ai:appVersion="14.0.0.367" d:id="1" xmlns="http://ns.adobe.com/fxg/2008" xmlns:ai="http://ns.adobe.com/ai/2008" xmlns:d="http://ns.adobe.com/fxg/2008/dt">
  <Library/>
  <Group x="75" y="70" d:id="2" d:type="layer" d:userLabel="レイヤー 1">
    <Path winding="nonZero" ai:knockout="0" data="M26.2109 1.12988L33.9785 16.8687 51.3472 19.3926 38.7788 31.6431 41.7456 48.9414 26.2109 40.7744 10.6763 48.9414 13.6431 31.6431 1.07471 19.3926 18.4434 16.8687 26.2109 1.12988Z" >
      <fill>
        <SolidColor color="#fff200"/>
      </fill>
      <stroke>
        <SolidColorStroke color="#ff9100" caps="none" weight="1" joints="miter" miterLimit="4"/>
      </stroke>
    </Path>
  </Group>
  <Private>
    <ai:PrivateElement d:ref="#1">
      <ai:SaveOptions>
        <ai:Dictionary>
          <ai:DictEntry name="writeImages" value="1" valueType="Boolean"/>
          <ai:DictEntry name="includeXMP" value="0" valueType="Boolean"/>
          <ai:DictEntry name="includeSymbol" value="0" valueType="Boolean"/>
          <ai:DictEntry name="aiEditCap" value="1" valueType="Boolean"/>
          <ai:DictEntry name="versionKey" value="1" valueType="Integer"/>
          <ai:DictEntry name="clipToActiveArtboard" value="1" valueType="Boolean"/>
          <ai:DictEntry name="downsampleLinkedImages" value="0" valueType="Boolean"/>
          <ai:DictEntry name="rasterizeResolution" value="72" valueType="Integer"/>
          <ai:DictEntry name="preserveGradientPolicy" value="3" valueType="Integer"/>
          <ai:DictEntry name="preserveFilterPolicy" value="3" valueType="Integer"/>
          <ai:DictEntry name="preserveTextPolicy" value="3" valueType="Integer"/>
        </ai:Dictionary>
      </ai:SaveOptions>
      <ai:DocData base="StarComponent.assets/images"/>
      <ai:Artboards originOffsetH="0" originOffsetV="300" rulerCanvasDiffH="120.5" rulerCanvasDiffV="-149.5" zoom="2.89">
        <ai:Artboard active="1" index="0" right="240" top="300"/>
        <ai:ArtboardsParam all="0" range="" type="0"/>
      </ai:Artboards>
    </ai:PrivateElement>
    <ai:PrivateElement d:ref="#2">
      <ai:LayerOptions colorType="ThreeColor">
        <ai:ThreeColor blue="257" green="128.502" red="79.31"/>
      </ai:LayerOptions>
    </ai:PrivateElement>
  </Private>
</Graphic>

このように Illustrator から FXG 形式で保存したものは、MXML Graphics で記述されています。

src/Test_1.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" minWidth="955" minHeight="600"
							 xmlns:component="component.*">
	<component:GraphicComponent id="graphicComponent"/>
	<component:StarComponent id="starComponent"/>
</s:Application>

Illustrator CS4 で書き出した FXG ファイルをコンポーネントとして利用します。
【デモ】

この様に FXG を利用することで、簡単にスキンやアセット、コンポーネントとしてつかえるのは便利です。
まだ、うまく利用することができていないので、いろいろ試していきたいと思います。