[Flex] グラフィックアセットの埋め込み

石上 慎太郎

2012.03.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

　Flexアプリケーションを開発する際に、スキンやアイコン等、様々なグラフィックアセットを使用すると思います。これらをアプリケーション内に埋め込む方法はいくつかありますが、代表的なパターンをいくつか紹介したいと思います。

画像

　最も一般的な例として、JPGやPNG等の画像をそのまま埋め込む方法があります。これについては特に解説は不要かと思いますが、一応サンプルコードを記載しておきます。
　SVG埋め込みは非推奨となっており、ビルド時に警告が出ます。後述のFXGを使うべし、とのこと。ちなみにSVGをSWFLoaderで表示すると、scaleを変更しても滑らかに表示されます。

MXML

<s:Button icon="@Embed(source='assets/myIcon.png')" />
<s:BitmapImage source="@Embed(source='assets/myImage.jpg')" />
<s:SWFLoader source="@Embed(source='assets/myGraphic.svg')" />

AS

[Embed(source="assets/icon.png")]
const MY_ICON:Class;
button.setStyle("icon", MY_ICON);

　オーソドックスなやり方ですが、せっかくFlexを使うのに、あれもこれもビットマップ、という状況は避けたいものですね。

FXG

　FXGはSVGと同様にXMLで記述されたベクター画像ですが、使い方は異なっており、直接クラスとしてMXMLやAS中に記述できます。FXGは、Illustrator等で作る事ができます。

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"
			   xmlns:assets="assets.*">
	<fx:Script>
		<![CDATA[
			import assets.MyFxgIcon;
		]]>
	</fx:Script>
	<assets:MyFxgGraphic />
	<s:Button icon={MyFxgIcon} />
</s:Application>

AS

import assets.MySvgIcon;
button.setStyle("icon", MySvgIcon);

　FXGの中身は確認しにくいので、どのファイルがどんな素材かすぐに確認できる資料等が必要になってくるでしょう。

swf

　swfファイル内に定義されたシンボルを、グラフィックアセットとして使用することができます。クラスメソッドでは、この方法で実装する事が多いです。swfはIllustratorやFlashで作ります。

MXML

<s:BitmapImage source="@Embed(source='assets/assets.swf', symbol='MyImage')"/>
<s:SWFLoader source="@Embed(source='assets/assets.swf', symbol='MyGraphic')"/>
<s:Button icon="@Embed(source='assets/assets.swf', symbol='MyIcon')" />

AS

[Embed(source="assets/assets.swf", symbol='MyIcon')]
const MY_ICON:Class;
button.setStyle("icon", MY_ICON);

　多くのアセットを一つのswfで扱えるのでスッキリします。また、swfを直接開いてアセットの名前と外観を一覧できるように作っておくと、さらに便利です。
　Flashのシンボルプロパティで、「ActionScript用に書き出し」にチェックを入れるのを忘れると、シンボル定義がswfに含まれないので注意が必要です。

swc

　Flashで作成したグラフィックアセットをパブリッシュする時にswcを出力し、ライブラリとして使用します。Flash Builderであれば、Flexプロジェクトにはデフォルトでlibsフォルダがあるので、作ったswcをその中に入れるだけで、Flashのシンボルを全てクラスとして参照できます。

MXML

<s:BitmapImage source="{MyImage}')"/>
<s:SWFLoader source="{MyGraphic}"/>
<s:Button icon="{MyIcon}" />

AS

button.setStyle("icon", MyIcon);

　個人的には好きなやり方です。Embedの記述と違って、Flash Builderのコード補完が効くという長所があります。難点を挙げるとすれば、元ネタがIllustratorの場合は、一旦Flashに取り込まなければならない所でしょうか。
　swcとは別に、内容確認用のswfも別途作成しておくべきでしょう。

AWS