Report
2006 >> [11.11] [08.26] [05.13] [02.25] 
2005 >> [11.26] [08.27] [05.14] [02.05]
2004 >> [11.13] [08.07] [05.15] [02.07]
2003 >> [11.08] [08.24] [05.31] [02.01]
2002 >> [12.08] [09.07]

2003.08.24 ページ3
 demo1「キャラクターを使ったインタラクティブな演出」 講師:森脇裕也
 demo2「つまんで削ってお絵書きしちゃおう! 」 講師:ミート
 demo3「ターゲットパスと座標」 講師:野中文雄&馬場ぎんが
 ぷちdemo「Saburi.com情報」 講師:サブリン
司会:サブリン&A.e.Suck

ページ1 ページ2 ページ3 ページ4

ターゲットパスと座標


 講師は「ふみぎん」こと、野中文雄さん&馬場ぎんがさん。お二人ともActionScriptマスター。

 今回はムービークリップのターゲットパスと座標についての講演です。

 最初はぎんがさんのムービークリップの階層構造とターゲットパスのお話から。

 階層が深くなるとターゲットの指定も複雑。すっきり理解したいものです。


■ルート自体がムービークリップ

 FlashのActionScriptから見ると、ステージに何にも配置されていない状態が_root、_level0というムービークリップになるそう。

 

絶対パス(_rootを起点とした指定)


記述場所:
メインタイムラインのフレームアクション

ステージ上にムービークリップを配置するだけで、入れ子の構造に。ぎんがさんによれば、WindowsやUnixのファイルシステムと同じ考え方です。

a1_mcの中のb1_mcの透明度を50%にしたいときには、
_root.a1_mc.b1_mc._alpha = 50;

 

相対パス(MovieClipを起点とした指定)


 
スクリプトを記述するムービークリップ(オブジェクト)を起点とするパス指定が相対パス。

記述場所:a1_mcのMovieClipアクションorフレームアクション

ActionScriptを書き込むMovieClipはthisと書こう。

a1_mcの中のb1_mcの透明度を50%にしたいときには、
this.b1_mc._alpha = 50;

---------------------------------------------

記述場所:b1_mcのMovieClipアクションorフレームアクション

下の階層から上のMovieClipを指定するときは、_parentで一つ階層をあがろう。

a1_mcの子b1_mcから見て親a1_mcの透明度を50%にしたいときには、 this._parent._alpha = 50;

---------------------------------------------

記述場所:a1_mcのMovieClipアクションorフレームアクション

別のムービークリップの子をターゲットにするときは、_parentを使って・・

a2_mcの子b2_mcをa1_mcから見て透明度を50%にしたいときには、this._parent._parent.b2_mc._alpha = 50;

※ぎんがさんの記事は、ぎんがさんのサイトの文章よりまとめさせていただきました。

 


参考資料:

ぎんがさんのサイト「初心者のためのFlashActionScript講座ActionScriptHelper」
詳しくはこちらを。

 

プロパティの地動説と天動説


続きまして、野中さんによるコペルニクス的大発見!

_x地動説_xmouse天動説

 

_xは、MovieClipのX位置。_xmouseは、マウス位置のX座標。
これを使って、マウスを追うMovieClipアクションを作成すると・・。

 

マウスを追いかけるMovieClipアクション


onClipEvent (enterFrame) {
_x = _xmouse;
}

「ムービープレビュー」で確認すると・・、MovieClipが点滅したように移動し、マウスについて来ません。原因は2つのプロパティのターゲットの基準が異なるから。

---------------------------------------------

_xは、_rootが基準(地動説)、 _xmouseは、MovieClipが基準(天動説)。

そこで、_xmouseのターゲットを_xに合わせて_rootにすると、解決。

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

---------------------------------------------

野中さんによれば、_xmouse_xの値を加えても同じ結果に。(なんでだろー?)

理由は・・、

