FLASHのお勉強_アクションスクリプトaction script

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

（８）マウストレイル

　FLASHをいじり始めると、なぜかマウストレイル（マウスフォロワー）を作ってみたくなる。　マウスのポイントを動かすとイメージやテキストが追っかけて表示される、あれである。　私自身はわずらわしく感じてあまり好きでないが、視覚的には面白いなと感じることもある。　このお勉強では、もっともシンプルにマウスに貼りつくものから、遅延効果や、慣性効果を加味してマウスを追いかけるものまで、サンプルを示しながら基本的な解説を加えたいと思う。

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

スクリプト

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

　this._x：星のｘ座標
　_root.xmouse：マウスのｘ座標
　（座標の原点はステージの左上）

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

スクリプト

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

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

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

スクリプト

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

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

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

スクリプト

　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;
　}

遅延効果付加型の追加

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

　まず、新規ファイルを開き、「挿入」「新規シンボル」で、シンボル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倍とする。

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

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

深度：インスタンスの重なり順序のことで、深度の値が大きいほど手前に表示され、小さいほど奥に表示される。

慣性効果付加型の追加
　慣性効果付加型についても同様にスクリプトでムービークリップを作成するタイプについて以下に例を示す。　スクリプトも慣性効果のところ以外はほとんど同じなので、説明は省略する。

スクリプト

　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 = "ＭＳＰゴシック";
　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、ｔｆの幅、高さ
それぞれのテキストフィールドに文字列のｉ番目(0から）の文字を入れる
文字のフォーマット
font
size
色
セット
もし、ｉが 0 より大なら（2文字目以降)
前の番手を j と置く
一つ前のムービークリップをpre_mcと置く
フレームアクション
一つ前の文字の幅を w と置く

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

i が0 のとき(最初の文字）
フレームアクション
マウスのｘ座標に移動
マウスのｙ座標に移動

　HOME　　　お勉強総リスト

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

（８）マウストレイル

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