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

• マウスアクションに反応したアニメーション
  • PhotoshopからFlashにアニメーションを読み込む
• ステージにないムービーを作り出す
  • シンボルにリンケージを設定
  • attachMovieメソッドでインスタンスを生成

マウスアクションに反応したアニメーション

アニメーションをFlashに読み込む

• Photoshopでレイヤーにアニメーションを作り、保存

• Flashで読み込み▶ライブラリに読み込む
• レイヤーを次に変換：「キーフレーム」にチェック

例題：マウス操作でシェイプを変形

• 1~5フレーム　円形
• 6~10フレーム　矩形に変化
• 10~15フレーム　矩形
• 16~20フレーム　星形に変化
• 25フレーム　円形に戻る
• スクリプト：マウスを重ねると円が矩形に変化
• スクリプト：マウスクリックすると矩形が星型に変化

順序

• labelレイヤーにマウスアクションに応じた、up,over,release,outのラベルを設定する
• メインからgotoAndPlay(“ラベル”)でフレームから再生
• 再生したときアニメーションが途中でとまるようにthis.stopを記述する
• ヒット領域を別に設定しておく

• シーン１にスクリプトを記述

var box: MovieClip;

/*イベントに関数を割り当て*/
box.onRollOver = toCirc;
box.onRollOut = toRect;
box.onRelease = toStar;
box.onReleaseOutside = toRect;

/*円に変化*/
function toCirc():Void
{
  this.gotoAndPlay("over");
}

/*星に変化*/
function toStar():Void
{
  this.gotoAndPlay("release");    
}

/*矩形に戻る*/
function toRect():Void
{
  this.gotoAndPlay("out");    
}

ステージにないムービーを作り出す

シンボルにリンケージを設定

• もとになるムービークリップアニメーションを作り、読み込み 名前：虹
• 「虹」にリンケージを設定
  • リンケージ：ActionScriptからシンボルを使うための仕組み
  • シンボル「虹」を右クリック▶プロパティ
  • ActionScriptリンケージを設定、識別子にrainbowSym、「ActionScript用に書き出し/最初のフレームを書き出し」をチェック

例題：ボタンをクリックすると虹が生成

• ボタンシンボル「attachButton」を作る
• シーン１にスクリプトを追加

var attachButton: Button;

/*生成する虹の通し番号*/
var rainbowCount: Number = 0;
/*イベントに関数を割り当て*/
attachButton.onRelease = attachRainbow;

/*虹を作る関数*/
function attachRainbow():Void
{
     /*インスタンスの名前*/
     var rainbowName: String = "rainbow" + rainbowCount;
     var rainbow:MovieClip;
     /*ライブラリに登録されたリンケージ識別子のシンボルをもとに、新しいインスタンスを_rootに作成*/
     rainbow = this._parent.attachMovie("rainbowSym",rainbowName,rainbowCount);
     /*通し番号に応じて虹の座標を調整*/
     rainbow._x = rainbowCount * 40 + 15;
     rainbow._y = rainbowCount * 20 - 18;    
    /*通し番号を加算*/
     rainbowCount++;
}

attachMovieメソッドでインスタンスを生成

• MovieClip.attachMovie▶シンボルからインスタンスを作成
• attachMovie(リンケージ識別子, インスタンス名, 深度)
• リンケージ識別子(rainbowSym)のシンボルをもとにしてインスタンスを１つ作成、rainbow0と名前が付けられる
• 深度は大きいほど手前に表示される
• 生成されたムービークリップは、初期(0,0)に配置される

attachMovieで作ったムービークリップを消す

• インスタンス名.removeMovieClip();