マニュアル キャンセル

アニメーションのトゥイーンスパンの設定

  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. Animate でのオブジェクトの描画および作成
    9. 線とシェイプの変更
    10. Animate CC での線、塗り、グラデーション
    11. Adobe Premiere Pro と After Effects の使用
    12. Animate CC のカラーパネル
    13. Animate で Flash CS6 ファイルを開く
    14. Animate でのクラシックテキストの操作
    15. Animate へのアートワークの挿入
    16. Animate に読み込まれたビットマップ
    17. 3D グラフィック
    18. Animate でのシンボルの操作
    19. Adobe Animate での線とシェイプの描画
    20. Animate でのライブラリの使用
    21. サウンドの書き出し
    22. Animate CC でのオブジェクトの選択
    23. Animate での Illustrator AI ファイルの操作
    24. ブレンドモードの適用
    25. オブジェクトの配置
    26. コマンドメニューを使用したタスクの自動化
    27. 多言語テキスト
    28. Animate でのカメラの使用
    29. グラフィックフィルター
    30. サウンドと ActionScript
    31. 描画の環境設定
    32. ペンツールを使用した描画
  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. Animate ワークスペースのアクセシビリティ
    12. スクリプトの記述と管理
    13. カスタムプラットフォームサポートの有効化
    14. カスタムプラットフォームサポートの概要
    15. カスタムプラットフォームサポートプラグインの操作
    16. ActionScript 3.0 のデバッグ
    17. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    9. ベストプラクティス - ビデオ規則
    10. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    11. ベストプラクティス - FLA ファイルの構造化
    12. FLA ファイルを Animate 向けに最適化するベストプラクティス
    13. ActionScript パブリッシュ設定
    14. Animate のパブリッシュ設定の指定
    15. プロジェクターファイルの書き出し
    16. 画像とアニメーション GIF の書き出し
    17. HTML パブリッシュ用テンプレート
    18. Adobe Premiere Pro と After Effects の使用
    19. アニメーションのクイック共有とパブリッシュ
  9. トラブルシューティング
    1. 解決済みの問題
    2. 既知の問題

 

Animate でアニメーションを作成する際は、多くの場合、まずタイムラインでトゥイーンスパンを設定することをお勧めします。オブジェクトをレイヤーやフレームに配置し、そのプロパティ値を変更して、トゥイーンを完成させます。

タイムライン内でトゥイーンスパンとフレームを選択するには、次のいずれかの操作をします。

 一般環境設定(編集/環境設定)メニューオプションで、スパンベースのフレーム選択が有効になっていることを確認します。

  • トゥイーンスパン全体を選択するには、スパンをクリックします。

  • 複数のトゥイーンスパンを選択するには(連続しないスパンも含む)、Shift キーを押しながら各スパンをクリックします。

  • トゥイーンスパン内の単一フレームを選択するには、Ctrl + Alt キー(Windows)または Command + Option キー(Mac OS)を押しながらスパン内のフレームをクリックします。

  • 連続している複数のフレームをスパン内でまとめて選択するには、Ctrl + Alt キー(Windows)または Command + Option キー(Mac OS)を押しながらスパン内をドラッグします。

  • 複数のレイヤー上の複数のトゥイーンスパン内のフレームを選択するには、Ctrl + Alt キー(Windows)または、Command + Option キー(Mac OS)を押しながらレイヤー間をドラッグします。

  • トゥイーンスパン内の特定のプロパティキーフレームを選択するには、Ctrl + Alt キー(Windows)または Command + Option キー(Mac OS)を押しながら目的のプロパティキーフレームをクリックします。新しい位置にドラッグします。

関連項目

トゥイーンスパンの移動、複製、削除

  • スパンを同じレイヤー内の別の位置に移動するには、スパンをドラッグします。

     レイヤーをロックすると、ステージでの編集はできなくなりますが、タイムラインでの編集は可能です。スパンを別のスパンの上に移動すると、下になるスパンのオーバーラップするフレームがなくなります。

  • トゥイーンスパンを別のレイヤーに移動するには、スパンを目的のレイヤーにドラッグするか、スパンを新しいレイヤーにコピー&ペーストします。

    トゥイーンスパンは、既存の標準レイヤー、トゥイーンレイヤー、ガイドレイヤー、マスクレイヤー、マスクの対象レイヤーにドラッグできます。新しいレイヤーが空の標準レイヤーの場合、そのレイヤーはトゥイーンレイヤーに変換されます。

  • スパンを複製するには、Alt キー(Windows)または Command キー(Mac OS)を押しながらスパンをタイムラインの別の位置にドラッグするか、スパンをコピー & ぺーストします。

  • スパンを削除するには、対象のスパンを選択し、スパンのコンテキストメニューから「フレームを削除」または「フレームのクリア」を選択します。

