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

Matrix3D.prependRotation()メソッドのインスタンスの回し方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
複数の変換を組み合わせる場合、変換を先に加えるか、後から加えるかが重要になります。
講師:
11:05

字幕

この Flash ムービーは インスタンスを Matrix3D クラスのメソッド prependRotation を使って 回転してみます マウスポインタの位置が インスタンスから離れるほど早く回りますし また方向によって回転する向きが変わります ここでは もう一つ水平の回転も加えています やはり prependRotation です ただ 回転軸が変わるだけなんですが それを試してみて prependRotation の prepend の意味というのを 確かめてみたいと思います では swf は閉じましょう 先ずは水平の回転の処理について 確認をしておきましょう ステージに予め置いてあるインスタンスには my_mc という名前が付けてあります そのインスタンスの Matrix3D の オブジェクトを取り出すには transform プロパティの Matrix3D で参照します 但しこれから 3D の操作を行うよ ということを予めインスタンスに教えないと このオブジェクトは作られませんので z 座標を 0 に 見た目は変わらないんですが これで 3 次元の操作を行うということを インスタンスに知らせています これで Matrix3D の オブジェクトが取れます アニメーション は EventListener で行っていて ENTER_FRAME で Listener 関数を呼び出します その中でマウスポインタからの マウスポインタの x 座標と インスタンスとの離れ具合に 比率 0.2 という比率を掛けて 少し数字を割引いています それを回転角として インスタンスの y 軸方向の回転に加えます それが prependRotation というメソッドで 加える回転角度数です 後は回転の軸ということで 回転のアニメーションができます 垂直の回転を加えるには この水平の回転の同じ処理を x を y に変えてあげれば良いでしょう では先ず中心座標となる 水平座標が変数に取ってありますので これを垂直座標についても 同じように取ります 基本的にコピーを使っていきましょう ペーストです x を y に変更します 次にマウスポインタからの離れ具合 インスタンスから マウスポインタへの離れ具合ですね これを 今水平方向にだけ見ていますけど 同様に垂直方向についても行います ペーストです y を x に y にしていきます そして最後は回転ですね prependRotation を同じく使います コピーをして ペーストです prependRotation は同じですけれども rotationX の方ですね x に変えます それから回転軸も 垂直にマウスポインタを動かしたら x 軸で回転しますので x とします いきなりこれで確認してしまいますと 思った通りにならない場合 何が悪いのかというのが分かりませんので x の方の動きが 本当にちゃんとできているのだろうかと 追加した x 軸の回転ができているか 一旦コメントアウトして 確認した方が良いでしょうね では y 軸の回転に変えて x 軸の回転がちゃんと 上手くできているかどうか 制御メニューの ムービープレビューで確かめます マウスポインタの水平の動きは 今 除いています 垂直に動かした場合に ちゃんと回転の方向が変わりますし 中心から上下に離れるほど スピードが増していきますので 意図通りに動いているようですね 確認ができましたので swf のウインドを閉じましょう ではコメントアウトした y 軸の回転を 元に戻します 有効にします 制御メニューから ムービープレビューで確かめます これで垂直水平両方とも 回転するはずなんですが どうでしょうか 垂直水平に回転していますね 良さそうな気が一瞬するんですけれども どうも変ですね 水平に動かしたのに 変な回り方をしています 今度は 垂直に動かしたのに 横に回ってますね 実はこれが prepend という 変換の仕方の限界なんです では swf は閉じます ファイルは一旦保存します ファイルメニューから保存です そしてアクションパネルは閉じましょう 先程のムービープレビューの 何がおかしかったんでしょうか ちょっとステージで 再現してみたいと思います インスタンスを選んで 3D で回転しましょう 変形のパネルで 90 度回転してしまうと 全く見えなくなってしまうので 90 度回転したつもりで少し 割引いて 85 度回転します 横を向いていますね そして この状態であったとき マウスポインタを上に回したら どうなって欲しいかというと 例えば 45 度回したいなと思った時に ここに 45 度を入れると 本当に 45 度回っているかどうか ちょっと見にくいですけれども いずれにしても横を向いたまま x 軸で いわゆる縦回転ですね こういう風になって欲しい というのが元々の希望でした 一旦ファイルは復帰して 元のインスタンスの状態に戻します 復帰です 先程は私達がどういう風に動いて欲しいか ということを確認しましたので 今度は Flash Player はどういう風にして インスタンスを描画しているか ということをご説明したいと思います 例えば先程の様にインスタンスが 90 度 細かいことをいうと 85 度ですけれど 回転していたと そしてステージの真ん中にあった この情報は Flash Player は持っています けれど 初めにインスタンスを持っている情報は まだ その位置情報と関連付いていません 最初インスタンスはデフォルトの位置で Flash Player は認識します デフォルトの位置というのは まず回転していません この状態です それから座標もデフォルト 0 の状態です ということで初めは Flash Player はインスタンスは デフォルト状態で認識し 一方で 先程のフレームで 横を向いていたとか 85 度ですね それから真ん中にあったとか そういったことは情報として持っていて これから描画する前に その情報を組み合わせてインスタンスの 位置や状態回転を正しく定める訳です ですから この後 何もしていなければ真ん中に置いて 85 度回転する訳なんですが prependRotation という命令が入ると その間に状態にする前 この状態です この状態で回転をしてしまいます 先程 x 軸で 45 度回転する という風に言いました その時は 90 度 y 軸で回転した状態から x 軸で 45 度回って欲しいな と思ったんですが prepend で命令しますと この状態で 45 度回転してしまいます ということは ペンギンがお辞儀した状態です その上でじゃあ真ん中に戻し 直前のフレームの状態ですね ステージ中央にいましたから ステージ中央に戻します ペンギンが中央でお辞儀しています そして この状態で あと 85 度回転していたんだった ということで 85 度回転するんですが ちょっとここだけ直させてください 若干座標がずれてしまっているので ここで 85 度回転します こういうことですね 横を向いている状態で 縦に回転して欲しかったのに 先に x 軸で回転してしまって お辞儀してしまってから 後で真ん中に持ってきて 90 度回転しますから こういう状態になってしまうんです ですから prepend だと 割込みで処理が入ってしまいます その前のフレームの状態を維持したまま 回転なら回転を加えたいという場合には prepend ではダメなんですね もう 1 度ファイルメニューの 復帰で元に戻しましょう 復帰です アクションパネルを開きます prependRotation 他にも prepend のスケールとか translate といったものがある訳ですが いずれも prepend というのは デフォルト状態に対して 割込みで特急で変換が行われてしまいます そして その後前の状態の変換が加わるので 順番がおかしくなってしまうことがあります もし その直前のフレームの状態をベースにして 新たに変換を後から加えたいという場合には prepend でなく 後からという意味の append というメソッドを使います prepend のメソッドと基本的に同じで prepend の部分が append に変わるということです では まとめを兼ねまして append のメソッドを確認しましょう 先ずは prepend のメソッドの確認です 回転伸縮移動について それぞれ 3 つのメソッドがあります 回転は prependRotation を 今回使いました 角度と回転軸を引数に渡します prependScale の場合には どの軸方向に伸縮するのかということで x 方向 y 方向 z 方向の 3 つの比率を渡します 移動は prependTranslation x y z の移動ピクセル数を渡します これら それぞれについて append のメソッドがある訳です prepend のメソッドの場合には Flash Player がデフォルト状態 インスタンスのデフォルト状態から どういう風に変更しようか 変換しようかと思った時に 真っ先に適用されてしまいました 直前のフレーム特に アニメーションの場合ですね 直前のフレームの情報を 適用する前に変換をしてしまう ですから順序がおかしくなります それに対して append の場合には デフォルト状態から Flash Player が インスタンスの直前の状態まで変換して その後に変換を加えます ですから順番をちゃんと 維持することができます メソッド名は prepend が append に変わっただけで 回転が appendRotation 引数は角度と回転軸 伸縮拡大縮小が appendScale 引数は x 方向 y 方向 z 方向の 伸縮比率です 移動が appendTranslation で x y z の移動ピクセル数 ですから どの段階で変換を 加えたいかということによって prepend と append を 切り替えて使った方が良いです ただ 特に複雑な変換をしたいという場合には append の方が順番を維持できるので 複雑な変換は こちらの方が便利なことが多いです

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

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

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

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

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

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