アニメーターのためのFlash CS4（2）
3D機能とインバースキネマティクス

今月号の記事

Flash CS4では、タイムライン派アニメーターに嬉しい新機能がいくつか加わりました。それは、まったく新しいものが作れるようになったと言うよりは、これまでやってきたことがより効率的に行えるようになった感じです。前回は新旧モーショントゥイーンについて解説しました。2回目となる今回は3D機能とインバースキネマティクスを解説します。

Flash CS4では、タイムライン派アニメーターに嬉しい新機能がいくつか加わりました。それは、まったく新しいものが作れるようになったと言うよりは、これまでやってきたことがより効率的に行えるようになった感じです。そんな新機能のうち、3DグラフィックとIKを中心にとりあげます。

ツールパネル

CS4のツールパネルを見てみましょう。フローティング状態なら、パネルの右下をドラッグすることで、自由なサイズになりますよ。柔軟ですね。

パネルの右下をドラッグ

そうなると、使いやすいようにカスタマイズしたくなりますね。もちろん、CS3までと同様にアイコンを削除したり、分けたりまとめたりも自在です。私の場合は、ペンツールを使わないので削除しちゃいました！　ただしアイコンを削除した場合は、そのショートカットも効かなくなりますので要注意です。また削除した次のアイコンが繰り上がるので見た目コンパクトになりますが、後でアイコンを挿入することはできません。その場合は一旦デフォルトに戻すしかなさそうです。

ツールパネルのカスタマイズ

ツールパネルでは「スプレーブラシ」「パターン描画」や「3D」「ボーン」など、新しく追加されたアイコンに目がいきますね。しかし、消えてしまったものもあります。それはCS3まで「塗りのカラー」の下にあった「カラーなし」のアイコンです。

CS3まで「塗りのカラー」の下にあった「カラーなし」

クリックすると線や塗りのカラーを「なし」にできるので、矩形ツールや楕円ツールと併用する人も多いでしょう。Flash 5で「白黒」「カラーの入れ替え」とのトリオでツールパネルにデビューして以来、頻繁に使っていたのですが……。しかしご安心を。アイコンはなくなっても機能は残っているのです！　AltキーまたはOptionキーを押しながら「線のカラー」または「塗りのカラー」をクリックすることで、描画オフにすることが可能になっています。

描画オフにすることが可能

この操作はプロパティインスペクタでも可能ですが、カラーパネルでは従来通り「カラーなし」のアイコンをクリックします。

カラーパネルでは従来通り「カラーなし」のアイコンをクリック

平面のパース表現

さて、新機能のうち、私がもっとも惹かれたのは3D 回転です。2Dアニメーションでは3D的にイメージして描いたり動かしたりするからです。平面的なものであっても、ステージ上に配置する時は、その空間のパースに乗せなければ不自然です。パースとは消失点を基準とした遠近法です。壁に貼られたポスター、床にある新聞、カルトンに置かれたお札などを思い浮かべれば、パースの影響下に存在していますよね。しかしパースに合わせて作画するのはシンドイので、Flashではノーマルな状態で描いたシンボルを変形する方がスマートです。ステージに配置された封筒のインスタンスをご覧ください。

ステージに配置された封筒のインスタンス

この封筒が机の上にあるのなら、机のパースに合わせて変形させるわけですが、回転や傾斜だけでは十分ではありません。そこで歪曲変形します。そのためにはインスタンスを分解（文字が含まれていればそれも！）しなければなりません。これって覚悟が必要ですよね。そうです、歪曲変形は手軽にパースをつけられるのですが、シェイプでなければならないのが不便でした。修正するにしても動きをつけるにしても、手間がかかるんです。

歪曲変形はシェイプでなければならない

CS4の3D 回転は、インスタンスそのものにパースがつけられるのです。この封筒の場合、「グローバル変形」をオフにして、X軸とZ軸を調整します。回転コントロールを直接ドラッグするよりは、変形パネルの「3D 回転」で左右にドラッグする方が操作しやすいです。

CS4の3D 回転

変形パネルの「3D 回転」

インスタンスを分解することなく、状態を見ながら簡単に回転できるのはありがたいですね。モーショントゥイーンでアニメーションもつけることができるのです。いいことづくめなんですが、縛りもあります。インスタンスはムービークリップに限られ、ドキュメントの条件はAS 3.0且つFlash Player 10であることです。また、CS3形式で保存すると3Dのパラメータはなくなってしまいます。CS3形式で保存する前に、回転した状態で分解しておけば……と考えたあなた！　ぜひ試してみましょう。

ドキュメントの条件はAS 3.0且つFlash Player 10

CS3形式で保存すると3Dのパラメータはなくなってしまいます

3Dアニメーション

次に、3D 回転でやりたいこと、それは物体の回転アニメーションです。そこで、キャメラがビルの周囲を回り込むショットを作ってみます。そのためには、ビルの建設から始めます。安全のため、ヘルメットがあれば被って作業した方がいいでしょう。まず、ビルの壁面のシンボルを用意してステージに配置します。グラフィックインスタンスはムービークリップにしておきます。

ビルの壁面のシンボル

このインスタンスをさらにシンボル化します。種類はもちろん、ムービークリップです。

このインスタンスをさらにシンボル化

