Flash Professional CS5でのスプリングツールの使用法

Adobe Flash Professional CS5で導入された新しいツールであるスプリングは、インバースキネマティクス（IK）アーマチュアに適用することにより、ばねのような動きのエフェクトを自動化します。スプリングは、IKアーマチュア全体にも、アーマチュアの個々のボーンにも適用できます。各ボーンのスプリング量を変化させることや、減衰を追加して減衰量を制御することも可能です。

この記事では、スプリングを様々なIKアーマチュアのサンプルに適用することで、手動で作成するには困難で時間がかかるアニメーションをすばやく作成する方法を説明します。

スプリングツールを使用するには、まずアーマチュアを作成する必要があります。スプリングは、ボーンツールで作成されたIKアーマチュア内部のボーンだけに適用できます。1つめの例では、IKアーマチュアでリンクされたシンボルの5個のインスタンスを使用します（図1を参照）。

注意Flashのボーンツールの詳細については、筆者の記事Character animation with the Bone tool in Flashを参照してください。

以下の手順で、単純なアーマチュアをアニメーション化します。

1. このチュートリアルのサンプルファイルをダウンロードして展開した後、spring_basic_1.flaをFlash Professional CS5で開きます。
2. 約100フレームを挿入してIKスパンを延長します。アーマチュアレイヤーのフレーム100をクリックし、F5キーを押してフレームを挿入します。
3. フレームインジケーターをフレーム10に配置します（図2を参照）。

4. 選択ツール（V）を使用して、アーマチュアの最後のボーンを選択し、真下にドラッグして、アーマチュアが元の位置に対して約90°の角度になるようにします（図3を参照）。

5. 次に、スプリングを使用します。ボーンの1つをダブルクリックして、アーマチュア全体を選択します。
6. Properties（プロパティ）パネルで、「Spring（スプリング）」という名前の新しいセクションを見つけます。ここでは、ホットテキストスライダーを使用して、各ボーンの強さを調整できます（図4を参照）。

7. ホットテキストスライダーを右にスライドさせるか、値を選択して100と入力することにより、スプリングの強さをデフォルトの0から100に変更します。アーマチュアのすべてのボーンが選択されているので、同じ強さの値がすべてのボーンに適用されます。
8. アニメーションを再生して、スプリングツールによってアーマチュアがどのように変わったかを確かめます（図5を参照）。

図5. スプリングツールの動作（マウスをボタンの上に置いて再生）

それでは、ボーンやアーマチュア全体に適用した場合の強さとは、実際にはどういう意味でしょうか。簡単に言うと、強さとはボーンの剛性の大きさです。ボーンの強さを大きくするほど、ボーンはより硬くなります。ボーンの強さを小さくするほど、ボーンはより柔軟になります。

アニメーションを再生して、スプリングの強さによる違いを確認してください（図6を参照）。目安としては次のようになります。

• 強さの値が0の場合、ボーンにスプリング効果は適用されません。
• 強さの値が1の場合、ボーンは最大の柔軟性を持ちます。
• 強さの値が100の場合、ボーンの柔軟性は低くなります。

図6. 様々なスプリングの強さによるアニメーションの変化（マウスをボタンの上に置いて再生）

より高度なスプリング効果を実現するには、アーマチュアの各ボーンに異なる強さの値を指定します。この例では、説明に適したグラフィックとしてコイルばねを選びました。コイルばねは、1つのシンボルの7個のインスタンスから構成されます（図7を参照）。

コイルばねを個別のシンボルインスタンスで構成することにより、IKアーマチュアを追加したときに最適な接合を実現できます。

1. Flash Professional CS5でspring_coils.flaを開きます。
2. 一番下のシンボルから出発して、ボーンツール（M）を選択し、シンボルインスタンスの右端から左端までボーンセグメントを適用します。
3. この手順を残りのボーンに対して繰り返し、一番上の最後のシンボルまで処理します（図8を参照）。

スプリングを使用するには、IKアーマチュアに何らかのアニメーションを追加する必要があります。

1. 前のスプリングの例と同様に、フレームインジケーターをフレーム10に配置します（別のフレームを選択することも可能ですが、筆者はフレーム10から出発して必要に応じて後で調整する方法を選びます）。
2. 選択ツールを使用して、アーマチュアを圧縮位置に配置します（図9を参照）。このための最も簡単な方法は、下から2つめのボーンを最初に動かし、1つずつ上にたどって最後のボーンに達することです。

3. ボーンの1つをダブルクリックして、すべてのボーンを選択します。
4. Properties（プロパティ）パネルを使用して、強さの値を100にします。
5. 図10の3つのアニメーションを再生して、すべてのボーンに最大のスプリング強さを指定したときの効果を確認します。

