Suzukaでは,と言うよりは,ActionScript2.0では,画面上に表示するインスタンス,すなわち任意のスプライト(Flashで言うところのMovieClip)に対して,カスタムクラスを割り当てることもできます(関連記事Flash 8 入門講座「ムービークリップに自作クラスを関連付けて動きを制御する」)。
スプライトにカスタムクラスを割り当てることにより,画面上に表示するスプライトのインスタンスを,独自の機能を持つクラスのインスタンスのように扱えるようになります。
スプライトに割り当てるカスタムクラスを作成する
では,前回の記事で2つのカスタムクラスを作成したプロジェクトに,新たにスプライトに割り当てるカスタムクラス「Canvas」を作成してみましょう。Canvasクラスは,DrawPointListのデータを元に,線を描画して表示するクラスとして作成します。
Canvasクラスは,以下のようなメソッド,プロパティを持つように作成しましょう(表1)。
メソッド/プロパティ | 説 明 |
---|---|
addDrawPointメソッド | 新規のDrawPointを追加するメソッド |
lineStyleメソッド | 描画する線の太さと色を指定するメソッド |
drawメソッド | DrawPointListのメンバーを元に,線を描画するメソッド |
startDrawメソッド | 一定間隔でのdrawメソッドの繰り返しを開始するメソッド |
clearメソッド | 描画した線を消去するメソッド |
_pointプロパティ | 描画する線の太さをポイント単位で管理するプロパティ |
_colorプロパティ | 描画する線の色をARGB値で管理するプロパティ |
_canvasプロパティ | 描画を行うスプライト(MovieClip)を管理するプロパティ |
_listプロパティ | 描画するデータを管理するDrawPointListを管理するプロパティ |
まずは,Canvasクラスを作成します。[シンボルリスト]を右クリックして,[アイテムの追加]-[クラスの追加]を選択し,[クラスのプロパティ]ダイアログボックスを表示します。[クラス名]欄に「Canvas」と入力し,[継承]欄には,「MovieClip」を指定します(図1)。
スプライトに割り当てたいカスタムクラスを作成する場合には,必ずMovieClipクラスを継承させるというルールなのです。
MovieClipクラスの継承の指定が済んだら,[OK]ボタンを押してCanvasクラスを作成は完了です。では,Canvasクラスの編集モードに移行し,クラス定義を記述していきましょう。Canvasクラスのクラス定義は,次のようになります。
var _point; //描画用の線の太さ
var _color; //描画用の色
var _canvas; //線を描画するスプライト(MovieClip)
var _list; //DrawPointListクラスのインスタンス
//コンストラクタ
function Canvas(){
//描画用スプライトと,DrawPointListを準備
this._canvas = this.createEmptyMovieClip("_canvas",0);
this._list = new DrawPointList();
//線の太さと色の値の初期化
this._point = 0;
this._color = 0xFFFF0000;
//_canvasにドロップシャドウフィルタをかける
var filter = new flash.filters.DropShadowFilter();
this._canvas.filters = [filter];
}
//_listに新規のDrawPointを追加するメソッド
function addDrawPoint(drawPoint){
this._list.push(drawPoint);
}
//線の太さと色を設定するlineStyleメソッドをオーバーライド
function lineStyle(point,color){
//指定された値をプロパティに格納
this._point=point;
this._color=color;
}
//listのデータを使って描画するメソッド
function draw(){
//クリア
this._canvas.clear();
//描画する線の太さと色を設定
this._canvas.lineStyle(this._point,this._color);
//描画
this._list.forEach(this._createDrawClosure(this._canvas));
}
//draw用のクロージャを作成するメソッド
function _createDrawClosure(target){
return function(index,item,array){
if(item.mode=="move"){
target.moveTo(item.getX(),item.getY());
}else{
target.lineTo(item.getX(),item.getY());
}
};
}
//一定間隔でのdrawの繰り返しを実行するメソッド
function startDraw(){
setInterval(this,"draw",100);
}
//描画をクリアし,_listを初期化するメソッド
function clear(){
this._canvas.clear();
this._list = new DrawPointList();
}