このflash講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです

FLASH講座 ーアクションスクリプトの実践的事始めー
活用編
(2)イメージマップ風ナビゲーション

 ナビゲーションの一種にイメージマップを使う方法があります。 写真やイラスト画面内の目的物をFireworksやImagereadyなどのツールでスライスに切り分けて、切り分けた領域にリンクを貼る方法です。

 今回のflash講座は、写真に写った人物をマウスで選択(ロールオーバー)すると、その人物が大きくなり、クリックするとリンク先へ飛ぶというナビゲーションです。 これは普通のイメージマップにはない効果を狙ったものです。

 まずは出来上がりのサンプルを以下に示します。 このサンプルは、私が考えて作ってみたものですが、あるいは、同じような(もっといい)ものをどなたかが作られているかもしれません。 スクリプトのお勉強にもなると考え、今回の材料とします。
 ステージの設定

 ・ステージを写真の大きさと同じ400×267に設定。
 ・ステージに写真を読み込み、シンボルに変換する(base)
 ・インスタンス名をbase0とする
  新規レイヤーを追加し、ライブラリーからbaseをドラッグ、
  同じ位置に(中心座標200,133)置き、base1とする
 ・新規レイヤーを追加し、矩形ツールで人物の顔を囲む円を描く
  円の線は無し、塗りのアルファーを0%とする
  この場合の円の大きさ85px
  このマスク用円をシンボル(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までのx座標を配列「maskx」で定義
円mask0〜mask3までのy座標を配列「masky」で定義

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



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


base1のx方向の大きさを150%に拡大(遅延効果つき)

base1のx座標を元の位置に移動(遅延効果つき)

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



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




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


base1の大きさを元に戻す

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

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



base0のアルファ値を100%に戻す




マスク円の番号
マスク円の番号によって処理を分ける
番号が0の場合の処理(ここではyahooに飛んでいる)
break; がないと、以下の処理(case1以降)を実行する
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                       (by Hiraoka)
 HOME   Flash講座総リスト    アクションスクリプトの実践的事始め-活用編(3)