FlashDevelop 3.0.0 Beta 4 でFlashアプリケーションを作る

Nov

2007/11/23：FlashDevelop 3.0.0 Beta 4 でFlashアプリケーションを作る

その昔、Flashとかいうのが出て、色々な事が出来そうだなー
とか思ったら、オーサリングツール的なものしかなくて「えぇい、コードを書かせろ、コードを！」
とか思ってたら、コード書いてFlash作るようなのが色々出てきたんだけど、なんだかめんどくせぇなぁ
とか思ってたらMacromediaを吸収したAdobeがFlexとか言うの出して、かなり便利に作れる
とか思ってたらFlex Builderとやらは有料らしく、無料のツールも色々出たけど複数組み合わせて環境構築しなきゃいけなくて、セットアップがめんどいなぁ
とか思ってたら、FlashDevelopって奴なら単体で殆ど何でも出来るぞこりゃ！

ってんで、やってみた。

# Web屋じゃないんで、Flash界隈は傍観的に眺めてたので細かい流れは知らん。

インストール：

FlashDevelop.org :: Index から FlashDevelop-3.0.0-Beta4.exe をダウンロードしてインストール
これが統合開発環境、使いやすくて便利。

FlashDevelopが内部的に使う(自分で使ってもいいけど) Flexの開発環境(ライブラリとかコンパイラ)を入れなきゃならん。
Adobe - Adobe Flex 2: Flex 2 SDK
ここから、「Flexフレームワークを含むFlex 2 SDKをダウンロード（無償）」を選んで、AdobeIDでログイン
# 無かったら作ろう
Flex 2 SDK （無償）と日本語パックをダウンロード
Flex 2 SDKはZIPなので適当なフォルダに展開する。
あちこち見た感じではCドライブ直下に置いてた、Pathトラブル起きづらいもんね
しかし、C直下に色々置くのはイヤなので、C:\Program Files\flex_sdk_2 に展開した
# 今の所トラブルは起きてない。
日本語パックの中身も展開して、Flex SDKをインストールしたフォルダにコピー

Flex Compiler Shell とやらも
Flex Compiler Shell - Adobe Labs からダウンロードして、同じく Flex SDKをインストールしたフォルダにコピー

これだけで、FlashDevelopは動いてくれる。
ごちゃごちゃと色んなツール組み合わせなくてもいい

設定する：
FlashDevelopにFlex SDKの場所を教えてあげるだけなんだけど
ついでなので日本語を扱うのに便利な設定もしておこう。

FlashDevelopを起動して、Tools → Program Settings (F10)で設定変更
Main → Misc → Default Code Page をUTF8に
Plugins → AS3Context → AS3 → Flex 2 SDK Location を C:\Program Files\flex_sdk_2 (Flex SDKのパス)に
# Plugins → AS3Context → Documentation → Documentation Command Line にgoogle.com が指定されてるけど、普通の人は日本語のページが出てくれるだろう。
# 出ない人は google.co.jp にするか、ブラウザの設定でも変えたらいい

C:\Documents and Settings\USERNAME\Local Settings\Application Data\FlashDevelop\Settings\ScintillaNET.xml
を編集、default-font を変えてやる



before:		<value name="default-font">Courier New</value>

after:		<value name="default-font">ＭＳ ゴシック</value>

同じ場所の MainMenu.xml には、helpから開けるリファレンスのURLが定義されてたりするので
日本語ドキュメントのURLに差し替えると人によっては便利かもしれない。
# FlashDevelopの内部ブラウザよりFirefoxの方が見やすいから特に変更してない。

設定とかオプションは色々あるから適当にいじってみるといい。

何か作ってみる：
設定変えたらFlashDevelop再起動

Project → New Project
・ActionScript 3.0 - Default Project
・Nameを適当に(MonteCarlo とか)
・Locationも適当に(...My Documents\flash とか)
・Create directory for project にチェックを入れておこう(毎回フォルダ指定するのメンドイ)

画面の左がエディタ、右がプロジェクトツリーになるはず。
MonteCarlo(AS3) - classes - Main.as を右クリックで Always Compile
ダブルクリックして編集モードへ
File → Encoding → UTF-8 に変更するのを忘れずに
# Default Code Pageはここでは効いてくれないみたい。
変更しないと、2バイトに対応してないエディタみたいな動きするし(1バイトだけDEL出来たりとか)
フォントを"ＭＳゴシック"とかにしてTextField使っても化け化けだったりで使い物にならん。

適当に書いたソースコード
OOなにそれ美味しいの？状態なのは気にしない。

コピペで貼って、歯車のアイコンでビルドすると、プロジェクトツリーに MonteCarlo.swf が出てくる
ダブルクリックして確認するもよし、 My Documents\flash\MonteCarlo\MonteCarlo.swf をブラウザで開くもよし
出来の悪い円周率近似計算プログラムが出てくるはずだ
放っておいても止まらないから適当に閉じるべし、クリックすると点再描画。

# 最初作ってたら、表示の下端が切れた。
# 「座標計算間違ったかなー？」と格闘してたら、ブラウザで見ると正常に表示されるというオチ
# そのうちFlashDevelopでもちゃんと表示されるようになったので、画面幅取得の方法とかがまずかっただけかも。

まぁ、見て分かるように、ガリガリとコードで書こうとするとUI的なものがメンドイ
今はMXMLってのを使ってXMLとActionScriptを組み合わせて作るのが主流らしいので
次はそれで作ってみよう。

プロジェクトファイルMonteCarlo.zip

(そのうち)つづく。

追記：続いた　FlashDevelop でFlex、MXMLを使うの巻 (Nizah blog)

インストール、設定、動くもの作るまでで小一時間程
環境構築も扱うのも簡単で実にすばらしい。

で、意図したように動くまで2,3時間かなぁ
只管にActionScriptが分からん。
いや、見た目と雰囲気でコードは書けるんだけど、何やるにしても一々API調べるので時間が掛かった
コード補完があるからかなり楽だけどね
とりあえず本一冊でもざっと読もうかと思う次第

つか、間違った方向性で物を調べて時間を浪費した気がする
mx.control.* の使い方が結局良く分からんとか(表示されんぞ)
素直に mxml から使うべきものなんだろうな、きっと

参考にしたサイト：

as3/FlashDevelop3 - HirobeのHack倉庫 - Trac

#99 (FlashDevelopのエディタで日本語フォントを表示する。) - HirobeのHack倉庫 - Trac

func09 - FlashDevelop環境で、AS3を開発してみる。