トゥイーン

Flashには、スムーズなアニメーションを作成するためのトゥイーン機能があります。

トゥイーンには、動きを作るモーショントゥイーンと、形を変形するシェイプトゥイーンとがあります。

また、FlashCS4以前で使われていた「クラシックトゥイーン」を作成することもできます。

モーショントゥイーン

モーショントゥイーンは動きを作るトゥイーンです。

モーショントゥイーンは、インスタンスまたはテキストオブジェクトに設定します。インスタンスまたはテキストオブジェクトでないものにモーショントゥイーンを設定しようとすると、シンボル化するよう促されます。

また、モーショントゥイーンを設定するものは、同じフレーム・レイヤー内に他のオブジェクトが存在していてはいけません。別のオブジェクトが存在する場合には、新規レイヤーが作成され、モーショントゥイーンをつけるオブジェクトが新規レイヤーに移動されます。

モーショントゥイーンの設定

【準備】モーショントゥイーンを設定するインスタンスまたはテキストオブジェクトのみからなるレイヤーを作成し、必要な長さだけフレームを延ばします。

  1. モーショントゥイーンを設定したいインスタンスまたはテキストオブジェクトをクリックして選択します。オブジェクトの含まれるフレームでも構いません。
  2. 「挿入」メニューから「モーショントゥイーン」を選択します。オブジェクトまたはフレームを右クリックして「モーショントゥイーンの作成」でも構いません。モーショントゥイーンの設定されているフレームは青く表示され、フレームの終了記号「□」が消えます。
  3. 位置・大きさ・角度を変更したいフレームを選択し、そのフレームのオブジェクトの位置・大きさ・角度などを変更します。このとき、フレームに「◆」の記号が表示されます。このフレームを「プロパティキーフレーム」と呼びます。また、移動した際には、移動の軌跡を表す緑の線(モーションパス)がステージ上に表示されます。
  4. 必要な分だけ、前手順を繰り返します。

例 ステージ上の「人」を動かす

  1. 「人」インスタンスのみのレイヤーを作成し、適当な長さにフレームを追加します。
  2. 「人」インスタンスを右クリックし、「モーショントゥイーンを作成」を選択します。
  3. 任意のフレームを選択し、選択ツールまたは自由変形ツールで「人」インスタンスの位置・大きさ・角度を変更します。
  4. 前手順を必要なだけ繰り返します。

例 「人」シンボルの手足を動かす

  1. 「人」シンボルを編集します。
  2. 全てのレイヤーの20フレーム目を選択し、フレームを追加します。
  3. 「右手」フレームの「手足」インスタンスを右クリックし、「モーショントゥイーンを作成」を選択します。
  4. 「右手」レイヤーの10フレーム目を選択し、自由変形ツールで「手足」インスタンスの位置を回転して変更します。同様にして、20フレーム目を元の位置に変更します。後ろにあるパーツを動かす際には、手前のパーツをロックしたり、非表示にすると作業がしやすいです。
  5. 同様にして、「右足」、「左手」、「左足」を設定します。

モーショントゥイーン

モーショントゥイーンパスの変形

オブジェクトを移動するモーショントゥイーンを作成するとあらわれるモーションパスを変形することができます。

  1. モーショントゥイーンを設定した途中のフレームを選択します。
  2. モーショントゥイーンを設定したオブジェクトを選択し、モーションパスを表示します。

    モーションパス1

  3. オブジェクトをドラッグすると、モーションパスが折られます。モーションパスをドラッグするとモーションパスが曲線に曲がります。

    モーションパス2

    モーションパス3

モーショントゥイーンのプロパティ

モーショントゥイーンを作成するとあらわれるモーションパスをクリックし、プロパティインスペクタで下記のプロパティの変更ができます。

  • 「イージング」の値を変更して、動きに加速(イージング-100)・減速(イージング100)をつけます。
  • 「回転」欄で回転方向と回転回数を指定して、オブジェクトを回転させます。「パスに沿って回転」を指定した場合には、パスの角度に合わせて回転します。

例 弾むボール

上下にモーショントゥイーンで移動するボールを作ります。そのままでは重力の影響が見られないのでどこか不自然です。そこで、上昇する時には減速(イージング100)、下降するときには加速(イージング-100)を指定するとより自然に見えます。

シェイプトゥイーン

シェイプトゥイーンは、形を変形するトゥイーンです。開始フレームと終了フレームの2つのキーフレームに描かれた図形を変形させるアニメーションを作ります。

シェイプトゥイーンを設定する際には、設定するレイヤーの2つのキーフレームは、グループ化やシンボル化されていない線と塗りで構成されている必要があります。インスタンスを変形したい場合には、分解して線と塗りにしておく必要があります。

シェイプトゥイーンの設定

【準備】あるレイヤーにキーフレームを2つ作成し、それぞれに線と塗で図形を描画します。

  1. シェイプトゥイーンを設定したいフレーム・レイヤーをクリックして選択します。
  2. 「挿入」メニューから「シェイプトゥイーン」を選択します。

正しく設定できた場合には、キーフレーム間が緑色で表示され、矢印の記号が入ります。破線が入った場合には、正しく設定ができていません。キーフレームにインスタンスやグループ化されたオブジェクトが入っていないことを確認してください。

例 ドーナツ型がAに変化

  1. 最初のキーフレームにドーナツを描画します。
  2. 数フレーム先にキーフレームを挿入します。挿入したキーフレームに、テキストで「A」を作成し、分解して線と塗りにします。
  3. 最初のキーフレームを選択し、「挿入」メニューから「シェイプトゥイーン」を選択します。

Aはテキストツールで作成し、分解して線と塗りにしてあります。

トゥイーンの削除

  1. トゥイーンを削除したいフレーム・レイヤーをクリックして選択します。
  2. 「挿入」メニューから「トゥイーンの削除」を選択します。

練習課題

以下のトゥイーンを持つアニメーションを作成しなさい。

  • ステージ上のインスタンスのモーショントゥイーン
  • シェイプトゥイーン
  • シンボル内のトゥイーン