Animate でのクラシックトゥイーンアニメーションの操作

  1. Adobe Animate ユーザーガイド
  2. Animate の概要
    1. Animate の新機能
    2. ビジュアル用語集
    3. Animate の必要システム構成
    4. Animate キーボードショートカット
    5. Animate での複数のファイルタイプの取り扱い
  3. アニメーション
    1. Animate のアニメーションの基本
    2. Animate でフレームとキーフレームを使用する方法
    3. Animate でのフレームアニメーション
    4. Animate でのクラシックトゥイーンアニメーションの操作
    5. ブラシツール
    6. モーションガイド
    7. モーショントゥイーンと ActionScript 3.0
    8. モーショントゥイーンアニメーションについて
    9. モーショントゥイーンアニメーション
    10. モーショントゥイーンアニメーションの作成
    11. プロパティキーフレームの使用
    12. トゥイーンを使用した位置のアニメーション化
    13. モーションエディターを使用したモーショントゥイーンの編集
    14. トゥイーンアニメーションのモーションパスの編集
    15. モーショントゥイーンの操作
    16. カスタムイージングの追加
    17. モーションプリセットの作成と適用
    18. アニメーションのトゥイーンスパンの設定
    19. XML ファイルとして保存したモーショントゥイーンの操作
    20. モーショントゥイーンとクラシックトゥイーン
    21. シェイプトゥイーン
    22. Animate のボーンツールアニメーションの使用
    23. Animate でのキャラクターリグの操作
    24. Adobe Animate でのマスクレイヤーの使用
    25. Animate でのシーンの操作
  4. インタラクティブ機能
    1. Animate でのボタンの作成
    2. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. Animate のコードスニペットを使用したインタラクティブ機能の追加
    5. カスタム HTML5 コンポーネントの作成
    6. HTML5 Canvas でのコンポーネントの使用
    7. カスタムコンポーネントの作成例
    8. カスタムコンポーネントのコードスニペット
    9. ベストプラクティス - Animate を使用した広告
    10. バーチャルリアリティの作成と公開
  5. ワークスペースとワークフロー
    1. ペイントブラシの作成と管理
    2. HTML5 Canvas ドキュメントでの Google フォントの使用
    3. Creative Cloud ライブラリと Adobe Animate の使用
    4. Animate のステージとツールパネルの使用
    5. Animate ワークフローとワークスペース
    6. HTML5 Canvas ドキュメントでの Web フォントの使用
    7. タイムラインと ActionScript
    8. 複数のタイムラインの操作
    9. 環境設定
    10. Animate オーサリングパネルの使用
    11. Animate でのタイムラインレイヤーの作成
    12. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    13. オブジェクトの移動とコピー
    14. テンプレート
    15. Animate での検索と置換
    16. 取り消し、やり直し、ヒストリーパネル
    17. キーボードショートカット
    18. Animate でのタイムラインの使用
    19. HTML 拡張機能の作成
    20. 画像とアニメーション GIF の最適化オプション
    21. 画像および GIF の書き出し設定
    22. Animate のアセットパネル
  6. マルチメディアとビデオ
    1. Animate のグラフィックオブイジェクトの変形と組み合わせ
    2. Animate でのシンボルインスタンスの作成と操作
    3. 画像トレース
    4. Adobe Animate でのサウンドの使用方法
    5. SVG ファイルの書き出し
    6. Animate で使用するビデオファイルの作成
    7. Animate にビデオを追加する方法
    8. ビデオのキューポイントの操作
    9. Animate でのオブジェクトの描画および作成
    10. 線とシェイプの変更
    11. Animate CC での線、塗り、グラデーション
    12. Adobe Premiere Pro と After Effects の使用
    13. Animate CC のカラーパネル
    14. Animate で Flash CS6 ファイルを開く
    15. Animate でのクラシックテキストの操作
    16. Animate へのアートワークの挿入
    17. Animate に読み込まれたビットマップ
    18. 3D グラフィック
    19. Animate でのシンボルの操作
    20. Adobe Animate での線とシェイプの描画
    21. Animate でのライブラリの使用
    22. サウンドの書き出し
    23. Animate CC でのオブジェクトの選択
    24. Animate での Illustrator AI ファイルの操作
    25. スプレーブラシツールでのパターンの適用
    26. ブレンドモードの適用
    27. オブジェクトの配置
    28. コマンドメニューを使用したタスクの自動化
    29. 多言語テキスト
    30. Animate でのカメラの使用
    31. Adobe Scout での Animate の使用
    32. Fireworks ファイルの作業
    33. グラフィックフィルター
    34. サウンドと ActionScript
    35. 描画の環境設定
    36. ペンツールを使用した描画
  7. プラットフォーム
    1. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    2. カスタムプラットフォームサポート
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. WebGL ドキュメントの作成とパブリッシュ
    5. AIR for iOS 用アプリケーションのパッケージ化
    6. AIR for Android アプリケーションのパブリッシュ
    7. デスクトップ用 Adobe AIR のパブリッシュ
    8. ActionScript パブリッシュ設定
    9. ベストプラクティス - アプリケーションでの ActionScript の整理
    10. Animate での ActionScript の使用
    11. ベストプラクティス - アクセシビリティガイドライン
    12. Animate ワークスペースのアクセシビリティ
    13. スクリプトの記述と管理
    14. カスタムプラットフォームサポートの有効化
    15. カスタムプラットフォームサポートの概要
    16. アクセシビリティコンテンツの作成
    17. カスタムプラットフォームサポートプラグインの操作
    18. ActionScript 3.0 のデバッグ
    19. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. QuickTime ビデオファイルの書き出し
    9. ActionScript を使用した外部ビデオ再生の制御
    10. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    11. ベストプラクティス - ビデオ規則
    12. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    13. ベストプラクティス - FLA ファイルの構造化
    14. FLA ファイルを Animate 向けに最適化するベストプラクティス
    15. ActionScript パブリッシュ設定
    16. Animate のパブリッシュ設定の指定
    17. プロジェクターファイルの書き出し
    18. 画像とアニメーション GIF の書き出し
    19. HTML パブリッシュ用テンプレート
    20. Adobe Premiere Pro と After Effects の使用
    21. アニメーションのクイック共有とパブリッシュ

