Flash の拡張機能を作ってみよう！

初期状態でも使いやすいように配慮されている Flash ですが、使いこなすにしたがってより効率な環境にカスタマイズしたくなるものです。

そのような個々の要求に応えるため、Flash には他のアプリケーションとは比較にならないくらい、非常に多くの強力な拡張性を備えています。

拡張機能というと、何か特別な機能という印象があるかもしれません。
しかし、普通に Flash を使用されている方でも、実は気付かないうちに拡張機能のお世話になっているのです。

起動時に表示される「スタートアップスクリーン」、Flash CS4 で搭載された新しい「プロジェクトパネル」、コマンドメニューにある「モーション XML の読み込み /書き込み」、果てはアクションパネルのコードヒントまで、実はすべて拡張機能を使って作られています。

Flash 標準の機能が Flash の拡張機能として開発されているというのは、拡張性の高さを示すに十分な説得力がありますね。

なお、本記事では Adobe Flash CS4 Professional の使用を前提とし、一部解説で Flash 用 Framework である Progression に同梱されている JSFL コンソールを使用するものとします。

※ Progression の入手方法については、公式サイトにあるセットアップガイドをご覧ください。

必要ソフトウェア

Adobe® Flash® CS4 Professional

• 体験版
• 購入

サンプルファイル

• AutoSave.zip

■ Flash の拡張機能とは？

一口に拡張機能と言っても、大小様々な機能があります。
代表的な拡張機能は以下の通りです。

コマンド：よく使う操作を JSFL という API を経由して、まとめて実行可能な機能です。
コンポーネント：ユーザーインターフェイスなどをカンタンに作成するための機能です。
カスタムアクション：アクションパネル左部にあるアクションツールボックスに任意のアクションを追加する機能です。
パネル：ユーザー作成の任意のパネルを追加可能な機能です。
テンプレート：よく使うパターンの fla ファイルをテンプレートとして登録できる機能です。
ツール：ツールにカスタムツールを登録できる機能です。

このように Flash は多種多様な拡張性を備えています。
しかし、これらを扱うためのドキュメントが少ないため、機能自体もあまり知られていません。
多少ハードルはありますが、使い方を学ぶもっとも確実な方法はすでに作成済みの拡張機能データを直接確認することです。

拡張機能のほとんどは Flash の環境設定データが格納されている Configuration フォルダ内に設置されています。
Configuration フォルダの存在する場所は OS によって多少異なりますが、だいたい以下のような場所になります。

【Windows Vista の場合】

C:\Users\ユーザ名\AppData\Local\Adobe\Flash CS4\ja\Configuration

隠しフォルダ上に存在しているため、フォルダを開くには「フォルダオプション」の「ファイルとフォルダの表示」にある「すべてのファイルとフォルダを表示する」の設定を有効化してください。また、必要がない限りこの設定は標準値である「隠しファイルおよび隠しフォルダを表示しない」とすることをお薦めします。

【Windows XP の場合】

C:\Documents and Settings\ユーザ名\Local Settings\Application Data\Adobe\Flash CS4\ja\Configuration

隠しフォルダ上に存在しているため、フォルダを開くには「フォルダオプション」の「ファイルとフォルダの表示」にある「すべてのファイルとフォルダを表示する」の設定を有効化してください。また、必要がない限りこの設定は標準値である「隠しファイルおよび隠しフォルダを表示しない」とすることをお薦めします。

【Mac OS X の場合】

/Users/ユーザ名/Library/Application Support/Adobe/Flash CS4/ja/Configuration

中にはワークスペース設定やキーボードショートカット設定、パブリッシュプロファイルまで、Flash に関わる設定を含むファイルが多く格納されています。
それぞれのデータの役割を理解しておけば、例えば OS をクリーンインストールする際のバックアップなどに便利です。

■JSFL の書き方

前項でも少しご紹介しましたが、Flash のオーサリング機能を操作するには JSFL という JavaScript API を使用することになります。
JavaScript の構文については、同じ ECMAScript 規格に準拠している ActionScript を使われている方であれば違和感なく入っていけるかと思いますが、実際にオーサリング機能を JavaScript で操作するというのはイメージしづらいかもしれません。

まずはファーストステップとして、オーサリング上の動作が JSFL 上ではどのようなコードになるのかを確認するところから始めましょう。

