ボーンツールを活用した
インタラクションの作成
必要ソフトウェア
はじめに
昨年末にリリースされたAdobe® Flash® CS4 Professional（以下Flash CS4）より「ボーンツール」機能が追加されました。
今までは、人間や動物の関節の動きや、歯車やピストンといった複雑な動きなど、複数のオブジェクトが連携するアニメーションを作成するには、ひとつひとつのオブジェクトに対して、個別にアニメーションをつける必要がありました。しかし、この「ボーンツール」を使えば、人間の関節のような、複数のオブジェクトが連動したアニメーションを容易に作成することが可能です。
この記事では、ボーンツールによるボーン（インバースキネマティック）の作成と、IKArmatureクラスを用いたインバースキネマティックの制御の方法について、解説していきます。なお、サンプルにはActionScript 3.0を使用します。
ダウンロード
- シェイプを使ったボーンの例（bone_01_01.fla）
- インスタンスを使ったボーンの例（bone_01_02.fla）
- 腕を動かすアニメーション素材ファイル（bone_02_01.fla）
- 腕を動かすアニメーション完成ファイル（bone_02_02.fla）
- ドラッグできる腕素材ファイル（bone_03_01.fla）
- ドラッグできる腕完成ファイル（bone_03_02.fla）
- カーソルを追いかける腕素材ファイル（bone_04_01.fla）
- カーソルを追いかける腕完成ファイル（bone_04_02.fla）
- のびる骸骨素材ファイル（bone_05_01.fla）
- のびる骸骨完成ファイル（bone_05_02.fla）
ボーン（インバースキネマティック）とは？
ボーンとは複数オブジェクト同士の連携を設定するために、骨と関節を設定することにより、一意のオブジェクトの位置や角度などの情報をもとに、関連するオブジェクトの位置や角度なども自動的に計算し、位置調整を行う機能です。この機能を使うと、例えば手の動きに連動させて、腕や肩の関節を動かすアニメーションを簡単に作成することが可能です。
3Dソフトなどで、モデリングされたキャラクターなどにアニメーションをつける際などに、使われることが多く、インバースキネマティック（逆運動学）とも呼ばれます。
今までは、末端の関節の角度や位置を定める方法は、根元の関節から順に計算する必要があり、アニメーションを作成する際には、とても非効率なものでした。その問題を解決する方法として考案されたものが、各関節の位置を末端から逆順に計算していくインバースキネマティックという手法です。
Flashでは、つながったボーン全体を「アーマチュア」、ボーン間を連結する点を「ジョイント」と呼んでいます。
Flash CS4 のボーンツールでできること
Flash CS4では、主に以下の3つ機能が使えます。
- シェイプ内へのアーマチュアの作成
- 複数のシンボル間のボーンの作成
- 作成したボーンおよびアーマチュアのIKArmatureクラスによる制御
1. シェイプ内へのアーマチュアの作成
単一のシェイプ内にアーマチュアを作成し、ボーンや各ジョイントの位置に合わせて、シェイプを変形させることができます。（bone_01_01.fla参照）
※ツールバー[選択ツール]を利用してボーンアニメーションを確認いただけます。
2. 複数のシンボル間のボーンの作成
シンボルを別のシンボルに接続し、複数のシンボルを繋ぐアーマチュアを作成することができます。ボーンや各ジョイントの位置に応じて、各シンボル同士が連動し、位置の変更や回転を行うことが出来ます。（bone_01_02.fla参照）
3. IKArmatureクラスによる制御
作成したボーン、ジョイント、一連のアーマチュアをIKAramatureクラスを用いて、制御することが可能です。
基本的なボーンツールの使い方
ここからは実際にボーンを使って、骸骨の腕を動かすアニメーションを作成していきます。
- 素材ファイル：bone_02_01.fla
- 完成ファイル：bone_02_02.fla
まず、bone_02_01.flaを開いてください。
ツールバーから「ボーンツール」を選択します。
ボーンの連結を始めたいインスタンスをクリックして、繋げたい先のインスタンスまでそのままドラッグすることで、ボーンを作成することが出来ます。最初に作ったボーンの後端はアーマチュアの始点として固定されるため、今回は肩からボーンを作成します。また、更にインスタンスを繋げたい場合は、先ほど作成したボーンの終点をクリックしてから、別のインスタンスまでドラッグしていきます。
また、ボーンが作成されると新しくアーマチュアレイヤーが作成され、ボーンを適用したインスタンスはアーマチュアレイヤーに移動します。
なお、各インスタンスの角度や位置は、始点のあるボーンにひもづいているため、始点をインスタンスの先端ではなく後端につけると、各インスタンスが綺麗に連動した動きをします。
作成した各ボーンは、選択ツールで自由に動かすことが出来、位置を変更したインスタンスに合わせて、その他のインスタンスも移動、回転して位置を調整します。
ボーンツールを使ったアニメーションの作成
作成したボーンは、通常のトゥイーンと同様に、タイムライン上でアニメーションを作成することが可能です。
タイムライン上で、アーマチュアレイヤーのアニメーションを作成したいフレームを選択し、「ポーズを挿入」します。
ここで作成したタイムラインのポーズには、それぞれ位置や角度を設定することができ、ポーズ間の動きは自動的にフレーム内のボーンの位置を補完されます。できあがったアニメーションはフレームを再生することで確認できます。
Flash Player上でドラッグ可能なボーンの作成
ここからは実際にボーンを使って、骸骨の腕を動かすアニメーションを作成していきます。
- 素材ファイル：bone_03_01.fla
- 完成ファイル：bone_03_02.fla
また、アーマチュアレイヤーを選択すると、プロパティパネルでイージングとオプションの設定を行うことが出来ます。オプションの種類を「オーサリング時」から「実行時」に変更すると、Flash Player上でユーザーの操作によって各ボーンを動かすことが可能になります。
※ ポーズを用いたアーマチュアのアニメーションを作成している場合は、アーマチュアのオプションの種類は「実行時」に設定することはできません。
ボーンの詳細な設定
ドラッグした際の動きがぎこちない場合は、各ボーンのパラメータを調整することができます。
設定できるパラメータには、回転や横位置、縦位置の可動範囲やアニメーションの速度があり、ボーン選択時にプロパティパネルで設定することができます。
- 速度
- 各ボーンの移動に対して、相対的にどれだけ早く追従するか設定できます。100より大きく設定すると他のボーンより早く、100より小さく設定すると他のボーンより遅く、アニメーションするようになります。
- 結合：回転
- ボーンの進行方向に対してどれだけの範囲で回転するかを設定することが出来ます。
- 結合：X変換
- ボーンの進行方向に対して垂直方向に、どれだけの範囲で移動するかを設定することが出来ます。
- 結合：Y変換
- ボーンの進行方向に対して並行方向に、どれだけの範囲で移動するかを設定することが出来ます。
ActionScriptによるボーンの制御
ここからは、マウスカーソルを追いかける腕のサンプルを作成しながら、IKArmatureを用いて、ボーンおよびアーマチュアをプログラムで制御する方法を解説していきます。
- 素材ファイル：bone_04_01.fla
- 完成ファイル：bone_04_02.fla
まず、bone_04_01.flaを開きます。既に骸骨の腕にはボーンが設定されているので、これを使用してウスカーソルを追いかける腕を作成します。
ボーンの制御には主に以下の五つのクラスを使用します。
- IKManager
ドキュメントに定義されたすべてのアーマチュアを管理するクラス - IKArmature
単一のアーマチュアを表すクラス - IKBone
単一のボーンを表すクラス - IKJoint
単一のジョイントを表すクラス - IKMover
IKJointの移動などを制御するクラス
プログラムの大まかな流れは以下のようになります。
- IKManagerから指定したIKArmatureを取得
- IKArmatureから指定したIKBoneを取得
- IKBoneから終点のIKJointを取得
- IKJointをIKMoverに登録
- マウスの動きに合わせて、IKMoverでIKJointを移動
また、IKArmatureを取得する際にはアーマチュア名、IKBoneを取得する際にはボーン名が必要となります。それぞれ、アーマチュア名はタイムライン上でアーマチュアレイヤーを選択した際に、ボーン名はステージ上で各ボーンをクリックした際に、プロパティパネルにて確認することが可能です。
以下が実際のスクリプトとなります。
import fl.ik.*;
//=========1.IKManagerから指定したIKArmatureを取得=========
//IKManagerからアーマチュア名を指定してIKArmatureを取得
var ik_armature:IKArmature = IKManager.getArmatureByName("IK_Armature");
//IKArmatureがステージ上で移動できるように設定
ik_armature.registerElements(this.stage);
//=========2.IKArmatureから指定したIKBoneを取得=========
//IKArmatureからボーン名を指定してIKBoneを取得
var ik_bone:IKBone = ik_armature.getBoneByName("ikBoneName15");
//=========3.IKBoneから終点のIKJointを取得=========
//IKBoneの終点を取得
var ik_joint:IKJoint = ik_bone.tailJoint;
//=========4.IKJointをIKMoverに登録=========
//現在のik_jointの位置を取得
var joint_pos:Point = ik_joint.position;
//IKMoverにIKJointを登録
var ik_mover:IKMover = new IKMover(ik_joint,joint_pos);
//IKMoverの各パラメータを設定
ik_mover.iterationLimit = 1;
ik_mover.limitByIteration = false;
ik_mover.distanceLimit = 0.1;
//=========5.マウスの動きに合わせて、IKMoverでIKJointを移動=========
addEventListener(Event.ENTER_FRAME,moveIKPos);
function moveIKPos(e:Event){
//マウスの現在位置まで、IKMoverをアニメーションさせる
ik_mover.moveTo(new Point(this.mouseX,this.mouseY));
}
「Adobe CS4 わたしたちの届けたいコト」サンプルの作成
ここからは「Adobe CS4 わたしたちが届けたいコト」に掲載されている、「Flashのボーンツールを使ってアニメーションを作ろう」のような、骸骨をひと続きに伸ばせる作品の作り方を解説していきます。
- 素材ファイル：bone_05_01.fla
- 完成ファイル：bone_05_02.fla
bone_05_01.flaを開きます。このファイルには既にボーンが設定されています。
全体を一続きに見せるため、左手よりボーンが作成されていますが、このサンプルでは、左手を含めた全体をゆらゆらと揺れる動きにするために、始点を左手にせず、左手の下にガイド用のインスタンスを設置し、そこを始点にボーンを作成しています。また、ガイド用インスタンスの1フレーム目にはvisible = falseを挿入し、Flash Player上では表示しないようにしています。
プログラムの大まかな流れは以下のようになります。
- IKManagerから指定したIKArmatureを取得
- IKArmatureから指定したIKBoneを取得
- IKBoneから終点のIKJointを取得
- IKJointをIKMoverに登録
- マウスのドラッグに合わせて、IKMoverでIKJointを移動
以下が実際のスクリプトです。
import fl.ik.*;
//=========1.IKManagerから指定したIKArmatureを取得=========
//IKManagerからアーマチュア名を指定してIKArmatureを取得
var ik_armature:IKArmature = IKManager.getArmatureByName("IK_Armature");
//IKArmatureがステージ上で移動できるように設定
ik_armature.registerElements(this.stage);
//=========2.IKArmatureから指定したIKBoneを取得=========
//IKArmatureからボーン名を指定してIKBoneを取得
var ik_bone:IKBone = ik_armature.getBoneByName("ikBoneName26");
//=========3.IKBoneから終点のIKJointを取得=========
//IKBoneの終点を取得
var ik_joint:IKJoint = ik_bone.tailJoint;
//=========4.IKJointをIKMoverに登録=========
//現在のik_jointの位置を取得
var joint_pos:Point = ik_joint.position;
//IKMoverにIKJointを登録
var ik_mover:IKMover = new IKMover(ik_joint,joint_pos);
//IKMoverの各パラメータを設定
ik_mover.iterationLimit = 1;
ik_mover.limitByIteration = false;
ik_mover.distanceLimit = 0.1;
//=========5.マウスのドラッグに合わせて、IKMoverでIKJointを移動=========
//頭部のムービークリップをクリックした際の処理を設定
head_mc.addEventListener(MouseEvent.MOUSE_DOWN,onDrag);
function onDrag(e:MouseEvent){
head_mc.removeEventListener(MouseEvent.MOUSE_DOWN,onDrag);
this.addEventListener(MouseEvent.MOUSE_UP,onStopDrag);
this.addEventListener(Event.ENTER_FRAME,moveIKPos);
}
function moveIKPos(e:Event){
//マウスの現在位置まで、IKMoverをアニメーションさせる
ik_mover.moveTo(new Point(this.mouseX,this.mouseY));
}
function onStopDrag(e:MouseEvent){
this.removeEventListener(Event.ENTER_FRAME,moveIKPos);
this.removeEventListener(MouseEvent.MOUSE_UP,onStopDrag);
}
最後に
Flash CS4のボーン機能は、従来のFlashの機能とは異なる使い方、異なる概念が少なくないため、はじめは戸惑うかもしれません。しかしボーン機能を使いこなせば、従来の数分の一の時間で、人や動物、機械などの複雑なアニメーションを作ることが可能になります。
Flashはバージョンが新しくなるたびに機能も増えるため、普段触らない機能というのも少なくありません。しかし、普段使わない機能を使ってみることで、インスピレーションが得られたり、効率的な制作方法が発見できたりすることも少なくありません。
「よくわからないから使わない」ではなく、「よくわからないから使ってみよう」という気持ちを持って、Flashの新機能を使ってみてはいかがでしょうか。