クラシックトゥイーンは、Animate でアニメーションを作成する従来の方法です。このトゥイーンは、新しい方法のモーショントゥイーンと似ていますが、モーショントゥイーンよりも作成方法が複雑で、柔軟性に劣ります。ただし、クラシックトゥイーンでは、モーショントゥイーンではできないようなアニメーションの制御をおこなうことができます。大部分のユーザーは新しいモーショントゥイーンの利用を選択しますが、クラシックトゥイーンの使用を必要とするユーザーもいます。両者の違いについて詳しくは、モーショントゥイーンとクラシックトゥイーンの違いを参照してください。

始める前に:

クラシックトゥイーンの操作を開始する前に、以下の点に留意してください。

  • クラシックトゥイーンは、Animate でトゥイーンアニメーションを作成する従来の方法です。新しくより簡単な方法として、モーショントゥイーンを使用する方法があります。モーショントゥイーンアニメーションを参照してください。

  • クラシックトゥイーンでは 3D プロパティをトゥイーンすることはできません。

クラシックトゥイーンアニメーションのサンプルについては、Animate サンプルページ(www.adobe.com/go/learn_fl_samples_jp)を参照してください。次のサンプルを利用できます。

  • ドロップシャドウのアニメーション:サンプルを使用するには、サンプル zip ファイルをダウンロードして解凍し、Graphics¥AnimatedDropShadow フォルダーに移動します。

  • アニメーションとグラデーション:サンプルを使用するには、サンプル ZIP ファイルをダウンロードして解凍し、Graphics¥AnimationAndGradients フォルダーに移動します。

注意:

Animate のほとんどの作業と同じように、アニメーションで ActionScript は必要ありません。ただし、アニメーションの作成に ActionScript を使用することもできます。

クラシックトゥイーンアニメーションのキーフレームの作成と編集

クラシックトゥイーンアニメーションでの変更はキーフレームに定義されます。トゥイーンアニメーションでは、アニメーションの重要な箇所にだけキーフレームを定義します。キーフレーム間のフレームのコンテンツは Animate によって自動的に作成されます。トゥイーンアニメーションの補間フレームは、明るい青で表示され、キーフレーム間には矢印が示されます。Animate ドキュメントでは各キーフレームでシェイプが保存されるので、キーフレームは、アートワーク内で何らかの変更が必要な箇所についてのみ作成するようにしてください。

キーフレームはタイムラインで示されます。コンテンツのあるキーフレームは塗りつぶされた円で表され、空のキーフレームは空の円で表されます。同じレイヤーに続きのフレームを追加すると、それらのフレームのコンテンツはキーフレームと同じになります。

クラシックトゥイーンで編集できるのはキーフレームのみです。トゥイーンフレームは表示できますが、直接編集することはできません。トゥイーンフレームを編集するには、開始キーフレームまたは終了キーフレームを変更するか、両キーフレーム間に新しいキーフレームを挿入します。アイテムをライブラリパネルからステージまでドラッグして、そのアイテムを現在のキーフレームに追加する