シンボル編集に移動し、壁面インスタンスをコピーして左右に配置します。吸着オンで、角と角をぴったりくっつけておきましょう。このような複数の面を持つ場合、Flashでは面の重なり順に注意しなければいけません。3Dソフトのような陰面処理はないので、ぐるっと回した時に奥に隠れるはずの面が手前に来てしまうことがあるからです。重なりはレイヤーにしておくと扱いやすいので、レイヤー1が左面、レイヤー2が右面、レイヤー3が正面になるように分配しておきます。左面は「カラー効果」で明度を下げてみました。光源の当たらない面があるとちょっとリアルでしょ。

レイヤー1が左面、レイヤー2が右面、レイヤー3が正面になるように分配

3D 回転ツールを選んで、左面を選択します。回転の中心点をドラッグして右端に移動しておきます。吸着がオンなら端の中央にピッタリ合います。変形パネルの「3D 中心点」でXの値を数値入力するのもいいでしょう。この数値は編集中のシンボルの基準点からの距離なので、壁面インスタンスの横幅から割り出せます。

3D 回転ツール

回転の中心点をドラッグして右端に移動

変形パネルの「3D 回転」で、Yの値を90度にします。これで正面に対して90度になります。

Yの値を90度に

正面に対して90度になります

右側の面の回転の中心は左端に移動し、変形パネルの「3D 回転」でYの値を-90度にします。ビルっぽくなりましたね～。もうヘルメットは不要です。

右側の面の回転の中心は左端に移動

親のタイムラインに戻れば、3D 回転ツールか変形パネルの「3D 回転」でビルのインスタンスをぐりんぐりん回せます。回転の中心がビルの正面になっているので、ビルの中心で回転させる場合は、変形パネルで「3D 中心点」のZの値を変更します。数値は奥行きの1/2です。回しすぎてワケがわからなくなったら、変形パネルで「変形の解除」をクリックします。

インスタンスをぐりんぐりん回せます

それでは撮影します。と言っても、Flashには今もカメラがありませんので、モーショントゥイーンでインスタンスを動かすことになります。「グローバル変形」を有効にし、変形パネルの「3D 回転」で、Y軸に回転させた後、X軸に傾けます。回転しすぎると、前述したように重なり順によって奥の面が見えてしまいます。

重なり順によって奥の面が見えてしまう

適切なアングルを手に入れたら、モーショントゥイーンを作成します。

モーショントゥイーンを作成

スパンの最終フレームで変形を一旦解除し、再び理想のアングルを見つけます。ビルが横に回転するアニメーションが完成し、キャメラが右方向に回り込んだように見えます。

ビルが横に回転するアニメーションが完成

最後に、キャメラに前後と上下の動きをつけます。これには3D 変換ツールか、プロパティインスペクタの「3D 位置とビュー」を使います。キャメラを前後させる場合はZの値を、上下させる場合はYの値を操作します。

プロパティインスペクタの「3D 位置とビュー」

また、「遠近の角度」は数値が大きくなるほど、パースが極端になります。3D変換されたオブジェクトで、手前のものほどより近くに、奥のものほど遠くに表示されます。おかしく見えるようなら55に戻しましょう。「消失点」は1点透視によるパースの中心点で、デフォルトはステージ中央です。「ガイドを表示」がオンになっていれば、ホットテキストのドラッグ中に、ラインで示されます。

消失点

アーマチュアのアニメーション

IK（インバースキネマティクス）は嬉しいことにグラフィックインスタンスでも使えます。ただ、ピストンやクレーンが作れると言われても、困惑しませんか？　横位置の歩行アニメーションなどはアリかもしれません。ただ、フレームアニメで描いた方が早いこともあるでしょう。もっと簡単な使い道はないものかと考えたら、ありました！　複数インスタンスの一斉トゥイーンです。たとえば大勢の人がわらわらと走っているシーンでは、隊列が常に変化するはずです。そこで走る人々のアーマチュアを組んで、それぞれの位置を変化させます。通常のトゥイーンでは人数分のレイヤーが必要ですが、ポーズレイヤー1つですむのです。しかもポーズレイヤーでは自動的にトゥイーンが設定されます。

大勢の人がわらわらと走っているシーン

ここで注意しなければならないのは各インスタンスの前後関係です。ボーンを後から追加したものほど前面にきますので、奥から順につないでいきます。それぞれが目標を追っている場合は、アーマチュアを階層化するといいでしょう。

アーマチュアを階層化

ボーンやジョイントでインスタンスが見えにくい場合は、IK アーマチュアのプロパティで「スタイル」を線にします。シンプルで見やすくなります。

IK アーマチュアのプロパティで「スタイル」を線に

アーマチュアアニメーションのシンボルをステージに配置し、モーショントゥイーンを設定すればパニックシーンのできあがりです。

2回にわたって、CS4の新機能を、タイムライン派アニメーターの視点でいくつか紹介しました。この後は、とにかくタイムラインでグリグリ動かしてみてください。Flashでこんな動きができるとは～！って感動しますよ。
そうそう、IKアニメーションや3Dトゥイーンを使用したムービーをボタンで制御する場合、AS3.0ですよ！これまでスクリプトアシストのおかげもあってAS1.0/2.0でやりくりしてきましたが、もうAS3.0は避けて通れないと実感しました。少なくとも再生ボタンの作り方は覚えておいた方がいいでしょう。