読者です 読者をやめる 読者になる 読者になる

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

その昔、Flashとかいうのが出て、色々な事が出来そうだなー とか思ったら、オーサリンツール的なものしかなくて「えぇい、コードを書かせろ、コードを!」 とか思ってたら、コード書いてFlash作るようなのが色々出てきたんだけど、なんだかめんどくせぇなぁ とか思ってたらMacromediaを吸収したAdobeFlexとか言うの出して、かなり便利に作れる とか思ってたら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">MS ゴシック</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出来たりとか) フォントを"MS ゴシック"とかにしてTextField使っても化け化けだったりで使い物にならん。

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

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

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

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

プロジェクトファイル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を開発してみる。

この辺(とFD本家のフォーラムとか)を参考に、最新版に合わせて適当に修正。

本:
ActionScript 3.0ゲームプログラミングブック (Flash for Professionals)

そもそものActionScript が分からんので、これ買った、月曜には届くはず。 レビューには mxml との連携が無いとか書いてたけど、まぁ、それはとりあえず良いや


Actionscript 3.0 Cookbook

図書館にあったから借りてきた、上の本読んでからにする。


Essential ActionScript 3.0 (Essential)


ActionScript 3.0 Design Patterns (Adobe Developer Library)

DPはともかく、Essentialの方は欲しいな、図書館にあったかな?