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

FLASH講座 ーアクションスクリプトの実践的事始めー
活用編 
(1) マウスに反応する画像スクロール

 FLASHで構成されているサイトでよく見かけるサムネイル画像がマウスの動きに反応して加速したり減速したりしながらスクロールするナビゲーションです。 今回はその作り方を基本から理解することにします。 基本的には、前項で勉強したマウストレイルに良く似たテクニックと言えます。 flash講座に入る前に、マウストレイルをまず勉強しておくことをお勧めします。  
基本を理解する
 マウストレイルで示した、遅延効果付加型で作成することにする。 慣性効果付加型で作成すると動きがもっとダイナミックになるが、遅延効果付加型のほうが落ち着いた動きが作れるし、スクリプトの理解もしやすいので、今回はこの型を使うことにしたい。
 まず、マウストレイルのときと同様新規ファイルを開いた後、「挿入」「新規シンボル」でシンボルstarを作成し、リンケージで識別子を
starにして「アクションスクリプトの書き出し」にチェックを入れる。 starはマウストレイルに使ったものと同じイメージを使うが、大きさを100×95.5と約倍の大きさにする。
 このstarを横に並べて、マウスに反応する動きを作成してみよう。 考え方は、ステージ左右の真ん中にマウスがあるときは画像は動かず(加速度が0)、マウスが中心から遠ざかるほど加速度が大きくなる(遅延効果が小さくなる)ようにする。 マウスが左にずれると画像は右に、右にずれると画像が左にスクロールするようにする。 以下に、スクリプトと実例を示す。(ステージは500×200)
スクリプト

 var star:Array = new Array();
 var s_num:Number = 8;

 for (i=1; i <= s_num; i++) {
  _root.attachMovie("star","star"+i,i);
  star[i] = eval("star"+i);
  star[i]._x = 250-100*(s_num-i );
  star[i]._y = 80;
 }

 _root.onEnterFrame = function() {
  for (i=1; i<=s_num; i++) {
   _root.star[i]._x += (250-_root._xmouse)/10;
  }
 }


配列starを定義
星の数を8個に設定


ムービークリップの生成(starをステージに並べる)
250はステージ中心のx座標、100はstarを並べる間隔
(x=250を中心に、左右対象にstarを並べる)
y座標は80に固定



各starはそのときのマウスの位置によって加速を受けて左右に動く
(自分の位置は関係しない・・・マウストレイルとここが違う)
10の大きさで加速の程度が変わる
見えなくなったら更新ボタンを押してください

 

画像ループ型スクローラー

 上のケースでは、画像がステージの右か左に消えてしまうと、マウスでうまく調節しないと全く見えなくなってしまう。 そこで、画像(星)が右に消えたら一番左の位置に、左に消えたら一番右の位置に移動するスクリプトを付け加えた例を以下に示す。 この場合、星の数は8個であるが、無限ループで、常に画面に表示されている。 ついでに、ロールオーバー効果を付加した。
  
スクリプト

 var star:Array = new Array();
 var s_num:Number = 8;
 var length:Number = s_num*100;

 for (i=1; i<=s_num; i++) {
  _root.attachMovie("star","star"+i,i);
  star[i] = eval("star"+i);
  star[i]._x = 250-100*(s_num-i);
  star[i]._y = 80;
 }

 _root.onEnterFrame = function() {
  for (i=1; i <= s_num; i++) {
   if (_root.star[i]._x < -120) {
    _root.star[i]._x += length; }
   else if (_root.star[i]._x > 520) {
    _root.star[i]._x -= length; }
  _root.star[i]._x += (250-_root._xmouse)/10;

  star[i].onRollOver = rollov;
  star[i].onRollOut = rollou;
  }
 }

 function rollov() {
  objColor=new Color(this);
  objColor.setRGB(0x00ffff); }
 function rollou() {
  objColor.setRGB(0xfef80e); }



スクリプトの説明
 length:画像全体の長さ(個々の長さ×個数;最初に定義あり)
 −120:完全に左に消えるx座標 (520は右に消える座標)




ロールオーバーしたときのファンクションの呼び出し
ロールアウトしたときのファンクションの呼び出し



Colorオブジェクトの作成 this:本インスタンス
ロールオーバー時の着色

ロールアウト時の着色(元の色)

フォトギャラリーの作成
 基本が理解できたところで、これをナビゲーションとしたフォトギャラリーを作ってみよう。 ここでは、新幹線ギャラリー(http://tec.supertrain.net/)からダウンロードさせていただいて、0系から800系までの9枚の写真を用いた。 まず、作例を見ていただくと以下のようであり、次に、スクリプトと解説を記す。
スクリプト
 var sks:Array = new Array();
 var s_num:Number = 9;
 var length:Number = s_num*125;

 for (i=0; i<s_num; i++) {
  _root.attachMovie("sks"+i,"sks"+i,i);
  sks[i] = eval("sks"+i);
  sks[i]._x = 320-125*(s_num-i);
  sks[i]._y = 50;
 }

 _root.onEnterFrame = function() {
  for (i=0; i < s_num; i++) {
   if (sks[i]._x < -170) { sks[i]._x += length; }
   else if (sks[i]._x >800) { sks[i]._x -= length; }
   sks[i]._x += (320-_root._xmouse)/10;

  sks[i].num = i;
  sks[i].onRollOver = rollov;
  sks[i].onRollOut = rollou;
  sks[i].onRelease = release;
  }
 }

 function rollov() { this._alpha = 50; }
 function rollou() { this._alpha = 100; }
 function release() {
  image="sksl"+this.num+".jpg"
  myJpg.loadMovie(image);
 }

 stop();

キャンバスの大きさは、640×600
サムネイルの数は9
サムネイルの大きさは、120×90

サムネイルの写真はシンボル化し、リンケージを設定
 名前は、skss0 - skss8 (0系から800系に対応)


           ステージに拡大写真表示用のスクリーン(560×420)を
           矩形ツールで描き、シンボルに変換する
           インスタンス名をmyJpgとし、変形ツールで変形基準点を
           矩形の左上に移動する(ここが画像読込みの基点になる)
           また、この例では、スクリーンを囲む枠線を別に描いている




処理中の i の取り込み
ロールオーバー時のアクション名
ロールアウト時のアクション名
リリース時のアクション名


各アクション
アルファ値を50に
元に戻す

リリースされた番号の拡大写真をimageと定義
myJpgにimageを読み込んで表示
(拡大写真は外部ファイル(sksl0 - sksl8.jpg)で、同じフォルダにある)
このサイトで使用しました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講座総リスト      アクションスクリプトの実践的事始め-活用編(2)