独学ActionScript

FlashDevelopの使い方 (5)Flex 4 SDKでtraceを表示する [改訂版]

FlashDevelop

(2009.07.05 06:34 改訂・追記) 現時点での最新版（Flash Develop 3.0.1 RTM、Flex SDK 4.0.0.7219）を使用した内容に改訂し、プレビューに使用されるFlash Playerの違いについて追記しました。

以前Flex 3 SDKでtraceを表示する記事を書いたのですが、当時はよくわかっていなかった点もいくつかあって、使い勝手の悪いtrace表示しかできませんでした。それについてタロタローグ ブログさんが正しいtrace表示の手順を教えてくださったので、それを参考に現在の最新版であるFlash Develop 3.0.1 RTMとFlex 4 SDKを使って改めてtrace表示の手順を書き直してみました。この手順が現時点でいちばん簡単・確実にFlashDevelopでtraceを表示する方法だと思いますが、もしもっと良い方法があれば是非教えてください。

※今回は最新版ということでFlex 4 SDKとFlashPlayer 10を使用していますが、Flex 3 SDKとFlashPlayer 9の組み合わせなどでも同じ手順でtraceを表示できます。

必要なファイル＆今回試した環境

段落の下がった箇条の名称は、今回の環境で使用（インストール）したファイルです。

1. Windows OS
   • Windows XP Professional Service Pack 3 (クリーンインストール状態)
2. .NET Framework (2.0以降)　　※FlashDevelopを使用するのに必要
   • Microsoft .NET Framework 3.5 Service Pack 1
3. Java Runtime Environment (1.4.2以降)　　※Flex SDKを使用するのに必要
   • Java Runtime Environment 1.6.1.4 (Windows XP/Vista/2000/2003/2008 オフライン版)
4. Flex 4 SDK または Flex 3 SDK
   • Flex 4-Beta 1 Adobe Flex SDK 4.0.0.7219 (103MB)
5. FlashDevelop
   • FlashDevelop 3.0.1 RTM

セッティング

• 上記の「必要なファイル」の番号順にインストールする
  • Windows XP SP3クリーンインストール状態だとFlashPlayerのバージョンが古い(6.0.79.0)ため、ダウンロードしたFlashDevelop-3.0.1-RTM.exeを実行すると、最初に「先にFlashPlayer 9をインストールしたほうがいいですよ」という旨のメッセージが表示されるが、そのままOKボタンを押してFlashDevelopのインストールを続行する
  • 逆に最新のFlashPlayerやデバッグ版FlashPlayerが既にインストールされていたとしても全然大丈夫、普通にFlashDevelopをインストールする
  • Flex 4 SDKは解凍して好きな場所に置く (例) C:\flex_sdk_4
• すべてのインストールが終わったら、FlashDevelopを起動して[Tools]メニューの[Program Settings]（F10）を開き、左側の「AS3Context」項目の中にある「Flex SDK Location」に、Flex 4 SDKを置いた場所を指定する (例) C:\flex_sdk_4
• 続いて同じ画面で、左側の「FlashViewer」項目の中にある「External Player Path」に、Flex 4 SDKフォルダの中にあるFlashPlayer.exeを指定する (例) C:\flex_sdk_4\runtimes\player\10\win\FlashPlayer.exe
  • すぐ下の「Movie Display Style」は、必ずデフォルト値「External」のままにしておく*1

最後の項目「External Player Path」で指定しているスタンドアローンタイプのFlash Player（ここではVer.10）はデバッグ版であり、ここで指定したFlash PlayerがFlashDevelop上からのプレビューやデバッグに使われることを意味しています。よって、ブラウザー上で使用（閲覧）しているFlash Playerとは異なりますので、バージョンの違いなどに注意してください。各バージョンのスタンドアローンタイプのFlash Playerはこちらからダウンロードできます。

外部アプリのスタンドアローン版Flash Playerではなく、Flash Developの内部（タブ）でtrace表示を行いたい場合やブラウザー用Flash Playerでtrace表示を行いたい場合は、後述する「プレビューに使用されるFlash Playerの違いについて」を参照してください。

trace出力のテスト

上記の「セッティング」をすべて満たせば、FlashDevelopでtrace()メソッドを使った場合にその出力がOutputパネルに表示されるようになるはずですので、下記の手順でtraceのテストをしてみます。

1. FlashDevelopを起動して[Project]メニューの[New Project...]を開き、New Project画面で「AS3 Project」を選択して、適当なプロジェクト名を付けてOKボタンを押す
2. Projectパネルから、srcフォルダの中にあるMain.asを開き、「// entry point」のすぐ下にtrace表示用の1行「trace("Hello, world!");」を書き足す（下記ソースコード参照）。
3. Ctrl+EnterまたはF5キーを押してムービープレビューすると、「セッティング」で設定したFlashPlayerが新規ウィンドウで起動してスクリプトの内容がそこに表示され（今回は何も表示させてないので真っ白）、FlashDevelopのOutputパネルにtrace出力の結果「Hello, world!」が表示される（はず）

