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

オブジェクトをドラッグ&ドロップする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Touchイベントにより、オブジェクトをドラッグ&ドロップします。
講師:
10:09

字幕

Starling フレームワークで ステージに置いたインスタンスを ドラッグ & ドロップしてみましょう どの様にスクリプトを書いたらいいのか というのを実際に練習してみたいと思います この Starling ルートクラスには とりあえず ビットマッップのインスタンスから image オブジェクトを作って ステージの中央に配置しています 簡単に この流れを確認しましょう ライブラリのビットマッップには Pen という名前が付けてあって そのコンストラクタを 呼び出すことによって BitmapData の変数に入れています その BitmapData は Texture の fromBitmapData というメソッドにより Texture に変換します そして ステージに置くには image オブジェクトにしないといけませんので new image でコンストラクタを呼び出し Texture を渡します それをルートクラスに addChild とすれば ステージに表示されます 後の 4 行は位置決めで 最初の 2 行がインスタンスを ステージの真ん中に置き 次の 2 行は基準点を インスタンスの中心にしています では今の段階で ムービープレビューを見て 結果を確認してみましょう フラファイルの方に移ります そして制御メニューから ムービープレビューです ピットマップが image オブジェクトに入れられて ステージ中央に配置されています まだマウス操作に関する処理は 書き加えていません ではウインドウを閉じます そして Starling ルートクラスに入れ替えます スクリプトをフルスクリーンにしますので ファンクション 4 番を 2 回押して 確認していきましょう 必要なクラスは 既にインポートしてあります マウス操作は Starling では Touchというイベントとして扱いますので TouchEvent のクラスをインポートします そして TouchEvent から Touch オブジェクトというのを 取り出します これがマウス操作の情報を持っています そして その操作がどういう操作なのか マウスボタンを押したのか マウスを動かしたのか 離したのかというのは TouchPhase というクラスで確かめます この 3 行のインポートをしてあげます 必要でない部分は見にくいので 畳んでおきましょう コンストラクタは畳みます それから初期化のメソッドも 1 行残しておけばいいでしょう image のインスタンスは プライベートなプロパティを宣言してあって ここに入っています では このインスタンスに対して EventListener を加えましょう 合わす操作のEventListener です ではコピーします ドラッグしながらコントロール 若しくはコマンドキーでコピーです そして Listener を加えるのが 原則通り addEventListener ですね 但しイベントは Touch イベントになります これもコピーで持ってきます コントロール若しくはコマンドドラッグです イベントは 1 つしかありません Touch です そして Listener をこれから定めるんですが では OnTouch にしましょう Listener メソッドを定めます プライベートで function の入力のショートカットは [esc] f n です 順番に入力します[esc] f n で function 丸括弧() 中括弧{  と入ります インデントを整えて メソッド名は OnTouch としました コントロール若しくは コマンドドラッグでコピーします Event オブジェクトを受け取ります 勿論 TouchEvent ですね そして戻り値は void です Touch イベントが起こって Listener が呼び出されると 何かしらマウス操作が 行われたことが分かります でも何のマウス操作か分かりませんので それを調べるためには TouchEvent を取り出します 変数は myTouch としましょう データ型は TouchEvent です TouchEvent から Touch オブジェクトを取ります Touch オブジェクトは Event オブジェクト TouchEvent オブジェクトですね そこから GetTouch で取り出せます 引数には どこに対して その マウス操作の扱いを見るのかと 表示リストの中の階層を指定するんですが マウスを動かす move の場合には ステージでいいでしょう 第 1 引数だけでもいいんですが もし取りたい phase Touch オブジェクトの phase ですね 決まっている場合には 第 2 引数に指定してしまうと便利です TouchPhase の中の ドラッグの場合は moved ですから moved だけ調べたいんだよ という場合には ここで moved という指定をします そうすると moved 押したまま マウスボタンを押したまま動かしている時だけ TouchEvent が取り出せます ですからこれがあれば ドラッグをしているということになりますね それを if 条件で確かめます この中に Touch オブジェクトを 括弧の中に入れて もし空っぽであれば if 条件 if ステートメントで弾かれてしまいます オブジェクトがあれば Touch の中の TouchPhase が MOVED だと フラグしていることが分かりますので フラグの操作を進めていきます この if ステートメントの中で 行う操作というのは ドラッグですから マウスポインタの座標を調べ その座標を このインスタンスの座標に合わせれば ドラッグしていることになりますね ではマウス座標を どうやって調べるかということなんですが これも やはり Touch オブジェクトに聞きます 先ず変数ですね 変数に座標を取るんですが この座標は Point オブジェクトとして取られます ですから このインポートには Point オブジェクト これは Flash の Point オブジェクトです Point クラスのインポートが行われています それを入れる変数は currentPoint にしましょう そして型指定はポイントです Touch オブジェクトに聞くんですけども 聞き方はメソッドは GetLocation です 座標はどこから見た座標なのか ということなんですが 今回はステージでいいでしょう ステージから見た座標です これで座標は取れましたので 後は インスタンスの座標を この座標に合わせれば良いということですね コピーしましょうドラッグ コントロールドラッグ 若しくはコマンドドラッグです その x 座標は 今 取り出した Point オブジェクトの x 座標に 合わせれば良いでしょうということですね もう これ コピー使ってしまいますね y に変えるだけです コピーして ペーストです y に変更します これでマウスポインタの座標に インスタンスの座標が 合致するということになりますので プラグの操作が行えます では Starling ルートクラスを保存して ムービープレビューを確かめましょう フラファイルに切り替えます 制御メニューでムービープレビューです インスタンスの上でマウスボタンを押し 動かすと ドラッグできます そしてマウスボタンを離せば インスタンスがその位置に留まります ドラッグ & ドロップということで 無事に操作ができました ではウインドウを閉じます 確認をしますので Starling ルートクラスの方に移りましょう ファンクション 4 を 2 回押して フルスクリーンにします インスタンスを ドラッグする操作についての スクリプティングについておさらいします 先ず EvenListener です ドラッグするインスタンスに対して addEventListener で Listener の登録をします Event は TouchEvent のTouch これで全てのマウス操作 或いはタッチパネルも含まれるんですが そのイベントを扱います Listener は OnTouch という名前にして ここにプライベートなメソッドとして 定義しました Event オブジェクトを受け取ります TouchEvent のオブジェクトです その Event オブジェクトに対して GetTouch というメソッドを呼び出すと Touch オブジェクトは取り出せて マウス操作の情報を得ることができます 引数は どの表示リストの階層から見るのかという オブジェクトと それから第 2 引数はオプションですが もし これだけという 限定して欲しい Phase の値 TouchPhase の定数があった場合には それを指定します 今回は moved だけで良いので指定しました すると TouchPhase の段階が moved の場合には Touch オブジェクトは取られます それ以外のマウス操作の場合には Touch オブジェクトは取れません ですから取れたかどうかを if ステートメントで判定していきます 取れた場合には この 3 行の処理が行われて TouchEvent Touch オブジェクトに対して GetLocation というメソッドで マウスポインタの座標を調べます 引数にはどの座標から見るのかということで 今回はステージから見た座標にしています それが Point オブジェクトに取られますので Point オブジェクトの x 座標 y 座標を調べて それをインスタンスの x 座標 y 座標に 代入すればインスタンスが ドラッグ & ドロップできるということです

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

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

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

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

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

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