StarlingフレームワークによるStage3Dを使った2次元表現

ドラッグするマウスポインタの位置を保持する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ドラッグし始めたマウスポインタのインスタンス上の位置を保つ方法について解説します。
講師:
07:00

字幕

この starling ルートクラスには ステージに置いたインスタンスの ドラッグ & ドロップの 処理が書いてあります addEventListener で TouchEventに登録し そしてマウスポインタの座標を調べ その座標に合わせて インスタンスを動かすという処理です 先ずは この動作を確認してみましょう fla ファイルの方に切り替えます そしてムービープレビューを確かめましょう 制御メニューからムービープレビューです インスタンスを ドラッグ&ドロップすることができます 一見 特に問題なさそうに見えるんですが こういうインタラクションというのは 細かく見た方が良いです 例えば このペンギのくちばし辺り 回すボタンを押しました まだ動きません ちょっと動かすと マウスポインタが ペンギのお腹に行ってしまうんですね 端っこをドラッグし始めても 動かすと 丁度中心にマウスポインタの位置が 定まる様になってしまいます これは なぜかというと マウスポインタの位置と インタラクションの x y 座標を一致させています そしてインスタンスの x y 座標というのは 基準点に定まっていますが この imageオブジェクトの基準点は インスタンスの中央にあります ですから どこをドラッグし始めても必ず ポインタが中央に来る様に 移動してしまうんですね これはインタラクションとしては ちょっと不満が残るところだと思います ドラッグし始めた所から ポインタが動かない様にしたい というのが今回のお題です ではウインドウを閉じまして Starling ルートクラスに切り替えて ファンクション 4 のキーを 2 回押して スクリプトをフルスクリーンにします インスタンスをドラッグする時に インスタンス上の マウスポインタの位置をキープする というのは幾つかの考え方があります 今回おそらく使いやすいのは インスタンスの座標をどこどこに合わせろ という風にするのではなくて マウスポインタと同じ方向に 同じだけ動かすという考え方にしてみます そうすれば マウスポインタの動きと同じであれば マウスポインタのインスタンス上の位置が キープされることになるからです では具体的にどうするかですね 先ず GetLocation のメソッドを Touch オブジェクトに対して 呼び出すことにより 現在のマウスポインタの座標は 分かっています どれだけマウスポインタが 動いたか知りたい場合には 現在の 1 個前ですね 1 個前の座標が分かれば 現在との引き算をすれば どれだけ動いたかが分かります 正にそういうメソッドがありまして 前の場所ということなので last にしましょう lastPoint やはり Point オブジェクトです Point で型指定をします Touch オブジェクトに聞きます コントロール若しくは コマンドドラッグでコピーしまして getPrevious です PreviousLocation 1 個前の場所がどうかと やはり引数は同じですね これで前の座標と 今の座標が分かりましたから 引き算をすれば良いということになります 引き算の結果を入れるのは マウスポイントにしましょう マウスポイント movePoint にしましょうか movePoint マウスの座標にする訳じゃないですものね 動いただけ動かそうということなので movePoint にしました そして現在の Point インスタンスですね 座標から差し引くことの subtract というメソッドが Point オブジェクト同士の 引き算になります ターゲットが引かれる方ですね 括弧の中には引数には引く方を入れますので lastPoint を入れます これでマウスポインタが どれだけ動いたかということが分かります では この movePoint に コピーをして インスタンスの移動する座標を ペーストです movePoint に切り替えます ただ これではいけませんよね movePoint にしてしまってはいけません インスタンスの 現在の位置から 同じだけ動かすということなので インスタンスの位置に足し込みます += 現在のインスタンスの位置に対して マウスポインタが動いた分だけ 動かしましょうと 同じだけ動かしましょうということですね では保存をします ファイルメニューから保存です fla ファイルの方に切り替えて ムービープレビューを確かめましょう 制御メニューからムービープレビューです インスタンスが表示されました では端っこの方をドラッグしてみます ちゃんとドラッグをし始めた マウスポインタの位置が インスタンス上の位置が キープされていますね 念のためくちばしの所 勿論大丈夫ですね こうすることによって ドラッグし始めたマウスポインタの位置を そのままキープして ドラッグすることができます ではまとめましょう ウインドウは閉じて Starling ルートクラス ファンクションの 4 番を 2 回押して フルスクリーンにします ドラッグを始めたインスタンス上の マウスポインタの位置を どの様に保持するかということが ポイントですね その場合 考え方が幾つかあるんですが 今回取ったのは マウスポインタの現在の座標が分かる これは Touch オブジェクトに対して GetLocation です 更に それに対して 1 個前の その直前のマウスポインタの座標が Touch オブジェクトに対する GetPreviousLocation というメソッドで調べることができます 引数は両方とも どの座標計から見るかと これは勿論揃えないと おかしいですね 両方ともステージにしています そうすると今のマウスポインタの位置 その前の時のマウスポインタの 位置が分かりますから 引き算をすれば どれだけ動いたかが分かります 引き算は引かれる Point オブジェクトに対して subtract というメソッドを呼び出し 引く方の Point オブジェクトを渡します これで引き算をした 差分ですね 差分の 座標をもった Point オブジェクトができますので その x y 座標を そのまま設定したのではダメです 現在のインスタンスの位置に 足し込んであげれば マウスポインタと同じだけ インスタンスが動くので 結果として マウスポインタとインスタンスの 位置関係が保たれるということです

StarlingフレームワークによるStage3Dを使った2次元表現

StarlingはFlash Player 11の新しい描画機能Stage3Dに基づいて作られた2次元の描画用フレームワークです。このコースではStarlingフレームワークによるクラス定義の基礎から、トゥイーンアニメーションやマウスインタラクション、そして最近のバージョンで実装された新しい機能まで解説していきます。

5時間09分 (40 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
プログラミング
価格: 3,990
発売日:2014年01月26日

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

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

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