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

Jugglerクラスの新たなメソッドでトゥイーンを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Starling 1.3からJugglerクラスに、トゥイーンを簡単に定められる新たなメソッドが加わりました。
講師:
12:18

字幕

この Starling ルートクラスでは Tween クラスを使って Tween アニメーションの設定をしています Tween クラスを使った アニメーションの設定というのは 基本的に 3 つのステップがあります 第 1 に tween オブジェクトを作ります new 演算子でコンストラクタを呼び出して オブジェクトを作ります そうしたら その tween オブジェクトに対して Tween の設定を行います ここでは 4 つのプロパティ属性を 変えています moveTo は位置 fadeTo はアルファ scaleTo は伸縮 animate はプロパティを定めて その tween を行います ここでは回転角 rotation です そして 3 番目に tween オブジェクトを Starling の持っている jugglerオブジェクトに add メソッドで加えます こうすることによって tween のアニメーションが行われます 更に必要があればコールバック この tween が終わったら どうするのかという メソッドを定めることもできます けれども Starling 1.3 からは この 3 つのステップを 1 回で できてしまうという 大変便利なメソッドが備わりました そのご紹介をしたいと思います 先に今現在定めてある tween について確かめておきましょう 先ず tween は 3 つ行うことになっていて そのためのパラメータを Vector オブジェクトに収めています 先程確かめました通り tween は位置と それから アルファと伸縮と回転角とありますが それらについて 3 つづつ値を Vector オブジェクトに入れています position について これは moveTo の位置なんですが x 座標の 3 つ エレメントとして入れています それから他についても ratios といのは これはアルファと伸縮です angles これは回転角です それから実は tween のイージングについても 値を 3 つ収めて それを切り替える様にしています 切り替え方は 3 つのステップですね 先ずは tween のインスタンスを作ります そして引数は先ず tween するオブジェクトを 第 1 引数として 2 番目は tween にかける時間です 秒数です 3 番目にイージングの値の変化のさせ方 それを定めたら moveTo で位置です y 座標は動かしていませんので 第 1 引数の位置だけ変えています そして fadeTo と scaleTo は 同じ値を使っていますが ratio に入れた値ですね それから回転角 これらは Vector オブジェクトから 取り出しをしています 全部 Vector オブジェクトに対して シフトで 頭から順番に値を取ってきて それらをイージング それから x 座標 アルファ伸縮それから 回転角というところに収めていて 最後に juggler オブジェクトに tween を add して tween アニメーションを行います 実際どんな tween になっているか ムービープレビューで確かめましょう fla ファイルの方に移りまして 制御メニューからムービープレビューです Vector オブジェクトには 3 つづつ エレメントが入っていますので 3 回 tween を行います 左から右に縮小して しかもアルファが下がっています tween の仕方も変わっていますね イージングも変わっています 左側にきました 1 往復半ですから もう 1 回ですね ここまで行って tween は 全て終了ということです このアニメーション自体は変えません ただ この設定をもう 1 つ別の書き方で やってみようということです ではウインドウを閉じまして Starling ルートクラスの方に切り替えます スクリプトをフルスクリーンしますので ファンクション 4 番キーボードから 2 回押します では この設定を新しい tweenのメソッドで 書き換えましょう では元の 3 つのステップで書いた部分 ここはコメントにしてしまいます コメントをここから ここまでと この部分を違う書き方にします では メソッドは juggler に対するメソッドなので この部分 Starling.juggler をコピーしましょう コントロール若しくは コマンドを押しながらドラッグです そしてメソッドは そのままですね tween というメソッドが出来上がりました ここで Starling1.3 からです そして第 1 引数 第 2 引数は コンストラクタに渡したのと同じです コピーしました そして第 3 引数がちょっと変わっています オブジェクトを渡します そして このオブジェクトの中に 様々な設定を組み込んで tweenを行います 先ずは 1 つだけ x 座標の tween を渡ってみましょう x 座標の tween はと言うと プロパティは x ですね x 座標というのは これをどうしたいかと position に持っていきたい という場合には これをまたコントロール コマンドドラッグでコピーします これで x 座標の tween ができます ファイルメニューから保存をして ムービープレビューを確かめてみましょう fla ファイルの方に移り 制御メニューからムービープレビューです 左から右に動きます イージングがかかってないですね 実はイージングの指定をしていませんので ミニアな単純な移動を 7 秒間かけて行うので こんな遅いことになります では このイージングを加えましょう ウインドウは閉じて Starling ルートクラス ファンクション 4 番を 2 回押して フルスクリーンにします オブジェクトと言うのは 値を プロパティをコロンで結んであげます プロパティコロン値という風に 結んであげれば これでプロパティの設定ができるんですが 複数入れたい場合には 改行を加えます 改行を加えてカンマで結びます 改行は必ずしも必須ではないんですが ここでは見易い様に改行を加えます そしてカンマで結ぶということですので じゃあここにカンマを入れましょう そしてイージングは transition という プロパティになります これはイージングという 変数に入れているので ドラッグして コントロール若しくは コマンドキーでコピーです これでイージングが加わりました ではクラスを保存して fla ファイルに切り替えて ムービープレビューを確かめます ムービープレビューです x 座標の移動 水平移動に イージングが加わりました 1 個でおしまいです では Starling ルートクラスに切り替えて ファンクション 4 番を 2 回押して フルスクリーンにします このメソッドがする部なのは この 2 つのプロパティを 良くご覧になってみてください x と言うのは これは tween するインスタンスのプ ロパティですね それに対して transition というのは tween オブジェクトに対する設定です つまり異なった 2 種類の プロパティ設定を混ぜてしまって それを自動的に 判別してくれるという訳なんです ではもう少し加えていきましょう カンマで今度は faceTo ですから これはプロパティでいうとアルファですね それを ratio にします それから onComplete コールバックがあります これも その 書いてしまって構わないんです onComplete じゃ やはりこれ tween オブジェクトに対する設定ですね alpha は tween するインスタンスに対する設定 それを混ぜてもちゃんと 判別をしてくれるということです setTween がコールバックですね では保存しましょう ムービープレビューを確かめますので fla ファイルの方に切り替えて 制御メニューからムービープレビューです コンンドは位置の他に x 座標の他にアルファが加わっています そして onComplete も指定しましたから 3 つ分動いてくれます それからイージングも変わりますね 1 往復半で tween が終了ということになります ではまたウインドウを閉じて Starling ルートクラスに戻り ファンクション 4 番 2 回押して フルスクリーンにします あと残っているのは伸縮と それからローテーション 回転ですね 加えていきましょう 伸縮は これは scale x と y で 分かれていますので 2 つ指定します scaleY 値は同じですので そしてローテーションは rotation です angle ですね コピーして持ってきます コントロール若しくは コマンドドラッグです では保存しましょう カンマが一つもれていますね angle の後にカンマを入れます 改めてもう 1 度保存し直します では fla ファイルの方に切り替えて 制御メニューからムービープレビューです これで始めと同じ tween になるはずです 左から右アルファと伸縮 それからイージングも切り替わります 1 往復 もう 1 回ですね ちゃんと全部 3 つ共 動きました ではウインドウを閉じて Starling ルートクラスの方に切り替えます ファンクション 4 番を 2 回押して フルスクリーンです juggler の新しい tween と言う メソッドについてまとめましょう tween クラスを使って tween アニメーションを作る時の 基本的は設定は本来は 3 つでした tween のオブジェクトを作り tween の設定をし そして juggler に加える add メソッド その Starling1.3 の新しいメソッド juggler に対する tween というメソッドを使うと これらが 1 つのステートメントでできてしまいます 改行はしていますけれども ここまでが 1 ステートメントという扱いですから とてもお手軽ですね juggler の tween メソッド 引数は 先ず tween するインスタンス 次に時間 ここまではコンストラクタと同じでしたね その後が変わっています オブジェクトに プロパティと値を 何でもかんでも 放り込めば良いということですね プロパティはインスタンスに対して tween するプロパティ x とかアルファ scaleX scaleY rotationに それぞれ値を設定することができます それからもう1 つ tween オブジェクトに対する設定 transition であるとか onComplete のコールバック こういった物も全て 1 つのオブジェクトの中に 入れてしまって結構です 順番も これは別に気にしなくても構いません どういう順番であっても 構わず放り込んでしまうと とてもお手軽なメソッドですので Starling 1.3 以降であれば ぜひお使いください

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

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

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

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

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

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