一度に複数のフレームの表示や編集を行うには、オニオンスキン機能の使用を参照してください。

注意:

この機能は、従来のクラシックトゥイーンのキーフレームの作成に関するものです。新しいモーショントゥイーンのプロパティキーフレームについて詳しくは、トゥイーンアニメーションの作成を参照してください。

キーフレームの作成

  1. 次のいずれかの操作をします。
    • タイムラインでフレームを選択し、挿入/タイムライン/キーフレームを選択します。

    • タイムラインで、フレームを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)して、「キーフレームの挿入」を選択します。

タイムラインでのフレームの挿入

  • 新しいフレームを挿入するには、挿入/タイムライン/フレームを選択します。

  • キーフレームを作成するには、挿入/タイムライン/キーフレームを選択するか、キーフレームを配置するフレームを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)して、「キーフレームの挿入」を選択します。

  • 空白キーフレームを作成するには、挿入/タイムライン/空白キーフレームを選択するか、キーフレームを配置するフレームを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)して、「空白キーフレームを挿入」を選択します。

フレームまたはキーフレームの削除または変更

  • フレーム、キーフレーム、またはフレームシーケンスを削除するには、対象のフレーム、キーフレーム、またはフレームシーケンスを選択し、右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、「フレームの削除」を選択します。削除したフレームの周囲のフレームは変更されません。

  • キーフレームまたはフレームシーケンスとそのコンテンツを移動するには、対象のキーフレームまたはフレームシーケンスを必要な場所にドラッグします。

  • キーフレームの継続時間を延長するには、Alt キー(Windows)または Option キー(Mac OS)を押しながら、そのキーフレームを新しいシーケンスの最終フレームまでドラッグします。

  • フレームまたはフレームシーケンスをコピーしてペーストするには、対象のフレームまたはフレームシーケンスを選択して、編集/タイムライン/フレームのコピーを選択します。フレームまたはフレームシーケンスを選択して、編集/タイムライン/フレームのペーストを選択します。コピーしたフレームとまったく同じ数のフレームをターゲットのタイムラインにペーストして置き換えるには、「フレームをペーストして上書き」オプションを使用します。

  • キーフレームをフレームに変換するには、対象のキーフレームを選択し、修正/タイムライン/キーフレームを削除を選択するか、対象のキーフレームを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、「キーフレームを削除」を選択します。削除したキーフレームと、その次のキーフレームまでのフレームすべてが、削除したキーフレームの直前にあるフレームのコンテンツで置き換えられます。

  • キーフレームまたはフレームシーケンスをドラッグによってコピーするには、対象のキーフレームあるいはフレームシーケンスを選択し、Alt キー(Windows)または Option キー(Mac OS)を押しながら、新しい位置までドラッグします。

  • トゥイーンシーケンスの長さを変更するには、開始キーフレームまたは終了キーフレームを左右のいずれかの方向にドラッグします。

  • ライブラリアイテムを現在のキーフレームに追加するには、そのアイテムをライブラリパネルからステージ上にドラッグします。

  • アニメーションシーケンスを反転させるには、1 つまたは複数のレイヤー上で適切なフレームを選択して、修正/タイムライン/フレームの反転を選択します。この場合、シーケンスの最初と最後にキーフレームが必要です。

インスタンス、グループまたはテキストへのクラシックトゥイーンアニメーションの追加

注意:

この機能は、従来のクラシックトゥイーンの作成に関するものです。新しいモーショントゥイーンの作成について詳しくは、トゥイーンアニメーションの作成を参照してください。

インスタンス、グループおよびタイプのプロパティの変化をトゥイーンするには、クラシックトゥイーンを使用します。Animate では、インスタンス、グループおよびタイプの位置、サイズ、回転、傾斜をトゥイーンできます。また、Animate のインスタンスとタイプのカラーをトゥイーンして、カラーのグラデーションを作成したり、インスタンスをフェードインまたはフェードアウトさせることもできます。

グループやタイプのカラーをトゥイーンするには、それらをシンボルに変換します。テキストブロック内の個々の文字を独立にアニメーション処理するには、各文字を個別のテキストブロックに配置する必要があります。

クラシックトゥイーンを適用して 2 つのキーフレーム間のフレームの数を変更する場合、Animate は自動的にもう一度フレームをトゥイーンします。または、どちらかのキーフレームのグループまたはシンボルを移動する場合、Animate は自動的にもう一度フレームをトゥイーンします。

 

