ActionScript 3.0による3次元表現の基礎

インスタンスの重ね順を整える関数の定義-前編-

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インスタンスの重ね順を整える関数は、新たに定めます。
講師:
14:47

字幕

この Flash ムービーファイルは ライブラリのビットマップから 面の Sprite を作り それを親の Sprite の中に 入れ子に四方に置いて マウスポインタの位置によって 回転するようにしています それぞれの面の座標や 回転の角度などは きちんと設定できていますし 遠近法も 与えられているんですけれども 重ね順のコントロールがされていません ですからこのムービーに 重ね順の制御を入れて ちゃんと四方にある面をきれいに 正しく回転させようというのが 今回の課題です では SWF は閉じましょう 重ね順をどのように コントロールしたら良いのか 先ず図で考えてみましょう 親の Sprite の中に入れ子にした 4 つの面の Sprite は それぞれ基準点が その Sprite の中心にあります これは親の Sprite を上から見た所です 上から見ましたので z 軸が縦 x 軸が横になっています さてどの面が手前 つまり下側にあるかということは その z 軸の座標を 調べてみれば良いですね ですから面の前後関係は z 座標で調べられるということです いきなり 3 次元で面を回転している ムービーに入る前に 作業の流れを 簡単に練習しておきましょう ここには 3 つの MovieClip の インスタンスが置いてあります それぞれには この MovieClip に書いてある文字と 同じ名前のインスタンス名が 付けてあります この 3 つの MovieClip の x 座標が大きい順に 出力パネルに取り出してみます 既にスクリプトは書いてありますので 制御メニューからムービープレビューで 結果を確認しましょう 大きい順ですから右から mc2 mc0 mc1 ちゃんと x 座標の 大きい順になっていますね では SWF を閉じて タイムラインに書かれてある フレームアクションを確かめてみましょう ここでおさえておきたい メソッドは 2 つです 先ずこのメインタイムラインに 置かれている- インスタンス子どものインスタンスを 指定して取り出す getChildAt というメソッド それから配列に入れたオブジェクトを 特定のプロパティで並べ替えるという sortOn という 配列のメソッドです 簡単に文法を 確認しておきましょう 配列にオブジェクトが入れてある時 エレメントとして オブジェクトが入っている時 sortOn というメソッドを使うと そのオブジェクトの中の 特定のプロパティで 並べ替えることができます 文法は sortOn の引数に 先ずプロパティ名 このプロパティの順番で並べ替えて欲しいと 例えば z 座標なら z ということですが そのプロパティ名を文字列で渡します 第 2 引数はオプションですけれども ここでは 数値の順番で並べて欲しいという Array.NUMERIC それから通常は小さい順に 並ぶのですが逆順ですね 大きい順になって欲しいという場合には Array.DESCENDING という オプションを指定すると そのように並べ替えることができます それから親オブジェクトから 子オブジェクトを指定して 取り出すというのが getChildAt というメソッドです 親オブジェクトというのは 今の練習ではメインタイムラインですし その後取り組もうとしている ムービーでは Sprite になります それらの親オブジェクトの中の この子を取り出したいという場合 子どもは奥から順番に 0 から始まる連番を持っています これを取り敢えず ID と呼んでおきますけれども その ID を指定すると その位置にある子オブジェクトが 取り出せます 先ずタイムラインに置かれている- 子インスタンス具体的には MovieClip ですけれども その数を numChildren の プロパティで調べます それから sortOn を使うための配列を 空っぽの配列で初期化して 取り出したインスタンスは MovieClip ですけれども Sprite で型指定したものに 入れていきます というのは この後取り組みたいのは Sprite なものですから Sprite にしておきました MovieClip を Spriteで 型指定しても問題ありません それから for ステートメントで どんどん順番に 子どもを取り出しているので その時のカウンタ変数を uint 整数型で指定してあります 繰り返しの for ステートメントでは 子インスタンスを順番に取り出して ソートする配列を作っていきます 先ず getChildAt メソッドで このタイムラインに置かれている インスタンスを 順番にこのカウンタの変数で 0 から 順番に取っていきます そして変数 入れる変数は Sprite で 型指定してありましたので 型指定を Sprite に合わせます 次に x 座標で x 座標の大きい順に 並べ替えたいので instance 取り出した instance の x 座標を調べて変数に入れています それから配列ですね 配列にその結果を オブジェクトとして納めます オブジェクトには 2 つの プロパティを定めました 先ずインスタンスの名前です これは確認用なんですけれども それを name というプロパティで 入れています それから並べ替えの対象となる- x 座標の値ですね それを x というプロパティ名で この変数値を入れています 3 つインスタンスがありますので for 文は 3 回まわって 3 つのエレメントが配列に入ります そしてソートができるようになる ということですね sortOn のメソッドには 引数として先ず第 1 引数 どのプロパティで並べ替えるのかというと オブジェクトの中に入れた この x ですね x 座標の値で並べ替えたいので このプロパティ名 x を 文字列で指定します 並べ替えの順番は先ず 数値として順番を 比較しましょう そして尚且つ オプションは複数設定できます その時にはこの縦棒で結びます 大きい順に Array.DESCENDING ですね これで x 座標の数値で 大きい順にこの配列の中の エレメントが並べ替えされます 次の for ステートメントは 本番の面を回すムービーの場合には 並べ替えられた結果に従って 実際のインスタンスの順番を入れ替える という処理を行うことになるのですが ここでは確認だけやっていきます つまりトレース関数で インスタンスの中身を順番に取り出し 確認用に名前を付けてありましたので その名前を出力するという形です これは練習です 本番では 面の並べ替えを行いますから この処理の流れをベースにして スクリプトを書いていきます ちょっと頭に入れておいてください ではもう一度だけ練習の確認をします ムービープレビューを確かめたいので アクションパネルを閉じます そして mc2 mc0 mc1 と 出てくれば良いわけですが 先程見た通りちゃんとその順番に トレースの出力がされます 大丈夫ですね では SWF を閉じて本番です アクションパネルを開きましょう タイムラインに切り替えて右クリック アクションパネルを開きます 作業がしやすいように 今回のポイントではない部分は たたんであります 並べ替えはどこでするかというと 毎回毎回 アニメーションをする場面ですね ここで変換をした後 並べ替えを行います 関数名は x SetOrder としましょう 引数は特に取りません そしてこの関数を定めますけれども ファンクション丸括弧 () 中括弧 { と タイプするのは面倒なので ショートカットを使います Esc キー 1 回 キーボードのアルファベットの F のキー N のキーと順番に 3 つ押します esc f n と ここに関数名を短いですけれども タイプミスしないように コントロールキーもしくはコマンドキーを 押しながらドラッグしてコピーします 引数はありません 戻り値もないので void です この中に処理を書いていきます 処理の流れは先程の練習と 基本的に一緒です ですから先ず配列を定めましょう 変数名だけちょっと 分かりやすく変えます 面を沢山入れるので faces として 配列ですね Array です 取り敢えずはまだ空っぽです 後からエレメントを入れます そして子どもが何人いるか nChildren にしましょう 型指定は uint 整数型です そして調べるのは 今度は Sprite ですから mySprite という 名前にしてあります 親 Sprite の中に子どもが 幾人いるかということですね numChildren です それから for 文で 順番にとっていきますので カウンタの変数これは だいたい i をお約束で使います uint ですね それから面を順番に 取り出していきます Sprite で取り出しますので 単数形の face にします そして Sprite ですね これを順番に for ステートメントの中で とっていきますので 変数の宣言だけです for ステートメントで順番に インスタンスを取り出していきます カウンタ変数は 0 から順番に 子どもの数だけ numChildren これはコピーしていきましょう コントロールもしくは コマンドドラッグです そして 1 回終わるたびに 処理が終わるたびに カウンタ変数 名前の通りカウントアップします そして中括弧の中に 繰り返し処理を書いていきます 面の Sprite を 取り出していきましょう 入れる変数は既に宣言してありますね face で宣言してあって mySprite からとっていきます getChildAt これはカウンタ変数を使って Sprite で型指定をしますので as Sprite とします getChildAt は Sprite とは限りませんので Sprite よりもう 1 つ上のもっと上の ディスプレイオブジェクトであれば 取れるんですけれども 今回は Sprite に限定します そしてその変数にとったインスタンスの z 座標を知りたいですね z 座標で並べ替えますので これは Number です face の z 座標と そしてこれを配列に入れていきます 名前が短いですから タイプしちゃいましょう push です 配列に加えるというメソッドです そして sortOn を 使いますのでオブジェクトで エレメントを作ります 先ずはこのインスタンス自身ですね face というインスタンス自身を 入れることにします プロパティ名も face にします face というプロパティ名で この face ですね コピーしましょうか コントロールもしくは コマンドドラッグです それから sortOn で ソートするための z 座標を z というプロパティ名で定めます これは nZ ですね これでソートの準備が整いました 配列をソートしましょう faces.sortOn ですね 指定するのはどのプロパティで 並べ替えるんですかというと ここに定めた z という プロパティですね 並べ替え方 数値順で並べ替えます デフォルトでは文字として扱われてしまうので 文字ではないよ数値だよと しかも大きい順にします というのは大きい z 軸が大きいということは 奥ということになります 奥から順番にインデックス 0 と なっていますので 大きい順に並べ替えます DESCENDING です これで並べ替えができましたので 並べ替えに従った処理を for ステートメントで行います この最初の文は同じなので コピーしてしまいます コントロールもしくは コマンドドラッグです そして括弧閉じ ここに並べ替えの処理を 書いていきます 先ず配列のオブジェクト エレメントには Sprite のインスタンスが 入っていますので それを取り出しましょう 同じ face という変数名を 使ってしまいます face ですから順番に取り出しますので カウンタ変数 0 から順番です それがこのオブジェクトのエレメントですので その中の face が欲しい こちらですね face というプロパティ名で 定められた- Sprite が欲しいということなので ここに face と 指定すると Sprite が取れます そうしたらこの Sprite は既に z 座標で 奥の順番から 取り出せるわけですから Sprite の中に親の Sprite mySprite ですね この親に入っているオブジェクトも この配列のオブジェクトと同じ順番に 揃えていけば良いわけですね なのでインデックスを変えます setChildIndex ここには 2 つ引数を指定して どのオブジェクトを何番目に どのオブジェクトというのは この変数ですね face に入っているオブジェクトを 0 から順番に とっていきますので i 番目に これで並べ替えができるはずです ムービープレビューを 確かめてみましょう 制御メニューから ムービープレビューです 全然並べ替えていませんね 多分これは最初のままです 何がいけないかというと ちょっと 1 つ見落としがあるんです それをもう一度図でご説明しましょう

ActionScript 3.0による3次元表現の基礎

このコースではActionScript 3.0の基礎を学んだ人を対象に、3次元空間を使ったオブジェクトの動かし方について学習します。ActionScript 3.0の3次元を扱うクラスの扱い方を説明するとともに、その基礎となる数学や物理の考え方についても解説します。

3時間53分 (29 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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