EclipseでFlex (でぃべろっぱーず・さいど)

去年から触ってみようとしていたFlexにようやく着手。

Flex Builderを買ってみようかとも思ったけど、まずはフリーのツールで環境構築してみようかなと。

ということで慣れ親しんだEclipseちゃんでFlexの開発環境と整えてみることにしました。

0.Eclipseがない人はまずEclipseをダウンロード

http://www.eclipse.org/downloads/ とか http://www.bea.com/distros/eclipse.html とかから。

Eclipseは解凍するだけでOKなので、解凍後Cドライブ直下とかに配置。
（ちなみに僕はC:\programming\eclipse の下にeclipse320 とか eclipse330とか複数バージョンが入ってます。）

1.AdobeのサイトからFlex3 SDKをダウンロード

http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html から。

" I have read the Adobe Flex Beta and Early Build Access License, and by downloading the software listed below I agree to the terms of the agreement. " にチェックを入れて、"Download Flex 3 SDK 3 beta 3 for all platforms" からダウンロード。

2.ダウンロードしたファイルを解凍して、都合の良い場所に移動。

僕は C:\flex3sdk に配置したので、以下の説明はすべてそのディレクトリで行います。適宜読み替えてください。

3.Eclipseを起動して、普通のプロジェクトを作成

ナビゲーターパースペクティブ上で、右クリック→「新規」→「プロジェクト」

ポップアップで表示されたウィンドウで、「一般」→「プロジェクト」

ここで、今回はHelloWorldという名称のプロジェクトを作成します。

4.作成したプロジェクト内に、以下の図の用にフォルダとファイルを作成

各ファイルの中身はとりあえず空っぽで。

5.build.properties と build.xmlを以下のように記述

build.properties （Flex sdkのbinディレクトリの絶対パスを指定）

FLEX3_HOME=C:/flex3sdk/bin

build.xml

<?xml version="1.0" encoding="UTF-8"?>
<project name="HelloWorld" default="build.swf" basedir=".">
    <property file="build.properties" />
    <property name="dist.dir" value="dist" />
    <property name="src.dir" value="src" />
    <property name="height" value="100" />
    <property name="width" value="200" />
    <property name="framerate" value="30" />
    <property name="bgcolor" value="0xFFFFFF" />

    
    <target name="build.swf" depends="clean">
        <exec executable="${FLEX3_HOME}/amxmlc.bat" failonerror="true">
            <arg line="-default-size ${width} ${height}" />
            <arg line="-default-frame-rate ${framerate}" />
            <arg line="-default-background-color ${bgcolor}" />
            <arg line="-output ${dist.dir}/HelloWorld.swf" />
            <arg line="${src.dir}/HelloWorld.as" />
        </exec>
    </target>

    
    <target name="clean">
        <delete>
            <fileset dir="${dist.dir}" includes="HelloWorld.swf" />
        </delete>
    </target>

</project>

6.HelloWorld.as と index.htmlを以下のように記述

HelloWorld.as

package {
    import flash.display.*;
    import flash.text.*;
    public class HelloWorld extends Sprite {
        public function HelloWorld() {
            var textField:TextField=new TextField();
            textField.text="Hello World!";
            textField.autoSize=TextFieldAutoSize.CENTER;
            addChild(textField);
        }
    }
}

index.html

<html>
<head>
<title>Sample Page</title>
</head>
<body>
<object width="100%" height="100%">
<param name="movie" value="HelloWorld.swf"></param>
<embed src="HelloWorld.swf" type="application/x-shockwave-flash" width="100%" height="100%"></embed>
</object>
</body>
</html>

7.Eclipse で Ant ビューを開く

「ツール」→「ビューの表示」→「その他」（ここで「Ant」があったらそれをクリック）

「Ant」→「Ant」を選択

8.Antビューにbuild.xmlのファイルをドラッグ＆ドロップ

すると↓こんな感じでターゲットが表示される。

9.Antビューの中のbuild.swf ターゲットをダブルクリック

amxmlc.batが実行されて、distディレクトリの下にHelloWorld.swfが生成されるので、index.htmlをブラウザで開いてチェック。

↓今回のファイル一式

これで、Eclipse上でソースを編集して、9の「Antビューの中のbuild.swf ターゲットをダブルクリック」を繰り返して開発してみようかな。

ActionScript3の良いEclipse pluginがないのが残念。地道にテキストエディタで書かないと・・・。

AIRアプリのコンパイルもbuild.xmlに書くんだけど、続きはまた今度。

HelloWorld以外のアプリを作るときは、

HelloWorld.as のファイル名およびクラス名を修正
build.xml 中の以下の項目を修正

<property name="height" value="100" /> : 生成されるswfファイルの高さ
<property name="width" value="200" /> : 生成されるswfファイルの幅
<property name="framerate" value="30" /> : 生成されるswfファイルのフレームレート
<property name="bgcolor" value="0xFFFFFF" /> : 生成されるswfファイルの背景色
<arg line="-output ${dist.dir}/HelloWorld.swf" /> : 出力されるswfファイル名
<arg line="${src.dir}/HelloWorld.as" /> : ソースのasファイル名
<fileset dir="${dist.dir}" includes="HelloWorld.swf" /> : buildの度にdistディレクトリから削除するファイル名

これでOKです。