クラシックトゥイーンアニメーションの作成

  1. レイヤーをアクティブなレイヤーにするには、レイヤー名をクリックし、レイヤー内の空のキーフレームを選択して、開始します。このフレームが、クラシックトゥイーンの最初のフレームです。

  2. クラシックトゥイーンの最初のフレームにコンテンツを追加するには、次のいずれかの操作をします。
    • ペン、楕円、矩形、鉛筆、またはブラシツールでグラフィックオブジェクトを作成してから、そのオブジェクトをシンボルに変換します。

    • ステージ上でインスタンス、グループ、またはテキストブロックを作成します。

    • ライブラリパネルからシンボルのインスタンスをドラッグします。

    注意:

    トゥイーンを作成するには、レイヤー上にアイテムが 1 つだけある状態にする必要があります。

  3. アニメーションを終了する 2 番目のキーフレームを作成し、そのキーフレームを選択したままにします。
  4. 終了フレームのアイテムを変更するには、次のいずれかを実行します。
    • アイテムを新しい位置に移動します。

    • アイテムのサイズ、回転、または傾斜を変更します。

    • アイテムのカラーを変更します(インスタンスまたはテキストブロックのみ)。インスタンスまたはテキストブロック以外のエレメントのカラーをトゥイーンするには、シェイプトゥイーンを使います。

  5. クラシックトゥイーンを作成するには、次のいずれかの操作をします。
    • トゥイーンのフレームスパン内のフレームをクリックし、挿入/クラシックトゥイーンを選択します。

    • トゥイーンのフレームスパンのフレームを右クリック(Windows)、または Control キーを押しながらクリック(Mac OS)して、コンテキストメニューから「クラシックトゥイーンを作成」を選択します。

    手順 2 でグラフィックオブジェクトを作成した場合、Animate では、そのオブジェクトは自動的にシンボルに変換され、トゥイーン 1 という名前が割り当てられます。

  6. 選択したアイテムのサイズをトゥイーンするには、プロパティインスペクターの「トゥイーン」セクションで「伸縮」を選択します。前提条件として、手順 4 でアイテムのサイズを変更します。

  7. よりリアルなモーションを作成するには、クラシックトゥイーンにイージングを適用します。イージングをクラシックトゥイーンに適用するには、プロパティインスペクターの「トゥイーン」セクションにある「イージング」フィールドを使用します。カスタムイージングダイアログボックスを使用して、クラシックトゥイーンの速度をより正確に制御できます。

    トゥイーンされたフレーム間の変化率を調整するには、「イージング」フィールドの値をドラッグするか、値を入力します。

    • クラシックトゥイーンを最初はゆっくり始めて、アニメーションの最後に近づくにしたがって速度を上げるには、-1 ~ -100 の間の負の値を入力します。

    • クラシックトゥイーンを最初は速く始めて、アニメーションの最後に近づくにしたがって速度を落とすには、1 ~ 100 の間の正の値を入力します。

    • トゥイーンのフレームスパン内の速度をより複雑に変更できるようにするには、「イージング」フィールドの横にある「編集」ボタンをクリックします。カスタムイージングダイアログボックスが開きます。

      初期設定では、トゥイーンフレーム間の変化の度合いは一定です。イージングによって、変化の度合いを徐々に調整できるので、加速と減速がより自然に見えるようになります。

  8. トゥイーン処理中に選択したアイテムを回転するには、プロパティインスペクターで回転メニューのオプションを選択します。
    • 回転させない場合は、「なし」を選択します。これはデフォルト設定です。

    • 1 番動きの少ない方向に 1 回オブジェクトを回転させるには、「自動」を選択します。

    • オブジェクトを示されたとおりに回転させるには、回転数を指定するために数値を入力し、「時計回り」または「反時計回り」を選択します。

    注意:

    手順 8 の回転は、手順 4 で終了フレームに適用した回転に追加されるものです。

  9. モーションパスを使用している場合は、プロパティインスペクターで「パスに沿って回転」を選択して、トゥイーンするエレメントのベースラインをモーションパスの向きに合わせます。
  10. グラフィックシンボルインスタンスのアニメーションをメインタイムラインと同期させるには、プロパティインスペクターで「同期」オプションを選択します。

    注意:

    シンボルの同期と「同期」オプションのどちらの場合も、トゥイーンのフレーム数が再計算されて、トゥイーンに割り当てられているフレーム数と一致するようになります。アニメーションシーケンスのフレームがグラフィックインスタンスのフレーム数の偶数倍でない場合は、「同期」オプションを使用します。

  11. モーションパスを使用している場合は、「吸着」を選択して、トゥイーンさせたいエレメントを基準点に合わせてモーションパスに吸着させます。

