Adobe Flex 3.3を使ってなにかを作るまで

用語の整理。
最終成果物は拡張子swfのファイル。
swfはFlash Player上で動かせる。
ActionScript:用いるプログラミング言語
MXML:XMLで書く、ＵＩコントロールのレイアウト情報
Flex:開発環境と実行環境全体のことか？実体はActionScriptのクラスライブラリ＋ＳＤＫ（コンパイラとか）＋Flash Playerも含む？

ここからflex_sdk_3.zip（１２１Ｍ）をダウンロードして解凍。

ここを参考に以下のファイル MyFirst.mxmlを作る。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="center">

    <mx:Button id="myButton" label="I'm a button!" />
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="center">

<mx:Button id="myButton" label="I'm a button!" />

</mx:Application>

これをflexsdkのbinフォルダにあるmxmlcコンパイラでコンパイルすればいいらしいのでやってみる。

C:\T\Flex>c:\Flex\bin\mxmlc MyFirst.mxml
設定ファイル "C:\Flex\frameworks\flex-config.xml" をロードしています
C:\T\Flex\MyFirst.swf (173498 bytes)

C:\T\Flex>c:\Flex\bin\mxmlc MyFirst.mxml

設定ファイル "C:\Flex\frameworks\flex-config.xml" をロードしています

C:\T\Flex\MyFirst.swf (173498 bytes)

MyFirst.swfができた。このファイルをＩＥへＤ＆Ｄしてみる。

動いた。結構簡単にできた。

次にこのswfファイルをこのサーバのルートにアップロードして、以下の記述を加えてみた。

<OBJECT classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=300 height=80>
<PARAM NAME="Movie" VALUE="/MyFirst.swf">
<PARAM NAME="Src" VALUE="/MyFirst.swf">
</OBJECT>
<hr>
<embed type="application/x-shockwave-flash" src="/MyFirst.swf">

</OBJECT>

<hr>

これも簡単にできた。

次にコードを書いてみる。コードもmxmlに書く。CDATAの中に書く。
その前に少し寄り道してコンパイラの動作について。XMLはすべて最初にActionScriptに変換されて、それがswfバイトコードにコンパイルされるらしい。コンパイラオプションに–keep-generated-actionscript をつけると生成されたActionScriptができるみたいなので、やってみるとgeneratedという名前のフォルダができてその中にいっぱいファイルができた。そのファイルからIDであろう文字列myButtonで検索するといろいろ出てきたが、以下のようなものがあった。

public class MyFirst
	extends mx.core.Application
{

	[Bindable]
/**
 * @private
 **/
	public var myButton : mx.controls.Button;

public class MyFirst

extends mx.core.Application

{

[Bindable]

/**

* @private

**/

public var myButton : mx.controls.Button;

MyFirstがアプリケーションクラスになって、myButtonがその中の変数になるようだ。

コードの話に戻って、ここではボタンがクリックされたら”Hello World”をメッセージボックスみたいなので出すコードを考えてみる。以下のようにできた（途中省略）。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="center">

    <mx:Script>
        <![CDATA[
            private function myHandler ( event:flash.events.MouseEvent ):void
            {
		mx.controls.Alert.show("Hello World");
            }
        ]]>
    </mx:Script>


    <mx:Button id="myButton" label="I'm a button!" click="myHandler(event);" />
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="center">

<mx:Script>

<![CDATA[

private function myHandler ( event:flash.events.MouseEvent ):void

{

mx.controls.Alert.show("Hello World");

}

]]>

</mx:Script>

<mx:Button id="myButton" label="I'm a button!" click="myHandler(event);" />

</mx:Application>

swfのファイル名をMyFirst2.swfにしてアップロードして実験してみる。

動いた。

Leave a Reply Cancel reply