“動作”と“コード”を併せて確認するには、[ウィンドウ→他のパネル→ヒストリ] にあるヒストリパネルが便利です。
ヒストリパネルは通常、履歴の取り消し/やり直しなどに使用しますが、他にも任意のステップをコマンドとして保存することで、再度実行することができるような機能も搭載されています。
実はこのファイルの中に設定されているコードが JSFL なのです。

動作とコードとヒストリパネルの比較図

【JSFL を書いてみよう】

それでは実際にコードを実行させてみましょう。
今回は気軽な JSFL 実行環境である、JSFL コンソールを使って解説していきます。

JSFL コンソールは、記述した JSFL をその場で実行可能な簡易エディターです。
すでに Progression がインストールされている環境であれば、[ウィンドウ→他のパネル→JSFL コンソール] を開くことにより、エディターを起動することができます。

エディターが起動できたら、白い編集エリアに対して以下のようなコードを記述してみましょう。

fl.trace( "Hello JSFL" ); // Hello JSFL と出力パネルに表示する

記述できたら、パネル右上の「実行ボタン」をクリックして実行してみましょう。
出力パネルがアクティブになり、「Hello JSFL」という文字列が表示されたでしょうか？
これがもっともシンプルな JSFL の実行になります。

【矩形を描いてみよう】

つぎはいつも使用している Flash の操作を JSFL から実行してみましょう。
Flash を操作する場合、JSFL 上では fla ファイルからタイムライン、レイヤーまで、すべての要素はオブジェクトとして扱うことになります。

// Flash アプリケーション自体を示す <a href="http://help.adobe.com/ja_JP/Flash/10.0_ExtendingFlash/WS5b3ccc516d4fbf351e63e3d118a9024f3f-7fa0.html">Flash</a> オブジェクトを取得する
           fl.trace( fl );
          
// 現在アクティブになっている fla ファイルを示す <a href="http://help.adobe.com/ja_JP/Flash/10.0_ExtendingFlash/WS5b3ccc516d4fbf351e63e3d118a9024f3f-7ffa.html">Document</a> オブジェクトを取得する
           fl.trace( fl.getDocumentDOM() );
          
// アクティブな fla ファイルのタイムラインを示す <a href="http://help.adobe.com/ja_JP/Flash/10.0_ExtendingFlash/WS5b3ccc516d4fbf351e63e3d118a9024f3f-7f8f.html">Timeline</a> オブジェクトを取得する
           fl.trace( fl.getDocumentDOM().getTimeline() );
          
// アクティブな fla ファイルのライブラリを示す <a href="http://help.adobe.com/ja_JP/Flash/10.0_ExtendingFlash/WS5b3ccc516d4fbf351e63e3d118a9024f3f-7f94.html">Library</a> オブジェクトを取得する
           fl.trace( fl.getDocumentDOM().library );

このように使用するメソッド・プロパティに差異はありますが、ドット・シンタックスを用いた記述フォーマット自体は ActionScript と同じです。
しかし、実際の JSFL でのコーディングには多少癖があります。

例えば矩形を描画する場合、ActionScript では以下のようなコードになります。

// 新規 MovieClip を作成する
var mc:MovieClip = new MovieClip();
          
// 矩形を描画する
mc.graphics.beginFill( 0xFF0000 );
mc.graphics.drawRect( 0, 0, 100, 100 );
mc.graphics.endFill();
          
// 画面に表示する
addChild( mc );

一方 JSFL を使って同様の処理をするには、以下のようなコードになります。

// （ライブラリに）新規ムービークリップを作成する
fl.getDocumentDOM().library.addNewItem( "movie clip", "MyMC" );
          
// 矩形を描画する
fl.getDocumentDOM().library.editItem( "MyMC" );
fl.getDocumentDOM().addNewRectangle( { left:0, top:0, right:100, bottom:100 }, 0 );
fl.getDocumentDOM().exitEditMode();
          
// 画面に表示する
fl.getDocumentDOM().library.addItemToDocument( { x:0, y:0 }, "MyMC" );

一見して違いが分かりにくいですが、操作する際の基準位置がそれぞれで異なっています。
ActionScript の場合には、作成した MovieClip に対して命令を実行することになりますが、JSFL の場合には、対象を編集状態にした上で、fla ファイルに対して命令を実行することになります。

なぜこのような回りくどい手順になっているかというと、JSFL はマウス操作が前提となっている Flashの操作手順をスクリプト経由でも使用可能にしたものであるため、基準はあくまでもマウス操作であることに起因するものかと思われます。

