Flashの学習(7) モーショングラフィックスで学ぶActionScript

「モーショングラフィックスで学ぶActionScript―Flash MX (SCC books)」も野中氏の本だ。

モーショングラフィックスで学ぶActionScript―Flash MX (SCC books)

作者: 野中文雄
出版社/メーカー: エスシーシー
発売日: 2002-07
メディア: 単行本
おすすめ度の平均:
ある程度ASの理解がある人に。

ActionScript1.0で、

ActionScriptは一つにまとまっている
タイムラインを使わない

というスタイル（MXスタイル）でFlash作品を作る方法が学べる。

目次は以下のようになっている。

第1章　マウスに追随するーカスタムカーソル
第2章　マウスに遅れて追いかける
第3章　マウスの方向を向くーキョロ目
第4章　アニメーションするボタン
第5章　マウスの位置に応じてスクロール
第6章　広がりながら消えていくイメージ
第7章　ドラッグしてスナップー重ね合わせる
第8章　データをまとめて処理する

第1章　マウスに追随するーカスタムカーソル

まずは「ムービークリップインスタンス」が、マウスの動きに追従するアニメーションだ。

https://sites.google.com/site/itouhiro/2009/20090522motion_as01.swf

文字にするとすごそうだけど、動作見ると「これだけか」と感じる。

スクリプトは「ムービークリップインスタンス」に持たせている。スクリプトの中身はこれ。

onClipEvent (load) {
	_x = 0;
	_root.qilin_mc._x = 0;
	this._x = 0;
	Mouse.hide();
}
onClipEvent (enterFrame) {
	this._x = _root._xmouse;
	_root.qilin_mc._y = _root._ymouse;
}
onClipEvent (unload) {
	Mouse.show();
}

qilin_mcってのが「ムービークリップインスタンス」な。
qilinというシンボルがあって、それをステージ上に実体化したもの(インスタンス)にqilin_mcという名をつけているんだ。

インスタンス、ねぇ…。難しい言葉が並ぶなー。

英語では「たとえば／実例をあげると」という言い回しとして、「for example」や「for instance」という言い方があるんだ。instanceってそんな難しくない単語なんだけどね。
ムービークリップっていうのは動画(movie)の一部分(clip)っていうだけの意味だし。

このインスタンスは種別を「ムービークリップ」「ボタン」「グラフィック」から選ぶことができるんだけど、

「グラフィック」には名前がつけられなくてActionScriptから制御できないからこれは使えない。「ボタン」はFlashMX以降では特に必要ない。「ムービークリップ」にしておけば、ActionScriptから制御できる。
……だからインスタンスの種別はすべて「ムービークリップ」になると考えていいのかな？

あとターゲットパスという考え方がある。この作品の階層構造はこうなっている。

ステージはこの画像では「シーン1」と書いてあるけど、これがActionScriptだと「_root」になるんだ。
_root の直下に qilin_mc というインスタンスがある。このインスタンスは _root.qilin_mc と表すことができる。この表現のしかたをターゲットパスという。

カタカナが多過ぎるおー。

英語をカタカナにしただけだからな。でもヘタに日本語にして、「インスタンス」を「実体」、「ターゲットパス」を「対象への経路」とか翻訳すると、今度は英語の文書読むときに困るんだよ。

スクリプトの意味を説明する。このActionScriptは _root.qilin_mc が持つスクリプトなので、this ＝ _root.qilin_mc なんだ。
だから_root.qilin_mc._x = 0;とthis._x = 0;はまったく同じ。「_x = 0;」も同じ。_root.qilin_mc の持つプロパティというか変数 _x に 0 を代入している。

_xmouseというのはマウスのX座標の位置を得られる(返す)んだ。_root._xmouseというのは「ステージ」のマウス位置を返す。

この「リファレンス」で調べればいいのか。

onClipEvent (load) は、onCilpEventというイベントハンドラだ。EventをHandle(取り扱う)だ。イベントというのはここでは load, unload, enterFrame が使われている。ほかには以下がある。

onClipEvent (load) というのは、最初に1度だけ実行されるんだが、ウェブブラウザにFlashが表示されたときと、マウスがFlashに乗ったとき、のどちらに実行されるんだろう？
ウェブブラウザにFlashが表示されたときに_x = 0;が実行されて、マウスがFlashに乗ったときにMouse.hide();が実行されているように見えるんだけど。
←「ウェブブラウザにFlashが表示されたとき」に、「swf表示領域にはマウスカーソルを表示しない」処理が実行されているようだ。

