《#15》 ドラッグで動かすムービー

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

前回までに、ボーンツールを使って、ちょっと複雑なアニメーションを完成しました。皆さん、だんだんとFlashが楽しくなってきたのではないでしょうか？

さて、今回は、ひとつのオブジェクト（シェイプ）内にボーンを設定して、ドラッグで変形できる尺取り虫くんのFlashムービーを作ります。

 

目次

• オブジェクトをシェイプにする
• ボーンツールを埋め込む
• ムービー上でオブジェクトが動かせるようにする

完成例です。画面上で緑色の胴体部をドラッグすると、ぐにゃりと曲げることができます。

ドラッグすると胴体が曲げられます。

オブジェクトをシェイプにする

サンプルファイルをダウンロードして、「caterpillar_01.fla」を開きます。この尺取り虫のキャラクターの胴体に、ボーンツールを設定していきます。
胴体をクリックして選択すると、オブジェクトに四角い囲みがついています。

 

「描画オブジェクト」というデータ形式になっています。そのままだとボーンツールは使えません。

これは「描画オブジェクト」を「シェイプ」の状態に変換します。オブジェクトを選択した状態で、メニューバーの［挿入―分解］を選びます。

 

修正メニューから分解を選択

すると、オブジェクトから囲みが無くなります。「シェイプ」に変更されました。ボーンが作れるのは、「シェイプ」と「シンボル」という種類のオブジェクトなのです。

 

胴体が「シェイプ」になりました。準備完了。

 

ボーンツールを埋め込む

体の部分にボーンを埋め込めこんでいきます。［ツール］パネルから、［ボーンツール］を選択します。［ツール］パネルが表示されていないときは、メニューバーの［ウィンドウーツール］を選んで表示できます。

 

［ツール］パネルから、［ボーンツール］を選択

胴体にボーンを追加していきましょう。胴体の上で、頭のほうからしっぽに向かって、細かくドラッグを繰り替えし、短いボーンをたくさん作成します。2つ目以降のボーンは、前のボーンの終点（継ぎ目）からドラッグし始めてつくります。

このボーンを作る作業は、サンプルファイル「caterpillar_02.fla」で、できあがっているので参考にしてください。

胴体に骨を通す感じでボーンツールでドラッグしていきます。

 

上の作業では、細い胴体の部分に細かくボーンを作るので、けっこう作業がしづらいかもしれません。［ツール］パネルで［ズーム］ツールを選択し、作業する画面を拡大しておくと、ドラッグしやすくなるでしょう。

また、拡大した画面の表示を移動するのは、［ツール］パネルの［ハンドツール］を使用しましょう。

拡大・縮小の［ズームツール］、画面移動の［ハンドツール］

ズームツールでドラッグすると、作業箇所を拡大できます。

細かい作業もしやすくなります。画面の移動は［ハンドツール］で行って下さい。

作業が終わったら、右上のプルダウンメニューから「100％」や「すべて表示」を選択して、ドキュメント全体を表示し直します。

画面表示を元に戻すには、右上のポップアップメニューを使います。

ボーンの追加後、［選択ツール］を使ってステージ上でドラッグすると、胴体が動きます。ボーンを操作する練習として、くねくねと前後に動く表現を作ってみましょう。

ここではまず、回転がスムーズになるように、「回転させない関節」を指定します。

前から3番目くらいのボーンを選択して赤く反転されたら、［プロパティ］パネルの［結合］の欄で、［有効］のチェックを外します。対象のボーンが赤く反転しない場合は、もう一回同じ場所でクリックすると、選択できるはずです。

これで、この関節は回転しなくなります。

 

次に、しっぽ部分を選択ツールで選択します。赤く反転したら、ボーンの右端のほう（回転軸ではないほう）をつかむようにして、ドラッグします。

回転させない関節以外はすべて連動するので、一気に形を作ってみましょう。

一番端のボーンをドラッグして、くねっとした形にしてみます。

 

ドラッグするとこんな形状になりました。みなさんもいろいろ試してみてください。

 

 

ムービー上で動かせるようにする

 

ボーンツールには、Flashを見るユーザーもボーンを動かせるようにする機能があるので使ってみましょう。［タイムライン］パネルで、ボーンが配置されている「アーマチュア」レイヤーを選択します。

 

［プロパティパネル］には、「IKアーマチュア」のプロパティが表示されます。［プロパティパネル］が表示されていないときは、メニューバーの［ウィンドウープロパティ］を選択してみてください。

プロパティパネルの［オプション］で、［種類］から［実行時］を選択します。

 

［種類］で［実行時］を選びます。

 