この点が理解できていると、コーディング中に戸惑うこともなくなり、ヘルプもよりスムーズに読めるようになります。

■拡張パネルの作り方

最後にもっとも拡張機能らしさが感じられる拡張パネルを作ってみましょう。

拡張パネルとは、Flash 標準のプロパティパネル、変形パネル、ライブラリパネルのような機能をユーザーが作成することができる機能です。

拡張パネルを作るには、パネルとして動作させたい機能を SWF ファイルとして作成することになります。

※前項で使用した JSFL コンソールも拡張パネルとして作成されています。

今回はカンタンなサンプルとして、自動保存パネルを作成してみましょう。
作成する機能は以下のように設定します。

• 一定時間で fla ファイルを自動的に保存します。
• 保存間隔はパネル上から設定可能にします。
• 自動保存のオン/オフが切り替え可能にします。

それでは、まず新規 fla ファイルを作成しましょう。
つぎに [ウィンドウ→コンポーネントパネル] を開き、保存間隔を設定するための NumericStepper コンポーネントと、自動保存のオン/オフを切り替えるための Buttonコンポーネントをステージに設置します。

コンポーネントを設置したイメージ

コンポーネントが設置できたら [ウィンドウ→コンポーネントインスペクタパネル] を開き、それぞれの初期値を設定します。
NumericStepper コンポーネントは value を "60"、minimum を "10"、maximum を "3600" と設定し、最後にインスタンス名を「timeStepper」と設定します。
Button コンポーネントは label を "自動保存"、toggle を "true" と設定し、最後にインスタンス名を「toggleTimerBtn」と設定します。

設定後のコンポーネントインスペクタのイメージ

あとはスクリプトでボタン状態に応じた処理を加えれば完成です。
fla ファイルの 1 フレーム目を選択した状態でアクションパネルを開き、以下のコードを設定しましょう。

	import adobe.utils.MMExecute;
	import fl.controls.Button;
	import fl.controls.NumericStepper;
	
	// 設置したコンポーネントを宣言する
	var timeStepper:NumericStepper;
	var toggleTimerBtn:Button;
	
	// タイマー用のリスナー関数を作成する
	function onTimer( e:Event ):void {
		// JSFL を実行する
		MMExecute( 'if ( fl.getDocumentDOM() ) { fl.getDocumentDOM().save(); fl.trace( "自動保存しました - " + new Date() ); }' );
	}
	
	// ボタンを切り替えた際のリスナー関数を作成する
	function onChange( e:Event ):void {
		// ボタンが選択状態であれば
		if ( toggleTimerBtn.selected ) {
			// タイマー間隔を再設定する
			timer.delay = timeStepper.value * 1000;
			// タイマーを開始する
			timer.start();
		}
		else {
			// タイマーを停止する
			timer.stop();
		}
	}
	
	// タイマーを作成する
	var timer:Timer = new Timer( 0, 0 );
	timer.addEventListener( TimerEvent.TIMER, onTimer );
	
	// イベントリスナーを登録する
	toggleTimerBtn.addEventListener( Event.CHANGE, onChange );

上記のコードのポイントは上記のコードのポイントはMMexecute() 関数です。

この関数は ActionScript 上で引数として渡された任意の JSFL コードを実行可能にする関数です。
今回はつぎのようなコードを設定しました。

	if ( fl.getDocumentDOM() ) {
		fl.getDocumentDOM().save();
		fl.trace( "自動保存しました - " + new Date() );
	}

fl.getDocumentDOM() は、現在アクティブな fla ファイルを取得するメソッドです。

アクティブな fla ファイルが存在しない場合には null を返すので、この戻り値を元にして条件分岐することでアクティブな fla ファイルが存在しない場合には何もしないようにしています。

つぎに fla ファイルに対して save() を実行することで保存処理をし、つぎの行で自動保存時間を出力しています。

これで拡張パネルが完成しました。
しかし、MMexecute() 関数は特定の条件下でしか動作しない関数ですので、通常のプレビューでは実際に動作を確認することができません。

拡張パネルとして使用できるようにするためには、最初にご紹介した Configuration の WindowSWF フォルダの中に swf ファイルをコピーしてあげる必要があります。

コピーができたら Flash を再起動し、[ウィンドウ→他のパネル→AutoSave パネル] を開けば、実際に使用可能になります。

著者について