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

Starlingフレームワークのアニメーション

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アニメーションの扱いは、定義済みのActionScript 3.0と基本的に同じです。
講師:
09:23

字幕

Starling フレームワークで ステージに置いたオブジェクトに スクロールのアニメーションを 加えてみます もっとも アニメーションの加え方は 基本的に 定義済み ActionScript 3.0 と 同じです ですから ああ 同じなんだな ということを確認しようということです Flash アプリケーションには アニメーションを加える前の Flash ムービーファイル fla ファイルと それから Starling ルートクラスが 開いてあります Flash ファイルの方は ビットマップが置いてあって そして クラスが定義してあります クラス名は Pen です 先に動きを確認しておきましょう ムービープレビューを確かめます 制御メニューから ムービープレビューです ライブラリのビットマップが ステージに配置されています 中央に置かれていますが まだ動きません これにアニメーションを加えていこう ということです では このウィンドウは一旦閉じます Flash ムービーファイル fla ファイルの フレームアクションから 確かめます タイムラインで フレームを右クリックし アクションパネルを開きます もう お約束の 3 行です Starling クラスを import し new 演算子で コンストラクタを呼び出したら Starling ルートクラスと Flash の stage を渡します そのオブジェクトに対して start メソッドを 呼び出すことにより Starling が実行されます 一旦アクションパネルは 閉じましょう そして MyClass これは Starling ルートクラスですが 確認します 画面が見にくいので ファンクション 4 番を 1 回押して フルスクリーンの表示にします Starling ルートクラス MySprite は Starling の Sprite クラスをベースにして extends して クラスを定義します コンストラクタは addEventListener で ADDED_TO_STAGE このルートクラスのオブジェクトが ステージの子になった時に 初期化のメソッド initialize を 呼び出すように設定しています そして initialize のメソッドは こちらです 初期化のメソッド initialize は 先ずライブラリのビットマップの オブジェクトを ライブラリのビットマップに付けた クラス名で 呼び出して作ります このオブジェクトは BitmapData の オブジェクトなのですが これを Texture にしなければ いけませんので Texture.fromBitmapData というメソッドに BitmapData の オブジェクトを渡して Texture のオブジェクトに変換します そうしたら これを Image オブジェクトの中に 包み込む つまり Image のコンストラクタの 引数に Texture を渡し new でオブジェクトを作ります このオブジェクト変数は プロパティに宣言してありますので これから加えるメソッドからも アクセスすることができます 後は位置揃えです stage に加わってから メソッドが呼び出されていますので stage にアクセスできますので その stage の幅と 高さの 半分ずつを インスタンスの xy 座標に渡し 但しデフォルトでは instance の座標というのは 基準点は左上隅にありますので 基準点を動かす- pivotX pivotY に instance の幅と 高さの半分ずつを 入れ込んで instance の基準点を instance の中心にしています その上で この Starling ルートクラスの子どもに Image オブジェクト instance を 加えているという流れです アニメーションの加え方は ActionScript 3.0 定義済みと 同じです つまりイベントリスナーを 加えるということですね Event は やはり ActionScript 3.0 と同じ ENTER_FRAME です では コピーしてしまいましょう addEventListener Event までは一緒なので これを コントロール若しくはコマンドキーを 押しながらドラッグして コピーです イベントは ENTER_FRAME ですので ドット E で ENTER_FRAME が ハイライトしますから このコードヒントから ENTER_FRAME を選択します そして メソッドは まだリスナーは 定義していませんが scroll という名前にすることにします これでイベントリスナーの 登録ができましたので 次に scroll というリスナーメソッドを 定めることになります リスナーメソッド scroll は private で定めます そして function 丸括弧 () 中括弧 {   と入れるのですが これにはショートカットがあります Esc キーを 1 回 キーボードの F のキーを 1 回 N のキーを 1 回押します 今言った通り 手元で [esc] f n とタイプすれば これで functiom 丸括弧 () 中括弧 {   まで入ります 閉じ括弧のインデントが ちょっと良くないので整えます そして メソッド名は scroll です コピーしましょう コントロールキー若しくはコマンドキーを 押しながらドラッグです eventObject を受け取ります ENTER_FRAME の場合は Event が型指定になります 戻り値はありませんので void です ここにスクロールの処理を 加えていくことになります 横スクロールですから インスタンスの水平座標 x を使います これは一旦 変数にとっておきましょう 変数は nX とします 型は Number ですね そして instance タイプしても どうってことはありませんが タイプミスを防ぐためにコピーをします コントロール若しくはコマンドドラッグ そして x 座標を一旦コピーして この x を左に動かしますので 引き算をします 5 ピクセルずつ引き算 そして もしステージの外に 左側に出てしまったら右に戻したいので if 条件です x nX が 左側 0 よりも小さくなってしまったら 右側に持っていきます 右側に持っていく時には この座標値に ステージ幅を加算すれば良いですね stageWidth この段階では まだ変数に対する操作ですので この変数に 設定された値を 改めて instance に戻します コントロール若しくはコマンドドラッグ コピーをできるだけ使いましょう そして nX を代入すれば これで OK ということで 一旦クラスファイルは保存します そして fla ファイルの方に移りましょう ムービープレビューを 確認したいと思います 制御メニューから ムービープレビューです ステージに置かれたビットマップを 包んだイメージですね ビットマップをくるんだイメージが置かれて それが ENTER_FRAME で 水平スクロール 左側にスクロールするようになりました では このアニメーションを設定する Starling フレームワークの書き方 ActionScript 3.0 定義済みと 一緒ですけどね 一応まとめておきましょう 確認をします 一旦ウィンドウを閉じます Starling ルートクラスの方に 戻って確認しましょう フルスクリーンにしますので F4 キーを 2 回押します 行数が増えましたので ちょっと全体が見にくいですね では import 宣言の部分は 畳んでしまいましょう import 宣言の部分を選んで この小さいマイナスを クリックするとたためます あと initialize の部分も 良いでしょうか 一部畳みます これでご説明しましょう フレーム単位のアニメーションは ActionScript 3.0 定義済みと 同じです イベントリスナーを addEventListener メソッドで登録します イベントは やはり ActionScript 3.0 定義済みと 同じ Event クラスの ENTER_FRAME です scroll というメソッドを リスナーにしました それが このメソッドです この中は別に Starling フレームワーク 特に関係ないですね instance の x 座標をとって その値に左側に動きますので マイナス 5 ピクセルしたと そして もし左側を ステージ左端を過ぎてしまった場合 ゼロよりも小さくなった時は ステージ幅を足し込みます これは変数に対する操作ですから 最後にその変数値を instance の x 座標に 入れることによって スクロールが ずっと続くということです

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

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

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

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

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

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