クラシックトゥイーンを使用してキャラクターに活気を与える

クラシックトゥイーンでキャラクターを活性化させます。アニメーションに命を吹き込みたい場合は、この例の最後にあるチュートリアルをご覧になり、次の手順に従ってください。

  1. オブジェクトを選択して、「修正」をクリックします。

  2. シンボルに変換」を選択して、次のオプションを選択します。

    • 名前:シンボルの名前を入力します。
    • 種類:ドロップダウンリストのグラフィックを選択します。
  3. OK」をクリックして、自由変形ツールを選択します。

  4. 中央の白い点をドラッグして、オブジェクトを傾斜させます。

  5. フレームを右クリックして、クラシックトゥイーンを作成を選択します。

クラシックトゥイーンを使用してキャラクターに活気を与える方法

アニメーションに対するモーションの作成方法については、このビデオをご覧ください。

XML ファイルとして保存したクラシックトゥイーンの操作

Animate では、クラシックトゥイーンを XML ファイルとして操作できます。Animate ではネイティブで、任意のクラシックトゥイーンに対して次のコマンドを適用できます。

  • XML 形式でモーションをコピー

  • XML 形式でモーションを書き出し

  • XML 形式でモーションを読み込み

XML 形式でモーションをコピー

ステージ上の指定したフレームにある任意のオブジェクトに適用されているモーションのプロパティをコピーできます。 

  1. クラシックトゥイーンを作成します。

  2. タイムライン上でキーフレームを選択します。

  3. コマンド/XML 形式でモーションをコピーを選択します。

モーションのプロパティが XML データとしてクリップボードにコピーされます。任意のテキストエディターを使用して、XML ファイルを操作できます。

XML 形式でモーションを書き出し

ステージ上の任意のオブジェクトに適用されているモーションのプロパティを、保存可能な XML ファイルに書き出すことができます。

 

  1. クラシックトゥイーンを作成します。 

  2. コマンド/XML 形式でモーションを書き出しを選択します。

  3. ファイルの適切な保存先を参照します。

  4. XML ファイル名を入力して「保存」をクリックします。

    クラシックトゥイーンが、指定した場所に XML ファイルとして書き出されます。

XML 形式でモーションを読み込み

モーションのプロパティが定義された既存の XML ファイルを読み込むことができます。

  1. ステージ上のオブジェクトを選択します。

  2. コマンド/XML 形式でモーションを読み込みを選択します。

  3. XML ファイルの保存先を参照してファイルを選択します。「OK」をクリックします。

  4. モーションを特殊ペーストダイアログボックスで、選択したオブジェクトに適用するプロパティを選択します。

  5. OK」をクリックします。

モーションガイドレイヤーの作成

クラシックトゥイーンアニメーションのオブジェクトの動きを制御するには、モーションガイドレイヤーを作成します。

モーショントゥイーンレイヤーまたはインバースキネマティックポーズレイヤーをガイドレイヤーにドラッグすることはできません。

  1. 標準レイヤーをガイドレイヤーにドラッグします。この操作により、ガイドレイヤーがモーションガイドレイヤーに変換され、標準レイヤーが新しいモーションガイドレイヤーにリンクされます。

    注意:

    ガイドレイヤーを誤って変換しないように、すべてのガイドレイヤーを最下部のレイヤーに配置します。

パスに沿ったクラシックトゥイーンアニメーションの作成

注意:

この機能は、従来のクラシックトゥイーンの操作に関するものです。モーションパスを利用した新しいモーショントゥイーンの使用について詳しくは、トゥイーンアニメーションのモーションパスの編集を参照してください。

モーションガイドレイヤーを使用すると、トゥイーンしたインスタンス、グループ、またはテキストブロックをアニメーション化するときのパスを描画できます。複数のレイヤーをモーションガイドにリンクして、複数のオブジェクトを同じパスに沿って移動できます。モーションガイドレイヤーにリンクされた標準レイヤーは、ガイド対象レイヤーになります。

モーションパス
この例では、別のレイヤーにある 2 つのオブジェクトが同じモーションパスに関連付けられます。

