Flex (MXML) を使用して、ベクタグラフィックスによる「Hello, world!」を作成します。
MXML では、ベクタグラフィックスの定義に SVG を使用することが出来ます。
MXML では、SVG をイメージ (JPEG, PNG, GIF) と同様に扱います。
これは、XUL が SVG をシームレスに扱うのとは対照的です。
「Hello, world!」には 2通りのグラデーションをかけます。
これを「TabNavigator（タブナビゲータ）」コンポーネントを使用して切り替え表示できるようにします。
当初、グラデーションには水平方向と垂直方向のものを考えていましたが、
垂直方向のグラデーションは実現できなかったので、
水平方向のみでバリエーションを作ります（左→右、右→左 の2通り）。
Flash Player 9 をインストールしている方は、実際に動かしてみることができます。
以下に、インストールしていない方のために実行イメージを掲載しておきます。
作成と実行
作成
適当なテキストエディタを使用して、3つのファイル hello.mxml, hello-l.svg, hello-r.svg を作成します。
hello.mxml
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
styleName="plain" width="380" height="145">
<mx:TabNavigator x="0" y="0" width="380" height="145">
<mx:Canvas label="Left">
<mx:Image source="@Embed('hello-l.svg')"
x="10" width="350" height="100" />
</mx:Canvas>
<mx:Canvas label="Right">
<mx:Image source="@Embed('hello-r.svg')"
x="10" width="350" height="100" />
</mx:Canvas>
</mx:TabNavigator>
</mx:Application>
|
hello-l.svg
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="100">
<rect x="5" y="5" width="340" height="90" rx="10"
stroke-width="5" stroke="black" fill="slateblue" />
<defs>
<linearGradient id="Gradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0.1" stop-color="darkorange" />
<stop offset="0.9" stop-color="yellow" />
</linearGradient>
</defs>
<text x="30" y="65"
font-size="40" font-family="Georgia"
font-style="italic" font-weight="bold"
fill="url(#Gradient)">
Hello, world!
</text>
</svg> |
hello-r.svg
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="100">
<rect x="5" y="5" width="340" height="90" rx="10"
stroke-width="5" stroke="black" fill="slateblue" />
<defs>
<linearGradient id="Gradient" x1="1" y1="0" x2="0" y2="0">
<stop offset="0.1" stop-color="darkorange" />
<stop offset="0.9" stop-color="yellow" />
</linearGradient>
</defs>
<text x="30" y="65"
font-size="40" font-family="Georgia"
font-style="italic" font-weight="bold"
fill="url(#Gradient)">
Hello, world!
</text>
</svg> |
実行
実行に先立って、上で作成した 3つのファイルをコンパイルして、hello.swf を作成します。
$ java -version
java version "1.6.0_03"
Java(TM) SE Runtime Environment (build 1.6.0_03-b05)
Java HotSpot(TM) Server VM (build 1.6.0_03-b05, mixed mode)
$ mxmlc -version
Version 3.0 build 183453
$ ls -l *.mxml *.svg
-rwxrw-r-- 1 alvin alvin 651 2007-12-10 02:56 hello-l.svg
-rwxrw-r-- 1 alvin alvin 651 2007-12-10 02:56 hello-r.svg
-rwxr--r-- 1 alvin alvin 576 2007-12-10 02:56 hello.mxml
$ mxmlc hello.mxml
Loading configuration file /usr/local/flex3sdk/frameworks/flex-config.xml
This beta will expire on Thu Jan 31 00:00:00 JST 2008.
/virtual/alvin/public_html/usr/2007/170/hello.swf (192728 bytes)
$ ls -l *.mxml *.svg *.swf
-rwxrw-r-- 1 alvin alvin 651 2007-12-10 02:56 hello-l.svg
-rwxrw-r-- 1 alvin alvin 651 2007-12-10 02:56 hello-r.svg
-rwxr--r-- 1 alvin alvin 576 2007-12-10 02:56 hello.mxml
-rw-rw-r-- 1 alvin alvin 192728 2007-12-10 02:57 hello.swf
|
ローカルで実行するには、hello.swf をブラウザで開きます。
hello.swf を Webページに埋め込むには、object 要素と embed 要素を使用して次のようにします
（これは、一例に過ぎません）。
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width="380" height="145">
<param name="movie" value="/usr/2007/170/hello.swf">
<param name="quality" value="high">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" quality="high"
src="/usr/2007/170/hello.swf"
width="380" height="145">
</embed>
</object>
|
