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

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

モーショングラフィックスで学ぶ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つの目玉の真ん中になっている。


解決法は?


this._xの値が正しくなるようにするためには、qilin_eys_mcの原点の座標をさらにマイナスするという手もある。

これでもちゃんと動くんだよ。


でも別に_rootのマウス座標を使う必要はないんだ。2つの座標があれば角度は出せるから、ひとつ上の階層つまり qilin_eyes_mc の座標と目玉オブジェクトの座標を比べてもいい。

こっちのほうがスクリプトがシンプルになるし、さらに階層構造を変化させてもスクリプトを修正しなくてよい(相対座標指定だから)という利点がある。




Flash Math Creativity

Flash Math Creativity

  • 作者: KeithPeters
  • 出版社/メーカー: A-Press
  • 発売日: 2005-01-30
  • メディア: ペーパーバック

  • おすすめ度の平均:
    日本版FLASH解説書に飽きた方へ