Flash CS4:3D回転の問題点

2009.02.07 12:05twitter hatena

20090207-1.jpg

学業的危機をなんとか乗り切り、ついにCS4環境になりました。早速一通り使ってみたのですが、特にFlashは激変です。何度かに分けてレビューでもしてみようかと思います。FlashなりAEなりの得意分野に絞り、通常のレビュー記事では触れないようなディープな内容をつつければと思います。

今回注目するのは、FlashCS4目玉機能の一つである3D機能。便利なのですが、インターフェース的な欠陥…というか誤解を招きやすい点があります。「回転と方向(軸)の違い」「ジンバルロック」とかそういう話。ちょっと数学まで絡んでくるので、なるべく噛み砕いていきます。なお、記事中のFlashを表示するにはFlashPlayer10以降が必要になります。

大抵の記事に載ってるFlashCS4の3Dあらまし

FlashCS4からは、シンボルを3D変形することができるようになりました。但しあくまで変形で、重なり順はレイヤー順でのみ決まります。条件として、変形できるのはムービークリップ(以下MC)のみ。対象プレイヤーがver10以上、ActionScript設定が3.0じゃないといけません。

変形パネルは罠

変形パネルの下半分「3D回転」の数値でMCをヒラヒラ回せるわけですが、この変形パネルは混乱を招きます。
ためしに変形パネルで「X回転=60→Y回転=60→Z回転=60→X回転=0→Y回転=0→Z回転=0」と入力してみて下さい。変形パネルにはいずれも0度と表示されたまま、シンボルが変形してると思います。
つまり、Flashの変形パネルはMCの3D回転の状態を示してません。数値から状態が一意に決まらないのです。通常の2D回転の場合、例えば「60度」と入力すればシンボルは60度の状態になりますし、90度のシンボルを選択すれば変形パネルにも「90度」と表示されます。が、3D回転はそうはいきません。これは入力順序が絡んできてしまうためです。

モーションエディタとの違い

こんないい加減な定義でどうやって内部処理しているのだろう、と思ったらモーションエディタではちゃんと一意性のある定義に置き換わっていました。先ほどの「X回転=60→Y回転=60→…→0」の状態は、モーションエディタでは以下のように変換されます。

20090207-2.jpg

▲変換は一筋縄ではいかない。

変形パネルではなくモーションエディタで値を決めさえすれば、同じ状態ならば同じ数値になります。が、これにも後述の問題があったりします。

違いの生まれるわけ

なぜ「変形」と「モーションエディタ」で値が違うのでしょう。「変形」の回転軸は常にxyz固定です。なのでx,y,zの順で入力した場合、-z,-y,-xの順で入力しないと元の状態に戻りません。実は「行列の掛け算を入れ替えると答えが変わる」と同義です。
これに対し「モーションエディタ」はZ回転軸は常に固定、残りの軸はZ回転に連動するという定義になってます(普通X軸固定なんですが…)。3つの回転に順序をつけることで、数値から状態が一つに決まるわけです。詳しくは「オイラー角」でぐぐって下さい。

ジンバルロック

さてモーションエディタで自在に回転できるかというと、実はそうでもありません。顕著な例として、モーションエディタで「Y回転=90」に設定して、X回転とZ回転をいじってみてください。二つの回転軸が重なり、事実上パラメータの数が減ってしまうのがわかります。
オイラー角は一つの軸が常に固定されてるため、それにもう一つの軸が重なってしまうとパラメータ不足に陥ってしまうのです。「ジンバルロック」と呼ばれてる問題らしいです。

できる表現・できない表現

じゃあ別に軸が重ならないようにすりゃいい、というのは正しいです。オイラー角は任意の3D角度を一意に定義できます。が、任意の3D回転の「動き」を表現できるかというと、実はできません。例えば、以下のような回転運動は、通常タイムラインじゃ作れません。


「Y回転=90」の状態でXかZどちらか一つの回転を単純にトゥイーンすればいい…と思えるのですが、ジンバルロックのため不可能なのです。回転途中のそれぞれの角度を表せても、それを一つのパラメータにまとめられるとは限らないのです。

他のソフトとの違い

この問題を解決する手段として、例えばAfterEffectsの場合「xyz方向」「xyz回転」という設定ができます。「方向」で固定軸の向きを決め、その上でオイラー角を使うことで任意の回転運動を扱いやすくしてあります。たぶん3Dソフトもそうなんじゃないでしょうか。ちなみにジンバルロックを解決する「クォータニオン」という回転定義があるらしく、ASならそれが取得できるっぽいです。それならFlashタイムライン上でも方向を設定できるようにしてくれよと思うのですが、パラメータはxyz回転の三つしかありません。困った困った。

入れ子によってパラメータを増やす

ではどうやってサンプルの回転を作ったかというと、Flashお馴染み「MCの入れ子」です。3D回転は入れ子にしても保持される(!)ので、傾けた状態で入れ子にすることで擬似的にパラメータを増やせます。しかし基準点の管理もしづらければ、当然MCは編集中にプレビューできないので「なるべく最後に回す」ように考える必要があります。サンプルの場合、「回してから傾ける」「傾けてから回す」の二通りの手法があるのがわかるでしょうか?
ちなみに入れ子を繰り返すと、こんなものまで作れます。参考までにflaファイル(CS4)


最後にまとめ。

  • 変形パネルの3D回転はあてにならないからモーションエディタを使う
  • 数学的に回転不可能な軌道がある
  • 入れ子で擬似的に対応可能

ちょっと3Dの経験があれば基礎的な話だったかもしれませんが、大抵のFlashタイムラインな人にはなじみのない話です。私自身、以前Mattareel.2008の回転体を作るときにAEの3Dレイヤーで躓きました。参考になれば幸いです。また間違いなどあれば指摘お待ちしています。

3 Comments to “Flash CS4:3D回転の問題点”

  1. 09年02月25日 今日の Web ページメモ « Web、プログラミングの技術など - gentenzero blog:

    […] Flash CS4:3D回転の問題点 - Mattari Blog 変形の回転を使ってモーションの設定をしていた時、思い通りに動かなかった原因はこれなのかなぁ…。 しかし、3D回転に関する機能を扱うときは、最後のまとめに書いてある、モーションエディタの使用、入れ子による複雑な回転の制御は覚えておきたいですね。 (tags: flash) […]

  2. もしな:

    Anime Studio Proの3D Boneとはボーンの概念が
    違っているようですね。

    CS4発売を機にASPからの乗り換えも検討していた
    のですが、こちらの記事を拝見してしばらくCS3と
    ASPとの併用のままいこうと思います。

    勉強になりました。

  3. マックスカフィ:

    CS4には他にも致命的な問題がありますよ。

    ・昔のファイルが開けなかったりする

    これです。
    最近Flashを勉強しはじめて、どれ、偉人たちはどうやって作ってるのかな、といろんなサイトのflaファイルを集めて開こうとしたところ、

    ・『予期しないファイル形式です』

    と表示されて開けませんでした。
    調べてみると、

    ・CS3で開いて保存しなおすと開ける

    とのこと。
    prizm.flaが開けませんでした。

    そんなわけでCS3の体験版とCS4の体験版の両方で練習しています。
    CS3はもしものために残しておいたほうがよさそうです。

    ではでは。

Comment