FLASHで作ろう！多彩なエフェクト

講師：宮地 成太郎

　「家に帰ってやってみてまた新しい発見がある。」
基本的なActionScriptの試行錯誤から発見した効果的なエフェクトを教えてくれました。

基本スクリプトをマスター！

記述場所：circle_mc
------------------------------------------------------
onClipEvent (load) {
targetX = 100;
targetY = 100;
}
onClipEvent (enterFrame) {
_x += (targetX-_x)/5;
_y += (targetY-_y)/5;
}
------------------------------------------------------

>>サンプルを見る。

・onClipEvent (load) は記述したムービークリップが登場するとすぐに一度だけ実行されます。これを使って任意の座標 (targetX,targetY) を最初に定義します。

onClipEvent (load) {
targetX = 100;
targetY = 100;
}

・次にonClipEvent (enterFrame)で、1フレーム進む度にムービークリップが任意の点 (targetX,targetY) に近づいていくスクリプトを書きます。

onClipEvent (enterFrame) {
_x += (targetX-_x)/5;
_y += (targetY-_y)/5;
}

　このスクリプトが1回実行されると、目標から自分の位置を引いた距離の5分の1進むので、フレームが進む度に減速しているように見えます。

　任意の座標 (targetX,targetY) にマウスの座標 (_xmouse,_ymouse) を入れ、減速しながらマウスを追いかけるようにします。

記述場所：circle_mc
------------------------------------------------------
onClipEvent (enterFrame) {
_x += (_xmouse-_x)/5;
_y += (_ymouse-_y)/5;
}
------------------------------------------------------

>>サンプルを見る。

　このままだと circle_mc から見た (_xmouse,_ymouse)
つまり中心点ゼロとした座標が取れてしまいます。そこで以下のように、「一番上の階層の」という意味を持つ _root を追加します。

記述場所：circle_mc
------------------------------------------------------
onClipEvent (enterFrame) {
_x += (_root._xmouse-_x)/5;
_y += (_root._ymouse-_y)/5;
}
------------------------------------------------------

>>サンプルを見る。

　上記のスクリプトをアニメーションをつけたムービークリップに入れてみます。

>>サンプルを見る。

　4つの円が回転しながらマウスを追いかけるようになりました。

　応用 2 で使用したムービークリップをコピーして、それぞれのスクリプトの数値を変えてみます。

記述場所：ムービークリップ
------------------------------------------------------
onClipEvent (enterFrame) {
_x += (_root._xmouse-_x)/4;
_y += (_root._ymouse-_y)/4;
}
------------------------------------------------------
※数字を 5 から 1ずつ減らすと目標へ向かって進む距離が少しずつ違うスクリプトができます。数値が大きいほど減速は遅くなります。
------------------------------------------------------

>>サンプルを見る。

　ちょっとの工夫でぐっと見栄えが良くなりました。

■ムービークリップにスクリプトを書く

　今回は横にスライドするだけなので、設定する任意の座標は targetX のみ。

　pictures_mc、pictures2_mcにそれぞれ以下のようなスクリプトを書きます。

記述場所：pictures_mc
------------------------------------------------------
onClipEvent (enterFrame) {
_x += (targetX-_x)/5;
}
------------------------------------------------------

記述場所：pictures2_mc
------------------------------------------------------
onClipEvent (enterFrame) {
_x += (targetX-_x)/7;
}
------------------------------------------------------

　pictures_mc（中抜き画像）がpictures2_mcに少し遅れて targetX へ向かうことになります。

■ボタンにスクリプトを書く

　次に以下のスクリプトをボタンに書きます。

記述場所：1_btn
------------------------------------------------------
on (release) {
_root.pictures2_mc.targetX = 0;
_root.pictures_mc.targetX = 0;
}
------------------------------------------------------

記述場所：2_btn
------------------------------------------------------
on (release) {
_root.pictures2_mc.targetX = -600;
_root.pictures_mc.targetX = -600;
}
------------------------------------------------------

記述場所：3_btn
------------------------------------------------------
on (release) {
_root.pictures2_mc.targetX = -1200;
_root.pictures_mc.targetX = -1200;
}
------------------------------------------------------

　ボタンを押すことで任意の座標 targetX の値が決まります。
　pictures_mc（中抜き画像） と pictures2_mc は、ボタンによって定義された targetX へ向かってそれぞれの速度で減速しながら移動します。
　写真の幅が 600pix なので、ステージ上の座標 0 から見て 600 ずつマイナス方向にずらします。

>>サンプルを見る。

　pictures_mc（中抜き画像）を横ストライプにしたバージョンはこんな感じです。

>>サンプルを見る。

　サブリンさん曰く、ストライプの幅をもっと狭くするとブラーのように見えるとのこと。
　基本的なスクリプトもちょっとの工夫で素敵に大変身ですね！

　 宮地君の「FLASHで作ろう！多彩なエフェクト」でした！

　以上で使ったデータはこちらからダウンロードできます。

>>データをダウンロードする。