アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 連載 » ビギナーのためのFlash CS4 Professional オブジェクトベースアニメーション » 第4回 3Dとインバースキネマティックで新しいビジュアル表現を追究してみよう!

ビギナーのためのFlash CS4 Professional オブジェクトベースアニメーション

第4回 3Dとインバースキネマティックで新しいビジュアル表現を追究してみよう!

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つのオブジェクト(上腕と前腕)にボーンを追加していきます。以下,手順を示します。

  1. フレームインジケータを30フレームにあわせて,ツールパネルの「ボーンツール」を選ぶ
  2. 上腕の始点(付け根の部分)にマウスカーソルをあわせて終点(上腕の左端)までドラッグする
  3. 前腕の視点(前腕の右側)にマウスカーソルをあわせて終点(前腕の左端)までドラッグする
  4. ツールパネルの選択ツールを選び,背景をクリックして選択を解除する
  5. 手のひらをクリックして,[修正]→[重ね順]→[最背面へ]を実行

(4)と(5)の作業は,ボーンが連結したとき,手のオブジェクトが最前面に表示されるようになったので,重ね順を変更するために実行しています。

ここから,IKアニメーションのプロセスです。オブジェクト(上腕と前腕)にボーンが埋め込まれると,タイムラインに「アーマチュア_1」という新しいレイヤーが作成されます(今まで上腕と前腕が配置されていたレイヤーは空になります)。このアーマチュアに対して,アニメーションを指定していくことになります。

  1. フレームを45フレームまで延長して,キャラクターの腕を動かす
  2. フレームを60フレームまで延長して,キャラクターの腕を動かし,振り上げたポーズをつくる
  3. さらにフレームを90フレームまで延長して,アニメーションの長さを調整する
  4. アニメーションの動きを確認する

ビデオ2 キャラクターの上腕と前腕にボーンを埋め込み,IKアニメーションを作成

インバースキネマティックの制限について

オブジェクトにボーン(骨)を組み込むだけで,キャラクターにポーズをつけられるのはとても便利ですが,人間や動物は腕や足を無制限に動かせるわけではありませんよね。実は,プロパティインスペクタのボーン設定を使えば,動く範囲を制限することできます。サンプルのキャラクターであれば,「これ以上,腕は曲がらない」という設定をしておけば,ポーズをつくるときに作業が楽になります。

  1. 制限したいボーンをクリックして選択する
  2. プロパティインスペクタの[結合:回転]→[縦横比を固定]をチェックする
  3. 回転する範囲(最小および最大の角度)を入力する

[縦横比を固定]をチェックすると選択されているボーンの始点に制限を表す円弧が表示されますので,視覚的に確認することも可能です。以下のビデオでは,腕を振り上げるときの制限を設定しています。

ビデオ3 腕を振り上げるときの制限(回転角度)を設定

著者プロフィール

境祐司(さかいゆうじ)

インストラクショナル・デザイナー[Instructional Designer]として学校,企業の講座プラン,教育マネジメント,講演,書籍執筆などの活動をおこなう。2000年より情報デザイン関連のオンライン学習実証実験を始める。現在,教育デザイナー育成を目的としたフォーラムを立ち上げるため準備中。著書に「速習Webデザイン Flash CS4」(技術評論社),「Webデザイン&スタイルシート逆引き実践ガイドブック」(ソシム)などがある。

URLhttp://admn.air-nifty.com/monkeyish_studio/

著書

  • 速習デザイン Flash CS4

    速習デザイン Flash CS4

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

C/C++プログラマのためのDTrace入門

よくカーネルのチューニングや解析で活用されるDTraceですが,実はユーザプログラムの開発においても非常に有用です。連載ではC/C++プログラマやテストに関わる方向けにDTraceの使い方を解説します。

Blogopolisから学ぶ計算幾何

計算幾何学は,図形に関するアルゴリズムを研究するコンピュータサイエンスの一分野です。本連載では,ビジュアルブログ検索エンジン「Blogopolis」で採用されている計算幾何のアプローチを例に取り上げながら,計算幾何の初歩を実践的に学習します。

検索エンジンはいかにして動くのか?

本連載では, 今や誰もが利用している検索エンジンの中身を,全体の仕組みやデータ構造,アルゴリズムから分散インデックスまで,最近の研究事例も交えて紹介します。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス