2008年01月18日

シンボルの入れ子

単純な動きは、ステージに矩形を描き、それをモーショントゥイーンで動かせばよかった。しかし、これでは表現に限界がある。複雑な動きは「シンボルを入れ子構造にする」必要がある。サンプルのような動きを実現するには、以下の通り。

<1:まずは単に輪が回転するアニメーションを作る>
  1. Illustratorデータをステージに読み込む(グループ化された状態)
  2. 読み込んだ図形を選択して、シンボル化(グラフィック)
  3. グラフィックシンボル化された図形を選択して、さらにシンボル化(ムービークリップ)
  4. ムービークリップ化されたシンボルをWクリックする(シンボルの編集画面に移動)
  5. 24フレーム目のところに時間確保とキーフレーム挿入(F6)
  6. 24フレームに挿入したキーフレームを25フレーム目にドラッグして移動
  7. 1フレーム目を選択してモーショントゥイーンを作成
  8. 1フレーム目を選択して、プロパティウインドウの「回転」を「時計回り」に設定
  9. 24フレーム目を選択してキーフレームを挿入(F6)
  10. 25フレーム目を選択して、フレーム削除(Shift+F5)
  11. 1フレーム目を選択して、プロパティウインドウの回転回数を「0」にする
上記までを実行すると、こんなものができる。
さて、なぜ、25フレームで一度作って、1フレーム切る作業をわざわざやっているかというと、単に、25フレーム設定で回転数1にすると、ループした時に1フレーム目と25フレーム目が同じ動きのため、一瞬動きが止まったように見えてしまう。スムーズな動きに見せるためには、この重複を解消しなければならない。しかし、24フレーム目の輪の傾きを自分で設定するのは困難。そのため、一度、25フレームでモーショントゥイーンを実行し、24フレームの傾きを自動的に作ったところにキーフレームを挿入して動きを固定し、不要な25フレームを削除している。

<2:回転するインスタンスを上下に弾ませるアニメーションを作る>

  1. シーン1に戻り、ムービークリップのインスタンスを画面上のほうに配置する
  2. インスタンスの中心点を下中央に移動しておく
  3. 24フレーム目にキーフレーム挿入(F6)
  4. 11フレーム目にもキーフレーム挿入(F6)
  5. インスタンスを下に移動する
  6. 12、13フレーム目にもキーフレーム挿入(F6)
  7. 1フレーム目を選択し、モーショントゥイーンを作成する
  8. 1フレーム目を選択し、イージングを-100(イン)にする
  9. 13フレーム目を選択し、モーショントゥイーンを作成する
  10. 13フレーム目を選択し、イージングを100(アウト)にする
  11. 12フレーム目のインスタンスを自由変形ツールで扁平をかける
上記までを実行すると、輪が回転しながら、上下するアニメーションができる。こんな感じ
ちなみに、12フレーム目のインスタンスに扁平をかけるのは、弾んむような表現をするためのもの。

<2:弾む輪を左右に移動させる>

  1. 2で作ったアニメーションをシンボル化する
    1. シーン1の1〜24フレーム目を選択(Shift+始点+終点)
    2. 編集→タイムライン→フレームをコピー
    3. 空のシンボルを作る(挿入→新規シンボル:グラフィック→シンボル編集画面へ移動
    4. 新規シンボルの1フレーム目を選択し、編集→タイムライン→フレームをペースト
  2. 中心点を中央に移動する
    オニオンスキン
    1. 1フレーム目を選択し、複数フレーム編集ボタンをクリック
    2. フレームの上にオニオンスキンマーカーが表示されるので、24フレーム目まで右にドラッグして対象範囲を伸ばす
    3. 【・】アイコンをクリックして、オニオンスキンマーカーを固定する
    4. +の中心点が中央下にある基準点と一致するよう移動する(3つの画像ごと移動しないと壊れる。下に移動した際の輪が地面に接触するように)
    5. 複数フレーム編集ボタンをクリックしてを解除する
  3. シーン1に戻り、2〜24フレームを削除(Shift+F5)
  4. 1フレーム目を選択し、プロパティウインドウでトゥイーンを「モーション」から「なし」に変更
  5. ステージに残ったインスタンスを削除し、1で作ったシンボルのインスタンスをステージの左側枠外に配置する。この際、中心点が地面に接触するようにインスタンスを配置(中心点はインスタンスからはみ出て下にあるので注意)
  6. 24フレーム目にキーフレームを挿入
  7. 1フレーム目を選択し、モーショントゥイーンを作成
  8. 24フレーム目を選択し、インスタンスをステージの右側枠外に配置
  9. 1フレーム目のイージングを0にする→完成
これでようやく、一番最初に示したサンプルの動き(回転した輪が左右に弾むアニメーション)が完成する。


ラベル:入れ子 重要
posted by tama at 04:54| Comment(0) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。