Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[Flash]⑥MovieClipを使ったアニメーション(2)

  • ムービーの重なり順を入れ替える
    • 深度について
  • 別のFlashファイルを読み込む

ムービーの重なり順を入れ替える

  • リンケージを利用してスクリプトから箱を4つ生成
  • それぞれの箱をクリックすると最前面に表示
順序
  1. アニメーションを設定したムービークリップ「箱」を作る
  2. シンボル「箱」のプロパティからリンケージ設定、リンケージ識別子名「boxSym」
  3. シーン1にスクリプト用レイヤー「as_main」を追加、記述
/* 関数の呼び出し */
attachBox();

/* 箱をつくる関数 */
function attachBox():Void
{
     /* あらかじめ配列に箱の位置を格納 */
     var xArray:Array = new Array( 115, 65, 165, 115 );
     var yArray:Array = new Array(   25, 65,  65,  105 );

     /* 4つ箱を生成 */
     for( var i:Number=0; i<4; i++ )
     {
          var boxName:String = "box" + i;
          var box:MovieClip;
          /* リンケージ識別子をもとにインスタンスを_rootに作成 */
          /* getNextHighestDepthで、_rootのいちばん手前の位置を取得してセット */
          box = this.attachMovie( "boxSym", boxName, this.getNextHighestDepth() );
          /* 配列から位置を取得 */
          box._x = xArray[i];
          box._y = yArray[i];
          /* オンリリースイベントに関数を割り当て */
          box.onRelease = swapBox;
     }
}

/* swapDepthsメソッドで深度を変更 */
function swapBox():Void
{
     this.swapDepths( this._parent.getNextHighestDepth() );
}
深度について
  • 深度は重ね合わせの順序を表す
  • 深度はムービークリップごとに設定できる
  • 深度が大きいほど手前に表示
  • ある深度に置けるインスタンスは1つだけ(同じ深度に別のインスタンスを置くと上書きされる)
  • MovieClip.swapDepths() ▶ 2つのムービークリップの深度を入れ替える
  • MovieClip.getNextHighestDepth() ▶ 利用できる一番手前の深度を取得する

別のFlashファイルを読み込む

  • 同じフォルダにflashファイルを用意する。
  • メインのflashからloadMovie関数を利用して読み込む。
手順
  • ボタンをクリックするとswfを読み込み、swfをクリックするとアニメーションが始まるFlash
  • 読み込むswfファイルを作成。
  • 読み込む「枠」を用意(仮にplaceHolder)
var loadButton: Button;
var placeHolder: MovieClip;

loadButton.onRelease = loadAnimation;

function loadAnimation():Void
{
     placeHolder.loadMovie( "child2.swf" );
}

f:id:akatonbo_web:20150523023011p:plain

MovieClip.loadMovie()メソッド
  • swfまたはjpegファイルを読みこむ