隣接するトゥイーンスパンの編集

  • 改行位置を 2 つの隣接するトゥイーンスパンの間に移動するには、改行をドラッグします。

    各トゥイーンが再計算されます。

  • 2 つの連続するトゥイーンスパンの隣接する開始フレームと終了フレームを分離させるには、Alt キー(Windows)または Command キー(Mac OS)を押しながら 2 番目のスパンの開始フレームをドラッグします。

    トゥイーンスパンを 2 つのスパンに分割するには、Ctrl キー(Windows)または Command キー(Mac OS)を押しながらスパン内のフレームを 1 つクリックし、スパンのコンテキストメニューから「モーションを分割」を選択します。

  • 両方のトゥイーンスパンには、同じターゲットインスタンスが適用されます。

     複数のフレームを選択した場合、モーションを分割することはできません。分割されたトゥイーンにイージングが適用されている場合、分割された 2 つのトゥイーンは元のトゥイーンと同じモーションを維持しません。

  • 2 つの隣接するトゥイーンスパンを結合するには、両方のスパンを選択して、スパンのコンテキストメニューから「モーションを結合」を選択します。

トゥイーンスパンの長さの編集

  • アニメーションの長さを変更するには、トゥイーンスパンの右端か左端をドラッグします。

    あるスパンの端を別のスパンのフレーム内にドラッグすると、ドラッグ先のスパンのフレームが置き換えられます。

  • ステージのトゥイーンオブジェクトの使用時間をトゥイーンのどちらかの終点よりも長く設定する場合は、Shift キーを押しながらそのトゥイーンスパンのいずれかの終了フレームをドラッグします。Animate により、これらのフレームがトゥイーンされることなく、スパンの末尾にフレームが追加されます。

    同じレイヤー内のトゥイーンスパンの後のフレームを選択し、F6 キーを押すこともできます。Animate によってトゥイーンスパンが拡張され、選択したフレームにすべてのプロパティのプロパティキーフレームが追加されます。 

     静止フレームを別のスパンに隣接するスパンの最後に追加するには、その隣接するスパンを移動して新しいフレーム用にスペースを作る必要があります。

フレームアニメーションへのトゥイーンスパンの変換

クラシックトゥイーンスパンまたはモーショントゥイーンスパンをフレームアニメーションに変換できます。フレームアニメーションでは、各フレームに個別のキーフレーム(プロパティキーフレームではない)が含まれま。また、それらの各キーフレームにはアニメーションシンボルの個別のインスタンスが含まれています。フレームアニメーションには、補間のプロパティ値は含まれません。詳しくは、フレームアニメーションを参照してください。

  • 変換するトゥイーンスパンを右クリック(Windows)または Command キーを押しながらクリック(Mac OS)し、コンテキストメニューから「フレームアニメーションに変換」を選択します。

トゥイーンスパン内でのフレームの追加または削除

  • スパン内でフレームを削除するには、Ctrl キー(Windows)または Command キー(Mac OS)を押しながらドラッグしてフレームを選択し、スパンのコンテキストメニューから「フレームを削除」を選択します。

  • スパン内でフレームをカットするには、Ctrl キー(Windows)または Command キー(Mac OS)を押しながらドラッグしてフレームを選択し、スパンのコンテキストメニューから「フレームをカット」を選択します。

  • 既存のトゥイーンスパンにフレームをペーストするには、Ctrl キー(Windows)または Command キー(Mac OS)を押しながらドラッグして置換対象のフレームを選択し、スパンのコンテキストメニューから「フレームをペースト」を選択します。

    スパン全体をコピーして別のスパンにペーストすると、ペースト先のスパンすべてが置き換えられます。

トゥイーンのターゲットインスタンスの置換または削除

トゥイーンスパンのターゲットインスタンスを置換するには、次のいずれかの操作をします。

  • スパンを選択し、新しいシンボルをライブラリパネルからステージにドラッグします。

  • ライブラリパネル内の新規シンボルおよびステージ上のトゥイーンのターゲットインスタンスを選択して、修正シンボルシンボルの入れ替えを選択します。

  • スパンを選択して、クリップボードからシンボルインスタンスまたはテキストをペーストします。

トゥイーンを削除せずにトゥイーンスパンのターゲットインスタンスを削除するには、対象のスパンを選択して Delete キーを押します。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト