Stageサイズが変わったときにMovieClipを動かすクラス [AS2]

クラスを書くのに少しずつ慣れてきたところで、拙いクラスを開き直って公開してみようと思います。※注意！AS2です。

横幅、縦幅が100％のFlashで、Stageサイズを変えたときにムービークリップの位置をアニメーションで移動させる効果を使うことがよくあると思います。
例えば有名なHYBRIDWORKSさんのサイトがそうですね。
やり方はStage.onResizeリスナーイベントを使って、リサイズされたときにムービークリップを動かすよう指示するだけで特に難しくないのですが、動かしたいムービークリップがひとつだけならともかく、何個ものムービークリップをそれぞれ左上、右上、左下、右下のような位置に動かしたいとき、いちいち計算して指定するのもなかなか面倒です。
　
そこでそれを簡単に指示するためのクラスを作りました。

サンプルはこちら。

flaファイルとソースファイル一式はこちら。
（fusekitつかっています。）
　

使い方

ダウンロードして解凍したファイルの中から「stageresize_test.fla」を開いてください。srcフォルダにクラスパスを通してパブリッシュすれば動きます。

動かしたいムービークリップは、好きな場所に配置できます。
右上に置きたいものは右上をムービークリップの中心点に、左下は左下、右下は右下、その他は左上に設定してください。

タイムラインに書くスクリプトは「script」レイヤーの1フレーム目を参考に。
　

PLAIN TEXT
ACTIONSCRIPT:
  1. var stageObj:StageOnResize = new StageOnResize(_root, 800, 520);

StageOnResizeクラスのインスタンスを作ります。引数は1つ目が動かしたいムービークリップを置いているムービークリップ名（ここでは_root）、２つ目と3つ目はStageの横幅と縦幅です。
　

PLAIN TEXT
ACTIONSCRIPT:
  1. stageObj.addMovie({m:"right_mc", pos:"right"});

stageObj.addMovieで動かしたいムービークリップを登録してください。ムービークリップは何個でも登録できます。mはムービークリップの名前、posは置きたい場所。
・"right"　右付
・"bl"　左下
・"br"　右下
・"center"　横も縦も中央
・"cw"　横だけ中央
・"ch"　縦だけ中央
・"cr"　右付で縦の中央
・"cb"　下付で横の中央
左付のムービークリップはStageサイズが変わっても動かないので登録する必要はありません。
　

PLAIN TEXT
ACTIONSCRIPT:
  1. stageObj.setEase(0.7, "easeOutQuint");

移動スピードを設定します。省略するとデフォルトのスピードで動きます。
引数の1つ目は移動終了までの時間（秒）、ふたつめはイージングの種類です。FuseKitのPennerEasingです。イージングの違いは以下のページなどを参考にしてください。

にゃあプロジェクト - ウェブログ - FuseKitのイージング

一応、StageOnResize.asのソースは以下。
　

正直、もっとスマートな書き方があると思います。
特にcase文のあたり。だらだらと分岐で計算しているだけです。
赤ペン先生募集中。

PLAIN TEXT
ACTIONSCRIPT:
  1. import com.mosesSupposes.fuse.ZigoEngine;
  2. import com.mosesSupposes.fuse.Shortcuts;
  3. import com.mosesSupposes.fuse.PennerEasing;
  4.  
  5. class usr.StageOnResize {
  6.  
  7.  private var root:MovieClip;
  8.  private var mcList:Array = new Array;
  9.  private var stagew:Number;
  10.  private var stageh:Number;
  11.  
  12.  private var fuseSec:Number = 0.8;
  13.  private var fuseEase:String = "easeOutCubic"
  14.  
  15.  function StageOnResize(mc:MovieClip, w:Number, h:Number) {
  16.   
  17.   // FuseKit
  18.   ZigoEngine.simpleSetup(Shortcuts, PennerEasing);
  19.   ZigoEngine.SKIP_LEVEL = 2;
  20.   
  21.   root = mc;
  22.   stagew = w;
  23.   stageh = h;
  24.   
  25.   // Flashムービーを左上に配置
  26.   Stage.align = "TL";
  27.   // 伸縮を拡大/縮小なしに
  28.   Stage.scaleMode = "noScale";
  29.   // MovieClipをリスナーに登録
  30.   Stage.addListener(root);
  31.   var scope = this;
  32.   root.onResize = function():Void {
  33.    scope.moveMovie();
  34.   }
  35.   
  36.  }
  37.  
  38.  //動くスピード
  39.  public function setEase(sec:Number, ease:String):Void {
  40.   fuseSec = sec;
  41.   fuseEase = ease;
  42.  }
  43.  
  44.  //動かすMovieClipを登録
  45.  public function addMovie(obj:Object):Void {
  46.   //xy初期値
  47.   obj.x = root[obj.m]._x;
  48.   obj.y = root[obj.m]._y;
  49.   //配列化
  50.   mcList.push(obj);
  51.   //ターゲット位置取得
  52.   getPosition(obj);
  53.   //初期位置へ移動
  54.   root[obj.m]._x = obj.nx;
  55.   root[obj.m]._y = obj.ny;
  56.  }
  57.  
  58.  private function moveMovie():Void {
  59.   for (var i:String in mcList) {
  60.    //ターゲット位置取得
  61.    getPosition(mcList[i]);
  62.    //移動（Fusekit）
  63.    root[mcList[i].m].slideTo(mcList[i].nx, mcList[i].ny, fuseSec, fuseEase);
  64.   }
  65.  }
  66.  
  67.  private function getPosition(p_obj:Object):Void{ 
  68.   switch(p_obj.pos) {
  69.    case "right": //右付
  70.     p_obj.nx = Math.round(Stage.width - (stagew-p_obj.x));
  71.     p_obj.ny = p_obj.y;
  72.    break;
  73.     
  74.    case "bl": //左下
  75.     p_obj.nx = p_obj.x;
  76.     p_obj.ny = Math.round(Stage.height - (stageh - p_obj.y));
  77.    break;
  78.     
  79.    case "br": //右下
  80.     p_obj.nx = Math.round(Stage.width - (stagew-p_obj.x));
  81.     p_obj.ny = Math.round(Stage.height - (stageh - p_obj.y));
  82.    break;
  83.     
  84.    case "center": //縦も横も中央
  85.     p_obj.nx = Math.round((Stage.width - root[p_obj.m]._width) / 2);
  86.     p_obj.ny = Math.round((Stage.height - root[p_obj.m]._height) / 2);
  87.    break;
  88.     
  89.    case "cw": //横だけ中央
  90.     p_obj.nx = Math.round((Stage.width - root[p_obj.m]._width)/2);
  91.     p_obj.ny = p_obj.y;
  92.    break;
  93.    
  94.    case "ch": //縦だけ中央
  95.     p_obj.nx = p_obj.x;
  96.     p_obj.ny = Math.round((Stage.height - root[p_obj.m]._height) / 2);
  97.    break;
  98.    
  99.    case "cr": //右付で縦の中央
  100.     p_obj.nx = Math.round(Stage.width - (stagew-p_obj.x));
  101.     p_obj.ny = Math.round((Stage.height - root[p_obj.m]._height) / 2);
  102.    break;
  103.     
  104.    case "cb": //下付で横の中央
  105.     p_obj.nx = Math.round((Stage.width - root[p_obj.m]._width) / 2);
  106.     p_obj.ny = Math.round(Stage.height - (stageh - p_obj.y));
  107.    break;    
  108.   }
  109.  }
  110. }

COMMENTS [0]

トラックバック URL :