FlashでのActionScript 3デバッグの理解
更新日
7 June 2010
ページ ツール |
必要条件
この記事に必要な予備知識
この記事は、Adobe Flash Professional CS5を使用しているデザイナーとデベロッパーを対象としています。この記事は、Flash Professionalユーザーインターフェイスに関する基礎的な理解を前提としています。また、コードデバッグの節を十分に理解するには、ActionScript 3の構文に関する多少の知識が必要です。
ユーザーレベル
中級
必要な製品
- Flash Professional CS5 (Download trial)
- Flash Builder 4 (Download trial)
サンプルファイル
- as3_debugging_issues_cs5.zip (138 KB)
デバッグとは、既知の問題をアプリケーションから取り除くか、または未知のエラーやパフォーマンスの問題を発見するためにテストする作業のことです。最終的には、プロジェクトの成否はこのプロセスで決まるのが普通です。この記事は、デバッグプロセスについて説明し、Adobe Flash Professional CS5のActionScript 3環境での開発で一般的に起きる問題を紹介することを目的としています。
この記事の内容とワークフローのヒントは、デザイナーとデベロッパーの両方を対象としています。読者にとっての課題は、問題を発見して解釈し、エラーに対処する作業に慣れ、発生したエラーを解決するためのワークフローを定義することです。作業する環境はFlash Professional CS5であり、Adobe Flash Builder 4との新しい統合機能についても紹介します。
注意：Flash CS4をまだお使いの場合は、この記事の前バージョンFlashでのActionScript 3デバッグの理解 CS4 Professionalを参照してください。
プロセスを自分の目で理解していただくために、一連のサンプルファイルを用意しました。それぞれに、エラーのあるバージョンと修正されたバージョンが提供されています。修正バージョンが参考用に提供されていますが、解決法はこの記事の中で解説されています。
エラーとは何か、なぜエラーはなくならないか
筆者がActionScript 3を使い始めたときに最初に気づいたことの1つは、出力エラーに関してはActionScript 2よりもはるかに厳しいということでした。これは結局はよいことであり、筆者はこれに慣れ、自分の利益にすることができました。それでも、ActionScript 2での作業とは勝手が違うことは事実です。
この節では、Adobe Flash Playerで発生する問題のタイプと、Flash Professionalワークスペースでそれらがどのように現れるかについて、概要を紹介します。
ActionScript 3環境の理解
ActionScript 3アーキテクチャは、新しいエンジン（ActionScript Virtual Machine 2）で動作します。このエンジンでは、Adobe Flashの旧バージョンで蓄積された問題の多くが除去されています。これはきわめて大きなアップデートなので、Flash Player 9以降で表示できる新しいファイル形式が必要です。
この新しいActionScriptエンジンの技術的概要については、次の記事を参照してください。
- ActionScript Virtual Machine 2（AVM2）の概要 （PDF、400 KB）
Flash Professional CS5では、ActionScript 3環境は2つの部分に存在します。ActionScript 3 FLAファイルと、ActionScript 3プログラミング言語です。
デフォルトでは、Flash Professionalで新規ファイルを作成する場合、ActionScript 3 FLAファイルで作業します。ファイル中の要素の見かけと、一般的な操作は、ActionScript 2 FLAファイルと同様ですが、ActionScript 3 FLAを扱う場合、ActionScript 3の機能を表示できるように、Flash Professionalワークスペースが更新されます。最もわかりやすいのは、コンポーネントパネルのコンポーネントのセットが違っていることです。
ActionScript 3 FLAファイルを扱う場合、アセットの管理とシンボルの作成の作業はActionScript 2の場合と同じですが、コーディングの規則が少し違います。コードは、タイムライン上のキーフレームに追加することも、外部ActionScriptファイルを使用してメインタイムラインまたはシンボルにリンクすることもできます（コードをステージ上のインスタンスに添付することはできなくなりました）。
ムービーをパブリッシュする場合、ActionScriptコードはSWFファイルにコンパイルされます。ActionScript 3コンパイラーは、ActionScriptコードを処理する際に、すべてのコード構造とコード割り当てが、ActionScript 3言語の厳密な規則に一致することを確認します。
ムービーをパブリッシュする際に、多くの場合はコンパイル時エラーに対処する必要があります。
エラーとは何か
エラーとは、ActionScript言語とコンパイラープロセスに組み込まれた通知です。エラーには3つの種類があります。コンパイラーエラー、ランタイムエラー（ActionScript例外またはエラーイベント）、警告です。
コンパイラーエラーは、ファイルがパブリッシュされ、ActionScriptがSWFファイルにコンパイルされるときに発生します。コンパイラーエラーは、ActionScriptコードが最適かつ正常に動作するための規則を適用するものです。コンパイラーエラーが発生した場合、エラーを除去しない限りSWFファイルは書き出されません。
ランタイムエラーは、コンパイルの後、再生中に問題が発生したときに、ActionScriptオブジェクトから発生するものです。ランタイムエラーは、エラー記述オブジェクトを含むエラーイベントまたはActionScript例外の形で発生します。Flash Playerは、ランタイムエラーを無視して、エラーをバックグラウンドに隠したまま先に進もうとします。しかし、致命的エラーが発生した場合は、出力パネルにメッセージを表示して、ムービーの再生を停止します。
警告は、コンパイル時に表示されますが、通常はムービーの書き出しや再生を停止しません。
エラーと警告の解釈方法
最初の段階は、Flash Professionalで表示される視覚的フィードバックの種類を理解することです。エラーは、ワークスペースに次の2つの方法で表示されます。
- 出力パネル
- コンパイラーエラーパネル
出力パネルとコンパイラーエラーパネルは、どちらもFlash Professionalワークスペースに表示されます。筆者は通常、2つのパネルを1つのグループにして、セカンドモニターの端にドラッグしておきます。その理由は、コンパイラーエラーと自分で指定したトレースアクション出力は開発中に頻繁に見ることになるので、邪魔されずに見えるところにパネルを常に置いておきたいからです。
どれかの形式のエラー情報が表示されたら、必ず関連するエラーテキストに目を通してください。テキストは意味不明に見えるかもしれませんが、進むべき方向を示す何らかの手がかりが得られるのが普通です。また、ファイルのタイミングのどこにいるかも確認します。バグ報告とデバッグの重要な要素として、問題とそこに至るまでの過程を正確に定義することが挙げられます。
コンパイラーエラー
コンパイラーエラーは、多くの場合ランタイムエラーよりも対処が容易です。パブリッシュ時に明確に確認でき、問題の原因の場所が行番号で示されるからです。コンパイラーエラーは、ActionScriptコードがSWFファイルにコンパイルされるときに発生します。これは、「Test Movie（ムービーをプレビュー）」コマンドまたは「Publish（パブリッシュ）」コマンドを使用した場合に起こります（図1を参照）。
エラータイプの一覧については、ActionScript 3 Reference for the Adobe Flash PlatformのCompiler Errorsを参照してください。
ランタイムエラー
ランタイムエラーは、パブリッシュされたSWFファイルが、デバッグプレーヤー、スタンドアロンプレーヤー、またはActiveXプレーヤーで動作しているときに起こります（図2を参照）。ランタイムエラーは、通常、アプリケーションで何か異常が発生したことを通知するために発生します。エラーを処理しないと、Flash Playerはエラーを無視してスクリプトの実行を続けようとしますが、場合によってはSWFファイルの再生が停止し、予測できない視覚的効果が発生する可能性があります。
詳細については、ActionScript 3 Reference for the Adobe Flash PlatformのRuntime Errorsを参照してください。また、ランタイムエラーの概念のより詳しい解説については、ActionScript 3.0開発ガイドのエラー処理の基礎を参照してください。
警告
警告は、SWFをパブリッシュする際に表示されるもので、ActionScriptのルール違反が発生しているが、エラーを起こすほど重大なものではないことを示します（図3を参照）。よくある警告としては、変数名の重複や、古いコンテンツの移行の際に発生する問題などがあります。
詳細については、ActionScript 3 Reference for the Adobe Flash PlatformのCompiler Warningsを参照してください。
パフォーマンスの問題
ActionScriptエラーやコンパイラーエラーとは技術的には無関係ですが、パフォーマンスを評価し、パフォーマンスの問題に対処することも、デバッグ作業の一部です。このテーマはデザイナーにもプログラマーにも関係がありますが、問題に対するそれぞれの観点は異なります。
パフォーマンスに関する一般的な問題には、次のものがあります。
- Flash Playerでのムービークリップのオーバーロード
- ベクトルの使用とビットマップキャッシュ
- Flash Player 9、10でのハードウェアアクセラレーション
- コンテンツのロードとガベージコレクション
SWFファイルのオーバーロードの最も一般的な原因は、ムービークリップの数が多すぎることや、オーバーラップしたアニメーションベクトルの数が多すぎることです。ActionScript 3ではムービークリップの効率が向上しており、数百個のムービークリップを同時に使用することも可能ですが、筆者自身の経験では、ベクトルグラフィックスのオーバーロードによって、プレーヤーがスムーズに再生できなくなる場合があるようです。解決法としては、グラフィックスのオーバーラップ、画面上のアニメーションのサイズと数、使用している不透明度のレベルに問題がないかどうかを確認します。コンテンツを単純化し、Flash PlayerのBitmapDataクラスまたはビットマップキャッシュ機能を使用してラスター最適化を追加することで、パフォーマンスを改善できる場合があります。
もう1つパフォーマンスの問題が発生しやすいのは、Flash Playerのハードウェアアクセラレーション機能をフルスクリーンレンダリングで使用する場合です。最近のコンピューター、特にHDビデオ再生に対応したコンピューターは、一般的にハードウェアアクセラレーションをうまく処理します。これに対して、古いビデオカードを搭載したコンピューターでは、Flash Playerがコンピューターのビデオハードウェアを利用して画像のスケールを変更しようとした場合に、問題が発生することがあります。症状としては、フルスクリーンモードでの再生中に、グラフィックの歪み、画面のフリーズ、フレームレートの変動などが生じることがあります。ユーザー側での回避策は、Flash Playerの設定ダイアログボックスで、ハードウェアアクセラレーションをオフにすることです。
ハードウェアアクセラレーションに関する問題の詳細については、この問題に関するTinic Uroのブログの記事を参照してください。
最後に触れておく必要があるのは、コンテンツのロードとキャッシュに関する問題です。Flash Playerは、ガベージコレクションルーチンを使用しており、コンテンツをアンロードする際にこれが問題を起こす場合があります。ガベージコレクションは、Flash Player内部のプロセスの1つで、既に使用されていないコンテンツをメモリから解放する役割を果たします。問題は、コンテンツに対する参照が存在する限り、Flash Playerはそのコンテンツが使用されていると判断することです。これは、サウンド、ビデオといったメディアや、ネストしたSWFファイル内のコンテンツに影響があります。例えば、サウンドまたはビデオの再生中にそれを含むSWFファイルをアンロードすると、SWFファイルが画面から削除された後でも、サウンドの再生が止まらないことがあります。この問題の解決法は、SWFファイルをアンロードする前にサウンドを停止するか、LoaderオブジェクトのunloadAndStop API（Flash Player 10以降）を使用することです。unloadAndStopコマンドを使用すると、Flash PlayerはSWFファイルをアンロードする際にメディアをメモリから削除します。
ガベージコレクションは、アプリケーションのパフォーマンスに影響します。推奨される方法としては、オブジェクトを削除する前にそのオブジェクトへのすべての参照を削除するようにします。これには、オブジェクトに割り当てられているすべてのイベントリスナーの削除が含まれます。
Flash Playerのバグ
Flash Player開発チームは、Flash Playerの機能、パフォーマンス、セキュリティの改善を続けています。ときによっては、Flash Playerのバグや既知の問題が表面に現れることがあります。このような状況に対処する最善の方法は、バグを特定して記述するためのプロセスを開発して、問題が自分のファイルにあるのかFlash Player自体にあるのかを識別できるようにすることです。問題を発見した場合、筆者は通常コミュニティで関連する投稿を探します。他の人も同じ問題に直面して解決できないでいる場合は、アドビの公式テクニカルノートやバグレポートを検索します。
プレーヤーの既知の問題が原因であることがわかった場合は、回避策を探すか、ドキュメンテーションの問題として問題を扱うのが通常は最善です。ほとんどの場合、Flash Playerがバージョンアップデートを繰り返す間に、バグは修正されます。
既存のバグの検索と新しいバグの報告に関する詳細については、Introducing the Flash Player bug and issue management systemの記事を参照してください。
デザイナーのためのデバッグのヒント
筆者はほとんどの時間をテキストエディターでActionScriptコードを書いて過ごしていますが、筆者のActionScriptファイルはすべて、ActionScript 3 FLAファイルとドキュメントライブラリに結び付けられています。プロジェクトの開始は常に、グラフィックスの作成と、ライブラリへのアセットの組織化から始まります。したがって、そのとき行っている作業に応じて、筆者の職種はActionScriptプログラマーとユーザーインターフェイスデザイナーの間を行ったり来たりします。
ActionScript 3 FLAファイルをデバッグする際には、UIデザイナーの観点から注意すべき問題がいくつかあることに、筆者は気づきました。最も重要なのは、ほとんどの場合、ActionScript 3環境の想定事項と、コードをどこに配置すべきかを理解することです。また、ActionScript 1/2からActionScript 3にファイルをアップグレードする場合、移行の問題に対処する必要があるのが普通です。
この節では、ActionScript 3 FLAファイルのアセットを扱う際に起きる問題の種類の概要について、特にActionScriptの旧バージョンからの移行の問題に焦点を当てて説明します。
デザイナーが直面する一般的な問題
デザイナーの役割は、一般的にアセットの管理やFLAファイルの作成が中心で、複雑なコーディング構文を扱うことはあまりありません。それでも、デザイナーの仕事の中には、コードに関する多少の知識を必要とするプログラミング要件や概念が含まれています。
デザインの観点から最も一般的に見られる問題として、次のものが挙げられます。
- コード配置エラー
- コードをインスタンスに置くことは現在は不可
- ボタンとムービークリップに関するエラー
- インスタンス名の欠落
- インスタンス名の誤り
- インスタンス名とフレームスクリプト変数名の衝突
- 間違った場所にあるイベント処理コード
- テキストフィールドに関するエラー
- Variableフィールドは現在非サポート
- URLフィールドは現在非サポート
- コンポーネントに関するエラー
- UILoaderおよびFLVPlaybackコンポーネントでのロードエラー
- FLVPlaybackコンポーネントでのビデオエラー
- ActionScript割り当てに関するエラー
- 読み込んだクラスの使用可能性
- 変数宣言の欠落、名前の衝突、データ型の問題
- シンボルプロパティでシンボルのリンクがクラスフィールドで置き換えられた
- パフォーマンスの問題
- 旧バージョンのActionScriptからの移行の問題
ActionScript 3での変更
ActionScript 3環境では、すべてのコーディングワークフローが標準化されており、そのためにActionScriptの旧バージョンの不整合性が多数取り除かれています。これは最終的にはよいことですが、FLAファイルのセットアップの際に、これまでなじんでいた方法を変えなければならない場合もあります。
デザイナーの観点からみて最も重要な変更は次のとおりです。
- コードをムービークリップやボタンインスタンスに置くことはできなくなりました。ActionScript 3では、コードはすべてタイムライン上のキーフレームに置くか（フレームスクリプト）、外部ActionScriptファイルに置く（ActionScriptクラス）必要があります。
- イベント処理構造が変更されました。これにより、ボタンやムービークリップのコードを扱う方法が変わります。ボタンやムービークリップへのイベントハンドラー関数の割り当て方法が変わりました。コードをステージ上のインスタンスに添付することはできなくなりました。その代わりに、
addEventListenerメソッドを使用して、すべてのオブジェクトに一貫した方法でリスナーを割り当てます（この方法の利点はすぐには見えにくいかもしれませんが、このほうがはるかに柔軟性の高い方式です）。 - Flash CS5でのタイムラインのビジュアルな作業は、基本的に以前と変わりませんが、ActionScript 3プログラミングでは、タイムラインが表示リストとして概念化されるようになりました。ActionScriptでインスタンスを扱う場合、タイミングと表示リストの使用に注意を払う必要があります。
- ActionScript 3ではシンボルのリンクは廃止されました。シンボルプロパティに、識別のための固有のクラス名（またはクラス参照）を指定できるようになりました。Symbol Properties（シンボルプロパティ）ダイアログボックスで、シンボルにActionScriptクラスを割り当てることができます。また、メインタイムラインのStage（ステージ）プロパティに関連するDocument（ドキュメント）クラスフィールドに、ActionScriptクラスを割り当てることもできます。
デバッグツール
Flash Professional CS5には、ファイルアセットを管理し、問題のある場所を探すのに役立つ、いくつかのツールが用意されています。
- Flash Professionalワークスペース、アクションパネル、トレースアクション
- ムービーエクスプローラーパネル
- デバッグコンソール、変数パネル、デバッグメニュー
- 「Test Movie（ムービーをプレビュー）」コマンドとBandwidth Profiler（プロファイラー）
Flash Professionalワークスペースでは、ファイルを調べることができます。アセットを検索するには、ムービーエクスプローラーパネルを使用します（図4を参照）。デバッグパネルを使用すると、ActionScript変数や関数に関する問題を調査できます。
作業結果をプレビューし、エラーをチェックする最も高速な方法は、Control（コントロール）／Test Movie（ムービーをプレビュー）コマンドを使用することです。デバッグパネルにSWFファイルが表示されたら、View（ビュー）／Bandwidth Profiler（プロファイラー）オプションを選択して、SWFファイルのプロファイル情報の概要を見ることができます（図5を参照）。
ヒント：やはりSWFファイルのView（表示）メニューで使用できる「Simulate Download（ダウンロードのシミュレート）」および「Simulate Streaming（ストリーミンググラフ）」オプションは、あまり正確ではありません。ベンチマークテストは、サーバー上でファイルを実際に動作させて行うのが最善です。
デバッグのワークフロー
ファイルのバグや問題への対処は、デザイナーの日常の作業の一部です。このための組織的な方法を持ち、問題に対処する時間をスケジュールに組み込んでおくことが重要です。
デザインの観点から見た一般的なワークフローには、次のような作業が含まれます。
- 問題の特定（どんな問題か）
- 問題の原因の発見（どこで発生するか）
- 関連ドキュメントの調査と解決のためのオプションの定義。
- 問題領域を別ファイルに再構築（必要な場合）
- 解決策の適用と作業結果のテスト（「Test Movie（ムービーをプレビュー）」とBandwidth Profiler（プロファイラー）を使用）
ヒント：筆者の経験では、新しいファイルで問題を解決する方が、複雑なプロジェクトの細部に迷い込むことがないので、時間を節約できます。問題を定義した後、別ファイルでサンプルを正常に動作させ、動作した結果をプロジェクトに統合します。
デザイナーのためのデバッグのサンプル
以下のサンプルは、ActionScript 1または2からActionScript 3形式にファイルを移行する際の一般的なワークフローを紹介するためのものです。付属のファイルには、各サンプルのActionScript 2バージョンの他に、ActionScript 3バージョンがsolutionsフォルダーにあります。
以下の手順では、各ActionScript 2 FLAファイルをActionScript 3形式に移行する作業を行います。その過程で、エラーを発見し、その原因を見つけ、問題を解決します。
初めに、以下の手順を実行します。
- まだファイルをダウンロードしていない場合は、最初のページからas3_debugging_issues_cs5.zipファイルをダウンロードします。
- デスクトップ上にファイルを展開します。以下の手順では、付属のファイルのいくつかを開くように求められます。
- 完成したファイルを見たい場合は、solutionフォルダーの下にあるファイルを開きます。
サンプル1：変数の移行
ActionScript 3環境では、タイムライン上であっても、すべての変数インスタンスをvarキーワードで宣言する必要があります。これは簡明な考え方ですが、ActionScriptの以前のバージョンではこれは要求されていませんでした。
このサンプルでは、varキーワードを追加するほかに、データの型付けと、rootおよびstageオブジェクトを参照する新しい方法について説明します。
以下の手順で、旧形式のフレームコードを含むActionScript 2ファイルを更新します。
- Flash Professional CS5でdesigner_sample1.flaファイルを開きます。
- 「Test Movie（ムービーをプレビュー）」を実行して、動作するActionScript 2ファイルを表示します。メインタイムラインのコードは、単に画像を変形して、ステージの中央に配置するだけです。
- SWFファイルを閉じます。
- ファイルをActionScript 3形式に変換するために、File（ファイル）／Publish Settings（パブリッシュ設定）を選択します。Publish Settings（パブリッシュ設定）ダイアログボックスで、「Flash（Flash）」タブをクリックして、「Script（スクリプト）」メニューを「ActionScript 3（ActionScript 3）」に変更します。「OK」をクリックします。
- 「Test Movie（ムービーをプレビュー）」をもう一度実行します。コンパイラーエラーパネルにコンパイラーエラーといくつかの警告が表示され、SWFファイルはロードできません。
Symbol 'Circle', Layer 'actions', Frame 1, Line 2 1120: Access of undefined property _root.
- 最初に必要なのは、1つめのエラーを起こしている_rootへの参照を修正することです。「Location（場所）」フィールドから、ソースがCircleシンボルのタイムラインの2行目にあることがわかります。ステージ上のCircleインスタンスをダブルクリックしてそのタイムラインに入り、タイムラインの最初のフレームのアクションキーフレームを選択します。ルートまたは親への参照を使用することもできますが、この方法はActionScript 3ではあまりうまくいきません。よりよい方法は、インスタンスのサイズと位置を設定するところで、インスタンスのアルファプロパティをメインタイムラインのコードから設定することです。2行目のコードをコメントアウトするか削除し、メインタイムラインに戻ります。
- 残りのエラーと警告の行まで移動します。メインタイムラインのアクションキーフレームを選択します。ActionScript 3では、ムービークリップのプロパティの先頭は下線文字（_）ではなくなりました。x、y、width、heightの各プロパティの頭から下線文字を削除します。
- 「Test Movie（ムービーをプレビュー）」をもう一度実行します。コンパイラーエラーパネルに新しい一群のエラーが表示されます。今度は、解決すべき問題が2つ増えていることがわかります。第1に、タイムライン上のすべての変数はvarキーワードで宣言する必要があります。第2に、ステージの高さと幅への参照がActionScript 3で正しい形式になっていません。
Scene 1, Layer 'actions', Frame 1, Line 2 1120: Access of undefined property ovalWidth.
Scene 1, Layer 'actions', Frame 1, Line 3 1120: Access of undefined property ovalHeight.
Scene 1, Layer 'actions', Frame 1, Line 4 1120: Access of undefined property ovalAlpha.
Scene 1, Layer 'actions', Frame 1, Line 7 1120: Access of undefined property ovalWidth.
Scene 1, Layer 'actions', Frame 1, Line 8 1120: Access of undefined property ovalHeight.
Scene 1, Layer 'actions', Frame 1, Line 9 1119: Access of possibly undefined property width through a reference with static type Class.
Scene 1, Layer 'actions', Frame 1, Line 9 1120: Access of undefined property ovalWidth.
Scene 1, Layer 'actions', Frame 1, Line 10 1119: Access of possibly undefined property height through a reference with static type Class.
Scene 1, Layer 'actions', Frame 1, Line 10 1120: Access of undefined property ovalHeight.
Scene 1, Layer 'actions', Frame 1, Line 11 1120: Access of undefined property ovalAlpha.
- コードを次のように更新します。
// Settings
var ovalWidth:Number = 400;
var ovalHeight:Number = 100;
var ovalAlpha:Number = .5; // Notice that alpha ranges from 0 to 1
// Set size
circle_mc.width = ovalWidth;
circle_mc.height = ovalHeight;
circle_mc.x = (stage.stageWidth - ovalWidth) / 2;
circle_mc.y = (stage.stageHeight - ovalHeight) / 2;
circle_mc.alpha = ovalAlpha;
- 「Test Movie（ムービーをプレビュー）」をもう一度実行します。エラーはもう起きないはずです。これでファイルをActionScript 3構文に更新できました。
サンプル2：ボタンとムービークリップのコード配置の移行
ActionScript 3より前には、ボタンのイベント処理コードやムービークリップのイベント処理コードを、対象のインスタンスに直接配置するのが普通でした。この方法の問題点は、コードが様々なオブジェクトに散らばって見つけにくくなることです。
ActionScript 3では、この問題を解決するため、オブジェクトインスタンスにコードを配置できないようにしています。この考え方は非常に簡明ですが、古いファイルを更新する場合や、単にActionScript 3環境を理解しようとしている場合には、困難の元になります。
インスタンスに添付されているコードを含むActionScript 2ファイルを更新するには、次の手順を実行します。
- Flash Professional CS5でdesigner_sample2.flaファイルを開きます。
- 「Test Movie（ムービーをプレビュー）」を実行して、動作するActionScript 2ファイルを表示します。2個のボタンをクリックして、円のアニメーションを開始したり停止したりできることを確認します。
- SWFファイルを閉じます。
- ファイルをActionScript 3形式に変換するために、File（ファイル）／Publish Settings（パブリッシュ設定）を選択します。Publish Settings（パブリッシュ設定）ダイアログボックスで、「Flash（Flash）」タブをクリックして、「Script（スクリプト）」メニューを「ActionScript 3（ActionScript 3）」に変更します。「OK」をクリックします。
- 「Test Movie（ムービーをプレビュー）」をもう一度実行します。出力パネルに警告が表示されることを確認します。
Warning: Actions on button or MovieClip instances are not supported in
ActionScript 3. All scripts on object instances will be ignored.
- この警告は、インスタンスに配置されているコードが無視されることを明確に示しています。最初に必要なのは、コードがどこにあるかを見つけることです。このサンプルは単純なので、単にステージ上のオブジェクトをクリックして、アクションパネルを表示するだけでも見つかります。もっと複雑なファイルの場合は、ムービーエクスプローラーパネルを開いて、メインタイムラインまたはライブラリ内のアイテムでコード配置を探します。どちらかの方法で、ムービークリップインスタンスと各ボタンインスタンスに配置されたコードを見つけ、アクションパネルからActionScriptを削除します。
- メインタイムラインに新規レイヤーを追加し、「actions」という名前を付けます。
- actions レイヤーのキーフレームを選択し、アクションパネルを開きます。パネル下部のピンのアイコンをクリックして、スクリプトをピン留めします。
- スタートボタンをクリックし、コードをクリップボードに切り取ります。アクションパネルにコードを貼り付けます。ストップボタンとムービークリップに対しても同じ手順を実行します。
- この時点で、ActionScript 3構文でコードを書き直す必要があります。その前に、ステージ上の各インスタンスの名前が、start_btn、stop_btn、circle_mcであることを確認します。
- アクションパネルに戻って、スクリプトを次のコードに更新します。
var animate:Boolean = false;
var speed:Number = 10;
// Enterframe...
function enterFrameHandler(event:Event)
{
if( animate ){
circle_mc.x += speed;
if( circle_mc.x >= stage.stageWidth ){
circle_mc.x = -circle_mc.width;
}
}
}
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
// Button events
function clickHandler(event:MouseEvent)
{
if( event.target == start_btn ){
animate = true;
}else if( event.target == stop_btn ){
animate = false;
}
}
start_btn.addEventListener(MouseEvent.CLICK, clickHandler);
stop_btn.addEventListener(MouseEvent.CLICK, clickHandler);
- 「Test Movie（ムービーをプレビュー）」を実行します。ActionScript 3用に更新されたコード構文とコード配置で、ボタンとアニメーションが動作しているのが見られるはずです。
サンプル3：テキストフィールド変数とリンク設定の移行
テキストフィールドオブジェクトでの変数とリンクフィールドの使用は、Macromedia Flash 5以降使用不可になりましたが、古いコンテンツファイルの移行の際に、この機能に関する問題を今でも見ることがあります。
以下の手順で、旧形式のテキストフィールドを含むActionScript 2ファイルを更新します。
- Flash Professional CS5でdesigner_sample3.flaファイルを開きます。
- 「Test Movie（ムービーをプレビュー）」を実行して、動作するActionScript 2ファイルを表示します。ボタンをクリックすると、テキストフィールドのテキストが更新されることを確認します。ブラウザーでSWFファイルを表示した場合、フィールドをクリックして埋め込まれたリンクを動作させることができます。
- SWFファイルを閉じ、FLAファイルを調べてみてください。
- ファイルをActionScript 3形式に変換するために、File（ファイル）／Publish Settings（パブリッシュ設定）を選択します。Publish Settings（パブリッシュ設定）ダイアログボックスで、「Flash（Flash）」タブをクリックして、「Script（スクリプト）」メニューを「ActionScript 3（ActionScript 3）」に変更します。「OK」をクリックします。
- 「Test Movie（ムービーをプレビュー）」をもう一度実行します。出力パネルに警告が表示されることを確認します。
Warning: Text field variable names are not supported in ActionScript 3.
The variable buttonState used for an unnamed text field will not be exported.
Warning: Actions on button or MovieClip instances are not supported in
ActionScript 3. All scripts on object instances will be ignored.
- 警告を見ると、2つの問題が起きていることがわかります。第1に、テキストフィールドインスタンスでサポートされない機能が使用されています。第2に、イベントコードがボタンに直接配置されています。
- テキストフィールドの形式を更新するために、フィールドを選択して、プロパティインスペクターでプロパティを変更します。フィールドのText（テキスト）タイプを「Dynamic（動的）」から「Static（静的）」に変更し、「Dynamic（動的）」に戻します。これにより、フィールドに関連付けられた変数とリンクデータがクリアされます。
<Instance Name>フィールドでフィールドにインスタンス名status_txtを割り当てます。 - 「Character Style（文字スタイル）」フィールドの隣の「Embed（埋め込み）」ボタンをクリックし、「Basic Latin（基本ラテン）」オプションをチェックしてArialタイプフェースを埋め込みます。この手順は、埋め込みに関する警告を避けるためです。
- スタートボタンを選択し、アクションパネルでコードを削除します。プロパティインスペクターでボタンインスタンスの名前をstart_btnに設定します。
- ストップボタンを選択し、コードを削除します。インスタンス名をstop_btnに設定します。
- メインタイムラインに新規レイヤーを追加し、「actions」という名前を付けます。
- actionsレイヤーのキーフレームを選択し、アクションパネルに次のコードを入力します。
// Button clicks set text field
function clickHandler(event:MouseEvent):void
{
if( event.target == start_btn ){
status_txt.text = "Start";
}else if( event.target == stop_btn ){
status_txt.text = "Stop";
}
}
start_btn.addEventListener(MouseEvent.CLICK, clickHandler);
stop_btn.addEventListener(MouseEvent.CLICK, clickHandler);
// Text clicks launch link in browser
function textClickHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.adobe.com"),"_blank");
}
status_txt.addEventListener(MouseEvent.CLICK, textClickHandler);
- 「Test Movie（ムービーをプレビュー）」を実行します。ファイルはエラーを起こさずに動作し、ボタンをクリックするとテキストフィールドが更新されるはずです。テキストフィールドをクリックすると、アドビのサイトが開きます。
サンプル4：リンク設定とシンボルのインスタンス化の移行
ActionScript FLAファイルでは、シンボルのリンク識別子フィールドは使用できません。その代わりに、シンボルプロパティの「Class（クラス）」および「Base Class（基本クラス）」フィールドで、同様のプロセスが用いられます。
以下の手順で、旧形式のリンク識別子を含むActionScript 2ファイルを更新します。
- Flash Professional CS5でdesigner_sample4.flaファイルを開きます。
- 「Test Movie（ムービーをプレビュー）」を実行して、動作するActionScript 2ファイルを表示します。どちらかの円をクリックして、ステージ上でドラッグできることを確認します。このサンプルでは、ドラッグ機能は外部ActionScriptクラス（Circle.as）で定義され、シンボルのリンク識別子プロパティを通じてライブラリ内のCircleシンボルに割り当てられています。
- SWFファイルを閉じ、FLAファイルを調べてみてください。
- ファイルをActionScript 3形式に変換するために、File（ファイル）／Publish Settings（パブリッシュ設定）を選択します。Publish Settings（パブリッシュ設定）ダイアログボックスで、「Flash（Flash）」タブをクリックして、「Script（スクリプト）」メニューを「ActionScript 3（ActionScript 3）」に変更します。「OK」をクリックします。
- 「Test Movie（ムービーをプレビュー）」をもう一度実行します。出力パネルに次のエラーが表示されるはずです。
5007: An ActionScript file must have at least one externally visible definition.
- 最初に解決する必要がある問題は、Circle.asクラスがActionScript 2構文で書かれているために、ActionScript 3コンパイラーでエラーを発生していることです。Flash ProfessionalでCircle.asを開き、しばらくファイルを調べてみてください。
- 新規ActionScriptファイルを作成し、次のコードをその中に貼り付けます。
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
public class CircleAS3 extends MovieClip
{
//******************
// Constructor:
public function CircleAS3()
{
trace("INIT: "+this.name);
addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
}
//******************
// Events:
private function addedToStageHandler(event:Event):void
{
addEventListener(MouseEvent.MOUSE_DOWN, onPressHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, onReleaseHandler);
}
private function onPressHandler(event:MouseEvent):void
{
this.startDrag(false);
}
private function onReleaseHandler(event:MouseEvent):void
{
this.stopDrag();
}
}
}
- コードを比較してみてください。クラス構文とイベントハンドラーの割り当てに違いがあるのがわかるはずです。
- FLAファイルと同じフォルダーに、CircleAS3.asという名前でファイルを保存します。
- ライブラリでCircleシンボルを右クリックし、「Properties（プロパティ）」オプションを選択して、Symbol Properties（シンボルのプロパティ）ダイアログボックスを開きます。拡張オプションが表示されていなければ、「Advanced（拡張）」ボタンをクリックして表示します。ActionScript 2.0のリンク識別子フィールドが無効になっているはずです。ActionScript 3.0の「Class（クラス）」フィールドをCircleAS3に変更します。これは、先ほど作成したActionScript 3クラスを指しています。
- 「Test Movie（ムービーをプレビュー）」をもう一度実行します。今度は、メインタイムラインのフレーム1のコードに関する一連のエラーが表示されるはずです。動的に作成されたインスタンスの名前が宣言されておらず、
attachMovieメソッドとgetNextHighestDepthメソッドはActionScript 3には存在しません。このスクリプトは変更が必要です。
Scene 1, Layer 'actions', Frame 1, Line 4 1120: Access of undefined property circle1_mc.
Scene 1, Layer 'actions', Frame 1, Line 5 1120: Access of undefined property circle1_mc.
Scene 1, Layer 'actions', Frame 1, Line 10 1120: Access of undefined property circle2_mc.
Scene 1, Layer 'actions', Frame 1, Line 11 1120: Access of undefined property circle2_mc.
- メインタイムラインのフレーム1のコードを、次のスクリプトに変更します。
attachMovieコマンドは新しいキーワードで置き換えられています。シンボルインスタンスを含むすべてのインスタンスは、この方法で作成されるようになりました。
// Create first clip
var circle1_mc:MovieClip = new CircleAS3();
circle1_mc.x = 100;
circle1_mc.y = 50;
addChild(circle1_mc);
// Create second clip
var circle2_mc:MovieClip = new CircleAS3();
circle2_mc.x = 300;
circle2_mc.y = 50;
addChild(circle2_mc);
- 「Test Movie（ムービーをプレビュー）」をもう一度実行します。今度は、ムービーはエラーを起こさずに書き出されるはずです。
ヒント：ActionScript 3言語では、作業が標準化されています。ActionScriptのすべてのオブジェクトの新しいインスタンスは、新しいキーワードによって作成されます。attachMovieコマンドとcreateEmptyMovieClipコマンドを使用して、ムービークリップインスタンスを動的に作成することはできなくなりました。
デベロッパーのためのデバッグのヒント
プロジェクトをデバッグするためには、ActionScript 3 FLAファイル環境を理解する必要がありますが、仕組みがわかればそれほど難しいことではありません。大量のコードを使用する場合、ほとんどの時間をActionScript関連の問題のデバッグに費やすことになります。
この節では、Flash ProfessionalでActionScript 3プログラミング言語を扱う際に起きる問題の種類の概要を説明します。
ActionScriptデベロッパーが出会う一般的な問題
ActionScript 3デベロッパーは、開発の過程でエラーや警告に何度も出会います。エラーや警告を恐れる必要はありません。落ち着いて、開発過程で起きる問題をアプリケーションが見つけてくれたことを喜んでいればいいのです。
一般的に起きるエラーや警告は、次のような問題に関連しています。
- コンパイル時エラーとランタイムエラー
- フレームスクリプトエラーとActionScriptクラスエラー
- nullおよび未定義データエラー
- 型エラー
- CPU関連の問題、ガベージコレクションの問題
注意：Flash PlayerでのCPUの問題とガベージコレクションの詳細については、Grant Skinnerの記事Understanding garbage collection in Flash Player 9を参照してください。
エラーの回避と発生したエラーの処理のための推奨手順
ActionScriptコードでエラーを処理するために、いくつかの技法が使用できます。適切なエラー処理を実装することで、アプリケーションのパフォーマンスとユーザーの体験を改善できます。
- 作業結果は常にテストします。
- 可能な限りエラーイベントをリッスンします。
- try catchステートメントでActionScript例外を処理します。
言うまでもないことかもしれませんが、ActionScriptコードを作成する際には「Test Movie（ムービーをプレビュー）」コマンドをなるべく多く実行するようにします。各行ごとにテストを行えば、問題の発見が容易になります。ActionScript 3言語の仕組みに慣れるにつれて、だんだんとテストの頻度を減らせるようになります。
ActionScriptのオブジェクトは、エラーイベントまたはActionScript例外を通じてエラーを通知します。エラーやステータス変化に関するイベントは、できる限りリッスンするようにします。それによってアプリケーションのクラッシュを防げるだけでなく、イベントが発生したタイミングを利用して、問題が起きたときの適切な対応をユーザーに提供できます。
エラーイベントが使用できない場合は、try catchステートメントを使用してActionScriptエラーを処理できます。そこで、「try catchステートメントはどの程度の細かさで使用すればいいのか」という疑問が浮かぶかもしれません。デベロッパーによって、この機能を多用する人も、全く使用しない人もいます。筆者自身は、問題のある領域の前後にtry catchステートメントを置くのが普通です。
デバッグツール
ActionScriptプログラマーには、アプリケーションのテストやデバッグに関して創造性を発揮する人が多いようです。Flash Professional CS5ワークスペースでは、次のツールが使用できます。
- Flash Professional CS5ワークスペース
- Flash Builder 4ワークスペース
ActionScriptデバッガーパネルとFlash Professionalのデバッグワークフローの詳細については、Peter Elstの記事Introducing the ActionScript 3 debuggerを参照してください。
Flash Professionalワークスペースの他に、ActionScriptデベロッパーはFlash BuilderデバッグツールスイートもActionScriptプロジェクトに使用しています。Flash Builder 4は、Flashコンテンツを、Flex SDKプロジェクト、ActionScriptプロジェクト、またはFlash Professionalプロジェクトの形式で構築してデバッグするためのツールです。Flash Professional CS5とFlash Builder 4の間の新しい開発およびデバッグワークフローは、コードをFlashムービーに統合する作業を効率化し、デバッグのためのさらに強力なオプションを提供します。Flash Builderのワークフローについては、この記事の最後で詳しく説明します。
Flash Builderプロジェクトの概要については、Flash Builder 4オンラインドキュメントのFlash Builderプロジェクトについてを参照してください。
デバッグのワークフロー
ActionScriptの問題をデバッグするためのワークフローは、デザインのワークフローに似ていますが、FLA関連の問題よりも、もっぱらコードの問題を対象にする点が異なります。
Flash Professionalでのオーサリング中にActionScriptコードをデバッグするには、次の手順を実行します。
- FLA ファイルをパブリッシュします。
- 出力パネルとコンパイラーエラーパネルでエラーを調べます。
- フレームスクリプトまたはActionScriptクラスで、問題があると思われるコードの領域にブレークポイントを設定します。
- ActionScript 3デバッガーを実行して問題を特定します。
- コードを修正し、出力をテストします。
Flash Builderでの作業中にActionScriptコードをデバッグするには、次の手順を実行します。
- Flash BuilderでFlash Professionalプロジェクトを作成し、Flash BuilderをFLAファイルとプロジェクトフォルダーに関連付けます。
- Flash Builderでコードを作成して編集します。
- Flash Builderの問題パネルを使用して、コーディング中の問題を発見します。
- Flashデバッガーを起動してFlash Professionalでランタイムエラーをデバッグするか、デバッグプレーヤーをインストールし、Flash BuilderでFlashデバッグパースペクティブを使用して、さらに強力なランタイムデバッグツールを使用します。
既にサーバーに展開されているSWFファイルをデバッグするには、次の手順を実行します。
- Flash ProfessionalでActionScript 3パブリッシュ設定を編集します。
- リモートデバッグを有効にします。
- SWFファイルをサーバーにパブリッシュします。
- ブラウザーでSWFファイルを右クリックして、リモートデバッガーを起動します。
- 問題を観察して特定します。
ヒント：エラーによって、ActionScript 3デバッガーの使用が必要な場合も必要でない場合もあります。デバッガーが最も役立つのは、null値やスタックオーバーフローのために再生がクラッシュしている場合です。
デベロッパーのためのデバッグのサンプル
次のサンプルは、ActionScript 3の一般的な問題を示します。各サンプルは2個のファイルから構成され、1つは問題を、もう1つは解決策を示します。各問題に関する手順を以下に示します。この過程では、エラーを体験し、エラーの原因を見つけ、ActionScriptを使用して問題を解決します。
初めに、以下の手順を実行します。
- まだファイルをダウンロードしていない場合は、最初のページからas3_debugging_issues_cs5.zipファイルをダウンロードします。
- デスクトップ上にファイルを展開します。以下の手順では、付属のファイルのいくつかを開くように求められます。
- 詳細については、solutionsフォルダーにある完成したファイルを参照してください。
サンプル1：未定義値とnull値
この問題は出会う可能性が高いものです。存在しないプロパティまたは関数にアクセスしようとしたときに、エラーが発生します。問題の修正は通常容易ですが、出力パネルではどのプロパティが未定義なのかわからないのが普通です。そのような場合、最も速い解決法は、ActionScript 3デバッガーを使用して問題の原因を突き止めることです。
未定義値に関する問題を発見して解決する手順を以下に示します。
- Flash Professional CS5でdeveloper_sample1.flaファイルを開きます。
- 「Test Movie（ムービーをプレビュー）」を実行してサンプルを表示します。値がnullまたは未定義であるというエラーが表示されるはずです。また、作成者名の1つが未定義と表示されるはずです。
TypeError: Error #1010: A term is undefined and has no properties.
at developer_sample1_fla::MainTimeline/frame1()[developer_sample1_fla.MainTimeline::frame1:12]
- SWFファイルを閉じます。
- actionsレイヤーのコードを観察します。このサンプルの場合、いくつかの問題があることはすぐにわかりますが、もっと大きくて複雑なコードの場合、リストを見ただけで問題を見つけるのは困難です。そのような場合、デバッガーを使用して問題を探すことができます。12行目の左側の列をクリックして、スクリプトにブレークポイントを追加します（図6を参照）。これにより、デバッガーはコードのこの点で実行を中断するので、変数の値を確認できます。
- 変数パネルとデバッグコンソールがまだ開いていなければ、開きます。
- Debug（デバッグ）／Debug Movie（ムービーをデバッグ）／Debug (In Flash Professional)（Flash Professionalでデバッグ）を選択して、デバッガーセッションを開始します。変数パネルに、ブレークポイントの位置でメインタイムライン上でアクティブな変数が表示されます（図7を参照）。booksリストを展開して、値を調べます。リストにはアイテムが3つしかありませんが、ループは4回実行するように設定されています。これがエラーの原因です（また、デバッガービューでは、ループ定義を含むコード行に矢印が表示されています）。また、3番目のアイテムには作成者の値がありません。デバッグコンソールで「End Debug Session（デバッグセッションを終了）ボタンをクリックして、セッションを終了します。
- スクリプトを次のように更新します。
// Declare array variable
var books:Array = new Array();
books.push({title:"ActionScript 3 Cookbook",author:"Joey Lott"});
books.push({title:"Essential ActionScript 3",author:"Colin Moock"});
books.push({title:"Adobe AIR 1.5 Cookbook",author:"David Tucker"});
// Loop through array and display text...
var len:uint = 3; // it's better to use books.length here...
for(var n:uint=0; n<len; n++)
{
books_txt.appendText(books[n].title+", by "+books[n].author+"\n");
}
- 「Test Movie（ムービーをプレビュー）」をもう一度実行します。今度は、スクリプトはエラーを起こさずに動作します。
ヒント：前のサンプルは、エラーを起こすように作成されています。通常は、len変数に値をハードコードすることはありません。その代わりに、配列のlengthプロパティを使用して、ループがエラーを起こさずに実行されるようにします。
サンプル2：表示リスト参照とタイミングのエラー
ActionScriptでインスタンス化したオブジェクトは、自動的にはステージ（表示リスト）上に配置されません。これは実は便利な方式です。オブジェクトが表示される前に前処理ルーチンを実行できるからです。しかし、慣れが必要なことは確かです。
addChildメソッドを使用して、タイムラインの表示リストにインスタンスを追加します。そうすると、インスタンスはステージ、ルート、親の各プロパティにアクセスできるようになります。以下の手順で、ファイルの表示リストのインスタンス化の問題を修正します。
- Flash Professional CS5でdeveloper_sample2.flaファイルを開きます。
- 「Test Movie（ムービーをプレビュー）」を実行してサンプルを表示します。表示リストに関連するエラーが出力パネルに表示されるはずです。エラーでは問題が発生している正確な場所はわかりませんが、
getChildIndexメソッドに問題があるというヒントは得られます。先に進むための論理的な方法は、コードに戻ってActionScriptステートメントを探すことです。
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::DisplayObjectContainer/getChildIndex()
at developer_sample2_fla::MainTimeline/frame1()
- SWFファイルを閉じ、メインタイムラインのフレーム1のスクリプトを調べます。このスクリプトは、新規Spriteインスタンスを作成し、その表示リスト内でのインデックス（以前の呼び方では深さ）を読み取ろうとします。問題は、インスタンスがまだステージに追加されていないため、実際には表示リスト上に存在しないことです。
- コードを次のように更新します。
// Create a black rectangle
var myClip:Sprite = new Sprite();
myClip.graphics.beginFill(0);
myClip.graphics.drawRect(0,0,100,100);
myClip.graphics.endFill();
// Add the instance to the Stage
addChild(myClip);
// Get the instance's depth in the display list...
var myClipDepth:uint = getChildIndex(myClip);
- 「Test Movie（ムービーをプレビュー）」をもう一度実行します。今度は、ムービーはエラーを起こさずに書き出され、ステージ上に黒い長方形が表示されるはずです。
ヒント：ActionScriptクラスで表示リストのタイミングの問題が発生するのを防ぐには、ADDED_TO_STAGEイベントを使用して、オブジェクトがステージに追加されるまで表示リストの処理を遅らせる方法があります。
サンプル3：型エラー
ActionScript 3は、厳密な型指定を行う言語です。コンパイラーとムービーのランタイム再生のパフォーマンスを上げるため、すべての変数と関数の宣言時に型指定を行うのがよい方法です。宣言にデータ型を追加すると、変数または関数が処理するデータ型が定義されます。
ヒント：Flash Professional CS5移行、アクションパネルでオブジェクトのデータ型を指定して、読み込みステートメントを自動的に生成できるようになりました。
以下の手順で、ファイルの正しくないデータ型エントリを更新します。
- Flash Professional CS5でdeveloper_sample3.flaファイルを開きます。
- 「Test Movie（ムービーをプレビュー）」を実行してサンプルを表示します。3つのコンパイラーエラーが発生するはずです（図8を参照）。コンパイラーエラーでは、問題の原因がコードのどこにあるかが明確に示されるので便利です。
- SWFファイルを閉じます。
- コンパイラーエラーパネルで1つめのエラーの説明を右クリックして、「Go to source（ソースに移動）」を選択します。アクションパネルが開き、
addToScore関数の閉じ括弧が強調表示されます。ここから、エラーを見て、コードを修正しながら行を下にたどっていきます。 - コードを次のスクリプトのように更新します。
scoreとincrementの値がNumberデータ型（uintでなくNumberなのは、数値に小数点が含まれるため）に変更され、関数の戻り値がvoidデータ型（値を返さない）に変更されています。また、イベントオブジェクトがMouseEventデータ型に変更されています。MouseEventはEventなので、これはエラーにはなっていませんが、正確に一致させるのがよい方法です。
// Create Number variable
var score:Number = 0;
var increment:Number = .2;
function addToScore(event:MouseEvent):void
{
score += increment;
score_txt.text = "Score = "+score;
}
add_btn.addEventListener(MouseEvent.CLICK, addToScore);
- 「Test Movie（ムービーをプレビュー）」をもう一度実行します。今度は、ムービーはエラーを起こさずに書き出されます。
サンプル4：IOエラー
IOエラーは、外部ファイルをロードしようとして、プロセスが失敗したときに起こります。ActionScript 3では、エラーイベントまたはtry catchステートメントを使用してエラーを処理し、ユーザーに意味のあるフィードバックを提供できます。
以下の手順で、SWFファイルのロードの問題を処理します。
- Flash Professional CS5でdeveloper_sample4.flaファイルを開きます。
- 「Test Movie（ムービーをプレビュー）」を実行してサンプルを表示します。スクリプトが画像をロードできずにエラーが発生するはずです。これは非同期エラーなので、最善の方法は、LoaderのcontentLoaderInfo IOErrorイベントとHTTPStatusイベントを使用することです。これにより、現在発生している未処理のIOErrorEventを解決できます。
Error opening URL 'http://www.dancarrdesign.com/images/test.jpg'
Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.
- SWFファイルを閉じます。
- フレーム1のコードを次のスクリプトのように更新します。この更新には、ロードの完了またはロード失敗に対するイベントハンドラーが含まれています。
import flash.events.*;
function completeHandler(event:Event):void
{
// Add image to the Stage when loaded...
addChild(event.target.content);
}
function statusHandler(event:HTTPStatusEvent):void
{
// Respond to status notifications...
trace("HTTP Status: "+event.status);
}
function errorHandler(event:IOErrorEvent):void
{
// The image failed to load. Show feedback and
proceed...
trace("IOERROR: "+event.text);
}
// Create a Loader to load an image...
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
loader.contentLoaderInfo.addEventListener(HTTPStatusEvent.HTTP_STATUS, statusHandler);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
loader.load(new URLRequest("http://www.dancarrdesign.com/images/test.jpg"));
- 「Test Movie（ムービーをプレビュー）」をもう一度実行します。スクリプトはまた失敗しますが、今度はトレースアクションが起動されるので、イベントを制御できていることがわかります。ここから、何が起きたかをユーザーが明確に理解できるような、何らかのフィードバックの手段を作成することになります。
サンプル5：セキュリティエラー
Flash Playerには、各SWFファイルとコンピューターを悪意のある攻撃から保護するためのセキュリティモデルが実装されています。ファイルがすべて同じドメイン内で動作している場合、通常はセキュリティエラーは発生しません。しかし、異なるドメインで動作している複数のサーバーからのコンテンツやデータを統合したい場合もあります。このような場合、どこかの点でセキュリティエラーが発生する可能性が高くなります。
以下の手順で、データロードのセキュリティの問題を解決します。
- Flash Professional CS5でdeveloper_sample5.flaファイルを開きます。
- 「Test Movie（ムービーをプレビュー）」を実行してサンプルを表示します。ムービーは、筆者のサーバー上に存在するファイルからXMLデータをロードしようとします。筆者のドメイン（dancarrdesign.com）はSWFファイルの表示が行われているドメインの外部にあるため、ここでセキュリティの問題が発生する可能性があります。問題を複雑にしているのは、通常はインターネット上でテストファイルを実行しないとセキュリティエラーが発生しないことです。すなわち、ローカル開発環境でファイルをテストしている場合、ファイルはインターネット上で動作している場合と異なるセキュリティルールに基づいて動作します。この場合の最善の方法は、データを供給しているドメインから権限ファイルをロードすることです。
- 付属のサンプルを参照してください。この例では、crossdomain.xmlという権限ファイルをロードしています。これには、すべてのドメインとのデータ交換を許可するグローバルフラグが含まれます。
- ファイルを閉じます。
一般的に、セキュリティの制約が最も厳しいのは、別のドメインからデータをロードする場合や、SWFファイル内に別のSWFファイルをロードしてその間でスクリプト処理を実行する場合です。別のドメインからデータをロードする場合、権限ファイルを使用するのが最善の方法です（付属のファイルには、crossdomain.xmlファイルのサンプルが含まれています）。SWFファイルの間でスクリプト処理を行う場合、ActionScriptでSecurityオブジェクトのallowDomainメソッドを使用できます。
ヒント：筆者の経験では、セキュリティの問題が発生すると、アプリケーションは何の通知もなく原因不明のまま失敗します。筆者が通常取る方法は、セキュリティ関連の問題と推測して権限を許可するか、ActionScriptからJavaScriptへの呼び出しをログに記録して、実行時のセキュリティエラーイベントやそれに類する情報を発見することです。このようなロギングルーチンは、ActionScriptでExternalInterfaceオブジェクトを使用するか、サードパーティ製リソースを入手することで作成できます。
Flash ProfessionalおよびFlash Builderでのコード分析
Flash Professional CS5には、ActionScript 3デバッガーを使用するための2つのオプションがあります。1つはFlash Professionalからデバッガーを直接実行する方法、もう1つはFlash Builder 4からデバッガーを起動する方法です。Flash Builderにはこの他に、独自のデバッグツールセットが用意されています。これは、Flash Playerのデバッグバージョンとの組み合わせで動作し、より広範囲のデバッグオプションを提供します。
Flash Professional CS5とFlash Builder 4の間の新しい統合機能を使用すれば、日常使用しているFlash Professionalの機能に加えて、Eclipseテキストエディターの強力な機能を簡単に利用できます。Flash Builderとの統合を利用するには、ActionScriptクラスでコードを作成し、FLAファイルのメインタイムラインにリンクするか、FLAファイルのライブラリにある任意のムービークリップシンボルにリンクします。
この節では、デバッガーワークフローのオプションについて説明します。
Flash Professionalでの動的アプリケーション内の変数の状態の確認
このサンプルでは、Flash Professionalを使用して、ステージをクリックするたびに一連の形状をランダムに生成するスクリプトを調査する方法を示します。このエフェクトはうまく動作していますが、パラメーターを調整するために、生成されているランダム値を分析したい場合はどうすればよいでしょうか。1つの方法としては、形状を生成するループにブレークポイントを設定して、デバッガーでの実行中に生成されるランダム値を観察することが考えられます。
以下の手順で、ActionScriptループ内部で生成される変数値を調査します。
- developer_sample6.flaファイルとShapeRamdomizer.asファイルをFlash Professional CS5で開きます。
- 「Test Movie（ムービーをプレビュー）」を実行してサンプルを表示します。ランダムな楕円形のパターンが画面上に描画されるはずです。ステージのどこかをクリックして、パターンがランダムに再描画されることを確認します。
- SWFファイルを閉じ、ShapeRandomizer.asファイルを調べてみてください。
draw関数がループを実行しながら形状を生成しているのがわかるはずです。また、いくつかの変数がランダムに生成されることで、形状のx、y、width、height、color、ボーダーの太さが定義されていることを確認してください。 - 42行目の左側の列をクリックして、この行にブレークポイントを追加します。これにより、ループの1回の実行ごとにデバッグプレーヤーを停止して、変数の状態を確認できます。
- developer_sample6.flaファイルに戻ります。デバッグコンソールと変数パネルがまだ開いていなければ、Window（ウィンドウ）メニューから開きます。
- Debug（デバッグ）／Debug Movie（ムービーをデバッグ）／Debug（デバッグ）を選択して、デバッグセッションを開始します。変数パネルが更新され、ループの最初のパスのランダム値が表示されます（図9を参照）。
- デバッグコンソールパネルの左上にある「Continue（続行）」ボタンをクリックして、ループの次のパスに進みます。この作業を繰り返して、数値の範囲を観察します。ここから、変数設定が生成している値が適切かどうかを判断します。
- 「End Debug Session（デバッグセッションを終了）」ボタンをクリックして、セッションを閉じます。
- 42行目のブレークポイントをクリックして削除します。アクションパネルからドットが消えるはずです。
ヒント：変数の値を変えて実験するには、変数パネルで値を更新し、コード実行を先に進めます。
Flash Professionalデバッガーの使用法の詳細については、FlashオンラインドキュメントのActionScript 3のデバッグの節を参照してください。
Flash BuilderからのActionScript 3デバッガーの起動
Flash Builder 4とFlash Professional CS5により、Flash Builderをテキストエディターとして、Flash Professionalをコンテンツエディターとして使用する、新しいコーディングワークフローが可能になりました。Flash Builderを使用すれば、ActionScriptクラスをすばやく作成し、必要ときにコードをデバッグできます。Flash Professionalは、コンテンツを管理するためと、コードをFLAファイル内のタイムラインに割り当てて実装するために用いられます。
このサンプルでは、前のサンプルで扱ったファイルを使用して、Flash ProfessionalプロジェクトをFlash Builderで生成する方法を示します。ここでは、Flash Builderでコードを更新し、Flash BuilderワークスペースからFlash Professionalデバッガーを起動します。
注意：このサンプルは、Flash Builder 4がコンピューターに既にインストールされていることを前提としています。
以下の手順で、Flash Builderプロジェクトをセットアップします。
- Flash Professional CS5でdeveloper_sample6.flaファイルに戻ります。プロパティパネルがまだ開いていない場合は開き、ドキュメントのプロパティが見られるようにします。
- プロパティパネルの「Class（クラス）」フィールドのとなりのEdit Class Definition（クラス定義を編集）ボタン（鉛筆のアイコン）をクリックします。Edit ActionScript 3.0 Class（ActionScript 3.0クラスを編集）ダイアログボックス（図10を参照）で、「Flash Builder」を選択し、「OK」をクリックして、Flash Builderを起動します。
- Flash Builderが起動すると、Create a new Flash Professional project（新しいFlash Professionalプロジェクトを作成）ダイアログボックスが表示され、ターゲットFLAファイルの選択を求められます。FLAは既に選択されているので、「Finish（完了）」ボタンをクリックして、Flash Professionalプロジェクトを生成します。
- FLAファイルと同じ名前のActionScriptファイルが自動的に生成され、ShapeRandomizer.asファイルが編集用に開きます。Flash Builderでは、パッケージエクスプローラーを使用してプロジェクト内のファイルを調べ、アウトラインパネルでActionScriptクラスのセクションを調べ、問題ペインで作業中に発生する問題を確認することができます（図11を参照）。
- ShapeRandomizer.asファイル内のコードを、次に示すように更新します。
package
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
public class ShapeRandomizer extends MovieClip
{
//*******************
// Properties:
private var _numShapes:uint = 25;
private var _maxWidth:Number = 200;
private var _maxHeight:Number = 200;
//*******************
// Constructor:
public function ShapeRandomizer():void
{
draw();
// Initialize...
stage.addEventListener(MouseEvent.MOUSE_DOWN, draw);
}
//*******************
// Events:
private function draw(event:MouseEvent=null):void
{
this.graphics.clear();
for(var n:uint=0; n<_numShapes; n++)
{
var w:Number = Math.random()*_maxWidth;
var h:Number = Math.random()*_maxHeight;
package
x:Number = Math.random()*(stage.stageWidth/2);
var y:Number = Math.random()*(stage.stageHeight/2);
var c:Number = Math.random()*255;
var b:Number = Math.random()*10;
this.graphics.lineStyle(b, c);
this.graphics.drawRect(x, y, w, h);
this.graphics.endFill();
}
}
}
}
- Flash Builderから「Test Movie（ムービーをプレビュー）」コマンドを起動して、更新をテストします。このためには、ツールバーにあるFlash Professional ボタンで「Test Movie（ムービーをプレビュー）」をクリックするか、通常Flashで行うように単にCtrl + Enter（MacではCmd + Enter）を押します。ビューがFlash Professionalに切り替わり、SWFファイルがFLAファイルの上に書き出されます。形状のレンダリングの変化を確認してください。
- SWFファイルを閉じます。Flash Builderに自動的に戻ります。
以下の手順で、Flash Professionalでコードをデバッグします。
- Flash Builderで、ShapeRandomizer.asに戻ります。この節の最初の部分で行ったのと同じ分析を実行します。ただし今度は、Flash ProfessionalデバッガーをFlash Builderから起動します。
- Flash Builderでスクリプトにブレークポイントを追加するには、番号42（42行目）のすぐ左にあるグレーの領域をダブルクリックします。行番号の隣にドットが表示され、ブレークポイントが追加されたことを示します。
- ツールバーのDebug Movie in Flash Professional（Flash Professionalでムービーをデバッグ）ボタン（Flashと虫のアイコン）をクリックして、Flash Professionalでデバッグモードを起動します。操作は前のサンプルと同じです。ループをステップ実行して、ランダムに生成された変数値を調べます。
- デバッガーで「End Debug Session（デバッグセッションを終了）ボタンをクリックして、セッションを終了します。フォーカスがFlash Builder内のスクリプトに戻ります。
Flash BuilderのFlashデバッグパースペクティブでのコードの分析とデバッグ
ここまでは、Flash BuilderとFlash Professionalワークスペースとの統合機能を試してきました。Flash Builder 4のFlashデバッグパースペクティブで、高度なデバッグツールを使用することもできます。Flash Builderのパースペクティブは、作業の実行に便利なように配置されたパネルの集合です。前のサンプルでは、Flash BuilderのFlashパースペクティブで作業していました。Flashデバッグパースペクティブ（図12を参照）に切り替えると、新しいデバッグビューのセットが表示されます。
Flashデバッグパースペクティブには、次のビューがあります。
- スクリプトビュー：ブレークポイントの設定とコードの編集に使用します。
- デバッグビュー：コード実行の制御とブレークポイントのステップ実行に使用します。
- 変数ビュー：ブレークポイントで変数を分析するために使用します。
- ブレークポイントビュー：ブレークポイントの管理に使用します。
- 式ビュー：テストする式を定義することにより、変数を監視するために使用します。
- コンソールビュー：トレースステートメント、ランタイムエラー、デバッガーからのメッセージを表示します。
このように、Flash Builderには、Flash Professionalの基本的なデバッグ要素が含まれています。例えば、ブレークポイントのステップ実行を制御するデバッグコンソールや、ブレークポイントやランタイムエラーの発生時に変数を分析するための変数ビューなどです。Flash Builderではさらに、ブレークポイントをより詳細に管理したり、条件付きブレークポイントを設定したりするツールを追加することで、デバッグの可能性を広げています。
Flash Builderのデバッグツールを使用するために最初に必要なのは、Flash Playerのデバッグバージョンをインストールすることです。デバッグプレーヤーは、標準のFlash Playerのバリエーションで、ブラウザー内のSWFファイルに対してトレースアクションやデバッグ機能が使用できるようになっています。デバッグプレーヤーをインストールするには、Flash Professional CS5に付属しているインストーラーを使用するか、Flash Playerダウンロードサイトからダウンロードします。
以下の手順で、デバッグプレーヤーをインストールします。
- コンピューターで動作しているすべてのアプリケーションを閉じます。
- 既存のFlash Playerバージョンをコンピューターからアンインストールします。
- コンピューターを再起動します。
- コンピューターのアプリケーションフォルダー内のAdobe Flash CS5フォルダーを開きます。Playersフォルダーを開き、その下のDebugフォルダーを開きます。使用しているOSに応じて、WindowsまたはMac用のインストーラーを起動します（インストーラーの詳細については、Adobe Flash Player 10.1 Read Me.pdfファイルを参照してください）。
- ブラウザーでFlashムービーを開いて、インストールが正常に行われたことを確認します。
注意：通常のFlash Playerとデバッグプレーヤーは、必要なときにいつでも切り替えることができます。問題が起きた場合は、次のいずれかのテクニカルノートを参照してください。
以下の手順で、Flash Debugパースペクティブでデバッグセッションを起動します。
- Flash Builderデバッガーの起動は簡単です。Flash BuilderのFlashパースペクティブで、developer_sample6 projectをパッケージエクスプローラーで選択します。
- ツールバーのDebug（デバッグ）アイコン（虫のアイコン）をクリックします。Debug in Flash Professional（Flash Professionalでデバッグ）ボタンではないので注意してください。こちらはFlashと虫のアイコンで表されています。
- Debug（デバッグ）をクリックすると、Flash BuilderはFlashデバッグパースペクティブに切り替わり、SWFファイルをブラウザーで起動してセッションを開始します。
- Flash Professionalデバッガーと同様に、ランダムな値の変数が変数ビューに表示されます。デバッグビューでResume（再開）ボタン（再生アイコン）をクリックして、次のブレークポイントまでループをもう1回実行させます。変数ビューで変数を調べて値を変更できることを確認してください（図13を参照）。
- デバッグビューでTerminate（終了）ボタン（停止アイコン）をクリックして、デバッグセッションを終了します。
- 最後に、ツールバーの右上にあるFlashパースペクティブボタンをクリックして、標準のFlash Professionalプロジェクトパースペクティブに戻ります。ここから、「Test Movie（ムービーをプレビュー）」コマンドを実行して、Flash Professionalとの間のワークフローを再開できます。
Flash Builderでのプロジェクト用デバッグオプションの詳細については、Flash Builder 4オンラインドキュメントのアプリケーションのデバッグの節を参照してください。
次のステップ
ここまでで、Flash ProfessionalとFlash Builderでのアプリケーション開発に関連する一般的な問題とデバッグの技法について、理解を深めていただけたと思います。デザイナーにとってもActionScriptプログラマーにとっても、これらのワークフローは、ActionScript 3環境での問題を解決し、自信を持って作業を進めるために役立つはずです。
何か問題が起きた場合は、次の参考資料を参照してください。
