インバースキネマティクス
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
オブジェクトにボーンツールやバインドツールを適用し、インバースキネマティクスの原理に基づいた連動的な動きを設定する方法を学ぶことができます。
このコンテンツを視聴するには Flash が必要です
必要条件
このチュートリアルのデモンストレーションと同じ操作を行うには下記のソフトウェアが必要です。
Adobe Flash Professional CS4
サンプルファイル
lrvid4058_fl.zip (ZIP, 299K)
前提として必要な知識
Flashアニメーションの中級知識
インバースキネマティクス
このチュートリアルでは、Adobe Flash CS4 Professionalでインバースキネマティクスを設定する方法を説明します。
インバースキネマティクスの構造
インバースキネマティクスは、「ボーン」ツールと、「バインド」ツールを用いて、連動する親要素の運動を逆算して導き出す方法です。
- ステージにはすでにムービークリップシンボルが作成されています。このムービークリップは単なる四角形のシェイプにすぎません。
- このムービークリップを複製します。Alt キー（Windows）またはOption キー（Macintosh）を押しながらクリックアンドドラッグして、複製します。 ここでは、合計5つになるように複製しましょう。
- 複製したこれらのシンボルを、「ボーン」ツールを利用して、リンクさせます。
図 1: 「ボーン」ツールの選択
- 「ボーン」ツールを選択し、最初のシェイプをクリックします。このシェイプが親要素となります。そのまま隣のシェイプまでドラッグします。これで骨ができて、二つのシンボルがリンクされました。同様の操作を繰り返していきます。5つのシェイプに骨を通します。
ノート: Flash CS4は自動的にアーマチュアレイヤーを作成します。これはインバースキネマティクス用に用意されたレイヤーです。
インバースキネマティクスで構築されたアニメーション
このように作成したインバースキネマティクスを操作し、アニメーションを設定することができます。
- 「選択」ツールに切り替えて、最後のシンボルをドラッグしてみると、連結されたすべてのシンボルが連動して動きます。これが、インバースキネマティクスです。
- 30フレームまでタイムラインを伸ばします。F5キーでタイムラインを挿入します。そして、インバースキネマティクスのチェーンをドラッグして、変形します。
図 2: キーフレームの挿入
- さらにフレームを挿入して、インバースキネマティクスの形状を変更します。
ノート: タイムラインの任意の位置にもどり、チェーンの形状を変更して、アニメーションを変更することもできます。 シンボルを連結している骨を動かすこともできます。
Flash Player上での再生方法の選択
このように作成したインバースキネマティクスのアニメーションは、あらかじめ設定したようにアニメーションさせるか、再生時のユーザの操作によりインタラクティブに動作させるかを選択することができます。
- 操作を取り消します。
- 「プロパティ」パネルでの設定を確認します。
- レイヤーを選択し、種類のリストを開きます。ここでは、実行時を選びます。
ノート: 種類のリストはオーサリング時と実行時を選ぶことができます。オーサリング時を選ぶと、あらかじめ設定したアニメーションに応じて動作が行われますが、実行時を選ぶとFlash Playerで再生されるときに動作が行われます。
図 3: 実行時を選択
- ムービーをプレビューしてみましょう。Flash Playerで、SWFが開きました。
ノート: マウスでドラッグしてみると、ドラッグに合わせて連動して動作します。
プロパティパネルの他の機能
プロパティパネルの他の機能も確認します。
- IKボーンを選択します。骨の動きを制約することができます。
図 4: IKボーンを選択
- 回転の値や、X変換の値、Y変換の値などに必要に応じて制約を設けることができます。
シェイプからボーンツールを設定
シェイプからボーンツールを設定することも可能です。
-
新しいFlashドキュメントを開きます。シンプルなシェイプを作成しましょう。横幅の広いシェイプです。
-
シェイプ上でクリックアンドドラッグして骨を通していきます。たとえば、何かの動物の尻尾のようなものを作成することをイメージしてください。
図 5: 四角形のシェイプに骨を通す
ノート: ボーンツールはムービークリップシンボルだけに設定できるものではありません。
- 25フレームを選択して、F5を押してフレームを増やします。フラッシュは自動的にアーマチュアレイヤーを作成します。
- 最終フレームに移動して、このシェイプを尻尾のようにカールさせます。さらにフレームを増やし、逆方向にカールさせましょう。
- ムービープレビューで確認します。
図 6: シェイプをドラッグして変形
ベクターのポイントの追加と削除
ベクターのポイントがインバースキネマティクスにどのように割り当てられるのかを確認します。
- 「楕円」ツールでシンプルな腕を作成します。
- 「ボーン」ツールを選択し、シェイプに骨を通していきます。
- 骨を通すとこれらのシェイプはフラッシュのコンテナに格納されます。またコンテナのバウンディングボックスも表示されます。さらに、骨を通していきます。
図 7: 楕円のシェイプに骨を通す
- 「選択」ツールを選びます。筋肉で腕を動かすようなアニメーションを設定するために、フレームを増やしましょう。
- ドラッグして動かします。大まかに、動きを設定します。
- 「ダイレクト選択」ツールでシェイプをクリックすると、ポイントを選択できるようになります。
- ポイントを選択して、削除できます。また、ポイントではない部分を選択して、ポイントを自由に追加することができます。
図 8: ベクターポイントの追加
バインドツール
バインドツールは、特定の骨にポイントを追加したり、削除したりすることができます。
-
ポイントをクリックすると、黄色くそのポイントに関連している骨がハイライトされます。
図 9: 「バインド」ツールを選択
- 複数の骨を選択するには、シフトキーを押しながらクリックします。ポイントへの骨の割り当てを解除する場合は、コントロールキーを押しながら解除したい骨をクリックします。このようにポイントに対して特定の骨を割り当てていくことで、インバースキネマティクスの構造をよりよく調整することができます。
その他のリンク
この記事は、Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported Licenseのもと提供しています。
著者について
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
