« jQuery in Action を買ってみた | メイン | jQueryのcheatsheet 壁紙 »

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を起動して、普通のプロジェクトを作成

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

flexoneclipse_000.png

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

flexoneclipse_001.png

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

 

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

flexoneclipse_002.png

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

 

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」があったらそれをクリック)

flexoneclipse_003.png

「Ant」→「Ant」を選択

flexoneclipse_004.png

 

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

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

flexoneclipse_005.png

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

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

flexoneclipse_006.png

↓今回のファイル一式 HelloWorld.zip

 

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

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

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

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

  1. HelloWorld.as のファイル名およびクラス名を修正
  2. 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です。

コメント (3)

旅人:

突然すみません。

このサイトの情報、大変役に立っているのですが、解らない部分があります。

手順の5以下が全くわかりません。

申し訳ないのですが、初心者なので、なるべく解りやすく解説いただけたらと思います。

勝手なお願いですが、是非お願いします。

旅人さん、はじめまして。
> 手順の5以下が全くわかりません。
なるほど。。。
確かに説明としては一つすっとばしているかもしれませんね。
時間を見つけて別途解説を書いてみます。

Suzanne:

HelloWorld.zipを解凍して
ファイル->インポートから読めば楽勝だった。
Chrisさんありがとう。