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

3つのTweenオブジェクトのトゥイーンを順にアニメーションさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Tweenオブジェクトを3つ定めて、それらを順にトゥイーンアニメーションに用います。
講師:
13:23

字幕

Starling フレームワークの Tween クラスでは 複数のプロパティを トゥイーンすることができます 今開いている Starling ルートクラス setTween というメソッドで トゥイーンの設定を行っていますが ここでは 4 つのトゥイーンを 設定しています 1 つ目は moveTo 位置です 2 つ目は fadeTo アルファです 3 つ目が scaleTo で伸縮 それから更に animate というメソッドで ローテーション回転角を トゥイーンしています もっとも これら 4 つの トゥイーンというのは まとめて 1 回で アニメーションとして再生されます ここでのお題テーマは そうではなくトゥイーンそのものを 順番に幾つか行いたいという場合には どうしたら良いかです 結果としてその場合には トゥイーンのオブジェクト自体を その やりたい数だけ 作らなければいけません もう 1 つのテーマというのは 順番に行うためには 前のトゥイーンが終わったことを 知らなければいけません どうやって 1 つのトゥイーンが 終わったことを知るかと この 2 つのテーマで解説していきます こういう新しいことを試そうとする時 例えばこのトゥイーンのメソッドが 4 つあると煩わしいです 差し当たり 1 個に絞った方が 試しやすいので moveTo だけ残して 後はコメントにしてしまいます さて そして この moveTo なんですが 今のところ最少インスタンスが ステージの左端にあって そこからステージの右端に トゥイーンします そこで終わってしまうのですが そうではなく また左端に戻り右端にと 一往復半させてみたいと思います インスタンスの y 座標は このまま水平の座標だけ 左右左と入れ替えてみたいと思います 具体的にどう処理するかの前に ともかく x 座標が 3 つ分必要ですね それは配列に入れて 取っておくことにします 配列をプロパティに宣言しましょう private のプロパティを宣言します x 座標の位置なので positions にしましょう 型指定は配列 Array です 値としてステージの右端 つまりステージ幅を とる必要がありますので 値は初期化のメソッド initialize の 中でおさめることにします では positions タイプミスしないように コピーしましょうね コントロールもしくは コマンドでドラッグです そして配列は角括弧で 直接書き込むことができます 先ずは最初右端です 右端は stage.stageWidth 次は左端ですね これは 0 で良いでしょう また右端に戻ります ということで コピーしてしまいましょう コントロールもしくは コマンドドラッグで 配列に 3 つの値が入りました 右端左端右端です この順番に トゥイーンをさせたいと思います 座標 3 つを入れた配列 このプロパティは タイプミスをしないように コピーしておきます そしてトゥイーンの設定のメソッド setTween の方に移りましょう 3 つもトゥイーンをどうしようかと焦らず 取り敢えず 1 つだけ 先程の配列を使って トゥイーンをやってみましょう 1 回目のトゥイーンです では配列から値を 1 個頭から取り出します 取り出した値は position という 変数名に入れます 単数形です 値はデータ型ナンバーで指定します そして先程コピーしておいた- こちらはショートカットで ペーストしますけれども コントロール V コマンド V です そこから頭 1 つ最初の 1 つを取り出すのは shift というメソッドです これで最初の値つまりステージ右端の x 座標の値をとらえました そうしたら この変数に入れた値をコピーして ここに決め打ちに なっていますけれども moveTo の最初の引数に 入れれば良いということになりますね これで元々と同じ動き もっとも moveTo だけですけれども 1 回だけトゥイーンをすることになります ではクラスは一旦保存しておきます そして結果を確認しますので fla ファイルの方に切り替えて ムービープレビューです 制御メニューから ムービープレビューを確認しましょう 1 回だけ左端から右端にトゥイーンすれば 取り敢えず動作はした ということになります 特にエラーは出ません 左から右にトゥイーンして 今のところ これでおしまいです 大丈夫ですね確認したら では 3 つのトゥイーンに次は移っていきます ウィンドウは 1 回閉じて Starling ルートクラスに切り替えて スクリプトをフルスクリーンにしますので ファンクション 4 番を 2 回押します さて 1 個のトゥイーンが 終わったことが分かったとします では 2 個目のトゥイーンを どうやって実行したら良いでしょうか それはですね この setTween を もう 1 回呼び出せば良いです そうすると x 座標がおさめてある配列 ここからは先 1 個 取り出してしまいました ですから元々 3 つあったのですが 今 2 つしか残っていません その 2 つの中から また shift メソッドを呼び出すと 2 つ目 今先頭になっているのですが それが取り出されます そしてトゥイーンをすれば 今度は左端に戻る ということになります そうするとトゥイーンが終わったことを どうやって知ったら良いか ということなのですが これはトゥイーンに対して Tween のインスタンスに対して コピーしますね コントロール若しくはコマンドドラッグです onComplete という コールバックを定めるプロパティがあります イベントと思っても良いのですが イベントリスナーではありません どうするかというと ここに 実行したい関数を代入します 代入ですからイコールですね setTween を実行したいので この setTween という関数の参照 これをそのまま代入します 気を付けるのは 括弧はつけないでください 括弧を付けてしまうと 関数を実行してしまって 戻り値を拾ってきます 戻り値は void ですので void が onComplete の 中に入っても何も起こりません そうではなく括弧を付けなければ この関数の処理 この中身ですね この中身がそのまま onComplete に入りまして この内容が実行されます そうすると次の setTween の 実行が起こるということになります これで確かめてみましょう 一旦クラスは保存します そして FLA ファイルの方に切り替えて ムービープレビューです 制御メニューから ムービープレビューを確かめます まず 1 個目のトゥイーンです 左から右に行きます そしてその後 onComplete が 呼び出されるので 右から左に 2 つ目の座標が移動しました 次もう 1 個座標が残っていますね 右端に行きました これで配列の中の エレメントと言いますけれども 値は全てなくなりました あれ どこかに消えちゃいましたね 何で消えてしまったか ちょっと問題があるんです ではこのウィンドウは閉じましょう そして Starling ルートクラスに 切り替えて スクリプトを フルスクリーンにするために ファンクション 4 番を 2 回押します 一往復半のトゥイーンまでは 上手くいきました 問題は最後のトゥイーンが 終わった時です 3 つ目が終わった時やはり onComplete が設定されていますので setTween が呼び出されます そして配列から 値を取り出そうとするのですが もう全部取り出し終わっています そうすると空っぽなので 空っぽの状態から shift メソッドを呼び出し 変数に値を入れようとすると 予期しない値が入ってしまいます その場合どういう結果になるか というのは もう何とも言えないのですが 先程も見た通り 何処かに行ってしまってますね ああなってはいけないので どうしたら良いかというと 配列に値が入っているかどうか エレメントが入っているかどうかを 確認しなければいけないんです そこで If ステートメントによる 判定を入れます if ですね 中括弧で閉じ括弧を 忘れないように入れておきます そしてインデントを整えましょうか 中を一段下げます そして問題は条件をどう設定するかです 配列に値が入っているかどうか コピーしますね コントロール若しくはコマンドでドラッグです 簡単なのは この配列の中に 値が幾つ入っているか というプロパティがあります ドット length です こうしてあげると 配列に値がなくなった時 length プロパティの値は 0 になります もし 0 だったらという風に 条件判定しても良いのですが if の条件の中に もし 0 が入った場合 0 は FALSE として判定されて if 条件で弾かれます ですから このままで結構です ではこのクラスファイルを 1 回保存して 確かめてみましょう ムービープレビューを見ますので FLA ファイルの方に切り替えます そして制御メニューから ムービープレビューです 一往復半のトゥイーンは取り敢えず 先程上手くできましたので 最後のトゥイーンが 終わった時にどうなるかです オブジェクトが消えてしまわなければ 成功ということになります 次ですね左から右に行きます 右に行ってトゥイーンが完全に終わった時 消えませんね これでちゃんと問題なく動いたということです ではウィンドウは閉じて おさらいをしましょう Starling ルートクラスに切り替え ファンクション 4 のキーを 2 回押します 今回トゥイーンした属性自体は 位置 moveTo 1 つです その代わりトゥイーン自体を 3 回作って 3 つを実行しました その場合の方法が今回のテーマです 先ずはプロパティに 座標 3 つ分ですね これを入れました プロパティは positions という配列を宣言して そこに 3 つの数値を エレメントとして入れました これを順番に実行していこうと いうことです その場合 値を取り出すのは 配列に対して shift というメソッドで取り出せます そしてトゥイーンのオブジェクトを作り 位置の移動を行います このままですと終わったら それまでなのですが onComplete というコールバックを 定めるプロパティです あるいはイベントハンドラという呼び方を することもありますが そこに そこに終わった時に実行したい 関数メソッドを定めると 終わった時に また setTween が呼ばれます そうすると shift を また呼び出した時に 前の値はもう取り出されて 無くなっていますので 順番に取り出していきます 但し問題は全部の値を 取り出してしまった時 3 つのトゥイーンが終わった時に また onComplete で setTween が呼ばれます その時そのまま また shift を実行して Tween してしまうと 何処かにオブジェクトが 消えてしまいました そうならないように shift を 実行する前に 配列のエレメント数を調べています 値があれば実行されるのですが 0 になった時は この if 条件で弾かれて トゥイーンの設定が行われなくなります つまり全てのトゥイーンが 終了するということで このようにして 3 つのトゥイーンを 順番に実行しました

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

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

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

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

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

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