Mouse.hide();というのは、マウスを動かしてFlashの上に持っていったとき、マウスカーソルを隠す動作のことな。

onClipEvent (enterFrame) というのは、マウスがFlashに乗っているとき毎回実行される。毎回っていうのは、このFlashは「12フレーム/秒」の設定だから、1秒に12回実行される。

onClipEvent (unload) というのは、最後に1回だけ実行される。でもこのMouse.show();というのは要らないような…。なくても動作は同じだし。

第2章　マウスに遅れて追いかける

https://sites.google.com/site/itouhiro/2009/20090522motion_as02.swf

今度はインスタンスが3つに増えた。それぞれがActionScriptを持っている（このようにムービークリップがActionScriptを持つことを「ムービークリップアクション」と呼ぶ）。

作成するときは、まず1つのインスタンスをつくり、それをAlt＋ドラッグで複製してからインスタンス名を変えるといい。

ここで、_xmouseというのは_root.qilin1_mc._xmouseとかの意味だ。この数値は、_root.qilin1_mcからマウスカーソルがどれだけ離れているか、を示すと説明してあったが「ホントかな？」と思ったんで調べてみた。

traceで _xmouseの数値を表示させてみたんだ。するとqilin1_mc(この画像の中でいちばん大きいキリン)より→にあるときは数値はプラスになり、qilin_mcより←にあるときは数値がマイナスになった。確かに説明どおりだ。

第3章　マウスの方向を向くーキョロ目

https://sites.google.com/site/itouhiro/2009/20090522motion_as03.swf

目玉が以下のムービークリップアクションを持っている。

this._xというのは目玉の位置で、これは今回は移動させない(回転させるだけ)のでずっと変化しない。
_root._xmouseというのはステージ上のマウスカーソルの位置で、ステージ左上が (0,0) になり、そこからどれだけ離れているか（相対座標）の値が返される。

ということは_root._xmouse - this._xは、目玉の位置からの相対座標が返される。目玉より←にマウスがあればマイナスを返す、→にあればプラスを返す。

Math.atan2というのは以下の説明。

この説明！？意味が……

目玉オブジェクトから見た Y座標,X座標を渡すとその角度を返す。

_rotationというプロパティに度数を指定すると、オブジェクトを回転させてくれる。
しかしMath.atan2が返すのはラジアン（radian）という角度の単位（詳しくは google: ラジアン弧度法）なので、度数とラジアンを変換する必要がある。円周360度の度数とラジアンの対応式は、「度数＝ラジアン÷π（パイ）×180」だ。

というわけでthis._rotation = rad / Math.PI * 180;で目玉オブジェクトがマウスのある方向に回転してくれるというわけ。
回転するときの原点は、シンボル作成のときに指定しておく。シンボル作成では回転の初期角度0°にしておく必要もある。

まあここまではこれでよいんだけど、この後修正を加えて、
以下のように2つの目玉オブジェクトを含むムービークリップ qilin_eyes_mc というのを作ると、階層構造が変わる。そして動作がおかしくなってしまうんだ。

https://sites.google.com/site/itouhiro/2009/20090522motion_as03_2.swf

おやおや

以下のようになる。
「出力」のウィンドウを見てほしい。_root._xmouseはさっきと同じなんだけど、this._xの値がさっきと違っておかしいんだよな。

これはthis._xの値が「ひとつ上の階層の原点と比べた位置」を返すのが原因だ。
さっきの正しい動作のは、目玉オブジェクト(eye_right_mc)が「ステージ」(シーン1)の直下にあったから「ひとつ上の階層の原点＝ステージの原点」だった。

しかし今度は、目玉オブジェクト(eye_right_mc)が「ステージ」(シーン1)の下にある qilin_eyes_mc のさらに下にあるんだ。ターゲットパスで表わすと _root.qilin_eyes_mc.eye_right_mc になる。
だから「ひとつ上の階層の原点＝qilin_eys_mcの原点」なんだよ。 qilin_eyes_mcの原点はここでは2つの目玉の真ん中になっている。