クラシックトゥイーンアニメーションのモーションパスの作成

  1. クラシックトゥイーンされたアニメーションシーケンスを作成します。

    プロパティインスペクターで「パスに沿って回転」を選択すると、トゥイーンするエレメントのベースラインはモーションパスの方向を向きます。「吸着」を選択すると、トゥイーンするエレメントの基準点はモーションパスに吸着します。

  2. クラシックトゥイーンを含むレイヤーのレイヤー名を右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、「クラシックモーションガイドを追加」を選択します。

    Animate によってクラシックトゥイーンレイヤーの上にモーションガイドレイヤーが追加され、クラシックトゥイーンレイヤーの名前がインデントされます。これは、クラシックトゥイーンレイヤーがモーションガイドレイヤーにバインドされていることを表します。

    注意:

    タイムラインに既にガイドレイヤーがある場合は、クラシックトゥイーンを含むレイヤーをガイドレイヤーの下にドラッグできます。この操作により、ガイドレイヤーがモーションガイドに変換されて、クラシックトゥイーンがバインドされます。

    モーションガイドレイヤー
    クラシックトゥイーンを含むレイヤーの上に配置されたモーションガイドレイヤー。

  3. モーションガイドレイヤーにパスを追加するには、モーションガイドレイヤーを選択して、ペン、鉛筆、線、円、矩形またはブラシツールを使用します。

    モーションガイドレイヤーに線をペーストすることもできます。

  4. トゥイーンしているオブジェクトをドラッグして、最初のフレームの先頭か最後のフレームの末尾に吸着します。

    ガイド線の先頭に吸着したグラフィック
    ガイド線の先頭に吸着した車のグラフィック。

    注意:

    最良の結果を得られるように、変形点に合わせてシンボルをドラッグします。

  5. モーションガイドレイヤーおよびパスを非表示にするには、モーションガイドレイヤーの目のアイコンの列をクリックします。非表示の場合、作業時にオブジェクトの動きのみが表示されます。 

    アニメーションを再生すると、グループやシンボルがモーションパスに沿って移動します。

可変線幅と可変線カラーに基づいたアニメーションガイドについて詳しくは、アニメーションガイドを参照してください。

  1. 次のいずれかの操作をします。
    • 既存のレイヤーをモーションガイドレイヤーの下にドラッグします。レイヤーは、モーションガイドレイヤーの下にインデントされます。このレイヤー上にあるすべてのオブジェクトは、モーションパスに自動的に吸着します。

    • モーションガイドレイヤーの下にレイヤーを作成します。そのレイヤーにあるトゥイーン対象のオブジェクトは、モーションパスに沿って自動的にトゥイーンされます。

    • モーションガイドレイヤーの下のレイヤーを選択します。修正/タイムライン/レイヤープロパティを選択し、「ガイド」を選択します。

  1. リンクを解除するには、レイヤーを選択して、次のいずれかの操作をします。

    • レイヤーをモーションガイドレイヤーの上にドラッグします。

    • 修正/タイムライン/レイヤープロパティを選択し、レイヤーのタイプとして「標準」を選択します。

クラシックトゥイーンアニメーションのプロパティのペースト

注意:

この機能は、従来のクラシックトゥイーンのプロパティのペーストに関するものです。新しいモーショントゥイーンのプロパティのペーストについて詳しくは、モーショントゥイーンプロパティのコピーとペーストを参照してください。

「モーションをペースト」コマンドを使用すると、クラシックトゥイーンがコピーされ、特定のプロパティだけが別のオブジェクトにペーストされます。

  1. タイムラインで、コピーするクラシックトゥイーンを含むフレームを選択します。同じレイヤーのフレームを選択する必要がありますが、単一のクラシックトゥイーンをスパンしていなくてもかまいません。選択範囲は、1 つのトゥイーン、空のフレーム、または複数のトゥイーンをスパンできます。
  2. 編集/タイムライン/モーションをコピーを選択します。

  3. コピーされたクラシックトゥイーンを受け取るには、シンボルインスタンスを選択します。

  4. 編集/タイムライン/モーションを特殊ペーストを選択します。シンボルインスタンスにペーストするクラシックトゥイーンのプロパティを選択します。クラシックトゥイーンのプロパティは次のとおりです。

    X 座標

    オブジェクトの x 方向への移動量です。

    Y 座標

    オブジェクトの y 方向への移動量です。

    水平比率

    オブジェクトの現在のサイズとその「実物の大きさ」との間の水平方向(X)の比率です。

    垂直比率

    オブジェクトの現在のサイズとその「実物の大きさ」との間の垂直方向(Y)の比率です。

    回転と傾斜

    オブジェクトの回転と傾斜です。これらのプロパティは、オブジェクトにまとめて適用する必要があります。傾斜は回転角度の測定値であり、回転と傾斜を適用するときは、片方のプロパティが他方のプロパティに影響します。

    カラー

    濃淡、明度、アルファなどのすべてのカラー値がオブジェクトに適用されます。

    フィルター

    選択されたスパンに適用されるすべてのフィルター値と変更です。フィルターがオブジェクトに適用される場合、フィルターのすべての値はそのままペーストされ、その状態(有効または無効)も新しいオブジェクトに適用されます。

    描画モード

    オブジェクトのブレンドモードを適用します。

    ターゲットの拡大/縮小プロパティをオーバーライドします

    選択していない場合、すべてのプロパティは、ターゲットオブジェクトに合わせてペーストされます。オンの場合、このオプションは、ターゲットの拡大/縮小のプロパティを上書きします。

    ターゲットの回転および傾斜のプロパティをオーバーライドします

    選択していない場合、すべてのプロパティは、ターゲットオブジェクトに合わせてペーストされます。オンの場合、ペーストされるプロパティが、オブジェクトの既存の回転と拡大/縮小のプロパティを上書きします。

    コピー元のトゥイーンと一致させるために必要なフレーム、トゥイーン、およびシンボル情報が挿入されます。

    シンボルのクラシックトゥイーンをアクションパネルにコピーする、または別のプロジェクトの中で ActionScript として使用する場合は、「ActionScript 3.0 としてのモーションのコピー」コマンドを使用します。

