PR

 Suzukaでは,と言うよりは,ActionScript2.0では,画面上に表示するインスタンス,すなわち任意のスプライト(Flashで言うところのMovieClip)に対して,カスタムクラスを割り当てることもできます(関連記事Flash 8 入門講座「ムービークリップに自作クラスを関連付けて動きを制御する」)。

 スプライトにカスタムクラスを割り当てることにより,画面上に表示するスプライトのインスタンスを,独自の機能を持つクラスのインスタンスのように扱えるようになります。

スプライトに割り当てるカスタムクラスを作成する

 では,前回の記事で2つのカスタムクラスを作成したプロジェクトに,新たにスプライトに割り当てるカスタムクラス「Canvas」を作成してみましょう。Canvasクラスは,DrawPointListのデータを元に,線を描画して表示するクラスとして作成します。

 Canvasクラスは,以下のようなメソッド,プロパティを持つように作成しましょう(表1)。

表1●Canvasクラスの定義
メソッド/プロパティ 説 明
addDrawPointメソッド 新規のDrawPointを追加するメソッド
lineStyleメソッド 描画する線の太さと色を指定するメソッド
drawメソッド DrawPointListのメンバーを元に,線を描画するメソッド
startDrawメソッド 一定間隔でのdrawメソッドの繰り返しを開始するメソッド
clearメソッド 描画した線を消去するメソッド
_pointプロパティ 描画する線の太さをポイント単位で管理するプロパティ
_colorプロパティ 描画する線の色をARGB値で管理するプロパティ
_canvasプロパティ 描画を行うスプライト(MovieClip)を管理するプロパティ
_listプロパティ 描画するデータを管理するDrawPointListを管理するプロパティ

 まずは,Canvasクラスを作成します。[シンボルリスト]を右クリックして,[アイテムの追加]-[クラスの追加]を選択し,[クラスのプロパティ]ダイアログボックスを表示します。[クラス名]欄に「Canvas」と入力し,[継承]欄には,「MovieClip」を指定します(図1)。

図1●スプライトに割り当てるクラス
図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();
}