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

Tweenクラスでインスタンスを水平にアニメーションさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
[ライブラリ]のビットマップからつくったインスタンスを、Tweenクラスで水平にトゥイーンアニメーションさせます。
講師:
11:19

字幕

簡単な水平スクロールのトゥイーンを Starling ルートクラスに 定めてみることにしましょう Flash アプリケーションには 簡単な設定を済ませた- Flash ムービーファイル fla ファイルと それから Starling ルートクラスの AS ファイルが開いてあります Flash ムービーファイル fla ファイルの方には ライブラリに ビットマップが置いてあり クラスが設定してあります Pen という名前になっています フレームアクションを確認しましょう お馴染みの 3 行が書いてあります Starling クラスの import Starling オブジェクトを new 演算子で作る その引数には Starling ルートクラスと stage です そして Starling の オブジェクトに対して start メソッドを呼び出して Starling を起動させます アクションパネルは閉じて Starling ルートクラスの方を 見てみましょう スクリプトをフルスクリーンにするために ファンクション 4 番を押します Starling ルートクラスの コンストラクタは イベントリスナーを登録して このルートクラスの オブジェクトができて ステージに加えられた時 ADDED_TO_STAGE そこで初期化のメソッド initialize を呼び出します この中では ライブラリに保存してある- ビットマップのクラスを呼び出して そのインスタンスを ビットマップデータの インスタンスとして作ります それをテクスチャの fromBitmapData という メソッドに渡して Texture に変換し そのテクスチャを Image オブジェクト new Image でコンストラクタを 呼び出し その引数に渡していますので Image オブジェクトが この変数に instance という変数に入ります 後は Starling ルートクラスに addChild を子どもとして加えれば 表示されます この 4 行は 位置決めですけれども 今回はそうですね x 座標は デフォルトのままにします コメントアウトしましょう y 座標は 垂直方向に ステージの高さの半分ですから 真ん中ということです それから 基準点 pivotX pivotY を インスタンスの幅 高さの それぞれ半分にしましたので インスタンスの中央に 基準点が設定される ということになります ちょっと変更しましたので 一旦保存します 結果を見てみましょう では fla ファイルの方に移って 制御メニューから ムービープレビューです インスタンスの x 座標は コメントアウトしましたので デフォルトの ゼロの状態になっています 垂直方向には 真ん中に来ていますね そして基準点も インスタンスの真ん中に 設定されています ここからスタートして トゥイーンは 右方向に水平に動かそうと思います ではこのウィンドウは 一旦閉じましょう タブを Starling ルートクラス MySprite の方に 切り替えます それからフルスクリーンに したいので キーボードから ファンクション 4 番を 2 回押します トゥイーンの設定は 新たなメソッドを作ることにします それをこの初期化の initialize というメソッドの 最後に呼び出します まだ作っていませんが setTween という名前にしましょう 引数は特にありません そして setTween という メソッドをこの後に 定義します function 丸括弧 ( ) 中括弧 { という記入は ショートカットがあります Esc キー を 1 回 キーボードの F のキー キーボードの N のキーという順番に タイプしてあげると [esc] f n で function 丸括弧 () 中括弧 { が入ります インデントを整えて 後この function は private にしましょう そしてメソッド名は 決まっていますね タイプミスをしないように コピーをしておきます ペーストです そして戻り値はありませんので void とします トゥイーンは3 つの手順で定めます 先ず第 1 は Tween オブジェクトを作ります 変数を用意します myTween にしましょう 型指定は Tween です 但し Flash の Tween という 同じクラス名があるのですが そうではなくて Starling の方の Tween を設定します import 宣言が入りました Starling の Tween です そして コンストラクタを呼び出すのは お約束ですね Tween です 引数は 3 つで 1 つはトゥイーンさせたい インスタンス このインスタンスという 変数がそうですね コントロールもしくはコマンドで ドラッグしてコピーを持ってきます トゥイーンにかける時間は 7 秒とします それからイージングです ちょっと面白いイージングを付けましょう イージングは クラス Transitions の中にありますので それをインポートしなければなりません import.starling.animation まで トゥイーンと一緒ですので これをコピーしちゃいましょう コントロールキーもしくはコマンドキーを 押しながらドラッグです そしてドットを押すと コードヒントが出てきまして Transitions これがイージングの関数が 定めてあるクラスです ではこれもコピーしましょう Transitions コピーしてコントロールもしくは コマンドドラッグ ドットを打つと また色々イージングの処理が 出てくるのですが 今回使いたいのは EASE_IN_OUT_ELASTIC というイージングです イージングにはその変化を 初めにするのか 終わりにするのか という区別があります 初めが IN で 終わりが OUT です そして IN OUT とある ということは 初めにも終わりにも変化するのが この IN OUT です 初めだけでしたら EASE_IN 終わりだけでしたら EASE_OUT になります この最後の ELASTIC というのは 変化の特徴で 弾力性があるというような意味です ゴムのような変化をします トゥイーンの手順の 2 番目は トゥイーンを定めます このインスタンス myTween としましたが これに対してどんな トゥイーンをするんですか ということで定めます この myTween コピーしておきましょう ペーストはショートカットで 行ってしまいます コントロールもしくは コマンド V です そして移動ですので moveTo ですね moveTo この括弧の中には x 座標 y 座標を入れます x 座標は ステージのステージ幅いっぱい つまり右側ですね stageWidth といたします それから y 座標なのですが これはインスタンスの座標を変えない そのまま ということなので instance.y とします トゥイーンを定める手順の最後は Starling オブジェクトの Juggler というオブジェクトに Tween のオブジェクトを加えます Starling のクラスに アクセスしますので import 宣言をする 必要があります では import 宣言は 上の方ですので ここに import Starling Starling クラスは core という中にあります そして Starling これで Starling クラスに アクセスできますので Starling の Juggler プロパティになっていますが このプロパティが Jugglerのオブジェクトを 持っています ですから そのオブジェクトに対して add というメソッドを呼び出し この Tween のクラス コピーしてありましたね ペーストしちゃいます ということで Tween の設定ができました Starling ルートクラスは 忘れずに保存します ファイルメニューから保存です そして fla ファイルの方に 切り替えます ムービープレビューを確認しましょう 制御メニューから ムービープレビューです 弾力のある感じですね 水平に移動して 終わりの方でも 弾んだような感じになっています これが EASE_IN_OUT_ELASTIC という変化です ではウィンドウを閉じて まとめに入りましょう Starling ルートクラス MySprite を表示します フルスクリーンにしたいので ファンクション 4 番を 2 回押します ちょっと整理しましょう コメントの部分は削除します それから import 宣言 なんだかバラバラな感じがするので もう少しきれいに並べましょう この順番は 特別影響はないです 見た目 気分が良いか悪いかだけの 話ですけれども ちょっと整えましょう こんな感じにしたいと思います そして setTween から後が まとめですね 確認していきましょう 初期化のメソッド initialize から トゥイーンを設定する setTween が呼び出されます setTween がここに 定められています 先ず最初に Tween のインスタンスを コンストラクタを new で呼び出して new Tween で作ります 引数は 3 つ 先ずトゥイーンさせるインスタンス これは Image オブジェクトですね そしてトゥイーンにかける時間 7 秒 トゥイーンの変化の仕方 ちょっと面白かったですね EASE_IN_OUT_ELASTIC というものを 設定しました そのトゥイーンに対して moveTo というメソッドを呼び出すと 移動になります 引数は x 座標と y 座標です 今回は x 座標は ステージ幅右端ですね y 座標はインスタンスの y 座標のまま 動かさないようにしました ですから上下には動いていません そして トゥイーンをスタートさせるには Starling オブジェクトの中の Juggler オブジェクトに対して Tween オブジェクトを add メソッドで加えると これでトゥイーンが 動き出すということでした

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

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

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

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

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

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