FLASHのお勉強　ーアクションスクリプトの実践的事始めー

（10）イメージマップ風ナビゲーション

　ナビゲーションの一種にイメージマップを使う方法がある。　写真やイラスト画面内の目的物をFireworksやImagereadyなどのツールでスライスに切り分けて、切り分けた領域にリンクを貼る方法である。　今回のお勉強は、写真に写った人物をマウスで選択（ロールオーバー）すると、その人物が大きくなり、クリックするとリンク先へ飛ぶというナビゲーションで、普通のイメージマップにはない効果を狙ったものである。。
　まずは出来上がりのサンプルを以下に示す。　このサンプルは、私が考えて作ってみたものであるが、あるいは、同じような（もっといい）ものをどなたかが作られているかもしれない。　スクリプトのお勉強にもなると考え、今回の材料とする。
　ステージの設定

　・ステージを写真の大きさと同じ400×267に設定。
　・ステージに写真を読み込み、シンボルに変換する（base）
　・インスタンス名をbase0とする
　　新規レイヤーを追加し、ライブラリーからbaseをドラッグ、
　　同じ位置に（中心座標200,133）置き、base1とする
　・新規レイヤーを追加し、矩形ツールで人物の顔を囲む円を描く
　　円の線は無し、塗りのアルファーを０％とする
　　この場合の円の大きさ８５ｐｘ
　　このマスク用円をシンボル（mask）に変換し、インスタンス名を、
　　それぞれ、mask0、mask1、mask2、mask3とする
　・script用に新規レイヤーを追加する

　base1はマスク対象になるため、ロールオーバー時に対象の円
　以外は消えてしまう。　そのとき、base0が見えるようにしている。
　スクリプトは、マスク用円のそれぞれに書き込む方法もあるが、みな共通したスクリプトを使うことになるので、配列を使い一括して記述することにする。　この一括記述法を使うようになると、かなりアクションスクリプトを使いこなしている気分になる。
スクリプト用レイヤーに以下のスクリプトを書き込む。

var mask:Array=new Array();
var maskx:Array=new Array(273,273,145,200);
var masky:Array=new Array(93,188,80,138);

for (i=0; i<=3; i++) {
　mask[i]=eval("mask"+i);
　mask[i].xz=maskx[i];
　mask[i].yz=masky[i];
　mask[i].num=i;
　mask[i].onRollOver=rollov;
　mask[i].onRollOut=rollou;
　mask[i].onRelease=releas;
}

function rollov() {
　mx_num=this.xz; my_num=this.yz; mask_num=this.num;
　_root.base1.setMask(this);

　_root.onEnterFrame=function() {
　　_root.base1._xscale+=(150-_root.base1._xscale)/3;
　　_root.base1._yscale+=(150-_root.base1._yscale)/3;
　　_root.base1._x+=(200-(mx_num-200)*0.5-_root.base1._x)/3;
　　_root.base1._y+=(133-(my_num-133)*0.5-_root.base1._y)/3;
　　_root.mask[mask_num]._xscale
　　　　　+=(150-_root.mask[mask_num]._xscale)/3;
　　_root.mask[mask_num]._yscale
　　　　　+=(150-_root.mask[mask_num]._yscale)/3;
　　_root.base0._alpha+=(50-_root.base0._alpha)/3;
　}
}

function rollou() {
　mask_num=this.num;

　_root.onEnterFrame = function() {
　　_root.base1._xscale-=-(100-_root.base1._xscale)/3;
　　_root.base1._yscale-=-(100-_root.base1._yscale)/3;
　　_root.base1._x+=(200-_root.base1._x)/3;
　　_root.base1._y+=(133-_root.base1._y)/3;
　　_root.mask[mask_num]._xscale
　　　　　+=(100-_root.mask[mask_num]._xscale)/3;
　　_root.mask[mask_num]._yscale
　　　　　+=(100-_root.mask[mask_num]._yscale)/3;
　　_root.base0._alpha+=(100-_root.base0._alpha)/3;
　}
}

function releas() {
　mask_num=this.num;
　switch(mask_num) {
　　case 0:getURL("http://www.yahoo.co.jp/","_blank");
　　　　　　 break;
　　case 1:getURL("http://www.asahi-net.or.jp/","_blank");
　　　　　　 break;
　　case 2:getURL("http://www.google.co.jp/","_blank");
　　　　　　 break;
　　case 3:getURL("http://www.msn.co.jp/home.armx","
　　　　　　_blank");
　}
}

stop();

配列「mask」の定義
円mask0〜mask3までのｘ座標を配列「maskx」で定義
円mask0〜mask3までのy座標を配列「masky」で定義

i　を0〜3まで１ずつ増やす
mask0からmask3までを配列として管理
処理中のマスク円のｘ座標の取り込み
処理中のマスク円のｙ座標の取り込み
処理中のマスク円の番号（mask番号）の取り込み
ロールオーバー時にfunction　rollovを実行
ロールアウト時にfunction rollouを実行
クリック時にfunction　releasを実行



取り込んだ関数の数値化
ロールオーバーされた円をマスクに、base1をマスク対象に設定


base1のｘ方向の大きさを１５０％に拡大（遅延効果つき)

base1のｘ座標を元の位置に移動（遅延効果つき）

マスク円の大きさを150％に拡大(遅延効果つき）



base0のアルファ値を50％に設定




取り込んだ関数の数値化（何番目のマスク円かを識別)


base1の大きさを元に戻す

base1のｘ座標を初期値に戻す

マスク円の大きさを元に戻す



base0のアルファ値を１００％に戻す




マスク円の番号
マスク円の番号によって処理を分ける
番号が０の場合の処理（ここではyahooに飛んでいる）
break; がないと、以下の処理（case1以降）を実行する
 
flashirohaサイト内　 Web全体　
　HOME　　　お勉強総リスト