注意:

Animate CC(旧 Flash Professional CC)のほとんどの作業と同じように、アニメーションは ActionScript を使用しなくても作成できます。ただし、アニメーションの作成に ActionScript を使用することもできます。

アニメーションの種類

Animate CC では、いくつかの方法でアニメーションと特殊効果を作成できます。どの方法でも、それぞれ違った魅力のアニメーションコンテンツを作成できます。

Animate では、次のタイプのアニメーションを使用できます。

モーショントゥイーン

モーショントゥイーンでは、位置やアルファ透明度といったオブジェクトのプロパティを 2 つのフレームでそれぞれ異なる値に設定します。すると、その間にあるフレームのオブジェクトのプロパティ値が Animate によって自動的に補間されます。モーショントゥイーンは、オブジェクトの連続したモーションや変形から構成されるアニメーションでの使用に適しています。モーショントゥイーンは、デフォルトでは 1 つのオブジェクトとして選択できる連続したフレームのスパンとしてタイムラインに表示されます。モーショントゥイーンは強力であり、簡単に作成できます。

クラシックトゥイーン

クラシックトゥイーンはモーショントゥイーンに似ていますが、作成方法が複雑になります。クラシックトゥイーンの場合は、スパンベースのトゥイーンでは不可能な特定のアニメーション化された効果を使用できます。

インバースキネマティックポーズ(Animate CC では非推奨)

インバースキネマティックポーズを使用すると、シェイプオブジェクトを伸縮および変形し、シンボルインスタンスのグループをリンクして、自然な方法でそれらを一緒に動かすことができます。シンボルのシェイプまたはグループにボーンを追加したら、別のキーフレーム内のボーンまたはシンボルの位置を変更できます。Animate によってフレーム間の位置が補間されます。

シェイプトゥイーン

シェイプトゥイーンでは、タイムラインの特定のフレームでシェイプを描画し、別の特定のフレームでそのシェイプを変更するか、または別のシェイプを描画します。Animate は、その間のフレームの中間シェイプを補間し、あるシェイプが別のシェイプに変形するアニメーションを作成します。

フレームアニメーション

このアニメーション手法により、タイムライン内の各フレームに異なるアートを指定できます。この手法を使用して、高速で連続して再生されるフィルムのフレームのような効果を生み出します。このタイプのアニメーションは、各フレームのグラフィックエレメントを 1 つずつ変える必要がある複雑なアニメーションでの使用に適しています。

フレームレートについて

フレームレートはアニメーションが再生されるスピードであり、1 秒当たりのフレーム数(fps)で測定します。フレームレートが小さすぎると、アニメーションの動きがぎこちなくなり、逆に大きすぎると、速すぎて細部の描写がぼやけてしまいます。フレームレートは 24 fps が新規の Animate ドキュメントのデフォルトであり、一般に Web 上ではこのレートで最良の結果が得られます。映画の標準レートも 24 fps です。

アニメーションの複雑さと、再生するコンピューターの処理速度は、アニメーションの滑らかさに影響を与えます。最適なフレームレートを決めるには、各種のコンピューターでアニメーションをテスト再生します。

Animate ドキュメント全体のフレームレートは 1 つだけ指定するので、このレートは、アニメーションの作成を開始する前に設定します。

タイムラインでのアニメーションの確認

Animate では、コンテンツを含む各フレームに対して個別のインジケーターが表示されるので、トゥイーンアニメーションまたはフレームアニメーションのいずれであるかを確認できます。

タイムラインには、次のいずれかのフレームコンテンツインジケーターが表示されます。

  • 青の背景色を持つフレームスパンは、モーショントゥイーンです。 スパンの最初のフレームの黒い点は、トゥイーンスパン内にターゲットオブジェクトが割り当てられていることを示します。黒い菱形は最後のフレームと他のプロパティキーフレームを示します。プロパティキーフレームは、明示的に定義されたプロパティ変更を含むフレームです。表示するプロパティキーフレームのタイプを選択するには、モーショントゥイーンスパンを右クリック(Windows)または Command キーを押しながらクリック(Mac OS)して、コンテキストメニューでキーフレームを表示/タイプを選択します。デフォルトでは、全タイプのプロパティキーフレームが表示されます。スパン内のその他すべてのフレームには、ターゲットオブジェクトのトゥイーンプロパティに対する補間値が含まれます。

     

     

  • 最初のフレームの白抜きの点は、モーショントゥイーンのターゲットオブジェクトが削除されたことを示します。トゥイーンスパンには、まだそのプロパティキーフレームが含まれているので、新しくターゲットオブジェクトを割り当てることができます。

     

     

  • 緑の背景色を持つフレームスパンは、インバースキネマティック(IK)ポーズレイヤーを示します。 ポーズレイヤーには IK アーマチュアとポーズが含まれます。各ポーズはタイムラインに黒い菱形として表示されます。Animate はポーズ間にあるフレームのアーマチュアの位置を補間します。

     

     

  • 黒い矢印および青い背景とともに開始キーフレームに表示される黒い円は、クラシックトゥイーンを示しています。

     

     

  • 断続線は、最後のキーフレームが見つからない場合など、クラシックトゥイーンが壊れているか不完全であることを示します。

     

     

  • 黒い矢印および明るい緑の背景とともに開始キーフレームに表示される黒い円は、「シェイプトゥイーン」を示しています。

     

     

  • 黒い円は、単一のキーフレームを示します。単一のキーフレームに続く明るいグレーのフレームには、変更のない同じコンテンツが含まれます。それらのフレームには黒い垂直な線があり、スパンの最終フレームに白抜きの長方形があります。

     

     

  • 小文字の a は、アクションパネルでフレームにフレームアクションが設定されていることを示します。

     

     

  • 赤いフラグは、フレームにラベルが含まれていることを示します。

     

     

  • 緑色の 2 つのスラッシュは、フレームにコメントが含まれていることを示します。

     

     

  • 金の錨は、フレームが名前付きアンカーであることを示します。

     

