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

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Matrix3D.appendRotation()メソッドは、現在の座標に後から変換を加えます。
講師:
09:59

字幕

Matrix 3D クラスの 座標変換のメソッドには 先に加える変換の prepend のメソッドと 後から加える変換の append の メソッドの 2 種類があります 先に加える prepend のメソッドでは Flash Player が インスタンスに対して 加えようとする全ての 座標変換に先立って 割り込みで変換します 単純な変換の場合には この prepend の メソッドの方が簡単でしょう それに対して append のメソッドでは Flash Player が そのインスタンスの 直前の状態にまで 座標変換をしてしまってから 新たに変換を加えることになります 変換の順番をきっちりと 決められますので こちらの方が複雑な変換 変換の組み合わせを行うには 対処しやすいでしょう ただ Flash Player の 変換の仕方とか その順序について正しく知っていないと コントロールができません そのご説明と実際に サンプルを使った練習をしてみましょう この Flash ムービーファイルは タイムラインに置いた インスタンスに対して prepend のメソッドを使って 回転のアニメーションを加えています 先ずこのインスタンスには my_mc という名前が付けてあります スクリプトはメインタイムラインの フレームアクションとして 書かれていますので 右クリックで アクションパネルを開いてみましょう スクリプトの内容を簡単に確かめます 先ずインスタンスの x 座標を 変数にとっています インスタンスはステージの 中央に置かれていて 基準点は真ん中にありますので これが言わばステージの中心の 水平座標と考えて良いでしょう そしてインスタンスから Matrix 3D の オブジェクトを取り出します それは transform というプロパティの 更に Matrix 3D です 但し注意はデフォルトでは このオブジェクトは空っぽです Matrix 3D の オブジェクトを作るには このインスタンスに対して 3D の操作を行いますよ ということを インスタンスに 知らせなければいけません それがこの z 座標を 0 にする という処理です 見た目は変わりませんが 3 次元の処理を 行うということが分かりますので Matrix 3D のオブジェクトが 出来上がります それを変数に入れました そしてアニメーションの処理です アニメーションは addEventListener で イベントリスナーの ENTER_FRAME イベントに対して リスナーを登録します そしてこちらがリスナー関数です マウスポインタとインスタンスとの差 つまりステージ中央からのマウスポインタの x 座標の離れ具合をとりまして それに比例係数 0.2 にしてありますが 掛けてマウスポインタの 離れ方によって回転角を 変えようということです それを回転角にとって prependRotation で Matrix 3D オブジェクトの 回転を行っています 引数は回転の角度度数と どの軸で回すのかということで Vector 3D の定数で定めます x 軸で回すということです ではムービープレビューで 確かめてみましょう 制御メニューから ムービープレビューです マウスポインタを中央から離すと 回転が速くなります また向きを変えると 回転の回り方も変わってきます これを prepend でなく append の メソッドで行ってみたいと思います では SWF は一旦閉じます メソッドは prepend を append にするだけです ここを ap とします これでメソッドは変更されました 但し ここで 気を付けなければいけないのは Flash Player がインスタンスを 座標変換する時の原点がどこにあるかです ムービープレビューで 確かめてみましょう 制御メニューから ムービープレビューです インスタンスは水平に回転しています 但し回転の軸が どこになっているかですね 回転の軸が左端になっています Flash Player の 3 次元の 座標変換というのは 必ず原点が親タイムライン このインスタンスはメインタイムラインに 置いてありますので メインタイムラインの 基準点が原点になります メインタイムラインの基準点は 左上隅ですね ですから左端が回転の y 軸 ということになってしまいます そして注意しなければいけないのは この原点は動かせません ではどうしたら良いか というのが次の問題です SWF は閉じましょう ファイルは一旦保存して アクションパネルは閉じましょう そして Flash の座標変換の仕方を ちょっとここのステージの インスタンスを使って シミュレーションしてみましょう Matrix 3D クラスを使って インスタンスの座標変換をする時 Flash Player は必ず親の基準点を 原点として変形します 言わば自由変形ツールを使う時 変形点が親の所にある 親の基準点にあるということですね そうすると変形しようとした時には その基準点で 回転なり変形なりが行われてしまう ということになります 一旦復帰します ではどうしたら良いでしょうか prepend の変換を使ってしまえば デフォルト状態から変換しますので この問題は避けられます けれども そうすると今現在の インスタンスの状態 例えばペンギンが 90 度 y 軸で 回転している横を向いている この状態をベースに変換したい 更に回転したいという時には prepend では駄目ですね append を使わなければいけません どうしたら良いかというと では位置だけ 位置だけ親タイムラインの基準点に 合わせてしまえば良いです 具体的にはこのプロパティで x 座標 y 座標を 0 にします そうするとインスタンスの基準点と 親の原点が一致しました ここで例えば回転すれば良いわけですね y 座標で y 軸で 45 度回転します このままではいけませんので 元に戻せば良いと 元に戻す そうすると原点が一旦 インスタンスの基準点と一致しましたから インスタンスの基準点で回って かつ他の変換は 位置以外は直しませんから 元の状態が残っている ということになるわけです ではファイルを復帰して アクションパネルをもう一度 右クリックで開きます フレームアクションに修正を加えます インスタンスを親の基準点に 動かしますので 元の位置に戻すためには x 座標 y 座標を 覚えておかなければいけません x 座標は覚えているので y 座標を加えます これをコピーしてしまいましょう そしてペーストです x を y に書き換えます そして一旦親の基準点に動かします やはり append のメソッドを使いますので これを コントロールもしくはコマンドで ドラッグコピーします 移動は Translation です そして x y z を指定します これは どこに移動 ではありません 幾つ何ピクセル今の状態から移動する というわけですから 原点に移動するには 親の基準点に移動するには 今の x y 座標を差し引いた分 移動すれば良いですね z は動く必要がありませんから 0 です そして回転します 回転した後は元に戻しますので これはまたドラッグコピーです コントロールもしくはコマンドキーを 押しながらドラッグ マイナスをプラスにすれば 元の位置に戻ります 一旦保存しましょう ファイルメニューから保存です ムービープレビューを確認しましょう 制御メニューから ムービープレビューです 今度はちゃんとインスタンスの 基準点で回転しています 回転のスピード方向もマウスポインタの 水平の位置に応じて変わっていますね 元の prepend から比べると 3 行に増えてしまいました ですから これだけでしたら prepend の方が簡単なのですが 水平の回転に加えて更に垂直にも回転したい などという場合には prepend ですと全て割り込みで 最初に回転が入ってしまいますから その変換の順序の コントロールができません そうしたことを考えた場合には append のメソッドを 使った方が良いでしょう では まとめに入りますので SWF は閉じます Matrix 3D クラスの append のメソッドは インスタンスの今のというより 厳密に言えば直前の状態ですね その変換の状態に加えて 後から変換を行います ですから変換の順序を コントロールしやすいです 但し注意はこの append の変換は 必ずオブジェクトの親 つまり現在の場合ですと メインタイムラインに インスタンスが置いてありますから メインタイムラインの基準点を原点として 変形が行われてしまいます 今回はインスタンスの 基準点を中心に回したかった では どうしたら良いかというと 位置だけ appendTranslation で 位置だけ親タイムライン メインタイムラインの原点に インスタンスの基準点を合わせます それで回転すれば 親タイムラインの原点で回転するのですが それと同時に インスタンスの基準点でもありますから インスタンスの基準点で回ります 但し位置が動いてしまっていますから 元に戻さないといけません ですからもう一度 appendTranslation で元の位置に戻します 今回の場合は ちょっと手間がかかったのですが 複雑な変換をする場合も きっちりと順序を決めて 変換ができますので append のメソッドの使い方を 是非習得すると良いでしょう

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

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

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

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

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

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