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

[ライブラリ]のビットマップからつくったインスタンスをステージ中央に置く-前編-

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
StarlingルートクラスからStageオブジェクトを参照するには、インスタンスが表示リストに加えられるのを待たなければなりません。
講師:
07:47

字幕

理由は分かりましたので 次は対処方法です もう取り敢えずありませんので 消してしまっても良いのですが コメントは後にしておきましょう そして 今のところ これがエラーの原因なのですが 一旦コメントを外して元に戻します このままでは動きません 理由をご説明しましょう では もう 1 度 fla ファイルの方に 切り替えます そしてタイムラインを見たいので ファンクション 4 番で タイムラインを表示します タイムラインに切り替えます フレームアクションを もう 1 度確かめましょう 右クリックで アクションです このフレームアクションが 悪いわけではありません 理由をご説明しよう ということなのですが Starling の インスタンスを new Starling で作ります これで Starling が初期化されて Starling のステージ それからルートクラスの オブジェクトを作り そして その後の 表示リストの階層などを 作っていくわけなのですが そのルートクラスが 引数に渡されています そうすると この初期化の時に ルートクラスのオブジェクトを作って Starling のステージに 組み込むという処理が 初期化で行われます 組み込むまでは Starling のルートクラスは ステージの子どもになっていません ステージの子どもに なっていない時は ステージにアクセスができません これは Starling だけではなくて ActionScript 3.0 共通の約束事です ですからステージの子どもになる前に ステージにアクセスすると まだステージにアクセスできない ということで null が返ってきます ちなみに ヌルという呼び方もありますね 英語読みだとナル ローマ字読みだとヌルなので どちらでも良いですけれども 英語読みで私は説明しています ということなので 元に戻りまして Starling ルートクラスの方で コンストラクタが呼ばれた時に 直ちにステージにアクセスすると 問題があるということです ですから Starling ルートクラスの方に 修正を加える必要があります ではアクションパネルは閉じて Starling ルートクラス MySprite に切り替えます そして 見づらいので ファンクション 4 番を 押して フルスクリーンにしましょう どこを直せば良いかというと Starling ルートクラスの コンストラクタが呼ばれた時に 直ちに 初期化にかかっています これが 早過ぎるんですね この初期化のメソッドを 呼び出すのは この Starling ルートクラスが ステージの子どもになった時 なった後に しなければいけない ステージの子どもになったら というのは ActionScript 3.0 の 定義済みのイベントで ADDED TO STAGE というのがあります Starling でも この ADDED TO STAGE は使えますので このイベントリスナーに 初期化の initialize という メソッドを定めれば良いということです ADDED_TO_STAGE の イベントを使いますので その Event のクラスを 先ずインポートしておく必要があります starling の events の Event です これは Flash の Event ではなくて Starling のイベントですので ご注意ください そして ここから後は ActionScript 3.0 定義済みと 同じ感覚です addEventListener そしてイベントが Event の ADDED_TO_STAGE これは ActionScript 3.0 定義済みと同じイベントです そこに この initialize の メソッドを リスナーとして指定すれば良いと いきなり呼び出してはいけませんので ここはコメントアウトします では保存しましょう fla ファイルの方に切り替えて 制御メニューから ムービープレビューです エラーはなくなって Image オブジェクトが表示されています そして Image オブジェクトは ステージの中央に ないじゃないか と思うかもしれませんが 中央にあります 問題は Image オブジェクトの 原点基準点が デフォルトでは左上隅にあるんです ですから この辺ですね ステージの 真ん中辺りにありますよね ですから この原点を イメージの イメージの Image オブジェクトの この真ん中に持ってこられると良いですね ActionScript 3.0 定義済みのクラスでは この基準点を動かすという プロパティはないのですが Starling には幸いなことに 用意されています ですから そのプロパティを使って この Image オブジェクトの原点 基準点を中央にすれば ちゃんとステージの真ん中に このイメージが表示されることになります では このウィンドウは閉じましょう また Starling ルートクラス MySprite のクラスに切り替えます フルスクリーンにするために キーボードから ファンクション 4 番を 2 回押しましょう 画面が少し狭くなってきたので コメントは削ってしまいます トレースも消しましょう そして基準点を動かすという プロパティを設定したいと思います 基準点の変更も この初期化のメソッド initialize の中で行いたいと思います では xy 座標の設定に続けて やはり instance に対して コピーします コントロールキーもしくは コマンドキーを押しながらドラッグ プロパティはですね pivot です pivotX y 座標はもちろん pivotY です これを instance の 半分ずらせば良いですね デフォルトでは 左上隅になっていますので それを instance の半分足し込んであげれば 良いということですから 幅に対して Width に対して 2 割って 半分足し込んであげると またこれも コピーしちゃいましょう コピーして ペーストです pivotY 今度は縦方向ですね Width ではなくて height となります これで良いでしょう 忘れずに保存しましょう ファイルメニューから保存です fla ファイルの方に切り替えます そして ムービープレビューを確かめますので 制御メニューから ムービープレビューです 今度は期待通り ステージの中央に イメージの オブジェクトが置かれました ではウィンドウを閉じて ステージの中央に オブジェクトを配置するための 方法処理について おさらいしましょう Starling ルートクラスの方に 移ります ファンクション 2 回で フルスクリーンにします ポイントは 2 つありました ステージの真ん中に置きたい という時には ステージにアクセスして その幅や高さを取らなければなりません ところが コンストラクタが呼ばれた時 直ちにステージに アクセスしようとしても まだステージの子どもではないので ステージにはアクセスできません どうしたら良いかというと ステージの子になるまで待つ ということで イベントは ADDED_TO_STAGE ここで初期化の関数メソッドを 呼び出しました これが 1 つ目です もう 1 つは デフォルトではオブジェクトの 基準点原点が左上隅にあります Starling フレームワークでは これを動かす プロパティ pivotX pivotY があります ですから これを調整してあげれば 基準点を動かすことが可能です 今回はインスタンスの真ん中に 基準点を持っていきたかったので インスタンスの幅と 高さの 2 分の 1 を この pivotX pivotY に足し込みました これで Image オブジェクトが ステージの中央に 表示されたというわけです

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

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

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

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

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

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