トゥイーンアニメーションのレイヤーについて

Animate ドキュメントの各シーンには、タイムラインレイヤーを必要な数だけ使用できます。レイヤーとレイヤーフォルダーを使用して、アニメーションシーケンスのコンテンツおよび個々のアニメーション化したオブジェクトを整理します。レイヤーおよびフォルダー内のコンテンツを整理することにより、重複したときの消去、連結、セグメント化を防ぐことができます。複数のシンボルまたはテキストフィールドのトゥイーン動作を含むアニメーションを同時に作成する場合は、各オブジェクトを個別のレイヤー上に配置します。1 つのレイヤーをバックグラウンドレイヤーとして使用して静止のアートワークを含めたり、追加レイヤーを使用してアニメーション化したオブジェクトを個別に含めることもできます。

Animate では、モーショントゥイーンを作成する際に、トゥイーンするために選択したオブジェクトを含むレイヤーがトゥイーンレイヤーに変換されます。トゥイーンレイヤーには、タイムラインのレイヤー名の横にトゥイーンアイコンが表示されます。

トゥイーンオブジェクトと同じレイヤーにその他のオブジェクトが含まれる場合、Animate は必要に応じて元のレイヤーの上または下に新しいレイヤーを追加します。元のレイヤーでトゥイーンオブジェクトの下にあったオブジェクトは、元のレイヤーの下に追加された新しいレイヤーに移動します。元のレイヤーでトゥイーンオブジェクトの上にあったオブジェクトは、元のレイヤーの上に追加された新しいレイヤーに移動します。Animate は、タイムライン内の既存のレイヤー間にそれらの新しいレイヤーを挿入します。これにより、Animate ではステージ上のすべてのグラフィックオブジェクトの元の重ね順が保持されます。

トゥイーンレイヤーには、トゥイーンスパン(隣接する、トゥイーンを含むフレームグループ)、静止フレーム、空白キーフレームまたは空のフレームのみを含めることができます。各トゥイーンスパンには、ターゲットオブジェクトとターゲットオブジェクトのオプションのモーションパスを 1 つずつ含めることができます。トゥイーンレイヤー上では描画できないため、追加のトゥイーンや静止フレームは、他のレイヤー上に作成してからトゥイーンレイヤーにドラッグする必要があります。フレームスクリプトをトゥイーンレイヤーに配置するには、別のレイヤー上で作成して、トゥイーンレイヤーにドラッグします。フレームスクリプトを配置できるのは、モーショントゥイーンスパン自体の外側のフレームのみです。一般に、ActionScript のみを含む別のレイヤーにすべてのフレームスクリプトを配置するのが最善の方法です。

ドキュメントに複数のレイヤーがある場合、そのうちの 1 つまたは複数のレイヤー上のオブジェクトをトラッキングしたり、編集したりするのが難しいことがあります。そのような場合は、レイヤーごとにコンテンツを編集します。作業していないレイヤーを非表示にしたりロックしたりするには、タイムラインのレイヤー名の横にある目のアイコンまたはカギのアイコンをクリックします。レイヤーフォルダーを使用すると、レイヤーを管理しやすいグループに分類することができます。

トゥイーンアニメーション用レイヤーへのオブジェクトの配分

モーショントゥイーンをオブジェクトに適用すると、Animate により自動的にオブジェクトがそのトゥイーンレイヤーに移動されます。ただし、別のレイヤーにオブジェクトを自分で配分することもできます。例えば、コンテンツを整理するときに、オブジェクトを自分で配分することができます。手作業の配分は、アニメーションをオブジェクトに適用しながら、それらのレイヤー間の動きを正確に制御するためにも役立ちます。