trace出力サンプルスクリプト

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	
	/**
	 * ...
	 * @author ...
	 */
	public class Main extends Sprite 
	{
		
		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
			
			trace("Hello, world!"); // この1行を書き足す
		}
		
	}
	
}

trace出力結果（Outputパネル）

Build succeeded
Done (0)
[Capturing traces with FDB]
Hello, world! // ここにトレース結果が表示される！

プレビューに使用されるFlash Playerの違いについて (2009.07.05 06:34 追記)

コメント欄にて、プロジェクトプロパティのTest Movieの設定を変更した場合にtrace表示が行われなくなる場合がある、というコメントをいただきましたので、改めて最新の環境でテストをして、それぞれの設定を変えた場合の使用されるFlash Playerの違いについてまとめましたので追記します。普通に使う分には、上述したデフォルトの設定方法でおそらく問題ありませんので、ここはオマケ程度に読んでもらえればと思います。

プレビューに使用されるFlash Playerには主に2種類あり、上述した手順のFlex SDKに含まれるスタンドアローンタイプのデバッグ版Flash Playerを使う場合と、Internet Explorer用のFlash Playerを使う場合があります。このエントリーに書かれている方法は、手順を簡潔にするために前者だけを設定しているので、どこかで後者を使う設定に変えるとtrace表示がされなくなってしまいます。そのプレビューに使用されるFlash Playerが変わってしまう設定箇所は以下の2箇所です。

(A) ProjectメニューのProperties -> Outout -> 「Test Movie設定」（デフォルト値はPlay (FlashViewer default)）

(B) ToolsメニューのProgram Settings -> FlashViewerの「Movie Display Style設定」（デフォルト値はExternal）

この(A)と(B)の設定の組み合わせは以下の6通りになり*2、スタンドアローンタイプのデバッグ版Flash Playerを使うのは最初と最後の組み合わせだけになります。それ以外はすべてInternet Explorer用のFlash Playerが使用され、このInternet Explorer用のFlash Playerがデバッグ版ではなく通常版だとtrace表示が出なくなります。

(A)Test Movie設定	(B)Movie Display Style設定	実行されるFlash Player*3	動作
Play (FlashViewer default) 【デフォルト】	External 【デフォルト】	スタンドアローンのデバッグ版Flash Player	外部アプリ
Play (FlashViewer default) 【デフォルト】	Popup	Internet Explorer用のFlash Player	内部ウィンドウ
Play (FlashViewer default) 【デフォルト】	Document	Internet Explorer用のFlash Player	別タブ
Play in new tab	どれを選択しても同じ（影響しない）	Internet Explorer用のFlash Player	別タブ
Play in popup	どれを選択しても同じ（影響しない）	Internet Explorer用のFlash Player	内部ウィンドウ
Play in external player	どれを選択しても同じ（影響しない）	スタンドアローンのデバッグ版Flash Player	外部アプリ

というわけで、Internet Explorer用のFlash Playerでもtrace表示を行うには、デバッグ版のFlash Playerをインストールする必要があります。

• Adobe - Flash Player アップデータ
  • Windows Flash Player 10 ActiveX コントロールコンテンツデバッガ (for IE) をダウンロード (EXE, 2.03 MB)
  • Windows Flash Player 9 ActiveX コントロールコンテンツデバッガ (for IE) をダウンロード (EXE, 1.56 MB)

ブラウザーのFlash Playerにデバッグ版を入れることは、個人的にはあまり好みではありませんでした。デバッグ版は通常版と再生スピードが異なる（遅くなる）、（スタンドアローンタイプに比べて）Flash Playerの変更が容易ではない、などが理由ですが、普段はFirefoxを使ってるので、滅多に使わないInternet Explorer用なら入れちゃってもいいかなと、今回のテストを行ってみてちょっと思いましたｗ ただ、チェック用のためにユーザーが使っている環境にできるだけ近づける、ということであれば、大多数を占めるInternet Explorer ＋ 通常版Flash Playerという組み合わせは残した方が良いかもしれませんね。

ちなみに今回テストした環境は、Windows XP SP3、FlashDevelop 3.0.1 RTM、.NET Framework 3.5、Java Runtime Environment 1.6.1.4、Flex SDK 4.0.0.7219 で、スタンドアローンタイプのデバッグ版Flash PlayerはVer.10を指定、ブラウザー用のFlash PlayerはInternet Explorer用がデバッグ版のVer.9、Netscape互換用が未インストールの状態で、Adobe Flash CSシリーズなどのオーサリングソフトも未インストール状態で行いました。

参考ページ

以下のページが今回の件を調べるに当たってとても参考になりました。素敵情報に感謝。

• タロタローグ ブログ | FlashDevelopの下部にあるOutputパネルに、trace()の結果を出す方法
• Adobe Flash Player のバージョンテスト
• Adobe - Flexリソース：Flex 3 SDK インストール手順
• 米Adobe、「Adobe Flex 4 SDK」のベータ版をリリース　「Adobe Flash Builder 4」「Adobe Flash Catalyst」も同時公開：CodeZine

まとめ

このシリーズのエントリーは、「FlashDevelopの使い方」のまとめにまとめてあります。

Permalink | コメント(4) | トラックバック(7)