イージングプリセットの作成

イージングプリセットは、ステージ上のオブジェクトに適用できる設定済みのイージングです。

頻繁に使用する一連のイージングプリセットがクラシックトゥイーン用に用意されています。イージングプリセットのリストからプリセットを選択して、特定のプロパティに適用できます。

  1. Animate のタイムラインでトゥイーンを含むレイヤーをクリックします。

  2. プロパティパネルで「トゥイーン」カテゴリをクリックしてトゥイーンのプロパティを開きます。イージングの種類のドロップダウンを使用して、プロパティごとのイージングにアクセスできます。

    トゥイーンのプロパティ
    トゥイーンのプロパティ

    クラシックトゥイーンでは、イージングプリセットをプロパティごとに適用できます。プロパティパネルに、プロパティごとのイージングを選択するオプションが表示されます。「各プロパティを個別に」を選択して、各プロパティに異なるイージングプリセットを適用できます。

    プロパティごとのプリセット
    プロパティごとのプリセット

    クラシックトゥイーンの位置、回転、伸縮、カラーおよびフィルタープロパティに特有のイージングプリセットを選択できます。 

    位置 ステージ上のアニメーションオブジェクトの位置のイージング設定を指定します。

    回転 ステージ上のアニメーションオブジェクトの回転のイージング設定を指定します。

    伸縮 ステージ上のアニメーションオブジェクトの伸縮のイージング設定を指定します。

    カラー ステージ上のアニメーションオブジェクトに適用されたカラートランジションのイージング設定を指定します。

    フィルター ステージ上のアニメーションオブジェクトに適用されたフィルターのイージング設定を指定します。

  3. トゥイーンのすべてのプロパティに同じイージングを適用する場合は、「すべてのプロパティをまとめて」オプションを選択します。イージングの種類ポップアップダイアログボックスから任意のイージングプリセットを選択し、イージングプリセットをダブルクリックして適用します。

    クラシックイージングを適用する場合は、スライダーを動かしてイージングの強さを変更することもできます。 

    イージングのプリセットのリスト
    イージングのプリセットのリスト

  4. カスタムイージングを適用する場合は、「イージング」の横にある編集アイコンをクリックします。

HTML5 Canvas ドキュメントタイプを使用している場合は、イージングプリセット用に最適化された js 出力ファイルを取得できます。HTML5 Canvas では出力の作成時に Tween JS のイージング関数が使用されます。 

カスタムイージングのクラシックトゥイーンアニメーションへの適用

注意:

この機能は、従来のクラシックトゥイーンへのイージングの追加に関するものです。新しいモーショントゥイーンへのイージングの追加について詳しくは、トゥイーンアニメーションのイージングを参照してください。

カスタムイージングダイアログボックスに、時間経過に沿ったモーションの大きさを表すグラフが表示されます。水平軸方向にフレームが表示され、垂直軸方向に変化のパーセンテージが表示されます。最初のキーフレームは 0%、最後のキーフレームは 100% として表されます。

オブジェクトの変化の割合は、グラフの曲線の傾きによって表されます。曲線が水平である(傾きがない)場合、速度はゼロです。曲線が垂直である場合は、瞬間的な変化の発生を示します。

カスタムイーズイン / イーズアウトのグラフ
速度が一定であることを表すカスタムイージンググラフ。このダイアログを開くには、クラシックトゥイーン内のフレームを選択して、プロパティインスペクターの「イージング」セクションにある「編集」ボタンをクリックします。

カスタムイージングの保存

ボタンをクリックしてカスタムイージングを保存し、そのイージングを後でカスタムリストから選択して再利用することができます。変更をおこなったら、編集モードで「保存して適用」をクリックします。次のスクリーンショットでは、カスタマイズされたイージングプリセットが「MyEase1」という名前で保存されています。

注意:

同じドキュメントタイプ内でのみ、カスタマイズされたイージングプリセットを再利用できます。

カスタマイズされたイージングプリセット
カスタマイズされたイージングプリセット

このプリセットイージングをタイムラインの複数のスパンに使用するには、目的のスパンを選択して、プリセットイージングを適用します。

複数のスパンに使用されるイージングプリセット
複数のスパンに使用されるイージングプリセット

CustomEase ダイアログボックスのその他のコントロール

「再生」および「停止」ボタン

これらのボタンを使用すると、カスタムイージングダイアログボックスで定義した、現在のすべての速度曲線を使用して、ステージ上のアニメーションをプレビューできます。

削除

現在のカスタムイージングを削除します。 

保存して適用

イージングプリセットに対しておこなった変更を保存して適用します。 

「リセット」ボタン

このボタンを使用すると、速度曲線をデフォルトの直線の状態にリセットします。

選択したコントロールポイントの位置

ダイアログボックスの右下隅に表示された数値は、選択したコントロールポイントのキーフレームと位置を示します。コントロールポイントを選択していない場合、値は表示されません。

線にコントロールポイントを追加するには、対角線を 1 回クリックします。コントロールポイントの位置をドラッグすると、オブジェクトのモーションを正確に制御することができます。

四角形のハンドルによって表されるフレームインジケーターを使って、オブジェクトの速度を上げるか下げる位置をクリックします。コントロールポイントの四角形のハンドルをクリックすると、そのコントロールポイントが選択され、どちらかの側に方向点が表示されます。方向点は白丸で表されます。それらを配置するには、コントロールポイントまたはその方向点をマウスでドラッグするか、キーボードの矢印キーを使用します。

ヒント:デフォルトでは、コントロールポイントはグリッドに吸着します。X キーを押しながらコントロールポイントをドラッグすると、吸着をオフにすることができます。

任意のコントロールポイント以外の場所で曲線の領域をクリックすると、その場所に曲線のコントロールポイントが追加されます。この操作では、曲線のシェイプは変更されません。曲線およびコントロールポイント以外の場所をクリックすると、現在選択されているコントロールポイントの選択が解除されます。

カスタムイージングの追加

  1. タイムラインで、クラシックトゥイーンが適用されているレイヤーを選択します。

  2. フレームのプロパティインスペクターで、イージングスライダーの横にある「編集」ボタンをクリックします。
  3. 対角線上で Ctrl キー(Windows)または Command キー(Mac OS)を押しながらクリックし、コントロールポイントを追加します。
  4. コントロールポイントを上にドラッグしてオブジェクトの速度を上げるか、下にドラッグしてオブジェクトの速度を下げます。
  5. 頂点のハンドルをドラッグしてイージング曲線をさらに調整し、トゥイーンのイージング値を微調整します。
  6. 左下隅にある再生ボタンをクリックして、ステージ上のアニメーションを表示します。

  7. 目的のエフェクトが得られるまで、コントロールを調整します。
注意:

カスタムイージングダイアログボックスを使用する場合、編集フィールドに -- が表示されます。編集またはポップアップスライダーを使用する場合、カスタムイージンググラフは同等の曲線に設定され、「すべてのプロパティに対して同じ設定を使用する」チェックボックスが選択されます。

イージング曲線のコピーとペースト

  • 現在のイージング曲線をコピーするには、Ctrl + C キー(Windows)または Command + C キー(Mac OS)を押します。

  • コピーした曲線を別のイージング曲線に配置するには、Ctrl + V キー(Windows)または Command + V キー(Mac OS)を押します。

    イージング曲線をコピー&ペーストできます。コピーされた曲線は、Animate アプリケーションを終了するまで使用できます。

サポートされないイージング曲線

特定のタイプのイージング曲線はサポートされません。グラフのいずれの部分も、直線的でない曲線(円など)を表すことはできません。

カスタムイージングダイアログボックスを使用すると、無効な曲線を描画する位置にコントロールポイントまたはコントロールハンドルが移動するのを避けることができます。

  • すべてのポイントはグラフ上に存在する必要があります。グラフの境界を越えてコントロールポイントを移動することはできません。

  • 曲線のすべてのセグメントは、グラフ内に存在する必要があります。グラフの境界からはみ出さないようにするため、曲線のシェイプは統合されます。

アドビのロゴ

アカウントにログイン