(ステージ上のMovieClipのx座標)+(MovieClip基準のマウスのx座標)=ステージ上のマウスのx座標

 

なるほど!これならターゲットパスの指定がなくても大丈夫。

onClipEvent (enterFrame) {
_x = _x+_xmouse;
}

---------------------------------------------

さらに、「+=」を使うと、左辺に右辺を足して左辺の値に代入してくれるので以下のようにまとまります。

onClipEvent (enterFrame) {
_x += _xmouse;
}

 

マウスの方向に回転するMovieClipアクション


MovieClipの角度は_rotationで設定。座標から角度を計算します。
Math.atan2()
は、座標を指定すると角度をラジアンで返す[*1]ので、次のMovieClipアクションでよさげですが、また点滅したような動作に・・。

onClipEvent (enterFrame) {
_rotation = Math.atan2(_ymouse, _xmouse)/Math.PI*180;
}

--------------------
[*1] Math.atan2(y座標, x座標)と、xy座標を逆転して指定するので要注意。返される角度はラジアンなので、度数に変換する必要あり。πの値は、「Math.PI」で調べられる。
(度数 = ラジアン/π*180 )
--------------------

---------------------------------------------

_xmouse、_ymouseを使っていますが、これは天動説。自ら回ってしまい、座標軸も回転します。

 

 

---------------------------------------------

そこで、_rootの_xmouseの座標が必要。
(ステージ上のマウスの位置)

ActionScriptはMovieClipアクションに書くので、ターゲットパスは、一つ階層を上がって _parent._xmouse

(ステージ上のマウスのx座標)−(ステージ上のMovieClipのx座標)で、MovieClipは回らず、MovieClipから見たステージ上のマウスのx座標がわかります。

記述場所:マウス方向に回転させるインスタンスのMovieClipアクション
onClipEvent (enterFrame) {
_rotation = Math.atan2(_parent._ymouse-_y, _parent._xmouse-_x)/Math.PI*180;
}

これで、マウスの方向にMovieClipが回転するスクリプトの完成!

* 角度0度の右方向が、マウスに向かって回転。インスタンスは、右向きに配置しよう。

 

減速しながらマウスを追いかける


Flash使いが好む減速アニメーション。マウスを減速しながら追いかけるスクリプトを野中さんが大公開。

記述場所:マウスを追いかけるインスタンスのMovieClipアクション onClipEvent (enterFrame) {
_x += _xmouse*0.5;
_y += _ymouse*0.5;
}

xy座標の代入式の右辺に、0.5を掛ける。これで、減速のアニメーション完成。数字を0に近づけるほど、ゆっくりとマウスを追いかけます。この式は、マウス座標との距離を半減(×0.5)していくという処理。

---------------------------------------------

実は、ほぼ同じ考え方で減速しながら回転させることもできます。

記述場所:マウスを追って回るインスタンスのMovieClipアクション
onClipEvent (enterFrame) {
_rotation += Math.atan2(_ymouse, _xmouse)/Math.PI*180*0.5;
}

Math.atan2に指定する値が、ターゲットパスのない自分から見た座標値に戻っている。同時に、代入の演算子が「+=」に変わったことに注目。当然インスタンスの座標軸は回転する。その角度のずれが0になるように、差を割引いて(×0.5)埋めていくという考え方は、ターゲットパスと同じ。

※野中さんの記事は、ご本人提供の文章よりまとめさせていただきました。

 


レジュメとサンプルデータ:

F-siteセミナー「MovieClipのターゲットパスとプロパティ
参考図書:
「MACPOWER」2003年10月号「ActionScriptステップアップ講座」第2回「MovieClipのターゲットパスとプロパティ」
野中さんの著書『モーショングラフィックスで学ぶActionScript − Flash MX −』

次頁はSaburi.com情報 『Quick FTP』⇒

 

ページ1 ページ2 ページ3 ページ4

 

© 2001-2003 F-site all right reserved.