Javaプログラマが0円で始めるFlex-ActionScript

Javaエンジニアが次のステップとしてFlexに取り組むのはいいと思うんですが、
Javaとは勝手が違う部分があってハマるポイントも多いと聞きます。

たぶんそれは、FlexやActionScriptについて基礎を素っ飛ばしてしまうからなのかなと思い。
じゃあ、Javaを初めて勉強したときの流れで、ActionScriptの学習をしてみたらどうでしょう。
ということで、テキストエディタとコマンドプロンプトだけでFlexを0から始めてみます。

この分厚くて高い本(5800円)をつかって勉強していくけど、無くてもよいです。

詳説 ActionScript 3.0

対象はとりあえず、Winだけ。

ではスタート

インストール

FlexはJREが必要らしいので、インストールされていることを確認してください。(割愛)

次、Flex3 SDKをダウンロード、インストールします。

このサイトでFlex 3 SDKをダウンロードします。
http://www.adobe.com/products/flex/flexdownloads/index.html

インストールはZipを解凍して置き場を決めるだけです。

僕は以下の場所に置きました。

C:\Program Files\Adobe\flex_sdk_3

そしてコマンドプロンプト用に「flex_sdk_3\bin」ディレクトリにパスを通します。

コマンドプロンプトで、以下を打ってエラーが出なければOK。

mxmlc -version

それから、同梱されているFlashPlayerを1度だけ起動すれば
swfファイルと関連付けをしてくれるそうです。
これをしていないと、swfファイルをダブルクリックしても起動しません。

FlashPlayerは以下にあります。

flex_sdk_3
└runtimes
　└player
　　└win
　　　└FlashPlayer.exe

僕の場合は以下のパスでした。

C:\Program Files\Adobe\flex_sdk_3\runtimes\player\win\FlashPlayer.exe

FlashPlayerをダブルクリックして起動したら関連付けは終わりなので、
FlashPlayerのウィンドウは、そのまま閉じます。

ソースの作成

作業するフォルダを決めましょう。

僕はここに作っていくことにしました。

C:\workspace\j2flex

何はともあれソースを書きます。

動かないと楽しくないですよね。

以下のソースをStart.asという名前で保存します。

package {
	import flash.display.*;
	public class Start extends Sprite{

	}
}

動くといっても、これはASをコンパイルして起動できる最低限のコードです。

まだHello Worldですらありません。

しかし、Javaとよく似ているので読みやすいですね。

このソースでは「Start」というクラスを作っています。

Javaと同じく、publicなクラスはファイル名と同じ名前でないといけません。

またpublicなクラスは、packageに入っていないといけません。

packageについては次回にでも説明します。

また、ActionScriptを使ってUIを作るとき、ActionScriptプログラムのメインクラスは、

flash.display.Spriteクラスか、flash.display.MovieClipクラスを拡張しなければならないというルールがあるので「extends Sprite」が付いています。

コンパイル

Flexコンパイラは「mxmlc」というコマンドで起動できます。Javacみたいなもんです。

これで「.as」ファイルからActionScriptバイトコードをつくり、

更に「.swfファイル」というバイナリコンテナに入れてくれます。

ActionScriptバイトコードへのコンパイルと

swfファイルへコンパイルという2ステップがあるのですが、

mxmlcは、一気に両方を行なってくれます。

以下のコマンドを実行してコンパイルしましょう。

mxmlc Start.as

以下のような実行結果が表示されます。

C:\workspace\j2flex>mxmlc Start.as
設定ファイル "C:\Program Files\Adobe\flex_sdk_3\frameworks\flex-config.xml" をロードしています
C:\workspace\j2flex\Start.swf (556 bytes)

これでswfファイルが出来上がりました。

swfファイルをダブルクリックすると、FlashPlayerが起動します。

Hello World

テキストフィールドを追加してHello Worldという文字を表示します。

package {
	import flash.display.*;
	import flash.text.*;
	public class Start extends Sprite{
		public function Start() {
			var textBox:TextField = new TextField;
			textBox.text="Hello World";
			this.addChild(textBox);
		}
	}
}

Startクラスにコンストラクタを追加しました。

functionキーワードによってメソッドを作ります。

クラス名と同じ名前にするとコンストラクタになります。

var textBox

varキーワードは変数の宣言です。

JavaScriptと似ています。

var textBox:TextField = new TextField;

また:を使って型の定義が出来ます。

動的型付けと型付け言語の両方のよい面を持っています。

また

new TextField

によってインスタンス化をしています。

この記述は、以下と同じ作用があります。

new TextField();

Adobe へルプリソースセンター

■コマンドラインコンパイラについて
http://livedocs.adobe.com/flex/3_jp/html/help.html?content=compilers_05.html#643059

■mxmlc アプリケーションコンパイラの使用
http://livedocs.adobe.com/flex/3_jp/html/help.html?content=anttasks_4.html