「レイヤーに配分」コマンド(修正/タイムライン/レイヤーに配分)を使用すると、Animate は選択されたそれぞれのオブジェクトを個別の新しいレイヤーに配分します。選択していないオブジェクトは、他のフレーム内のオブジェクトも含め、すべて元のレイヤーに保持されます。

グラフィックオブジェクト、インスタンス、ビットマップ、ビデオクリップ、および分解したテキストブロックなど、ステージ上のあらゆるエレメントに「レイヤーに配分」コマンドを適用できます。

「レイヤーに配分」コマンドを使用して作成した新しいレイヤーについて

「レイヤーに配分」で作成された新規レイヤーは、各レイヤーに置かれているエレメントの名前に従って命名されます。

  • ライブラリアセット(シンボル、ビットマップ、ビデオクリップなど)が含まれている新規レイヤーの名前は、そのアセット名と同じになります。

  • 命名されたインスタンスが含まれている新規レイヤーには、そのインスタンスと同じ名前が付けられます。

  • 分解したテキストブロックの文字が含まれている新規レイヤーには、その文字と同じ名前が付けられます。

  • 新規レイヤー内のグラフィックオブジェクトに名前がない場合、そのレイヤーの名前は、1 や 2 などになります。

    Animate では、新規レイヤーは選択したレイヤーの下に挿入されます。新規レイヤーは、選択したエレメントが当初に作成された順番どおりに、上から下に向かって並べられます。分解したテキストでは、レイヤーは分解前の文字の順番に従って、左から右、右から左、または上から下に向かって並べられます。例えば、FLASH というテキストを分解し、レイヤーに配分するとします。F、L、A、S および H という名前の新しいレイヤーが、F を先頭に上から下に向かって並べられます。これらのレイヤーは、最初にテキストが入っていたレイヤーのすぐ下に表示されます。

レイヤーへのオブジェクトの配分

  1. 個別のレイヤーに配分するオブジェクトを選択します。オブジェクトは、単一のレイヤーに置くことも、複数のレイヤーに置くこともできます。複数のレイヤーに置く場合、レイヤーが連続していなくてもかまいません。
  2. 次のいずれかの操作を行います。
    • 修正/タイムライン/レイヤーに配分を選択します。
    • 選択したオブジェクトを右クリック(Windows)、または Control キーを押しながらクリック(Mac OS)して、「レイヤーに配分」を選択します。

オブジェクトをキーフレームに配分してトゥイーンアニメーションを作成する

Animate CC の新機能

Animate では、それぞれのオブジェクトを個別のキーフレームに自動的に配分できます。オブジェクトの配分は、ステージ上のコンテンツを整理するときに選択できます。この操作を手動で行うと、手間と時間がかかります。この配分機能は、オブジェクトを個別のキーフレームに配置してトゥイーンアニメーションを作成する場合に特に役立ちます。各キーフレームには、様々なオブジェクトやオブジェクトの状態を割り当てることができます。その結果、これらのキーフレーム間で再生ヘッドをスクラブすると、トゥイーンアニメーションのエフェクトが示されます。

「キーフレームに配分」コマンドを使用すると、Animate では、選択した各オブジェクトが新しい個別のキーフレームに配分されます。選択していないオブジェクトは、他のフレーム内のオブジェクトも含め、すべて元のレイヤーに保持されます。

グラフィックオブジェクト、インスタンス、ビットマップ、ビデオクリップ、およびテキストブロックなど、ステージ上のあらゆるエレメントに「キーフレームに配分」コマンドを適用できます。

「キーフレームに配分」コマンドを使用して作成した新しいキーフレームについて

  • 「キーフレームに配分」の操作によって作成された新しいキーフレームは、オブジェクトを選択した順番に従って並べられます。
  • レイヤー上のいずれかのオブジェクトが選択されていない状態で「キーフレームに配分」の操作を実行すると、そのオブジェクトが原因となり、元のフレームは影響を受けません。配分用に選択されたオブジェクトはキーフレームに割り当てられ、そのフレームは、元のコンテンツが配置されていた最後のフレームの直後から始まります。例えば、オブジェクト 1オブジェクト 2 が 50 個のフレームを含んでいるレイヤー上にあるとします。オブジェクト 1 を配分用に選択した場合、そのオブジェクトは 51 番目のキーフレームに配置されます。

キーフレームへのオブジェクトの配分

  1. 個別のレイヤーに配分するオブジェクトを選択します。オブジェクトは、単一のレイヤーに置くことも、複数のレイヤーに置くこともできます。複数のレイヤーに置く場合、レイヤーが連続していなくてもかまいません。

  2. 選択したオブジェクトを右クリック(Windows)、または Control キーを押しながらクリック(Mac OS)して、「キーフレームに配分」を選択します。

その他のリソース

Animate でのアニメーションの作成については、次の記事が参考になります。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー