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

FLASH講座 ーアクションスクリプトの実践的事始めー
基本編
(6)マウストレイル 

 FLASHをいじり始めると、なぜかマウストレイル(マウスフォロワー)を作ってみたくなる。 マウスのポイントを動かすとイメージやテキストが追いかけて来ます。 これがマウストレイル。

 私自身はわずらわしく感じてあまり好きでないが、視覚的には面白いなと感じることもあります。 この講座では、もっともシンプルにマウスに貼りつくものから、遅延効果や、慣性効果を加味してマウスを追いかけるものまで、サンプルを示しながら基本的な解説を加えます。

シンプル型

 とにかくマウスを動かすとポイントにイメージが貼りついて追いかけるタイプです。
 まず、キャンバスに追いかけ用の星型のイメージを描き、シンボルに変換します。
 この星のイメージを選択し、以下のアクションスクリプトを記入します。
 
スクリプト

 onClipEvent(enterFrame) {
  this._x=_root._xmouse;
  this._y=_root._ymouse;
 }


 this._x:星のx座標
 _root.xmouse:マウスのx座標
 (座標の原点はステージの左上)

遅延効果付加型

 マウスポイントの移動に少し遅れて追いかけるタイプで、本事始の「移動の停止」の「減速しながら停止」に記述したスクリプトの応用である。 
スクリプト

 onClipEvent(enterFrame) {
  this._x+=(_root._xmouse-this._x)/3;
  this._y+=(_root._ymouse-this._y)/3;
 }


 3の値を変えると、遅延の度合いが変わる。

 次はこのタイプで、星の数を増やして追いかけるタイプである。
 レイヤーを4つ追加し(トータル5つ)、それぞれに星を配置する(コピー、同じ位置に貼り付け)。 このとき、星の大きさを連続的に変える。 この例では、20,25,30,35,40pixの大きさ にしている。 それぞれのレイヤーごとにインスタンス(星)を選択して以下のスクリプトを記入する。
 
スクリプト

 onClipEvent(enterFrame) {
  this._x+=(_root._xmouse-this._x)/
a;
  this._y+=(_root._ymouse-this._y)/
a;
 }


a:遅延効果を替えるため、星の大きさに応じて値を変える。 ここでは、大きなものから順に、3,4,5,6,7と変えているので、小さなものほど遅く追随する。

慣性効果付加型

 遅延効果に加えて、慣性効果も付加したタイプで、本事始の「移動の停止」の「ばね仕掛けの様に弾んで止まる」に記述したスクリプトの応用である。 遅延効果付加型で、星が5個の例と同じ設定で、各スクリプトを以下に変える。
 
スクリプト

 onClipEvent(load) {
  vx=0; vy=0 }

 onClipEvent(enterFrame) {
  vx=vx*0.65+(_root._xmouse-this._x)/a;
  vy=vy*0.65+(_root._ymouse-this._y)/a;
  this._x+=vx;
  this._y+=vy;
 }
 
遅延効果付加型の追加

なお、上記のような例で、星の数をいろいろ変えて見たいとか、星のようなイメージでなく文字列にしてみたいとか言うときに、スクリプトで星や文字のムービークリップを作り出すようにしておいた方が何かと都合が良い。 上記、遅延効果付加型についてスクリプトの勉強をかねて作ってみよう。 この例では、星の数を10個にしている。

 まず、新規ファイルを開き、「挿入」「新規シンボル」で、シンボルstar(ムービークリップ)を作成する。 作成ウインドウで、リンケージ「アクションスクリプトに書き出し」にチェックを入れる。 このとき自動的に最初のフレームに書き出しにもチェックが入る。 識別子に自動的にstarと入るのでこのままにしておく。 このとき、リンケージ入力画面が出ていないときは、詳細ボタンをクリック。
 つぎに、シンボルstarの編集画面で、+位置付近に星を描き、プロパティーインスペクターで座標を0,0にしておく。 シンボルはステージに表示させない。
 
スクリプト

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

 for (i=1; i<=s_num; i++) {
  _root.attachMovie("star","star"+i,i);
  star[i]=eval("star"+i);
  if (i>1) {
   _root.star[i]._xscale=0.9*_root.star[i-1]._xscale;
   _root.star[i]._yscale=0.9*_root.star[i-1]._yscale;
  }
 }

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


starという配列を定義
星の数を定義

ステージにstar1からstar10までの10個の星(ムービークリップ)を配置。attachMovie("識別子",新MCインスタンス名,深度
インスタンスstar[i]を配列として管理

star2以降について、大きさを前の星の0.9倍とする。




時間の経過とともに以下を再生する

ここの記述は、前述のとおりであるが、遅延の度合いを i としているので、i が大きくなるのつれて遅く追随する。


深度:インスタンスの重なり順序のことで、深度の値が大きいほど手前に表示され、小さいほど奥に表示される。
慣性効果付加型の追加
 
慣性効果付加型についても同様にスクリプトでムービークリップを作成するタイプについて以下に例を示す。 スクリプトも慣性効果のところ以外はほとんど同じなので、説明は省略する。
スクリプト

 var star:Array=new Array();
 var vx:Array= new Array();
 var vy:Array= new Array();
 var s_num:Number=10;

 for (i=1; i<=s_num; i++) {
  _root.attachMovie("star","star"+i,i);
  star[i]=eval("star"+i);
  if (i>1) {
   star[i]._xscale=0.9*star[i-1]._xscale;
   star[i]._yscale=0.9*star[i-1]._yscale;
  }
  vx[i]=0;
  vy[i]=0;
  }

 _root.onEnterFrame=function() {
  for (i=1; i<=s_num; i++) {
   vx[i]=vx[i]*0.65+(_root._xmouse-star[i]._x)/(i+2);
   vy[i]=vy[i]*0.65+(_root._ymouse-star[i]._y)/(i+2);
   star[i]._x+=vx[i];
   star[i]._y+=vy[i];
  }
 }
<追加>
文字(テキスト)のマウストレイル
 文字(簡単な文章)がマウスを追跡するのも良く見かけるので、ここにスクリプトを追加することにしたい。
 w500、h250、Framerate 40 のステージを用意し、以下のスクリプトをFRAME1に書き込む。

スクリプト

 $str = "Flashのお勉強に励みましょう";
 for (i=0; i<$str.length; i++) {
 mc = _root.createEmptyMovieClip("tf_mc"+i, i);
 mc.createTextField("tf",
   mc.getNextHighestDepth(), 10, 0, 20, 20);
 mc.tf.text = $str.charAt(i);
 t_fmt = new TextFormat();
 t_fmt.font = "MS Pゴシック";
 t_fmt.size = 14;
 t_fmt.color = 0xffff33;
 mc.tf.setTextFormat(t_fmt);
 if (i) {
  j = i-1;
  mc.pre_mc = _root["tf_mc"+j];
  mc.onEnterFrame = function() {
   w = t_fmt.
    getTextExtent(this.pre_mc.tf.text).width;
   this._x += (this.pre_mc._x+w+3-this._x)/3;
   this._y += (this.pre_mc._y-this._y)/3;
  };
 } else {
  mc.onEnterFrame = function() {
   this._x += (_root._xmouse-this._x)/3;
   this._y += (_root._ymouse-this._y)/3;
  };
 }
}




追跡させる文字列の設定
文字列の数だけ順番に
空のムービークリップの作成
それぞれのムービークリップにテキストフィールド "tf" を置く
 次に深い深度、x=10(マウスからの距離になる)、y=10、tfの幅、高さそれぞれのテキストフィールドに文字列のi 番目(0から)の文字を入れる文字のフォーマット
font
size

セット
もし、i が 0 より大なら(2文字目以降)
前の番手を j と置く
一つ前のムービークリップをpre_mcと置く
フレームアクション
一つ前の文字の幅を w と置く

一つ前のムービークリップ(文字)に文字幅を加えたx座標に移動一つ前のムービークリップ(文字)のy座標に移動

i が0 のとき(最初の文字)
フレームアクション
マウスのx座標に移動
マウスのy座標に移動
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しました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講座総リスト     flash action script 基本編(7)