Flash CS3用コンポーネントの作り方
必要条件
ユーザーレベル
初級
必要な製品
- Flash Professional (Download trial)
簡単なコンポーネントの作り方を例に、ActionScript3.0用コンポーネントの作成方法をご紹介します。
準備
サンプルファイルgetURL.zip(.zipファイル 32KB)をダウンロードし解凍します。
解説（getURLコンポーネントの作り方）
- 新規ドキュメント（Flashファイル（AS3.0））を開きます。ファイル名をgetURL_comp.flaとします。
- ステージに任意（今回はw:78h:16）の大きさのMovieClip（インスタンス名bt_getURL）を作成します。
- ライブラリパネルより先ほど作ったMCを選択して右クリックでプロパティを開きます。ActionScriptに書き出しにチェックを入れ、クラスにこれから作成する任意のクラスを指定します。（今回は”getURL”）
- getURLクラスを作成します。
- 新規ドキュメントよりActionScript(AS)ファイルを開きます。
- コンポーネントインスペクタで変更可能な変数をInspectableタグ（メタデータタグ）を使ってクラスファイルに定義します（getURL.as参照）。今回は以下のような変数を定義します。
- getURL.as
package{
//必要なパッケージの読み込み
import flash.display.MovieClip;
import flash.events.EventDispatcher;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;
public class getURL extends MovieClip{
protected var __url:String = "URL";
protected var __target = "target";
protected var __preTarget = "no";
protected var __window = "_blank";
//コンストラクタ関数
public function getURL(){
//初期化
visible = false;
super();
}
//コンポーネントインスペクタで変更可能な変数urlの定義-------------------------------------------
[Inspectable(defaultValue="URL", name="URL")]
public function get url():String{
return __url;
}
public function set url(nVar:String):void{
__url = nVar;
}
//-----------------------------------------------------------------------------------
//コンポーネントインスペクタで変更可能な変数windowの定義---------------------------------------
[Inspectable(defaultValue="_blank", name="target")]
public function get window():String{
return __window;
}
public function set window(nVar:String):void{
__window = nVar;
}
//-----------------------------------------------------------------------------------
//コンポーネントインスペクタで変更可能な変数targetBtの定義---------------------------------------
[Inspectable(defaultValue="target", name=" Trigger Button Name")]
public function get targetBt():String{
return __target;
}
public function set targetBt(nVar:String):void{
var MC:MovieClip = MovieClip(this.parent);
if(__preTarget !== "no"){
MC[__preTarget].removeEventListener(MouseEvent.CLICK , onClick);
}
//指定したインスタンスにリスナーを登録する
__target = __preTarget = nVar;
MC[__target].addEventListener(MouseEvent.CLICK , onClick);
}
//-----------------------------------------------------------------------------------
//リスナー関数
private function onClick(event:MouseEvent){
//URLRequest
var U:URLRequest = new URLRequest( __url);
//指定先URLにリンク実行
navigateToURL(U,__window);
}
}
}
解説（url:リンク先を指定する変数）
- window:”_blank”（別ウィンドウ）,”_self”（同じウィンドウ）のどちらかを指定する変数
- targetBt:この機能を追加したいシンボル（MovieClipもしくはbutton インスタンス）を指定する変数
- クラスファイルに指定したリンク先に飛ぶ機能を追加します。（getURL.as参照）
- 次にステージに配置した時にライブプレビューとして表示されるswfファイルを作成します。普通コンポーネントを作成する場合、ステージでの見た目はそのシンボルの1フレーム目が表示されます。外部ファイルでライブプレビューを変更したい場合、変更することも可能です。
- 新規ドキュメント（Flashファイル（AS3.0））を開きます。ファイル名をlive.flaとします。
- ステージサイズを先ほど作ったMovieClip( bt_getURL）と同じサイズ（w:78h:16）を指定します。
- ステージに任意のデザインを配置します。
- ドキュメントクラスとしてfl.livepreview.LivePreviewParentクラスを指定します。
- LivePreviewParent クラスは、SWC ファイル、または ActionScript 3.0 選択時にエクスポートされる、コンパイル済みのクリップのタイムラインを提供します。
- パブリッシュします。
- getURL_comp.flaに戻り、ライブラリパネルよりMovieClip（インスタンス名bt_getURL）を選択して右クリックでコンポーネント定義を選択します。
- クラス入力フィールドにgetURLを指定
- ライブプレビュー→設定より.flaファイルに埋め込みの.swfでライブプレビューを選択し、先ほど作ったライブプレビュー用のswfファイル(live.swf)を指定する。
- 「コンポーネントパネルに表示」をチェックすると、コンポーネントパネル上でマウスオーバーしたときに出るツールヒントテキストを指定することができます。
- 同様にライブラリパネルよりMovieClip（インスタンス名bt_getURL）を選択して右クリックでSWCファイル書き出しを選択し、SWCファイルを作成します。
- 今回はgetURL.swcとします。
- 次に書き出したSWCファイル(getURL.swc)に対するmxiファイルを作成する。
- mxiの例
<macromedia-extension
name="Basic Action Button"
version="1.2.0"
type="flashcomponentswc">
<author name="ロクナナワークショップ" />
<products>
<product name="Flash" version="9" primary="true" />
</products>
<description>
<![CDATA[
ActionScript3.0でノンスクリプトで基本的なコンテンツを作るためのコンポーネントセットです。
基本動作のをそのままフレームに配置したり、ボタンUIコンポーネントと組み合わせて使用します。
詳しい使い方はこちら http://deepdive.67.org/components/ で確認してください。
]]>
</description>
<ui-access>
<![CDATA[
rokunana Inc. / ロクナナワークショップ
Copyright (C) rokunana & Co. All Rights Reserved.
]]>
</ui-access>
<license-agreement>
<![CDATA[
このコンポーネントは無保証、無サポートです。
Copyright (C) rokunana & Co. All Rights Reserved.
]]>
</license-agreement>
<files>
<file source="getURL.swc" destination="$flash/Components/Basic Action Button" />
</files>
</macromedia-extension>
- Adobe Extension Managerを使って先述のmxiに対するmxpファイルを書き出す。
- 作ったmxpファイルを実行すると作ったコンポーネントが適切にFlashにインストールされます。新規ドキュメントでコンポーネントパネルに適切にインストールされたのが確認できます。
