Flash学習(15) 開発環境FlashDevelop 4.0.1を導入

Flashゲームを作るぞ。
まずは開発環境のインストールだ。
動作環境: Windows XP SP3

インストール

https://www.flashdevelop.org/ で FlashDevelop 4.0.1 を取得。そのダウンロードページを読むとほかにも必要なファイルがある。といっても、FlashDevelopのインストールすれば自動で取得してダウンロードしてくれる。なのだが、私はすべて別にダウンロードしてインストールした。Flex SDKとFlash Playerに過去バージョンを使いたいためである。

FlashDevelop 4.0.1

これはIDE、統合開発環境だ。テキストエディタがパワーアップしたようなもの。なくてもFlashは作れるが、あったほうが格段に作業がスピードアップする。 FlashDevelop-4.0.1-RTM.exe (16MB)

ActionScript3.0開発のためのFlashDevelop完全ガイド ~フルFlashサイト制作スタイル 作者：池田泰延 出版社／メーカー：技術評論社 発売日：2010-07-09 メディア：大型本

Microsoft .NET Framework 2.0 SP1

FlashDevelopは .Net Framework 2.0製なので、FlashDevelopを動作させるために必要。Windows7なら.Net Framework 2.0は最初から入っている。XP SP3には入ってない。.Net Framework 2.0 SP1 (27MB) を入れてもいいが .Net Framework 3.5 (250MB) を入れれば、2.0も入る。ちなみに .Net Framework 4.0を入れても 2.0は入らない。2.0～3.0～3.5のどれかを入れればよい。

Flex SDK 3.6

swfを作るために最低限必要な、ActionScriptコンパイラだ。これだけ動けばいちおうFlashは作れる。最新の4.6でもよいのだが、ここでは書籍『ActionScript 3.0 アニメーション』にあわせるため、3.xを使う。 flex_sdk_3.6.0.16995.zip (119MB) を C:\home\bin\flex_sdk_3.6.0.16995 に展開。

JRE 1.6 (Java 6)

Flex SDKはJava製なので、これはFlex SDKを動作させるために必要。最新Version 6 Update 30を入れた。 jre-6u30-windows-i586-s.exe (17MB)

Flash Player Debugger版

Flash PlayerのDebug版 ActiveX (for IE) は作ったFlashの動作確認に使うので必要と書いてあるのだが、実はFlex SDK にFlash Player9とFlashPlayer10は入っているので取得しなくてもよい。

TortoiseGit

これを入れておけば、Gitでソースコード管理ができるらしい。最新 TortoiseGit-1.7.6.0-32bit.msi (12MB) を取得。インストール時の選択は Git Bash Only, Shell Extensionなどは全部OFF, core.autocrlf=false

msysGit

TortoiseGitで必要。TortoiseGitより前にインストールしろと書いてある。バージョン1.7.6がオススメと書いてあったので、最新版1.7.8ではなく Git-1.7.6-preview20110708.exe (13MB)を取得した。

msysGit→TortoiseGitの順でFlashDevelopより先に入れておく。FlashPlayer、JRE、FlexSDK、.Net Frameworkは順序不問だが、FlashDevelopより先に入れる。最後にFlashDevelop入れた。

設定

FlashDevelopを起動して設定する。ただし、FlashDevelopにFlexSDKなどインストールをまかせた場合、以下の設定は最初から設定済みになっているはず。私はFlexSDKもFlashPlayerも手動でインストールしたので、以下で設定する。
[Tools - Program Settings - AS3 Context - Language] の 'Flash Version' を9.0にする。
'Installed Flex SDKs' に C:\home\bin\flex_sdk_3.6.0.16995 を指定。

[Tools - Program Settings - FlashViewer - External Player Path]でFlashPlayerのパスを指定。
FlashPlayer9なら C:\home\bin\flex_sdk_3.6.0.16995\runtimes\player\win\FlashPlayer.exe
FlashPlayer10なら C:\home\bin\flex_sdk_3.6.0.16995\runtimes\player\10\win\FlashPlayer.exe
[Tools - Program Settings - FlashDevelop - Editor] の 'End of Line Mode' は私の好みでLFにした。日本語化はしないで英語のままで使う。個人的にはこっちのほうがスッキリして見えるので。

Coding コーディング

次に設定がうまくいったか確かめるため、実際にコーディングしてみる。
まずは [Project - New Project] で適当な名前の AS3 Project をつくる。左ペインの src/Main.as をクリックして編集する。

動画 FlashDevelop Code Hint Movie by clockmaker を真似して入力する。flashdevelop.jp/基本的な機能の紹介 に紹介されている Ctrl+Shift+1 を多用しているので、真似してみよう。
コード入力したら [Project - Test Project] で実行してみる。 うーん、FlashPlayer9では表示はするけど回転しない。FlashPlayer10なら回転した。 rotationY というプロパティはFlashPlayer10で追加された機能のようだ。

そのコードを少し変更してみた。

Flash swf:

ソース:

package 
{
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.text.TextField;
 import flash.text.TextFormat;
 
 
 [SWF(backgroundColor="0xfcfcfc", width="550",height="400", frameRate="15")]
 /**
  * ...
  * @author itouhiro
  */
 public class Main extends Sprite 
 {
  private var mc:MovieClip;
  
  public function Main():void 
  {
   if (stage) init();
   else addEventListener(Event.ADDED_TO_STAGE, init);
  }
  
  private function init(e:Event = null):void 
  {
   removeEventListener(Event.ADDED_TO_STAGE, init);
   // entry point
   mc = new MovieClip();
   mc.x = 0;
   mc.y = 0;
   addChild(mc);
   
   mc.child = new Array(100);
   
   var tft:TextFormat = new TextFormat();
   tft.font = "Verdana";
   tft.bold = true;
   for (var i:int = 0; i < 100; i++) 
   {
    tft.size = 6 + Math.random()*48;
    var tx:TextField = new TextField();
    tx.defaultTextFormat = tft;
    tx.x = stage.stageWidth * (Math.random());
    tx.y = stage.stageHeight * (Math.random());
    tx.text = i.toString();
    tx.textColor = Math.random() * 256 << 16 | Math.random() * 256 << 8 | Math.random()*256;
    mc.addChild(tx);
    mc.child[i] = tx;
   }
   
   addEventListener(Event.ENTER_FRAME, movingHandler);
  }
  
  private function movingHandler(e:Event):void 
  {
   mc.child[int(Math.random()*100)].x += 1;
  }
 }
 
}