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

インスタンスをマウスポインタの位置に応じて水平に回す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスポインタのステージ上の位置に応じて、インスタンスを水平および垂直に回します。
講師:
08:24

字幕

y 軸の回転と x 軸の回転 つまり水平と垂直を 組み合わせた回転を Matrix 3D のメソッドを使って 作ってみます 複数の変換を組み合わせる時は 先に変換を加える prepend の メソッドよりも 後から加える append の メソッドを使った方が 管理がしやすいです この Flash ムービーファイルの フレームアクションは タイムラインに置いた MovieClip インスタンス インスタンス名が my_mc なんですけれども それを prependRotation の メソッドを使って 水平と垂直の回転を行っています 簡単にフレームアクションの流れを 確認しましょう 先ずインスタンス my_mc の x 座標と y 座標の値を 変数にとっています これはメインタイムラインに置いてある インスタンスがステージ中央にあり そして基準点が 真ん中になっていますので ステージ中央というのと同じ意味です もう一度アクションパネルを開けます 次にインスタンスから Matrix 3D の オブジェクトを取り出します インスタンスに対する transform プロパティから 更に Matrix 3D というプロパティを 参照して取り出すことになります 但し Matrix 3D のオブジェクトは インスタンスに 3D の操作を 加えるということを インスタンスに伝えないといけません そのために z 座標を 0 にすると 見た目は変わらないのですが この処理を加えています 次にアニメーションは お約束通りですけれども ENTER_FRAME のイベントに対して イベントリスナーを登録しています そしてリスナー関数が こちらになります リスナー関数ではマウスポインタの x 座標と y 座標と ステージの中心の座標との差を取って それに比例係数を掛け算しています 比例係数はちなみに ここで宣言しています それを回転角として インスタンスの回転に 加えるわけですけれども 2 つの prependRotation のメソッドを 呼び出しています Matrix 3D のオブジェクトに対して prependRotation で先ず y 軸に対する回転角を第 1 引数に 第 2 引数は回転軸である y 軸を定めます 次に x 軸で回転する角度を やはり prependRotation の 第 1 引数に渡し 軸は x 軸とします これで x 軸と y 軸両方が マウスポインタの位置によって 回転するんですけれども ちょっと結果が 意図通りではありません ムービープレビューで 動きを確かめましょう 制御メニューから ムービープレビューです 水平にも垂直にも 自由に回転はしています けれどもよく見ると 回転の仕方がおかしいですね 水平に動かしているのに z 軸で回っている感じですね それから上下に動かしているのに 水平に回ってしまいます これが prepend のメソッドを 使ったことによる結果です では SWF は閉じましょう 私達が期待するのは マウスポインタを水平に動かしたら 水平に回転し垂直に動かしたら 垂直に回転して欲しいわけです ところが prepend の メソッドというのは インスタンスの直前の状態をベースに 回転を決めるのではなくて 一旦デフォルトに戻した状態 そこで回転をして その後 Flash Player は 直前の状態を加えます 順番が変わると 変換の結果が変わってきます ですから直前の状態をベースに 垂直に動かしたり 水平に動かしたりしても そのベースの回転を してくれないわけです これを解決するには 直前の状態をベースに 変換を追加する append の メソッドを使う必要があります 具体的にはここでは appendRotation を 使うことになります ではメソッドを prepend から append に書き換えます prependRotation 1 つ目 これを append とします 2 つ目も同様に append です もっともこれだけでは駄目です どう駄目なのか 取り敢えず結果を見てみましょう ムービープレビューで確かめます 制御メニューから ムービープレビューです もう完全にステージから 消えてしまいますね 何故かというと append の変換 厳密に言えば prepend も 同様なのですが それはインスタンスの置かれた 親の原点 基準点を原点として変換 この場合は回転をします prepend はそもそもデフォルトに 戻ってしまうので インスタンスが基準点にいる状態で 変換が加わるので 気にならないんですけれども append の場合には 直前の状態をベースにします ですから直前の状態が原点から 親の原点から離れていれば 親の原点で変換されてしまいますので 今回の場合はインスタンスの基準点で 回したいという希望を持っているので そこが ちぐはぐに なってしまいます その部分を修正しましょう では SWF を閉じます どうすれば良いかというと インスタンスを直前の状態から 位置だけ移動して 基準点と 親の原点 親の基準点を一致させます その状態で回転すれば 親の原点で回転するんですけれども 同時にそこはインスタンスの 基準点にしてありますから インスタンスの基準点で回転します 回転した後また位置だけ元の位置に 戻せば良いということになります 位置を後から移動する メソッドを加えます 回転する前に appendTranslation というのが移動です 先ず Matrix 3D のオブジェクトと append ここまで一緒ですので ドラッグしてコントロールもしくは コマンドドラッグでコピーします この後は Translation です 引数は 3 つ x y z の 移動するピクセル数です 現在の位置は ここにとってありますので nX nY ですね その分マイナスすれば良いですね マイナス nY z座標は特に動かしませんので 0 です そして回転を行います 回転し終わったら 元に戻しますのでコピーします このステートメント コントロールもしくは コマンドドラッグです マイナスをプラスに戻せば良い ということになります これで OK ですね 一旦保存しましょう ファイルメニューから保存です ムービープレビューで 確かめてみましょう 制御メニューから ムービープレビューです 今度はマウスポインタを垂直に動かすと 垂直に回転します x 軸の回転ですね そして水平に動かせば 現在の状態から 水平に回転します 斜めでも問題ありませんね これで意図通りの動きに なりましたので SWF は閉じておさらいしましょう y 軸の回転と x 軸の回転を 2 つ 組み合わせています 現在の状態をベースに 後から回転を加えるというのは appendRotation です 引数は回転する角度と軸です 但し気を付けなければいけないのは 現在の状態をベースに 回転なり変換を加えようとした時 その原点は親タイムラインの基準点に なってしまうということです この時回転はインスタンスの 基準点で回転したいです その場合には どうしたら良いかというと appendTranslation 後から加える移動です それでインスタンスの位置を 基準点を親の基準点と 合致するように移動します これはもちろん 回転の前に行うんですね そして回転を組み合わせて行ってから 位置だけまた appendTranslation で 元に戻します マイナスした値を プラスしてあげれば元に戻る このようにしてあげると回転だけでなく 変換を組み合わせた場合も その変換の順序を自由に きっちりとコントロールできるので 意図通りの変換ができます

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

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

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

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

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

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