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

マウスボタンを放す操作はTouchPhase.ENDEDでとる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスボタンを押した後放す操作は、Touch.phaseプロパティの値がTouchPhase.ENDEDになります。
講師:
10:17

字幕

この Satrling ルートクラスは ライブラリに置いたビットマッップから imageオブジェクトを作って Starling フレームワークの ステージの真ん中に配置しています また何もアニメーションや インタラクションはありません これに対して インスタンスをクリックしたら 何か動作をする様に 設定をしてみたいと思います では一旦 swf のウインドウは閉じます ルートクラスの確認をしましょう ライブラリのビットマッップから image オブジェクトを作る 一連の処理を簡単に確認します 先ずはライブラリのビットマッップには クラス名を付けました それを new 演算子で呼び出して BitmapData をインスタンスとして 変数に入れます そのビットマップのインスタンスは Texture の fromBitmapData というメソッドで Texture に変換します この Texture のオブジェクトは image オブジェクトに入れます new 演算子で image のコンストラクタを呼び出したら その引数に Texture を渡します こうして できたイメージオブジェクトを addChild で このルートクラスに加えます 後 この 4 行は インスタンスをステージの真ん中に配置し 更にそのインスタンスの 基準点を真ん中にしています マウスクリックに対する処理を加える前に 見にくいので 要らない所は畳んでいきましょう image オブジェクトのインスタンスは プライベートに宣言した プロパティに入れてあります これだけ分かれば後は 畳んでしまって良いでしょう ここまで畳んでしまいます それからマウスの操作を扱う時には 必要なクラスがあります マウス操作は Touch というイベントになるんですが それに関連するクラスは 3 つ 既にインポートしてあります Touch のオブジェクトを扱う Touchクラス それから Touch マウス操作の イベントを受けるのは TouchEvent になります それから その TouchEvent というのは マウス操作全般 全てを扱ってしまうんですが それが どういう操作なのか クリックしたのか或いは ドラッグしたのかといった操作は TouchPhase というクラスで 切り分けることになっています この 3 つが既にインポートしてあります 先ず image オブジェクトに マウスの操作を受け取るための EventListener を加えます この後に加えていきましょう instance という名前ですので これをコントロール若しくは コマンドドラッグしてコピーします そして addEventListener ですね こちらは もうお約束通りです ただ イベントがですね Mouse イベントというのがありません TouchEvent になります これをコピーします コントロール若しくはコマンドドラッグです そして TouchEvent には イベントが Touch しかありません マウス操作全般を これで受け取ってしまいます そして Listener のメソッド まだ書いていませんが onTouch にしましょう この onTouch というメソッドを この後に加えていきます Listener メソッドを private で加えます そして function 丸括弧 () 中括弧 { これは ショートカットがありますので それで入れましょう エスケープキー 1 回 そしてキーボードの f と n を 順番に押します [esc] f n で function 丸括弧 () 中括弧 { が入ります そうしましたら インデントを整えて 短いメソッド名ですけど 一応コピーしましょう コントロール若しくはコマンドドラッグです そして Event オブジェクトを受け取ります 型指定は Touch イベント 戻値は void です この中に処理を加えていきます マウスイベント全てが TouchEvent. TOUCH で 発生してしまいますので どういう操作なのかを調べるためには Event オブジェクト Touch オブジェクトのイベントですけれども そこから Touch オブジェクトを 取らないといけません Touch オブジェクトを入れる 変数を宣言します myTouch で 型指定は Touch オブジェクトです そして Event オブジェクト これはコピーします コントロール若しくはコマンドドラッグ そして GetTouch というのが Touch オブジェクトを取るための メソッドです そして その時は表示オブジェクトの どこから検出しましょうかと 下から見ていきましょうかという その階層を定めなければいけません 今回はこれはステージにしてみましょうね ステージで見ます そして 取得したいイベントが問題です これはマウス操作を 押した時 BEGAN ですね 動かすと MOVED そして離した時に ENDED という風になります この ENDED が取れれば マウスを押して離したことは取れますので それを定めます 第 2 引数を定めないと 全ての Phase のイベントが取られるんですが ここで ENDED だけ欲しいよ という風に指定すれば ENDED の Phase だけの時だけ Touch オブジェクトが取れます 今回は この方が早いので 第 2 引数を指定します この時の引数の指定は TouchPhase のクラスで指定します コントロール若しくは コマンドドラッグでコピー そして ENDED こうすると ENDED の phase の時だけ Touch オブジェクトが取得できます そうでない場合 単にマウスボタンを押した 動かしたという時には オブジェクトは取れません ですからオブジェクトがあるのかどうか if ステートメントで判定をします 判定の仕方は この括弧の中に そのまま入れてしまえば結構です 空っぽであれば この if ステートメントが弾きます オブジェクトがあれば ture と評価されるので この中の処理が行われるという訳です 閉じ括弧を 1 つ入れ過ぎてしまいましたね これは取ります そして Touch オブジェクトがあったということは マウスボタンをインスタンス上で押して その後 離したということが分かりますので では ここでインスタンスを 回転してみましょう コントロール若しくは コマンドドラッグでコピーして 回転は rotation です プロパティ そして回転角を足しましょう 単位は度数ではなくて ラジアンですので お気を付けください Math.P I で 180 度になります ではそれを半分にして 90 度回転することにしましょう では一旦保存しまして ファイルメニューから保存です ムービープレビューを確かめますので fla ファイルの方に切り替えます そして制御メニューから ムービープレビューです さてそれでは インスタンスの上でマウスボタンを押して 離します 90 度回転しましたね 外で押して離しても特に問題ありません これでクリックで 回転するということになります 但し未だ この時点では 1 点問題があります というのは マウスボタンを外で押した時は TouchPhase がスタートしません ですから中で離しても 或いは動かしても 何も起こらなくても良いのですけれども インスタンスの上で マウスボタンを押すと TouchPhase がスタートします そのため外で離しても ENDED という風になってしまうんですね この部分を修正するには もう少し工夫が必要になってきます そのためのメソッドを 覚えなければいけません それは また次の段階の課題になってきます とりあえず これまでの所を復習しましょう ウインドウは閉じて そして Starling ルートクラスに切り替え スクリプトをフルスクリーンにしたいので ファンクション 4 番を 2 回押します インスタンスの上で マウスボタンを押して離した場合 大雑把に言えばクリックですね ちょっと問題はありましたけれど その場合の処理の流れを確認しましょう 先ずはインスタンスに対して addEventListener メソッドを呼び出して TouchEvent の Touch というイベントに対して Listener を登録します Listener は onTouch としました private で メソッドを定義しています このメソッドが受け取った Event オブジェクト TouchEvent のオブジェクトに対して GetTouch というメソッドを呼び出すと Touch オブジェクトが取れます その場合 引数は先ず第 1 に 表示リストのどこから その Touch のイベントを 検知するのかという階層です 上の方で 定めていれば特な問題はありませんので 今回は stage にしています 次に第 2 引数を定めないと マウス操作に全てに対してTouchEventの オブジェクトが取れるんですけれども TouchPhase で 第 2 引数を指定してあげると この phase の時のみ ENDED ですね マウスボタンを離した時のみ Touch オブジェクトが取れます そうでない場合は取れませんので それを if 文で オブジェクトがあるかどうか判定しています なければスキップです あれば それは ENDED つまりマウスボタンを離した という判定になりますので マウスボタンが離された場合の処理を行います 但しこの場合 インスタンス上で離したということには TouchPhase ENDED は ならないということに 注意をしておいてください

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

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

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

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

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

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