トゥイーンアニメーションのモーションパスの編集

  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. アニメーションのクイック共有とパブリッシュ

ステージを横切るトゥイーンインスタンスを配置すると、そのアニメーションのモーションパスがステージに表示されます。モーションパスは、トゥイーンインスタンスの空間移動を表す線です。モーションパス上の丸印(「トゥイーンドット」または「フレームドット」とも呼ばれます)は、タイムラインの進行に伴いターゲットオブジェクトがどこまで進むかを表しています。ターゲットオブジェクトの位置は、単一フレーム、またはフレームのグループとして表されます。 

モーショントゥイーンのモーションパスは、以下の方法で編集できます。

  • トゥイーンスパンの任意のフレーム内のオブジェクト位置を変更します。

  • モーションパス全体をステージ上の別の位置に移動します。

  • 選択ツール、ダイレクト選択ツールまたは自由変形ツールを使用してパスの形状またはサイズを変更します。

  • 変形パネルまたはプロパティインスペクターを使用してパスの形状またはサイズを変更します。

  • 修正変形メニューのコマンドを使用します。

  • カスタマイズした線をモーションパスとして適用します。

  • モーションエディターを使用します。

モーションパスを常に表示」オプションを使用すると、ステージの全レイヤーのすべてのモーションパスを同時に表示することができます。この表示は、異なるモーションパスを持ち、互いに交差するアニメーションを複数デザインする際に便利です。モーションパスまたはトゥイーンスパンを選択している場合は、プロパティインスペクターのオプションメニューからこのオプションを選択できます。

関連項目

選択ツールおよびダイレクト選択ツールを使用してモーションパスのシェイプを編集

選択ツールおよびダイレクト選択ツールを使用して、モーションパスのシェイプを変更することができます。選択ツールを使用すると、セグメントをドラッグしてシェイプを変更することができます。トゥイーンのプロパティキーフレームは、コントロールポイントとしてパスに表示されます。ダイレクト選択ツールを使用すると、それぞれの位置プロパティキーフレームに対応するパスのコントロールポイントやベジェハンドルが表示されます。これらのハンドルを使用して、プロパティキーフレームポイントの周囲のパスのシェイプ変更を行います。

円などの直線ではないモーションパスを作成した場合は、トゥイーンオブジェクトがパスに沿って移動しながら回転するように設定できます。パスに対して一定の向きを保つには、プロパティインスペクターで「パスに沿って回転」を選択します。

トゥイーンオブジェクトは、モーションパス(左)に沿ってではなく、モーションパス(右)に沿って回転されます。

  1. ツールパネルで選択ツールをクリックします。

  2. トゥイーンのターゲットインスタンスをクリックして、モーションパスをステージに表示します。

  3. 選択ツールを使用して、モーションパスの任意のセグメントをドラッグして、シェイプを変更します。最初にセグメントをクリックして選択しないでください。

  4. パスのプロパティキーフレームポイントのベジェコントロールポイントを公開するには、ダイレクト選択ツールをクリックして、パスをクリックします。

    プロパティキーフレームポイントは、モーションパスにコントロールポイント(小さな菱形)として表示されます。

  5. コントロールポイントを移動するには、ダイレクト選択ツールでドラッグします。

  6. コントロールポイントの周囲のパス曲線を調整するには、ダイレクト選択ツールでコントロールポイントのベジェハンドルをドラッグします。

    ハンドルが拡張されていないときは、Alt キー(Windows)または Option キー(Mac OS)を押しながらコントロールポイントをドラッグして拡張できます。

  1. アンカーポイントを削除するには、アンカーポイント削除ツールを選択します。選択ツールで生成されるアンカーポイントのほとんどは、スムーズポイントです。アンカーポイントを切り替えるには、アンカーポイントの切り換えツールを選択します。アンカーがコーナーポイントに切り替わります。
  1. また、通常のアンカーポイントと同様に、ポイントから新規のベジェハンドルを引き出し、配置することもできます。
注意:

アンカーポイントの追加ツールを使用して、パスにアンカーポイントを追加することはできません。

トゥイーンオブジェクトの位置変更

モーションパスを編集するには、トゥイーンスパンの任意のフレームで、ステージ上にあるトゥイーンのターゲットインスタンスを移動します。現在のフレームにプロパティキーフレームがない場合は、Animate によって追加されます。

  1. ターゲットインスタンスの移動先となるフレームに再生ヘッドを配置します。
  2. 選択ツールを使用して、ターゲットインスタンスをステージ上の新しい位置にドラッグします。

モーションパスが更新され、新しい位置がパス内に含められます。モーションパス内のその他すべてのプロパティキーフレームは、元の位置に保持されます。

ステージ上のモーションパスの位置変更

ステージでモーションパス全体をドラッグするか、プロパティインスペクターでパスの位置を設定することができます。

  1. ツールパネルで選択ツールをクリックします。

  2. 次のいずれかの操作を行って、モーションパスを選択します。

    • タイムラインのトゥイーンスパンをクリックして、ステージのモーションパスをクリックします。
    • ステージのトゥイーンオブジェクトをクリックして、モーションパスをクリックします。
    • モーションパスとターゲットインスタンスの周囲にあるマーキーをドラッグして、その 2 つを選択します。
    • (CS5.5 のみ)編集する各トゥイーンのモーションパスを Shift キーを押しながらクリックすることで、複数のモーションパスを選択できます。すべてのモーションパスを囲むようにマーキーをドラッグすることもできます。
  3. 次のいずれかの操作をおこなって、モーションパスを移動します。

    • パスをステージ上の目的の位置にドラッグします。
    • プロパティインスペクターでパスの X と Y 値を設定します。この X と Y 値は、モーションパスの境界ボックスの左上隅の値です。
    • 矢印キーを使用してモーションパスを移動します。

自由変形ツールでのモーションパスの編集

  1. ツールパネルで自由変形ツールをクリックします。
  2. 自由変形ツールでモーションパスをクリックします。トゥイーンターゲットインスタンスをクリックしないでください。
  3. 自由変形ツールを使用して、パスを伸縮、傾斜または回転させます。

モーションパスをトゥイーンから削除

  1. 選択ツールでクリックすることにより、ステージ上のモーションパスを選択します。
  2. Delete キーを押します。

モーションパスを線としてコピー

  1. ステージ上のモーションパスをクリックして選択します。
  2. 編集コピーを選択します。

パスを別のレイヤーに線としてペーストしたり、別のモーショントゥイーンのモーションパスとしてペーストしたりできます。

カスタマイズした線をモーションパスとして適用

異なるレイヤーまたは異なるタイムラインの線をトゥイーンのモーションパスとして適用することができます。

  1. トゥイーンレイヤーとは異なるレイヤー上の線を選択し、クリップボードにコピーします。
    閉じている線は使用できません。 使用できるのは連続した線のみです。
  2. タイムラインでトゥイーンスパンを選択して、線をペーストします。Animate は、ペーストした線を、選択したトゥイーンスパンの新しいモーションパスとして適用します。トゥイーンのターゲットインスタンスは、新しい線に沿って移動するようになります。
  3. トゥイーンの開始位置と終了位置を入れ替えるには、トゥイーンスパンを右クリックするか(Windows)、または Command キーを押しながらクリックして(Mac OS)、トゥイーンスパンのコンテキストメニューでモーションパスパスの入れ替えを選択します。
アドビのロゴ

アカウントにログイン