基礎から学ぶActionScript 3.0

マウスポインタの座標を調べる - 地動説

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスポインタの座標をインスタンスの座標のプロパティに設定すると、思わぬ動きになります。それぞれの座標の原点がどこにあるのか知らなければなりません。
講師:
13:02

字幕

タイムラインに置いたインスタンスが、 マウスポインタの後を ずっとついていくという、 アニメーションをスクリプトで作ってみます。 スクリプトはインスタンスの中、 MovieClip シンボル内に 書くことにします。 では、インスタンスをダブルクリックして、 シンボルを開けます。 「シーン1」の右側に、シンボルの名前、 Pen という名前なんですが、 表示されましたので、 現在は、シンボルの編集状態です。 そして、スクリプト用レイヤーの キーフレームに、 a というマークが付いていますので、 スクリプトはとりあえず書いてあります。 インスタンスをアニメーションさせるための スクリプトです。 まず1行目、 addEventListener で リスナーの登録をします。 アニメーションさせる場合、 イベントは Event.ENTER_FRAME です。 そして、このイベントの時に処理したい関数、 リスナー関数を定めます。 それが、ここです。 リスナー関数は、 eventObject というものを受け取ります。 そのデータ型は、 イベントのクラス名と同じにします。 そして :void は、 とりあえずお約束です。 まだ、中にはアニメーションの スクリプトは書いてありません。 ここに書き加える予定です。 ここまでのスクリプトを練習として、 頭から書いてみます。 addEventListener 全部打ってもいいんですが、長いですし、 Listener とか打ちづらいですね。 こういう時は this. と押すと、 コードヒントが出てきます。 ですから addE まで打つと、 コードヒントの addEventListener が光りますので、 Enter キーを押してしまえば入ります。 続けて、やはり Event も コードヒントが出てきます。 Event.ENTER_FRAME は ここです。 Enter キーを押します。 1行目に入る import という ステートメントは気にしないで結構です。 削除しても問題はありません。 そして、リスナーの関数名ですね。 閉じまして、 function リスナーの関数名。 そして eventObject 型は Event 閉じて void {} } は自動的に入ります。 全部打ってもいいんですが、 もうちょっと簡単な入れ方があります。 ショートカットです。 Esc キーを1回、 function の f という文字を1回ですね。 function は Fn キーということがありますので、 F と N をアルファベットのキーから 1つずつ打ちます。 私の手元は見えないでしょうが、 口頭で申し上げます。 Esc キーを1回、 F キーを1回、 N キーを1回で、全部入ります。 あとは残るのは、 関数名をここにコピーして持ってきて、 :void です。 そして、マウスポインタの後を 追いかけさせるには、 マウスポインタの座標を どうやって調べればいいかと、 そのプロパティをご紹介します。 マウスポインタの x y 座標は、 x 座標は mouseX y 座標が mouseY という プロパティで調べられます。 「なるほど!」と言って、 スクリプトを書き始める前に、 ちょっと気になるかもしれません。 mouseX mouseY の前に、 DisplayObject. と打ってあります。 DisplayObject と MovieClip は どういう関係にあるのでしょうか? 今、スクリプトを書こうとしているのは、 MovieClip インスタンスです。 その関係というのは、 MovieClip は、 DisplayObject を 継承するということになっています。 この継承の意味を ヘルプをご覧に入れながら、ご説明します。 MovieClip が使える プロパティやメソッドは、 ヘルプの「ActionScript 3.0 リファレンスガイド」という中で、 MovieClip というクラスに 書かれています。 スクロールをして、プロパティを探します。 「パブリックプロパティ」、 これがプロパティの一覧です。 スクロールしてみても、 以外と短いですね。 mouseX mouseY がありません。 そして、「パブリックプロパティ」という 所の下に、 「継承される...」、 さっき継承という言葉を使いました。 「継承されるパブリックプロパティを表示」と あります。 クリックすると、 プロパティの数が増えます。 そして mouseX mouseY が 表示されました。 その時に、右側に出てくるのが、 DisplayObject というクラスです。 何やら MovieClip と DisplayObject は、 関係がありそうですね。 MovieClip クラスのページの先頭に、 「継承」という表記があります。 そして MovieClip から、 矢印がどんどんどんどん繋がっています。 その先に、 DisplayObject があります。 この矢印は、実は、親子関係にあります。 矢印の先が親です。 ですから MovieClip から 何代かさかのぼった親が、 DisplayObject です。 この親子関係のことを 「継承」と言っています。 そして継承の特色は、 親が持っているプロパティやメソッドは、 子が全部使えるんです。 ということは、間に何代か入っていますけど、 結果として、 DisplayObject の持っている mouseX mouseY その他、 プロパティやメソッドは、 全て MovieClip が使えるんです。 ということで、定められている所は DisplayObject なんですけれども、 MovieClip でも、 mouseX 、 mouseY というプロパティは使えます。 ですから MovieClip の中だけ探して、 「無いなあ」と思わないようにしてください。 継承されてるプロパティ、 継承されてるメソッドも、 必ず探すようにしましょう。 ムービークリップシンボルの中の フレームアクションに戻りました。 では、マウスポインタの座標を調べる プロパティがわかりましたので、 追加しましょう。 その前に eventObject を 受け取ってないですね。 受け取らないと怒られますので、入れます。 型指定は Event です。 この1行目は気にしなくて結構です。 x y 両方ともやってしまうと、 失敗した時になかなか原因が掴めません。 とりあえず x だけ動かしてみましょう。 水平方向だけです。 マウスポインタの x 座標は mouseX でした。 これで、水平方向に マウスポインタの後を追いかけるかというと、 そうはいきません。 : と ; が違っていますね。 直しまして ; にして、 一旦、「アクション」パネルは閉じます。 そして、「制御」> 「ムービープレビュー」で、 確かめてみましょう。 点滅します。 マウスポインターの動きに、 水平の動きに追随はしています。 反応はしていますけれども、 思った動きとは違います。 これは mouseX プロパティの 使い方が誤っているからです。 では、 SWF は1回閉じます。 先ほどの説明で、 わざと詳しく説明しませんでした。 mouseX あるいは、 mouseY というプロパティは、 インスタンスのプロパティです。 MovieClip 正確には、 親の DisplayObject ですけれども、 つまり、インスタンスによって 値が異なるということを示唆しています。 「そんなことはないでしょう」と、 それは実は、 インスタンスから見た マウスポインタの xy 座標だからです。 図にするとこうなります。 この縦線がステージの左端です。 x 座標 x プロパティで言えば、 ここが 0 (ゼロ)になります。 ペンギンが 100 のところに いるとしましょう。 x プロパティ 100 です。 そして、マウスの座標が、 ステージ左端から測った時は、 50 の場所にいるとします。 この時 MovieClip から見た ポインタの座標は、 MovieClip よりも 左側になりますので、 -50 ということになってしまいます。 そして、スクリプトで、「ペンギンの座標を -50 にしろ」と言うと、 ステージの左側、 外側に行ってしまうんですね。 -50 に行ってしまいます。 次のエンターフレーム。 今度は、ペンギンから見た、 インスタンスから見た、 マウスポインタの座標は、 50 + 50 で 100 になります。 ということで、次のエンターフレームでは、 100 ピクセルの位置に動きます。 これを繰り返すので、点滅したように 動いてしまうことになるわけです。 問題は、この x = mouseX という ステートメントです。 x というプロパティと、 mouseX というプロパティは、 座標の起点が違います。 原点が違うんですね。 言ってみれば、 天動説と地動説の違いです。 mouseX というプロパティは、 自分から見たマウスポインタの座標です。 つまり、自分から見て、 太陽が東から昇って西へ沈んでいる。 天動説ですね。 ところが、 x プロパティというのは、 自分から見た自分の位置は わかりませんので、 親から見た「親から見て 100 ピクセルの位置にいるよ」と、 例えば、そういう、 親から見た位置なわけです。 それを単純に、= で代入してしまったら、 おかしなことになりますね。 どうしたらいいかというと、基準を揃えます。 揃え方は、親から見た揃え方と 自分から見た揃え方、 2つあるんですが、 親から見た方が、 とりあえず分かりやすいので、 親から見ることにします。 x は元々親から見ています。 では mouseX はというと、 この前に親を置くんですね。 まさに「親」という、 parent というプロパティがあります。 このプロパティは 自分の親のインスタンス、 親のタイムラインを参照します。 ということで、 MovieClip のシンボル インスタンスが置かれている親、 現在はメインタイムラインです。 メインタイムラインから見たマウスの座標、 x 座標ですね。 それと、この X 座標は元々、 メインタイムラインから見た座標ですから、 このように一致させれば、 問題が無くなります。 では、「アクション」パネルは一旦、閉じて。 ムービープレビューで確かめてみましょう。 「制御」>「ムービープレビュー」です。 今度は、マウスポインタの x 座標に追随してますね。 スライダーなんかが こんな動きです。 問題がないようですので、 SWF のウインドウを閉じましょう。 水平方向が正しく動作しましたので、 今度は、垂直方向、 y の方向もスクリプトを書き足しましょう。 キーフレームを右クリックして、 「アクション」パネル。 コピーしましょうか。 「コピー」して、 「ペースト」です。 そして、 y 座標を mouse 大文字で Y にすれば良いということですね。 「アクション」パネルは閉じて、 改めて、ムービープレビューを確認します。 「制御」>「ムービープレビュー」です。 今度は、水平垂直とも、 マウスポインタの後を インスタンスが追っかけます。 完全にインスタンスに 追随するということになりました。 では、 SWF 閉じます。 フレームアクションを見て おさらいしましょう。 キーフレームを右クリックで、 「アクション」パネルを開きます。 マウスポインタの xy 座標は、 mouseX mouseY という プロパティでした。 ただし、 x 座標や y 座標とは 基準が違います。 なぜかというと、 mouseX mouseY は、 インスタンスから見た座標だからです。 一方で、 x 座標 y 座標は、 自分が配置された親から座標を測っています。 そのため、マウスポインタの後に 追いかけたい、 マウスポインタの座標と自分の座標を 一致させたい、という場合には、 基準を揃えないといけません。 今回は parent という プロパティを使って、親を参照し、 親から見たマウスポインタの 座標に合わせることで、 インスタンスをマウス座標に一致させました。 以上が、マウスポインタの座標の調べ方、 そして 、座標空間と言いますけれども、 基準となる原点の 違いについてのご注意でした。

基礎から学ぶActionScript 3.0

このコースではFlashのActionScript 3.0を初めて学ぶ方を対象に、ActionScriptの基礎から実際にプログラミングをするところまで学習していきます。簡単なスクリプトによるオブジェクトの操作の仕方から始まり、変数や関数といったプログラミングの基礎、そしてインタラクティブなコンテンツの作成まで詳しく解説いたします。

6時間30分 (49 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年01月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。