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" />
<!-- create swf-->
<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><!-- clean dist directory -->
<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です。
