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

インスタンスの位置に加えてアルファと伸縮率および回転角をトゥイーンする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Tween.animate()メソッドを使えば、任意のプロパティがトゥイーンできます。試しに、インスタンスの回転角をトゥイーンします。
講師:
06:38

字幕

Starling フレームワークの Tween クラスを使うと 複数の属性を組み合わせて トゥイーンさせることもできます ここでは setTween というメソッドで トゥイーンの設定を行っているのですが 先ず Tween インスタンスを作ります 7 秒かけてイージングは EASE_IN_OUT_ELASTIC 頭とお尻両方に変化が与えられて しかも弾力性のある変化です そしてトゥイーンさせる属性として 3 つメソッドを使っています 1 つは位置です これは現在オブジェクトが 左端にあるという前提なので ステージ幅つまり右端に持っていきます そしてインスタンスの y 座標は 変えずにということで 次にアルファを変える fadeTo ここではアルファを 1 から 0.5 まで下げます 更に scaleTo 拡大縮小のメソッドで 実寸 1 から半分の 0.5 に下げると 3 つ設定して Juggler オブジェクトに Tween オブジェクトを add メソッドで加えています これで位置とアルファと伸縮の 3 つを組み合わせた トゥイーンができます 現在のトゥイーンアニメーションを 確認してみますので fla ファイルの方に移ります そして制御メニューから ムービープレビューです 3 つの属性が組み合わせて トゥイーンされます 最初は左端に 実寸アルファ 1 の状態で出てきますが トゥイーンをすると 右端に行ってアルファが 0.5 それから伸縮拡大縮小も 縮小の 0.5 になっています そこで今回は これに更に 回転のトゥイーンを加えたいと思います つまり左から右に動く時に ころころと回転するという トゥイーンです では一旦ウィンドウは閉じます 問題はもしそのトゥイーンをする メソッドが分からない時 どうしたら良いかです その時は Starling フレームワークの サイトに行って そのマニュアルを 見るのが良いでしょう Starling フレームワークの サイトを開きました URL はこちらです Help は中にオンラインマニュアルが 入っていますので Help のボタンをクリックします 右上の API Reference というのが プロパティやメソッドの マニュアル Reference に なりますので こちらを開きます そして Starling のフレームワークの 中の Tween というクラスです クラスは左の方に リストに並んでいます ABC 順ですから T は随分下の方ですね Tween を選びます Tween クラスの Reference が 開きました そして下の方に 先ず プロパティのリストがあがっています そして恐らくメソッドであろうと 見当を付けるのですが メソッドの表があがっています そもそも あまり数が多くないですね fadeTo とか moveTo scaleTo もうこれで ほぼ半分です どうも角度を回転するような メソッドが見当たりません 実はどのプロパティでも トゥイーンできてしまうという 便利なメソッドがあるんです それは animate というメソッドです この animate というメソッドは 2 つの引数をとります 1 つ目が property と 書いてありますけれども どのプロパティを トゥイーンしたいのかという プロパティの名前をどれでも 好きなものを選んで書けるんです そして その値を幾つにするのかと 定めてあげれば 回転の角度をトゥイーンするという メソッドはないんですけれども 角度をプロパティとして定めて 回転角を値として与えてあげれば それでトゥイーンができる ということなんです ですから この animate というメソッドを Starling ルートクラスの方に 加えることにしましょう Starling ルートクラスを 開きました トゥイーンを設定する メソッドの中で 3 つのトゥイーン moveTo fadeTo scaleTo の後に animate を加えることにしましょう myTween.animate です そして引数はご説明した通り 回転したい場合でしたら ローテーションなのですが このプロパティ名は ダブルコーテーションで囲みます そしてローテーション 幾つにしようかと思うと 一回転したいと思うんですが 周囲はローテーションの単位が 度数ではありません 度数だったら 360 に したい所なのですが ラジアンという単位を使います そしてラジアンという単位で360 度は 円周率の π × 2 になります 円周率の π は Math.PI でと取れますので そこに 2 を掛ければ良い ということになります ではこれで Starling ルートクラスを 保存しましょう ムービープレビューを確かめますので fla ファイルの方に切り替えます そして制御メニューから ムービープレビューです 位置の移動左から右 そして伸縮が半分ですね 更にアルファが半分に下がりますが それに加えて 一回転しますので ご覧ください 先ず左端は通常の状態です 右に行く時に ころころっと回転してますね 360 度回転して元に戻りました ではウィンドウは閉じます Starling ルートクラスの方を開いて スクリプトをフルスクリーンにしますので ファンクション 4 を 2 回押します 確認するメソッドはこちらです トゥイーンの位置とアルファと伸縮は それぞれ専用のメソッドが 用意されていました けれども こういう専用メソッドが ない場合でも animate というメソッドを使えば 引数 2 つです 先ず最初に トゥイーンしたいプロパティを ダブルコーテーションで 囲んで定めます そしてこのプロパティの値を どうしたいのかという プロパティ位置を 第 2 引数に定めます animate という メソッドを使うことで どんなプロパティでも トゥイーンさせることができます

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

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

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

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

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

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