Flash CS4の新機能で最もインパクトのあったのが、「3Dアニメーション」と「インバースキネマティック」です。3次元アニメーションの分野では必須の機能ですが、Flashで初めて体験する人も多いのではないでしょうか。CS3までは、スクリプトで制御するか、3次元らしく見えるように力技で表現するしかありませんでした。タイムラインでコツコツと作っていた人にとっては、待望のツールだと言ってよいでしょう。
Flashの新たな可能性「IKアニメーション」
インバースキネマティック（inverse kinematics）略して「IK」は、ボーンツール（CS4から搭載されたツール）を使ってオブジェクトの中に複数の「ボーン」を組み込んでいく作業だと捉えてください。ボーンツールのアイコンを見れば一目瞭然ですが、「骨」ですね。たとえば、細長い長方形を描いて、複数のボーン（骨）を組み込んでいくと、ヘビのような動きを簡単に設定することができます。人間や動物の関節、ロボット、クレーンなど、今までキーフレームアニメーションとトゥイーンアニメーションの組み合わせで実現させてきたことを1つのツールで実行可能になったわけです。
余談ですが、5年ほど前に「ペンツールで描いた”1本の線”に命をあたえる」といったテーマで、ライブ（トークしながらFlashアニメーションをつくるイベント）をやりました。そのときに、作ったアニメーションをリンクしておきます（ちょっと動きが気持ちわるいかもしれません）。1本の線が生き物のように動き回るアニメーションです。
上記のアニメーションは、すべてモーショントゥイーンで作られていますが、ボーンツールを使えば、もっと複雑な動きにすることが可能だと思います。しかも、作業時間は（試行錯誤する時間を含めても）半分以下になるでしょう。
IK（インバースキネマティック）アニメーションは、ボーンツールで直線を描くようにドラッグしながら、オブジェクトの中に「ボーン（骨）」を埋め込んでいきます。このボーンの先端がジョイントになりますので、同じ作業を繰り返してチェーンのようにつなげていきます（ジョイントの部分が関節になります）。
キャラクターアニメーションの実践
この機能によって、キャラクターアニメーションのプロセスが効率化され、今までとは比較にならないほど制作しやすくなりました。前回、「走る」アニメーションを例にして、Flashを使っても「けっして楽な作業ではない」と書きましたが、IKアニメーションの場合も同じです。作業は格段に効率化されますが、意図した表現に近づけるための試行錯誤は欠かせません。特に、初めてこの機能に触れる人は、（仕事などに活用する前に）何度も試して勘を身につけてほしいと思います。
さて、それでは実際にキャラクターをインバースキネマティックで動かしてみましょう。ここでは、書籍のレッスンファイル（Part-4 Lesson-3）をサンプルアニメーションとして紹介していきます。
次のビデオは、素材ファイルの内容です。途中まで腕を振り上げるアニメーションが設定されています。
ビデオ1 素材ファイルの内容（途中まで腕を振り上げるアニメーション）
キャラクターにボーン（骨）を組み込んでいきます。ここでは、キャラクターの2つのオブジェクト（上腕と前腕）にボーンを追加していきます。以下、手順を示します。
- フレームインジケータを30フレームにあわせて、ツールパネルの「ボーンツール」を選ぶ
- 上腕の始点（付け根の部分）にマウスカーソルをあわせて終点（上腕の左端）までドラッグする
- 前腕の視点（前腕の右側）にマウスカーソルをあわせて終点（前腕の左端）までドラッグする
- ツールパネルの選択ツールを選び、背景をクリックして選択を解除する
- 手のひらをクリックして、［修正］→［重ね順］→［最背面へ］を実行
（4）と（5）の作業は、ボーンが連結したとき、手のオブジェクトが最前面に表示されるようになったので、重ね順を変更するために実行しています。
ここから、IKアニメーションのプロセスです。オブジェクト（上腕と前腕）にボーンが埋め込まれると、タイムラインに「アーマチュア_1」という新しいレイヤーが作成されます（今まで上腕と前腕が配置されていたレイヤーは空になります）。このアーマチュアに対して、アニメーションを指定していくことになります。
- フレームを45フレームまで延長して、キャラクターの腕を動かす
- フレームを60フレームまで延長して、キャラクターの腕を動かし、振り上げたポーズをつくる
- さらにフレームを90フレームまで延長して、アニメーションの長さを調整する
- アニメーションの動きを確認する
ビデオ2 キャラクターの上腕と前腕にボーンを埋め込み、IKアニメーションを作成
インバースキネマティックの制限について
オブジェクトにボーン（骨）を組み込むだけで、キャラクターにポーズをつけられるのはとても便利ですが、人間や動物は腕や足を無制限に動かせるわけではありませんよね。実は、プロパティインスペクタのボーン設定を使えば、動く範囲を制限することできます。サンプルのキャラクターであれば、「これ以上、腕は曲がらない」という設定をしておけば、ポーズをつくるときに作業が楽になります。
- 制限したいボーンをクリックして選択する
- プロパティインスペクタの［結合：回転］→［縦横比を固定］をチェックする
- 回転する範囲（最小および最大の角度）を入力する
［縦横比を固定］をチェックすると選択されているボーンの始点に制限を表す円弧が表示されますので、視覚的に確認することも可能です。以下のビデオでは、腕を振り上げるときの制限を設定しています。
ビデオ3 腕を振り上げるときの制限（回転角度）を設定
3Dツールを使って、立体アニメーションに挑戦！
3Dアニメーションも、Flash CS4に搭載された「3D回転ツール」と「3D変換ツール」によって可能になりました。3Dといっても、平面の絵（2D）を3次元空間で扱うことになりますので、3次元モデルを取り込めるわけではありません。「なんだ、疑似3Dか」などと思わないでください。3次元空間に自分の描いた絵を配置して、自由に動かせるのですから表現の幅が格段に広がります。Flashを使っているクリエーターたちの創作意欲を掻き立ててくれる魅力的な機能だと言ってよいでしょう。
3D回転ツールおよび3D変換ツールを効果的に活用にするには、3次元空間および3次元モデルについての知識が必要になります。まずは、初心者向けの入門書などを読んで、大まかに理解しておくと遠回りせずに習得できると思います。Adobe社のサイトで公開されている「Flash CS4 Professional ユーザガイド（「アートワークの作成および編集」→「3D グラフィック」）」も参考になります。
ここでは、書籍のレッスンファイル（Part-4 Lesson-5 STEP04-05）をサンプルアニメーションとして紹介していきます。ステージ上のリングとキャラクターが奥に下がったり、手前に出てくるアニメーションですが、画面から飛び出す立体アニメーションになっています。裸眼立体視で見ると、キャラクターがディスプレイから飛び出てきます（立体視ができる人はご覧になってください）。
- ツールパネルの「3D変換ツール」を選ぶ
- フレームインジケータを（フレームの中間）15フレームにあわせる
- 左側のリングをクリックして選択、プロパティの［3D位置とビュー］→［Z：］に「50」を入力
- 右側のリングをクリックして選択、プロパティの［3D位置とビュー］→［Z：］に「50」を入力
- フレームインジケータを（フレームの最後）30フレームにあわせる
- 左側のリングをクリックして選択、プロパティの［3D位置とビュー］→［Z：］に「0」を入力
- 右側のリングをクリックして選択、プロパティの［3D位置とビュー］→［Z：］に「0」を入力
上記の手順を実行すると、2つ配置されているリングの絵が奥に下がって元の位置に戻るというアニメーションが出来上がります。
キャラクターに対しても同様の手順でアニメーションを指定します。
- フレームインジケータを（フレームの中間）15フレームにあわせる
- 右と左のキャラクターに対して、それぞれ［3D位置とビュー］→［Z：］に「-100」を入力
- フレームインジケータを（フレームの最後）30フレームにあわせる
- 右と左のキャラクターに対して、それぞれ［3D位置とビュー］→［Z：］に「0」を入力
単純に、拡大縮小したアニメーションは、立体にはなりません（立体視で見ても画面から飛び出す効果は得られません）。3次元空間にリングとキャラクターの絵を配置して、Z軸の値を変更しているのがポイントです。
ビデオ4 3D変換ツールで作成する立体アニメーションの作業手順
まとめ
Flash CS4の新機能「3Dとインバースキネマティック（IK）」、いかがだったでしょう。ある程度の専門知識が必要なツールなので、じっくりと時間をかけてマスターしてください。繰り返しになりますが、仕事で活用する前に遊びましょう。とても扱いやすいツールになっていますが、ちょっとしたコツがあったり、前後の操作が重要な場合があります。「週末は、Flashで遊ぼうかな」くらいの気分で、いろいろ試してみるのが（結果的には）習得の早道になります。
もう一度、この連載で取り上げた新機能を確認してみましょう。
- オブジェクトベースのアニメーション編集
- モーションエディタによる詳細なアニメーション設定
- 30種類のモーションを適用できるモーションプリセット
- ボーンツールによるインバースキネマティックの表現
- 3D回転および3D変換ツールによる立体的な表現
この他にも、パターン描画ツールやスプレーブラシツール、Adobe AIRランタイム向けのパブリッシュ機能、Adobe Media Encoder（H.264のサポート）、メタデータ（XMP）のサポートなど、紹介できなかった新機能がありますので、Adobe社のサイトでチェックしてみてください。
最後に、書籍の「はじめに」から抜粋して本連載を締めくくりたいと思います。
Adobe Flashは、Webデザインの業界では欠くことのできない重要なテクノロジーになりました。Webアニメーション制作の代表的なツールとして知られていた初期のバージョンから12年が経ち、現在ではWebアプリケーション開発やビデオ配信、モバイル対応など、あらゆるメディアを取り込み、総合開発環境として世界中のデザイナー、開発者に使用されています。
もうFlashの完全習得を一夜漬けで実行するのは困難だといってよいでしょう。アニメーションにしても、プログラミング、ビデオでも、それぞれが高度に専門化しており、Flashを使いこなすための知識やノウハウが要求されるレベルにきているからです。また、表現の幅が広がったことでPhotoshop やIllustrator、ビデオならAfter Effectsなど、他のアプリケーションソフトとの連携作業も重要になってきました。
もちろん、完全習得を目指し、Flashでやれる作業をすべて身につけておくことができればベストですが、まずは、自分の専門領域を抑えた上で、分野を広げていくほうがスムーズに習得できるかもしれません。特に、仕事をしながら学習しなければならないプロの人たちにとっては効果が大きいのではないでしょうか。
Flashは、Webの可能性を広げてくれるだけでなく、デザイナーや開発者の創造意欲を刺激してくれる強力なクリエイティブツールです。本書をきっかけに、Flashクリエーションの世界にのめり込んでいただけたら幸いです。
2009年6月19日
『速習Webデザイン Flash CS4』「はじめに」より
