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

Vectorオブジェクトで複数のトゥイーンの値を切替える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Vectorオブジェクトに納めた値により、複数のトゥイーンの設定を切替えてアニメーションさせます。
講師:
14:04

字幕

この Starling ルートクラスは トゥイーンを 3 つ作って順番に再生する というプログラムを組んであります 具体的には トゥイーンの行き先 moveTo で 位置のトゥイーンをしているのですが この position という変数の値は Vector でパラメータを管理しています Vector はそのエレメントの型が 指定できるという 言ってみれば 厳格な配列にあたります そして その Vector の変数には 3 つの値を入れました これが moveTo で行く x 座標の値です 初めはステージ右端 stageWidth で取っていますけれども 次に左端に行って また右端に一往復半すると そういうトゥイーンを設定していますが この値を shift メソッドで 順番に取り出します そして moveTo で 左から右 右から左 1 往復半するんですけれども この下にコメントアウトされている ステートメントがあります これは fadeTo アルファ scaleTo 伸縮 それから animate で rotation ですね 回転角のトゥイーンも してあったんですが これが除かれています ですから moveTo 位置のトゥイーンだけなのですが 練習問題として この 3 つを組み合わせて トゥイーン 3 つ順番に 実行してみたいと思います 先に今現在の処理の流れを 確かめておきましょう 一旦ですから畳みます トゥイーンは 3 つのステップで 設定します 先ず Tween オブジェクトを コンストラクタの 呼び出しにより作ります 指定するのは トゥイーンするインスタンスと 時間現在 7 秒です イージングのさせ方が 3 つ目 EASE_IN_OUT_ELASTIC というのは 頭とお尻に変化があり ELASTIC というのは 弾力性のある変化です そうして作ったオブジェクトに対して トゥイーンの設定をします 現在のところは moveTo 位置のトゥイーンだけです そして position というのが x 座標値で y 座標値は現在のまま 変えないということになっています そして Starling のオブジェクトが持つ juggler オブジェクトに トゥイーンを add メソッドで 加えることによって アニメーションが実行されます さて その行き先なのですが それを Vector で管理していました そこから shift メソッドで 頭から 1 つ値を取り出します その値に対して トゥイーン moveTo で 位置のトゥイーンをするわけなのですが 1 回トゥイーンが終わると onComplete という コールバックが呼ばれます その時コールバックに setTween このメソッド自身を設定していますので また このメソッドが実行されます そして順番に取り出していって もしデータが全て取り出されて 無くなってしまうと この Vector の length プロパティの値が エレメント数が 0 になりますので if 条件で弾かれて トゥイーンが全て終了する ということになっています それではムービープレビューで 動きを確かめますので fla ファイルの方に切り替えます そして制御メニューから ムービープレビューです スタートは左端にインスタンスがあり ELASTIC ですね IN と OUT の ELASTIC で右端に行き また値が取り出されます 次の行き先は左端 x 座標 0 です もう 1 個値があります また右端ですので一往復半して 全ての Vector のエレメントは 取り出されてこれで終了です では一旦ウィンドウは閉じて Starling ルートクラスの方に戻ります キーボードの ファンクション 4 番 2 回押して スクリプトをフルスクリーンにしましょう 畳んであったステートメントを広げて コメントアウトも外します 有効にしましょう 先ずは fadeTo と scaleTo です アルファと伸縮の トゥイーンなんですけれども 両方同じ値になっていますから これは同じ値を使うことにしましょう やはり Vector を使います private でプロパティの宣言をし 両方とも 1 を 100 パーセントとみた場合の 比率ですので ratio としましょう Vector です そしてやはり Number ですね それからこの ratio の場合には initialize の呼び出しを 待つ必要がありません positions の場合には ステージの幅をとる つまりステージに アクセスする必要があったので initialize を待たなければ いけなかったのですが こちらはもう数字を決め打ちにしますので 直接打っちゃいましょう 先ず最初は 0.5 にして 1 に戻し 0.5 でも良いですが ちょっと変えましょう 0.3 にします ではこれをやはり同じように positions と同じように 値を取り出します ratio にします Number ですね そして ratios 複数にしましょう 同じ名前になってしまうと ややこしいです shift これで値を取り出せますので この値をコピーしまして fadeTo と scaleTo 両方に入れます ペースト ショートカット使ってしまいますね コントロール V コマンド V です 次は メソッド animate で指定した rotation 回転角の値です 360 度に相当しますが Math.PI 掛ける 2 ラジアンですね これを また変数を設けます angle にしましょうか Vector です そしてやはり Number ですね ここも値を頭から入れてしまいます 最初は Math.PI 掛ける 2 に してしまいましょう コントロールもしくはコマンドキーを 押しながらドラッグでコピーになります 次に同じく これをコピーしまして ペーストします 左から右にインスタンスが動いて 右から左に戻りますから 回転角も戻しましょう この場合にはマイナスを入れます それから また Math.PI 掛ける 2 に戻します ペーストです 取り出し方はもう同様ですね angles にしましたので angle です 単数形です Number でとります そして angles.shift この値をコピーして animate の第 2 引数に入れます 忘れないように保存しましょう 1 つ Vector の 入れ方が間違っていましたね Vector を入れるには new そして Vector というコンストラクタは 打たずにいきなり 山型括弧で Number と打つんでした これをコピーします コントロールキーもしくはコマンドキーを 押しながらドラッグです 同様にこちらにもコピーします これで良いですね もう一度保存し直します では fala ファイルの方に切り替えて ムービープレビューを確かめましょう 制御メニューからムービープレビューです 左から右に行くと共に アルファは下がりますし 回転角も 360 度回転しましたが 今度戻る時は逆回転ですね 逆回転で大きくなりました またもう一度右端に行きます この時アルファと伸縮は 0.3 ですから随分小さくなりました 1 往復半でトゥイーンはお終いです では このウィンドウは閉じて Starling ルートクラスの方に 戻ります ファンクション 4 を 2 回押して フルスクリーンにしましょう 更にもう 1 つ設定を加えましょう このイージングです イージングもやはり Vector に加えることにします この辺畳んでしまいましょう private で easing にしましょう Vectorです そしてこの Transitions の定数は String で値が定められています コピーしてしまいましょう Number じゃないですね String で 長くなるので こういう時は 改行を使ってしまいます この辺で良いでしょうか では これをコピーしてしまいましょう 最初は EASE_IN_OUT_ELASTIC でいきます コントロールもしくは コマンド ドラッグですね そしてカンマで ここはコピーを使ってしまいましょう やはり EASE_IN_OUT を 使うことにします EASE_IN_OUT_BOUNCE バウンドですね もう 1 個またコピーを使います たまには面白いので EASE_OUT_IN にしましょうか EASE_OUT_IN_ELASTIC そして取り出します 取り出し方は もう共通ですね var easing String です そして easings.shift 取り出したこのイージングを トゥイーンのコンストラクタの 第 3 引数に渡します保存しましょう FLA ファイルの方に切り替えて ムービープレビューを確かめます 今度はイージングも変わってきますので ご注目ください ムービープレビューです 最初は EASE_IN_OUT_ELASTIC ですから先程と一緒です ここからは今度は EASE_IN_OUT_BOUNCE です バウンドするような感じですね 行った先でも IN OUT ですから バウンドします 今度は OUT IN ですね ELASTIC の OUT IN ということで こんな感じの変化になります ではウィンドウは閉じましょう そして Starling ルートクラスに 切り替えます ファンクション 4 を 2 回押して フルスクリーンにします それでは まとめましょう トゥイーンを 3 つ パラメータの値を変えて作って 順番にアニメーションさせました そのパラメータは Vector クラスを使っています 先ず x 座標は positions これはステージ幅をとるため ここでは値は設定せずに 初期化の initialize で 3 つの値を入れました 後はプロパティを宣言すると同時に 値を入れていますけれども fadeTo と scaleTo アルファと伸縮に与える値は この 3 つにしました それから animate で 指定するローテーション 回転角の指定は angles ということで 360 度に相当しますが 2 π の値を プラス マイナス プラス ということで 2 方向に時計回りに回転させたり 逆時計回り反時計回りに 回転させたりしました それからイージングも変えてみました イージングは 値は 定数ですけれども これは String ですので Vector で エレメントの値 これをベース型と言うんですけれども String ベース型にしました そして 3 つ指定しています 後はトゥイーンのお馴染みの 設定の仕方ですけれども ここも確認しておきましょう 先ずは配列ではありませんね Vector から 役割は一緒ですけど Vector から それぞれのパラメータ値を 頭から 1 つとっています ここまでですね そして Tween のオブジェクトを作ったら moveTo fadeTo scaleTo animate それぞれに取り出した値を 入れています それからイージングも Vector に入れましたので このコンストラクタを呼び出す時の 第 3 引数に取り出した イージングを渡しています そして juggler に add で Tween インスタンスを加えれば アニメーションが実行されます 1 つ実行が終わると onComplete の コールバックが呼ばれますので このメソッド自身が また呼び出されます 1 つだけ代表して positions で確かめていますけど 配列に まだ値があれば実行します 全部取り出して値が無くなった時は if で弾かれて 全てのトゥイーンアニメーションが 終了するということです

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

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

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

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

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

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