《#11》 ボーンツール（1）

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

今回から数回にわたって、CS4で新登場した「ボーンツール」を使ったアニメーションを制作していきたいと思います。
ボーンツールを使うと、腕などの関節のような動きを滑らかに表現することができます。
この機能は、Flash CS4で新たに追加された機能で、3DCGアニメーション制作ではよく使われる、IK（インバース・キネマティック）という技術を使った機能です。

目次

• サンプルファイルを開く（ActionScript 3.0）
• オブジェクトをシンボル化する
• 重なりを変更する
• ボーンの設定

まず、完成した様子を以下に紹介します。この完成のサンプルファイルは「bone_finish.swf」です。

 

完成サンプルではロボット全体が動いていますが、まず、腕部分から作り始めましょう。

 

サンプルファイルを開く（ActionScript 3.0）

 

今回のサンプルファイルをダウンロードして、その中の「bone_01.fla」を開きます。開くと、腕のようなイラストが描いてあります。

 

サンプルのファイルは、10回目までに使用していたものと変わって、AS 3.0形式のドキュメントになっています。

IKは、Action Script3.0を使うので、ゼロから自分で作成する際には、Flashファイル（AS 3.0）を選択し、新規ドキュメントを開いてください。

 

オブジェクトをシンボル化する

シンボルという概念は、以前ボタンを制作した際にも少し出てきました。
Flashでは、オブジェクトをアニメーションでの使用や、ActionScriptをそのオブジェクトに対して使用する場合には、「シンボル」に変換しライブラリに登録する必要があります。
今回のボーンツールを使ったアニメーションでも、同じくそれぞれのパーツごとにオブジェクトをシンボル化させます。

まず、手と台形のオブジェクトを一度に選択し、メニューバーから［修正?シンボルに変換］を選択します。

Shiftキーを押しながら２つのオブジェクトを選択します。

 

［シンボルに変換］を選択

 

［シンボルに変換］ダイアログボックスが表示されます。シンボル名を入力（ここでは「hand」とします）し、［種類］のプルダウンメニューからは、［グラフィック］を選択します。［OK］ボタンをクリックしてシンボルをライブラリへ登録します。

 

［種類］を［グラフィック］にして登録

 

［ライブラリ］パネルには、登録されたシンボルが表示されている

シンボル「hand」が登録できました。

腕の部分がすでにシンボル化されています。サンプルファイルでは、すでに「arm1」、「arm2」という2つのグラフィックシンボルがあるのが確認できます。

 

 

ボーンの設定

ここからいよいよボーンを設定していきます。［ツール］パネルから［ボーンツール］を選択します。

［ツール］パネルでボーンツールを選択

 

今回動かす腕は上腕、下腕、手の3つをボーンツールを使って連結させ、動かします。まず動きの中心点となる部分（ルートボーン）は上腕の左端部分になりますので、ボーンツールを選択後、ここを最初にクリックし、次の下腕までドラッグします（ドラッグ中に配置可能位置になるとボーンツールのポインタが白に変化します）。

腕の橋から中央の関節までドラッグ

 

次に、下腕から手までを同じ様にボーンツールを使ってドラッグしていきます。
これで3つの関節を結びつけることができました。その際、ルートボーンは大きな丸で表示されます。

左端の腕の根本がルートボーン

 

また、ボーンツールを使うとオブジェクトは、自動的にアーマチュアレイヤーが生成され格納されます。

 

「アーマチュア」レイヤーはボーンツール用のオブジェクトが配置されている

 

 

ボーンツールでのつながりの確認

ツールから選択ツールを選び、腕のオブジェクトを動かしてみると、腕がボーンツールにより連動して動いているのが、確認できます（この段階では、Enterキーを押して再生させてみようとしたり、Ctrl＋Enterキーを押してファイルをパブリッシュても動きませんから注意しましょう）。

handの部分を手を握るようにドラッグすると、滑らかに動く。

引き続き、ボーンツールの理解を深めつつ、この腕の部品を使ってアニメーションを作っていきたいと思います。

では、また次回！