インスタンス間連携

ウィンドウマネージャのようなものを作ってみます。複数のインスタンスを連動させようと思ったら、attachMovie()メソッドを使ったインスタンス生成が便利です。

ウィンドウマネージャ

もうちょっと実用ライブラリとしてイメージの沸くクラスを作ります。簡単なウィンドウマネージャみたいなもの。

シンボルをかっこよくしたり、ウィンドウにドラッグ機能をつけたりしていけば、それらしくなるのではないでしょうか?
ここで、つくったクラスは2つ。

  • マウスを当てるとモコッと拡大するMovieClip。
  • フワッとフェードインするMovieClip。
ActionScriptクラスのロジックは、ほとんど以前に作ったやりかたと同じです(コードは末尾に掲載)。

それぞれ、windowシンボルとbuttonシンボルを作って、クラスをリンクします。最後にステージに配置すればOK。
・・・かとおもったら、もう少し工夫が必要。

スクリプトでインスタンス生成 - attachMovie

実際に複数個のインスタンスをステージに配置してみると、各オブジェクトの連携がうまくいかないことに気づきます。

複数のインスタンスを連動させたいときは、ステージに配置する方法ではなく、スクリプトでインスタンスを生成する方が楽な場合が多いはず。インスタンスの制御コードを1ヶ所にまとめておくと、メンテナンスも簡単です。

_rootのアクションで、ウィンドウとボタンのインスタンスを2つずつ生成します。

 _root.attachMovie('window' , 'win1' , 0, { _x:20, _y:20 } );
 _root.attachMovie('window' , 'win2' , 1, { _x:120, _y:40 } );
 _root.attachMovie('button' , 'btn1' , 2, { _x:20, _y:200 } );
 _root.attachMovie('button' , 'btn2' , 3, { _x:120, _y:200 } );

attachMovieの引数は、「シンボルの識別子」「インスタンス名」「深度」「オブジェクトのプロパティ」。

そして、それぞれのボタンインスタンスのマウスクリックイベントを定義します。

 btn1.onRelease=function(){
  win1.fadeIn();
 }
 btn2.onRelease=function(){
  win2.fadeIn();
 }

こんなふうにインスタンス毎に特有のメソッドを追加することを、オブジェクトベースのプログラミングなどといいます。
外部からクラスに対して勝手なことができるのは、あんまりオブジェクト指向らしくはないのですが、似たようなクラスをたくさん作るよりはマシですね。

宣伝 (^^;

このあたりのテクニックを使ったサイト、このたびリリースしました。ご覧ください。さくさく動く感じが気持ちいいと思います。

 >>カフェ・ドゥ・リュウバン オンラインショップ

マウスを当てるとモコッと拡大する

 class ScaleClip extends MovieClip{
  var target = 100; //これから向かうスケール
  var current = 100; //今のスケール
  var interval = 5;
  function onRollOver(){
    this.target = 130;
  }
  function onRollOut(){
    this.target = 100;
  }
  function onEnterFrame(){
    this.current = this._xscale;
    if( this.current > this.target ){
      this._xscale -= interval;
      this._yscale -= interval;
    }
    else if( this.current < this.target ){
      this._xscale += interval;
      this._yscale += interval;
    }
  }
 }

フワッとフェードインする

 class FadeClip extends MovieClip{
  var isIn = false;//フェードする方向(インorアウト)
  var __stop = true;
  var interval = 10;
  function onLoad(){
    this._alpha = 0;//最初は消しておく。
  }
  function fadeIn(){
    isIn = true;
    __stop = false;
  }
  function fadeOut(){
    isIn = false;
    __stop = false;
  }
  function onEnterFrame(){
    if( __stop ) return;
    if( isIn ){
      this._alpha += interval;
      if( this._alpha >= 100 ) __stop = true;
    }else{
      this._alpha -= interval;
      if( this._alpha <= 0 ) __stop = true;
    }
  }
 }

コメント

コメントしてください

closed.