1 月 08 2007

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

Published by haga at 8:47 under actionscript3.0, flash, processing, programing

さっそくFlashDevelop環境を試してみた。

Processingで単純なプログラムを作ってみたので、それを移植。
ランダムに色、位置、角度を変更しながら毎フレーム十字のオブジェクトをキャンバスに配置するだけのプログラム。
十字を描くプログラムなのでCrossDrawerという名前にしました。

CrossDrawerのイメージ

プログラムのイメージ画像。

もの自体は簡単なので、今回はFlashDevelop環境でどう作るのか?という感じです。

FlashDevelopはオープンソースなFlash開発環境で、海外ではコミュニティが結構盛んみたいです。 日本ではmixiコミュとかはてブとか見る限り、あまり使われていないのかなぁという感じがします。 きっと日本語のドキュメントがあまり無いのと、本家サイトにもドキュメントらしいドキュメントが存在しないからかもしれません。

使ってみると、たくさんのメリットがありました。

  1. 無料
  2. 軽い
  3. (理解できれば)設定が簡単
  4. プラグインが充実している。
  5. Flashが無くてもSWFが生成できる。
  6. version9にも十分対応。(要プラグイン)
  7. ASDocをボタンひとつで生成(要設定)

と、こんな感じでしょうか。
バージョンがあがれば、いろいろデフォルト状態でversion9開発も楽にできるようになるでしょう。
version8開発は、さらりとしか試していませんが、メチャクチャ便利でした。

http://weekbuild.sakura.ne.jp/trac/wiki/as3/FlashDevelop
ここを参考にFlashDevelop環境が用意されている前提とします。

1.

  1. Project -> New Project…を選択し
  2. プロンプト画面で「AS3 Project」を選び
  3. Nameにプロジェクト名を入力
  4. Locationはプロジェクトを保存したいディレクトリを選んで(僕はMy Document/FlashDevelop)OKをクリック。

New Project

2.

まず右側のProject Explorerから「/src/App.as」を右クリック、Renameで任意のファイル名に変えます。ここでは「CrossDrawer.as」に変更しました。

プロジェクトエクスプローラー

3.

今名前を変更したasファイルを開き(CrossDrawer.as)、クラス名とコンストラクタ名をファイル名と同一に変更します。

メインクラス

4.

flashbuild.xmlが開いた状態なので、ツリーから「FlashBuild」を展開し、「Build 1」を右クリックして「New Flex2 Build」を選びます。「Undefined」が作成されます。

flashbuild.xml

5.

作成された「Undefined」がswfの設定ファイルになります。「Undefiend」を選択し「Advanced」タブをクリック。ここで設定値を変更していきます。

Advanced

  1. 「DefaultBackGroundColor」はSWFの背景色です。入力欄に「0×000000」という感じで色をRGB16進数値で入力すれば、10進数値に変換されます。(ここでは0xFFFFFFにします)
  2. 「DefaultFrameRate」はFPS値です。ここでは31にします。
  3. 「DefaultSize」はSWFのサイズです。横と縦の数値をスペースで区切って入力します。ここでは「200 200」とします。
  4. 「Input」はメインクラスとなるasファイルを設定します。ここでは「src/CrossDrawer.as」にします。
  5. 「Output」はSWFの出力先と出力名になります。ここでは「deploy/CrossDrawer.swf」にします。

6.

flashbuild.xmlの設定は終わりです。Ctrl+Sで保存し、flashbuild.xmlを閉じます。ツールバーから「Build」 -> 「Build」 -> 「Build 1」を選択し、SWFを生成します。Outputウィンドウにエラーが出ていなければ、出力成功です。出力先のディレクトリにSWFが生成されています。

ビルド

7.

ここまでくれば、設定は終わっているので、あとはコーディングです。

ASDocを出力する場合は、ツールバーアイコンの閉じた本のアイコンをクリックするだけです。

今回作成したCrossDrawerの解説はこちら

Trackback URI | Comments RSS

Leave a Reply