《#13》 ボーンツール(3) 《#15》 ドラッグで動かすムービー

2009年11月13日 (金)

nanaicon

Digicon Magazine読者のみなさんこんにちは、ななきちです。

今回は、ロボットのキャラクターの手足に「ボーンツール」を使ったアニメーションの最終回です。組み合わせて配置した手足をポーズさせながら、60フレームのアニメーションづくりにチャレンジします。

では、がんばっていきましょう。


目次

  • フレームの作成
  • キーフレームの作成
  • アニメーションの完成

    こちらが完成ムービーです。いくつかのポーズの組み合わせからできあがっています。

    このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

    Adobe Flash Player を取得

     

     

     

    フレームの作成

    まず、サンプルファイルをダウンロードしておきます。前回最後に紹介した、「bone_07.fla」は、ボーンツールの手や腕のパーツを配置しおわったキャラクターの入ったファイルです。ファイルを開き、選択ツールで腕部などをクリックすると、ボーンツールで作成されているパーツが選択表示されます。

    fla14_002


    まず、アニメーションを作成するために、タイムラインにフレームを作成します。「アーマチュア_1」レイヤーの60フレーム目を選択し、メニューバーから[挿入―タイムライン―フレーム]を選択します。

    fla14_003

    メニューバーから[挿入―タイムライン―フレーム]を選択すると、60フレーム目までのフレームが作成されます。メニュー選択の変わりに、F5キーを押しても同じ操作ができます。

     

    キーフレームの作成

    順番にキーフレームを作成していきましょう。

    1)アニメーションを動かすフレーム(キーフレーム)にするフレームを、[タイムライン]パネルで選択する

    2)ステージでボーンツールの部品をドラッグし、実際のポーズを作成

    この繰り返しを行ってきます。では、はじめましょう。

     

    まず、[タイムライン]パネルの「アーマチュア_1」レイヤーの5フレームをクリックします。

    fla14_5s

     

    ステージでは、選択ツールで腕や足のパーツをドラッグし、図のように、手足を曲げ、ポーズをとらせました。ポーズの変更は、ポーズは、みなさんの好きなかたちにアレンジしてもよいでしょう。

    fla14_5ss

    5フレーム目のポーズ

     

    [タイムライン]パネルを見ると、オブジェクトを動かした5フレーム目には、キーフレームが自然とできあがっています。次は、10フレーム目を選択します。

    fla14_10s

     

    10フレーム目のポーズを変更します。

    fla14_10ss

    10フレーム目のポーズ

     

    続いて、[タイムライン]パネルで15フレーム目を選択し(以後、タイムラインパネルの図は省略しています)、ここでもポーズを変えます。

    fla14_15ss

    15フレーム目のポーズ。首も左右に振れることに注目してください。

     

    また、20フレーム、25フレーム、30フレーム、35フレームを選択しては、それぞれポーズを作ります。20フレームでポーズをつくったら、25、30、35では頭部だけ変更しています。再生したとき、首を振っているように見えます。

    fla14_20ss

    20、25,30、35フレーム目のポーズ

     

    40フレーム目では、下のようなポーズに変更します。

    fla14_40ss

    40フレーム目のポーズ

     

    ここからは再び、繰り返しのポーズを作成します。43~59フレーム目まで、2フレーム刻みに、右の手のひらだけを回転させて動かします。これで手を振っているようなアニメーションができあがります。

    fla14_004

    2フレームごとに手のひらだけ動かすことで、アニメーションでは手を振っているように見えます。

     

    fla14_59sfin

    アニメーション作成後のタイムラインパネル。キーフレームが図ようにたくさん指定されました。

     

    ここまでを完成したたものが冒頭に紹介しているアニメーションで、サンプルファイルは「bone_finish.fla」です。

    みなさんも、作成しながら、または完成後にEnterキーを押してアニメーションを再生したり、 Ctrl+Enterキーでパブリッシュプレビューして、アニメーションを楽しんで下さい。

    次回は、ボーンツールについて、もう1つの作例を紹介しますよ。

    ではまた次回!

    トラックバック

    このページのトラックバックURL:
    http://www.typepad.jp/t/trackback/387238/22292081

    このページへのトラックバック一覧 《#14》 ボーンツール(4):

    コメント

    コメントを投稿

    コメントは記事の投稿者が承認するまで表示されません。

    《#13》 ボーンツール(3) 《#15》 ドラッグで動かすムービー