nazolabo

フリーランスのWebエンジニアが近況や思ったことを発信しています。

Flex2 SDKでActionScript3.0プログラミング

ほとんど自分用メモ

Flex2 SDKにありがちな誤解

Adobe Flex2(以下Flex2)はFlashをベースとしたRIAを開発するための開発ツールです。

http://www.atmarkit.co.jp/fwcr/rensai/flex201/01.html

Flex自体はそうなんだけど、Flex2 SDKは単にActionScriptを書いてswfを作るのにも使えるよ!
というのを最近まで知らなかった。

Flex2 SDKをインストールしよう

http://www.adobe.com/jp/products/flex/sdk/
の下のほうの「Flexフレームワークを含むFlex 2 SDKをダウンロード(無償)」からダウンロードできます(要ユーザ登録)
Flex SDK」と「Flex Language Pack」をダウンロードし、「Flex SDK」を解凍したところに「Flex Language Pack」の中身を上書きします。
ついでにfcshも入れておくといいかもしれません。
解凍先のbinフォルダにPATHを通せばインストールは終了です。あとdebug用Flash Playerがplayer/debug/にあるのでインストールしておきましょう。

サンプル

http://www.saturn.dti.ne.jp/~npaka/flash/as30/
にたくさんあります。
ちなみにコンパイルオプションは毎回真面目に入力するのはやってられないので、「[アプリケーション名]-config.xml」というファイルを作って、そこに記述すれば、勝手に読み込んでくれます。
詳しくは
http://d.hatena.ne.jp/nemu90kWw/20060716/p1
を参照してください。

公式リファレンスとかないの?

http://livedocs.adobe.com/flex/2_jp/
特に「ActionScript 3.0 のプログラミング」の項目は、言語仕様が詳しく載っているので、一通り目を通しておきましょう。

なんかこう、便利なIDEとかないの?

公式にFlex Builder 2というのがありますが、\64,900と、簡単に買える値段ではないので、あきらめましょう。
単にFlashアニメーションが作りたいって人はParaFla!なりSuzukaなり使ってください。

その他

  • FlashはJavaScriptの代わりになるか?
    • そもそもFlashでHTML操作はできません(多分)。あくまでFlash内で完結させるものです(MXMLを使えば別?)。基本的に既存ページの一部分のヘルパー的に使うのは向いてない気がします。ただしJavaScript(というかHTML)からパラメータ付きでFlashを呼ぶことはできます(例:JavaScriptからMP3ファイルを再生)→追記:ExternalInterfaceを使えばJavaScriptActionScriptで相互に関数を呼んだりできるので、それを駆使すれば何とかできます。(コメント欄参照)
  • コンパイルだるくね?
    • その分処理速度が高速です。
  • 画像埋め込みってどうするの?どっか設定ファイルに書くの?
        [Embed(source='image01.png')]
        private var Image01:Class;

とすると、コンパイル時にimage.pngが勝手に埋め込まれ、Image01が「'image01.png'を表示するSpriteクラスの定義」になります。使う時はImage01をnewしましょう。

  • Loaderクラスとか使うと非同期で指定したURLの画像を読み込めるっぽいけど、デバッグのとき面倒じゃね?
    • 普通にローカルファイルも読めます。相対パスで記入しましょう。
  • なんかいいデバッグ方法ない?
    • trace(なんとか)で、なんとかがlogファイルに書き込まれます。でもリアルタイムに見たいので、FlashTracerを入れましょう。ちなみに通常のFlash Player(plugin)が入っていると、debug用Flash Playerを入れても通常のもので動作すると思うので、KewBee Plugin Switcherを用意しておくと便利です。更に最新版のFlash Player(debug)では、FlashTracerの設定で、「Select output file」を「%USERPROFILE%\Application Data\Macromedia\Flash Player\Logs\flashlog.txt」(「%USERPROFILE%」は「C:\Documents and Settings\[ユーザ名]」)にする必要があります(Windows以外は知らない)

オープンソース環境でFlash作成

開発環境といえばEclipseですが、Eclipseオープンソースなものをいくつか組み合わせてFlashを作れます。
一般的には、EclipseMTASC、ASDT、FlashoutでFAMEと呼び、それにSwfmillを合わせてFAMESと呼ぶらしいです。
とりあえず、ここまでは、id:kambara:20060323の通りにやれば環境は作れます。
しかしFlashoutがなんか古いらしく、最近は外してAMESと呼んだりするらしいです。(http://actionscript.com/Article/tabid/54/ArticleID/Far-Beyond-Open-Source-Flash-Development/Default.aspx
Flashoutってのはビルドとかも担当してくれる便利なものなのですが、これの代わりに最近はas2antを使うらしいです。
http://www.as2lib.org/
からダウンロードできます。antは適当にインストールしておいてください。(All-In-One-Eclipseなら最初から入ってると思います)
以下説明(Eclipse上で操作するものとします)

  • とりあえずFAME環境をid:kambara:20060323の通りに作っておいてください。(Flashoutは無くても構いません)
  • ActionScript 2 Projectを作成します。名前はsampleとでもしておきます。
  • 直下にbuild、filesフォルダを作ります。buildはswf、filesは画像とかを入れることとします。(別に何でもいいです)
  • プロジェクト直下にbuild.xmlを作ります。
  • build.xmlを記述します。大体こんな感じです。*1EclipseXMLエディタが出てきてコピペできないよーって人は、build.xmlを右クリックで「アプリケーションから開く」-「テキスト・エディター」です。
<project name="Sample Project" default="sample" basedir=".">
  
  <taskdef name="swf" classname="org.as2lib.ant.Swf" />
  
  <property name="src.dir" location="src"/>
  <property name="build.dir" location="build"/>
  <property name="files.dir" location="files"/>
  
  <target name="sample" description="builds sample swf">
    <swf src="${src.dir}/Sample.as" dest="${build.dir}/sample.swf" width="300" height="100" framerate="31" bgcolor="FF8A00">
      <clip id="pict" import="${files.dir}/pict.jpg" />
    </swf>
  </target>
  
</project>
  • filesフォルダにpict.jpgとか適当に作って入れておいてください。
  • srcフォルダにSample.asファイルを作ります。こんな感じにしておきます。
class Sample {
	
	private var picture:MovieClip;
	
	public function Sample(container:MovieClip) {
		this.picture = container.attachMovie("pict", "pict", 1);
		this.picture._x = 10;
		this.picture._y = 10;
	}

	public static function main(container:MovieClip):Void {
		var sample:Sample = new Sample(container);
	}
	
}
  • swfmill.exeにパスを通しておきます。面倒だったらswfmill.exeをプロジェクト直下に置いておけばいいです。
  • build.xmlを右クリックして「実行」-「Ant ビルド」します。
  • sample.swfが多分出来上がっています。

*1:XMLですが、<?xml version="1.0" encoding="UTF-8"?>は特に必要ないみたいです。でもあったほうがいい気がします(as2antのサンプルに無かっただけ)。