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

インスタンスのアルファと縮小をトゥイーンに加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
すでに定めたトゥイーンに続けて、インスタンスのアルファと伸縮率を組合わせてトゥイーンします。
講師:
05:27

字幕

Starling フレームワークの トゥイーンクラスを使うと 複数のプロパティを 組み合わせて トゥイーンさせることができます そこで 位置のトゥイーンに加えて アルファや伸縮のトゥイーンを 組み込んでみたいと思います 今開いている Starling ルートクラスは オブジェクトの位置を トゥイーンさせています トゥイーンの手順について 確認しましょう Tween クラスによる トゥイーンは 3 つの手順で行います 先ず第 1 は Tween オブジェクトを作ります オブジェクトを作る時のお約束は new 演算子で コンストラクタを呼び出します 引数にはトゥイーンさせる インスタンスと時間 トゥイーンのさせ方 イージングと言いますけど その指定をします そうして出来上がった Tween オブジェクトに対して どんなトゥイーンをするのか というのをメソッドで決めます ここでは位置のトゥイーン moveTo だけ加えてあります そして 3 つ目に Starling オブジェクトの Juggler オブジェクトに Tween オブジェクトを add メソッドで加えます これで位置のトゥイーンが実行されます この Starling ルートクラスの トゥイーンは 具体的には インスタンスを 7 秒かけて イージングには EASE_IN_OUT_ELASTIC つまり トゥイーンの始まりと 終わりの両方に変化を加え 変化の仕方としては 弾力性のある変化 ということになります そして moveTo の 移動先なんですが instance は 水平位置デフォルトの ゼロになっていますので それをステージの右端まで持っていきます そして垂直には動かさないので インスタンスの y 座標は そのまま という指定になっています そして Juggler に add をして トゥイーンアニメーションを 実行していますので それを確認してみましょう では fla ファイルの方に移りまして 制御メニューから ムービープレビューです 左端のオブジェクトが エラスティックですね 弾力性のあるトゥイーンをして 右側に移動します このトゥイーンに更に 伸縮拡大縮小と アルファ フェードイン フェードアウトですね その設定を 加えたいと思いますので このウィンドウを閉じます そして Starling ルートクラスの方に移り スクリプト全体を見たいので ファンクションの 4 番 キーボードから 2 回押して フルスクリーンにします トゥイーンを定めているメソッド setTween というメソッドに Tween を加えていきます 今のところは位置だけですが そこに アルファのトゥイーンを 加えたいと思います アルファは fadeTo です そして引数には 0 から 1 の間の数字を加えます 完全に消してしまうと ちょっと見づらいかと思いますので 確認しにくいので 0.5 ぐらいに しておきましょう もう 1 つ 今度は scale ですね 拡大縮小のトゥイーンを加えます やはり Tween オブジェクトに対して scaleTo です 引数は x と y と分けません 1 つですので こちらの際では 半分の大きさということで 0.5 を 定めます 必ず Starling ルートクラスは 保存しましょう トゥイーンは移動の moveTo に加え アルファの fadeTo 拡大縮小伸縮の scaleTo を加えました では 結果を 確認してみたいと思いますので FLA ファイルの方に移りましょう そしてムービープレビューです 制御メニューから ムービープレビューを見ます 位置の他に アルファと大きさが変わりますので 確認してみましょう 左端これは元の大きさです 右に行くにしたがって縮小し アルファも 0.5 に落ちました ではウインドウは一旦閉じましょう 確認しますので Starling ルートクラスに移ります スクリプトを フルスクリーンにするために ファンクション 4 を 2 回押します まとめましょう Starling フレームワークの Tween クラスを使ったトゥイーンの設定は 手順が 3 つでした 先ず Tween オブジェクトを作り どのような トゥイーンをするのか定め そして Juggler オブジェクトに 加えます そして今回は トゥイーンを定める所で 3 種類メソッドを使いました moveTo は移動で x 座標と y 座標を定めます そこに加えて 更に fadeTo アルファの変化ですね 現在のアルファ 元々はデフォルト 1 になっていましたので 0.5 まで つまりアルファ半分まで 下がるということです そしてメソッドの 3 つ目 scaleTo 拡大縮小です 0.5 というのは 1 が実寸ですので 半分の大きさになる ということで 3 つの属性が変化しました 位置と それからアルファと 拡大縮小 このように複数のメソッドを使って トゥイーンする属性プロパティを 組み合わせて まとめて アニメーションさせることができるわけです

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

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

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

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

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

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