Flex3 SDK を試してみた
今日は Ao君に Adobe Air を教わりました。
教わるだけだと申し訳ないので、僕も小ネタとして Flex3 SDK の簡単なサンプルを作ってみた。
Flex の基本
Flex では XHTML + JavaScript のような感覚で SWF を作成することができます。
JavaScript に該当するものがご存知 ActionScript
- ActionScript は、MXMLファイルで記述した要素に対して動きをつけたりする
- MXMLファイル内でも外部ファイルでも記述できる
作成した MXML ファイルを Flex3 SDK に付属する mxmlc というツールでコンパイルすると SWF ファイルができあがります。
実例：SVG ファイルを読みこんでオッサンを表示させる
MXML + ActionScript の実例。
オッサンが描かれた SVGファイルを読み込んで表示させる。
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="1000" height="500">
<mx:Script>
<![CDATA[
[Embed(source="man.svg")]
[Bindable]
public var imgCls:Class;
]]>
</mx:Script>
<mx:Image id="myImageRaw" source="{imgCls}"/>
</mx:Application>
実例2：クリックされたらオッサンが拡大する
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="1000" height="500">
<mx:Script>
<![CDATA[
[Embed(source="man.svg")]
[Bindable]
public var imgCls:Class;
private function onClick(e:MouseEvent):void {
e.currentTarget.scaleX += .1
e.currentTarget.scaleY += .1
}
]]>
</mx:Script>
<mx:Image id="happyMan" source="{imgCls}" click="onClick(event)"/>
</mx:Application>
実例３：マウスオーバーするとオッサンが逃げる
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="1000" height="500">
<mx:Script>
<![CDATA[
[Embed(source="man.svg")]
[Bindable]
public var imgCls:Class;
private function onOver(e:MouseEvent):void {
e.currentTarget.addEventListener(Event.ENTER_FRAME, runaway);
}
private function onOut(e:MouseEvent):void {
e.currentTarget.removeEventListener(Event.ENTER_FRAME, runaway);
}
private function runaway(e:Event):void {
e.currentTarget.x += 10;
}
]]>
</mx:Script>
<mx:Image id="happyMan" source="{imgCls}" rollOver="onOver(event)" rollOut="onOut(event)"/>
</mx:Application>