設定後、Ctrl＋Enterキー（command＋returnキー）を押して、ムービープレビューを表示します。すると最初に紹介したムービーのように、ドラッグして変形が可能になるはずです。この完成ファイルは、サンプルファイルの「caterpillar_03.fla」です。

いかがですか？ ボーンツールを使ったアニメーションのアイデア、みなさんも浮かんできましたか？

ではまた次回！

完成例です。画面上で緑色の胴体部をドラッグすると、ぐにゃりと曲げることができます。

ドラッグすると胴体が曲げられます。

オブジェクトをシェイプにする

サンプルファイルをダウンロードして、「caterpillar_01.fla」を開きます。この尺取り虫のキャラクターの胴体に、ボーンツールを設定していきます。
胴体をクリックして選択すると、オブジェクトに四角い囲みがついています。

 

「描画オブジェクト」というデータ形式になっています。そのままだとボーンツールは使えません。

これは「描画オブジェクト」を「シェイプ」の状態に変換します。オブジェクトを選択した状態で、メニューバーの［挿入―分解］を選びます。

 

修正メニューから分解を選択

すると、オブジェクトから囲みが無くなります。「シェイプ」に変更されました。ボーンが作れるのは、「シェイプ」と「シンボル」という種類のオブジェクトなのです。

 

胴体が「シェイプ」になりました。準備完了。

 

ボーンツールを埋め込む

体の部分にボーンを埋め込めこんでいきます。［ツール］パネルから、［ボーンツール］を選択します。［ツール］パネルが表示されていないときは、メニューバーの［ウィンドウーツール］を選んで表示できます。

 

［ツール］パネルから、［ボーンツール］を選択

胴体にボーンを追加していきましょう。胴体の上で、頭のほうからしっぽに向かって、細かくドラッグを繰り替えし、短いボーンをたくさん作成します。2つ目以降のボーンは、前のボーンの終点（継ぎ目）からドラッグし始めてつくります。

このボーンを作る作業は、サンプルファイル「caterpillar_02.fla」で、できあがっているので参考にしてください。

胴体に骨を通す感じでボーンツールでドラッグしていきます。

 

上の作業では、細い胴体の部分に細かくボーンを作るので、けっこう作業がしづらいかもしれません。［ツール］パネルで［ズーム］ツールを選択し、作業する画面を拡大しておくと、ドラッグしやすくなるでしょう。

また、拡大した画面の表示を移動するのは、［ツール］パネルの［ハンドツール］を使用しましょう。

拡大・縮小の［ズームツール］、画面移動の［ハンドツール］

ズームツールでドラッグすると、作業箇所を拡大できます。

細かい作業もしやすくなります。画面の移動は［ハンドツール］で行って下さい。

作業が終わったら、右上のプルダウンメニューから「100％」や「すべて表示」を選択して、ドキュメント全体を表示し直します。

画面表示を元に戻すには、右上のポップアップメニューを使います。

ボーンの追加後、［選択ツール］を使ってステージ上でドラッグすると、胴体が動きます。ボーンを操作する練習として、くねくねと前後に動く表現を作ってみましょう。

ここではまず、回転がスムーズになるように、「回転させない関節」を指定します。

前から3番目くらいのボーンを選択して赤く反転されたら、［プロパティ］パネルの［結合］の欄で、［有効］のチェックを外します。対象のボーンが赤く反転しない場合は、もう一回同じ場所でクリックすると、選択できるはずです。

これで、この関節は回転しなくなります。

 

次に、しっぽ部分を選択ツールで選択します。赤く反転したら、ボーンの右端のほう（回転軸ではないほう）をつかむようにして、ドラッグします。

回転させない関節以外はすべて連動するので、一気に形を作ってみましょう。

一番端のボーンをドラッグして、くねっとした形にしてみます。

 

ドラッグするとこんな形状になりました。みなさんもいろいろ試してみてください。

 

 

ムービー上で動かせるようにする

 

ボーンツールには、Flashを見るユーザーもボーンを動かせるようにする機能があるので使ってみましょう。［タイムライン］パネルで、ボーンが配置されている「アーマチュア」レイヤーを選択します。

 

［プロパティパネル］には、「IKアーマチュア」のプロパティが表示されます。［プロパティパネル］が表示されていないときは、メニューバーの［ウィンドウープロパティ］を選択してみてください。

プロパティパネルの［オプション］で、［種類］から［実行時］を選択します。

 

［種類］で［実行時］を選びます。

 

設定後、Ctrl＋Enterキー（command＋returnキー）を押して、ムービープレビューを表示します。すると最初に紹介したムービーのように、ドラッグして変形が可能になるはずです。この完成ファイルは、サンプルファイルの「caterpillar_03.fla」です。

いかがですか？ ボーンツールを使ったアニメーションのアイデア、みなさんも浮かんできましたか？

ではまた次回！