図10. ボーンの強さ設定が異なるコイルばね（マウスをボタンの上に置いて再生）

異なる効果を実現するには、各ボーンのスプリングの強さを個別に調整します。前述のように、スプリングの強さを小さくするとボーンが柔軟になり、大きくすると柔軟性が低くなります。

既にご存じかもしれませんが、ボーンツールはベクトルシェイプ内のアーマチュアをサポートします。したがって、これらのボーンにもスプリングを適用できます。これにより、以前のバージョンのFlashでは不可能または困難だった柔軟性を持つシェイプを作成できます。

1. spring_shape_1.flaを開きます。
2. 長方形（R）ツールで描画した単純なシェイプから出発します（図11を参照）。

3. 左から右に向かって、ボーン（M）ツールでIKアーマチュアを適用します（図12を参照）。親ボーンは、緑の丸がついている左端のボーンです。

4. 約100フレームを挿入してIKスパンを延長します。
5. フレームインジケーターをフレーム5に配置します。
6. 選択ツールを使用して、最後の子ボーン（右端）を下にドラッグし、アーマチュアを垂直にします（図13を参照）。

7. ボーンの1つをダブルクリックして、アーマチュア全体を選択します。
8. Properties（プロパティ）パネルで、「Spring（スプリング）」セクションを展開し、「Strength（強さ）」を100に調整します。Flash Professional CS5は、新しいスプリング強さをアーマチュアに適用します。
9. アニメーションを再生して効果を確認します（図14を参照）。

図14. スプリングを一様に適用したアーマチュアの例（マウスをボタンの上に置いて再生）

シェイプにIKアーマチュアを適用してスプリングを使用することで、無限に近いアニメーションの可能性が開けます。前の例では、アーマチュア全体のスプリングの強さを100に設定していました。もちろん、スプリングの強さをアーマチュア全体に使用しなくてもかまいません。各ボーンを個別に選択すれば、ボーンごとに必要な柔軟性に基づいて強さを変えることができます。単に各ボーンを選択し、スプリングの強さを個別に調整するだけです。筆者は通常、ルートボーン（アーマチュアの最初のボーン）のスプリングの柔軟性を小さくし、アーマチュアの最後の子ボーンに向かうにつれて柔軟性を大きくしていきます。例えば、最初のボーンに強さ100、2番目に80、3番目に50、4番目に40、5番目に30、6番目に10を割り当てます（図15を参照）。

アニメーションを再生して効果を確認します（図16を参照）。

図16. 各ボーンに個別にスプリングを適用したアーマチュアの例（マウスをボタンの上に置いて再生）

ここで紹介するヒントは非常に役に立ちます。アーマチュアを作成し、（必要ならスプリングツールを使用して）アニメーション化したら、タイムラインでIKスパンを選択して、アーマチュアをシンボルに変換します（図17を参照）。

これにより、ステージ上のアーマチュア全体を容易に変形できるようになります。すなわち、アーマチュア自体を乱さずに、拡大縮小、回転、傾斜、カラーエフェクトの適用などを簡単に実行できます。

ゾウの例（elephant.fla）では、鼻のアーマチュアをシンボルに変換することにより、キャラクターの顔画像を基準として簡単に配置でき、体の色と区別するためにわずかに色合いを変えることができます（図18を参照）。

アニメーションを再生して効果を確認します（図19を参照）。

図19. アニメーションで配置が容易になるようにシンボルに変換されたアーマチュア（マウスをボタンの上に置いて再生）

次のステップ

ここまでの説明を理解すれば、スプリングを使って独自の例を作成できるようになります。

スプリングツールを使用し、他のタイムラインアニメーションとともにその動作を制御する基本的な方法を示すために、筆者はいくつかの例を作成しました。これらは、Flash Professional CS5アニメーションを作成するためのヒントとして役立つはずです。例としては、ゼリーのような動き（図20を参照）、振れる腕（図21を参照）、同時に動作する4個のアニメーションアーマチュアの組（図22を参照）があります。

図20. spring_jello.flaの例（マウスをボタンの上に置いて再生）

図21. spring_arm.flaの例（マウスをボタンの上に置いて再生）

図22. spring_examples.flaの例（マウスをボタンの上に置いて再生）

アニメーションのスキルをさらに磨くには、Animation Learning Guide for Flashを参照してください。ここでは、Flashのすべてのアニメーションタイプの使用法と、タイムラインおよびモーションエディターを使用したモーショントゥイーンの新しい作成および編集方法について説明されています。

Flashの強力なグラフィックエフェクト機能の表示と表現力を制御して、プロジェクトの外観と操作性を向上させる方法については、Flashグラフィックエフェクト学習ガイドを参照してください。