タイムラインについて

Adobe Animate のタイムラインでは、ドキュメントのコンテンツをレイヤーとフレームで整理および制御します。映画と同じように、Animate ドキュメントでは時間の長さをフレームに分割しています。レイヤーは、何層にも積み重ねられた複数のフィルムストリップに類似しており、それぞれのレイヤーに含まれている異なるイメージがステージに表示されます。タイムラインの主なコンポーネントは、レイヤー、フレームおよび再生ヘッドです。

Timeline

タイムラインを見れば、フレーム単位のアニメーション、トゥイーンアニメーション、モーションパスなどのアニメーションがドキュメント内のどこで発生するかがわかります。タイムラインのレイヤーセクションのコントロールを使用すると、レイヤーの表示と非表示およびロックとロック解除を切り替えることができます。また、レイヤーのコンテンツをアウトラインで表示することもできます。タイムラインフレームは、同じレイヤーまたは別のレイヤー上の新しい場所にドラッグすることができます。

最新のタイムライン

フレーム間隔の明快な表現、フレームおよびタイムマーカーの読みやすさ、機能強化されたオニオンスキン、キーフレーム作成用ボタン、空白のフレームなど、タイムラインパネルのルック&フィールが強化されています。

新しいタイムライン

タイムラインコントロール

タイムラインヘッダーは、最前面に機能が追加されて、より豊富な機能を提供するようになりました。

タイムラインヘッダー

レイヤー表示

左上のレイヤー表示アイコンをクリックして、デフォルトの複数レイヤー表示から現在のレイヤー表示に切り替えることができます。

複数レイヤー表示
複数レイヤー表示
単一レイヤー表示
単一レイヤー表示

カメラ

カメラを有効または無効にするには、カメラボタンをクリックします。

レイヤーペアレンティングビュー

レイヤーの親子階層構造が表示されます。

レイヤー深度

レイヤー深度パネルが作成され、リストに含まれているアクティブレイヤーの深度を変更することができます。 

注意:

アニメーションの再生時には、実際のフレームレートが表示されます。コンピューターでアニメーションを適切な速さで計算して再生できない場合、ドキュメントのフレームレートの設定と実際のフレームレートに違いが生じることがあります。

オニオンスキン機能

オニオンスキン機能が改良され、よりシンプルになりました。オニオンスキンボタンをクリックして、オニオンスキン機能を有効にすることができます。オニオンスキン機能がさらに強化されて、オニオンスキン範囲内の任意のオニオンスキンフレームを右クリックして、フレームを選択的に除外する(または含める)ことができるようになりました。 

オニオンスキン機能のメイン画面

次のいずれかの操作をおこないます。

  • オニオンスキンボタン をクリックして、オニオンスキン機能を有効または無効にします。有効になると、オニオンスキンの開始マーカーと終了マーカー(タイムラインヘッダーに表示)の間にあるすべてのフレームは、ドキュメントウィンドウでは 1 つのフレームとして重ねて表示されます。
  • オニオンスキンボタン  をクリックしてマウスボタンを押したままにすると、オプション(選択範囲、すべてのフレーム、アンカーマーカー、詳細設定など)が表示され、選択可能になります。
  • タイムライン内のオニオンスキンアイコン (ループアイコンの右にあるアイコン)を選択します。

このパネルのオニオンスキンパラメーターには、アウトラインモード、オニオンスキンの前/後フレームのカラー設定、アンカーマーカーなどの既存機能が含まれます。

  • キーフレームのみモード:オニオンスキン範囲内のキーフレームのみレンダリングされます。つまり、トゥイーンのフレーム間はスキップされます。
  • 開始不透明度:アクティブなフレームの片側に位置する最初のオニオンスキンフレームの不透明度。
  • 減少幅:オニオンスキンフレームごとの減少分の割合(パーセント)。
  • 制約:制約が有効な場合は、前のフレームと次のフレームの範囲が同じになります。ただし、ユーザーがタイムラインから範囲を編集する場合を除きます。

詳しくは、オニオンスキン機能の使用を参照してください。

このパネルのオニオンスキンパラメーターには、アウトラインモード、オニオンスキンの前/後フレームのカラー設定、アンカーマーカーなどの既存機能が含まれます。

·       キーフレームのみモード:オニオンスキン範囲内のキーフレームのみレンダリングされます。つまり、トゥイーンのフレーム間はスキップされます。

·       開始不透明度:アクティブなフレームの片側に位置する最初のオニオンスキンフレームの不透明度。

·       減少幅:オニオンスキンフレームごとの減少分の割合(パーセント)。

制約:制約が有効な場合は、前のフレームと次のフレームの範囲が同じになります。ただし、ユーザーがタイムラインから範囲を編集する場合を除きます。
オニオンスキン機能の詳細設定画面
詳細設定

A. 最初のオニオンフレームの不透明度 B. すべてのオニオンフレームを通した不透明度の減少幅 C. キーフレームのみを表示 D. アンカーマーカー 

複数フレームを編集

このボタンを使用すると、選択範囲内にある複数フレームのコンテンツを表示して編集できます。

複数フレームを編集」ボタンをクリックしてマウスボタンを押したままにすると、「選択範囲を編集」と「すべてのフレームを編集」が表示され、選択可能になります。クリックすると、複数フレーム編集モードが無効または有効になります。

複数フレームを編集

トゥイーンを作成

トゥイーンを作成アイコンをクリックしてマウスボタンを押したままにすると、オプションが表示され、選択可能になります。タイムラインでフレームスパンを選択し、トゥイーンを作成をクリックすると、前回選択したとおりにトゥイーンが作成されます。

トゥイーンの作成

タイムラインの表示の変更

デフォルトでは、メインドキュメントウィンドウの下にタイムラインが表示されます。表示位置を変更するには、タイムラインをドキュメントウィンドウから切り離し、別個のウィンドウに表示します。任意のパネルにドッキングすることもできます。タイムラインは非表示にすることもできます。

表示されるレイヤーとフレームの数を変更するには、タイムラインのサイズを変更します。タイムラインに含まれるレイヤー数が多くてすべてを一度に表示できない場合、残りのレイヤーを表示するには、タイムラインの右側のスクロールバーを使用します。

ws_timeline_gripper
タイムラインのドラッグ

  • ドキュメントウィンドウにドッキングされているタイムラインを移動するには、タイムラインの左上隅にあるタイトルバーのタブをドラッグします。

  • アプリケーションウィンドウにタイムラインをドッキングするには、ドキュメントウィンドウの上部または下部にタイトルバーのタブをドラッグします。

  • タイムラインを別のパネルにドッキングするには、タイムラインのタイトルバータブを目的の場所にドラッグします。タイムラインが別のパネルにドッキングしてしまうのを防ぐには、Control キーを押しながらドラッグします。青いバーが表示されたパネルがタイムラインのドッキング先となります。

  • タイムラインパネルにあるレイヤー名のフィールドの長さを変更するには、レイヤー名とタイムラインのフレーム部との間にあるバーを左右にドラッグします。

タイムラインビューのカスタマイズ

  1. フレーム表示ポップアップメニューを表示するには、タイムラインの右上隅にある「フレーム表示設定」をクリックします。

  2. 必要に応じて次のオプションを選択します。

    • レイヤーのサイズを変更するには、「大」、「中」、「小」のいずれかを選択します(フレームの幅を「大」に設定すると、サウンド波形の詳細を表示するときに便利です)。
    • 各フレームのコンテンツのサムネールを、タイムラインフレームに収まるように表示するには、「プレビュー」を選択します。各コンテンツの見かけ上のサイズは実際と異なる場合があり、より大きな画面スペースが必要になります。
    • タイムラインコントロールを上部または下部に移動するには、それぞれ「ヘッダー上」または「ヘッダー下」を選択します。
    • タイムラインをズームインまたはズームアウトするには、タイムラインビューのサイズを変更スライダバーを使用します。
    タイムラインがヘッダーの場合
    タイムラインがヘッダーの場合
    タイムラインがフッターの場合
    タイムラインがフッターの場合

タイムラインでのレイヤーの高さの変更

  1. 次のいずれかの操作をします。

    • タイムラインヘッダーのハンバーガーメニューをクリックします。「」、「」、「」のいずれかを選択します。

      タイムラインで、レイヤー名の左にあるアイコンをダブルクリックします。

    • レイヤー名を右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、コンテキストメニューから「プロパティ」を選択します。

    • タイムラインでレイヤーを選択し、修正/タイムライン/レイヤープロパティを選択します。

    レイヤーの高さ(低)
    レイヤーの高さ(低)
    レイヤーの高さ(高)
    レイヤーの高さ(高)
  2. レイヤープロパティダイアログボックスで、「レイヤーの高さ」の値を選択し、「OK」をクリックします。

レイヤーのカラー設定と固定

レイヤー名のすぐ後に表示されるドットをクリックして、レイヤーを固定したり色を設定したりして簡単に識別できるようにすることができます。有効にすると、レイヤーのアウトラインカラーで下線がレイヤー全体に表示され、レイヤーをすぐ認識できるようになります。 

レイヤーのカラー設定

レイヤーの不透明度の設定

次のいずれかの操作をおこないます。

  • タイムラインの目のアイコンの列で Shift キーを押しながらクリックして、可視性を不透明に設定します。
  • タイムラインで、レイヤー名の左にあるアイコンをダブルクリックします。
  • レイヤー名を右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、コンテキストメニューから「プロパティ」を選択します。 レイヤープロパティダイアログボックスで、可視性/不透明度を選択します。
  • レイヤー名を右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、「その他の透明を表示」を選択します。

タイムラインパネルのサイズの変更

  • タイムラインがメインアプリケーションウィンドウにドッキングされている場合は、タイムラインとステージ領域を区切るバーをドラッグします。

  • タイムラインがメインアプリケーションウィンドウにドッキングされていない場合は、右下隅をドラッグするか(Windows)、右下隅のサイズボックスをドラッグします(Mac OS)。

タイムラインの上部の青い再生ヘッドは、ステージで表示中の現在のフレームを表し、ドキュメントの再生に合わせて移動します。タイムラインヘッダーには、アニメーションのフレーム番号が表示されます。特定のフレームの状態をステージに表示するには、タイムライン内のそのフレームまで、再生ヘッドを移動します。

大量のフレームを処理する場合、特定のフレームを表示するには、再生ヘッドをタイムラインに沿って移動します。

  • フレームに移動するには、タイムラインヘッダーで目的のフレームの位置をクリックするか、その位置まで再生ヘッドをドラッグします。

  • 現在のフレームをタイムラインの中央に配置するには、タイムラインの下部にある中央のフレームボタンをクリックします。
  • ループセクションにドラッグするだけでループ範囲を作成できるようになりました。これにより、選択範囲にあるフレーム(ムービーまたはビデオ)を書き出すことができます。
  • タイムラインで「ループ」オプションをオンにすると、他のアニメーションに沿ったフレームの範囲内でストリームオーディオをループすることもできます。
ループオプション
ループ

時間とフレームの表示

タイムラインには、フレーム番号と秒数が並んで表示されます。そのため、フレームから時間への換算が容易で、アニメーションの制作中にフレーム/秒(fps)値の設定を常に意識することができます。 

次のスクリーンショットは、20 フレーム/秒(fps)のタイムラインを示しています。

display-of-time
時間とフレームの表示

アニメーションの速度の管理

フレームスパンの伸縮や時間間隔に基づくアニメーションによって、アニメーションの速度を管理できます。また、時間コントロールを使用してアニメーションを伸縮できます。 

フレームスパンの伸縮

アニメーションの速度を変更しなくても、アニメーションのフレーム数/秒(fps)を変更できます。時間はそのままにして fps を変更するには、「フレームスパンを伸縮」オプションを使用します。 

scale-frame-spans
フレームスパンを伸縮するオプション

時間間隔に基づくアニメーション

フレームスパンを 1 秒2 秒3 秒または任意の間隔に変更できます。この機能は、クラシックトゥイーンスパン、シェイプトゥイーンスパン、モーショントゥイーンスパン、キーフレームスパンまたは空白のキーフレームスパンに有効です。

custom-frame-by-frame
特定の時間間隔に基づくカスタムのフレームアニメーション

修正メニューの「フレーム単位のアニメーションに変換」オプションを使用できます。キーボードショートカットダイアログボックスで、これらのタスクを実行するためのキーボードショートカットを割り当てることもできます。

タイムラインのコントロールを使用したアニメーションの伸縮

フレームスパンを拡張」フィールドに目的のフレーム数を入力することで、選択したフレームのフレームデュレーションを延長できるようになりました。選択したフレームのデュレーションは、「フレームスパンを拡張」に入力したフレーム数だけ増加します。

タイムラインで選択したスパンの時間を伸縮することができます。タイムラインでフレームスパンを選択し、選択したスパンの右端を前後にドラッグします。タイムライン内のフレームが自動的に調整されます。

タイムラインでスパンをドラッグして、アニメーションを複数回(x2、x3 など)複製できます。また、フレームを伸ばした後で通常の位置まで縮めることもできます。 

タイムラインでフレームを選択し、クリックして、選択したフレームの強調表示された右端をドラッグします。

frameselection_rightborder
フレームの選択と境界線

ドラッグしている間は、次のスクリーンショットに示すように、x2x3 など、アニメーションを複数回表示できます。

stretchselectedframes
ドラッグ中の延長フレームの表示

次のスクリーンショットでは、x2 の倍数で延長されたスパンが表示されています。x2 は、選択したスパンの倍のサイズです。x3 は、スパンの元のサイズの 3 倍です。

stretchedspans
ドラッグ後の延長スパン

フレームデュレーションは、「フレームスパンを拡張」フィールドに目的の数を入力して延長できるようになりました。選択したフレームのデュレーションは、「時間スパンを拡張」に入力したフレーム数だけ増加します。

キーフレームのナビゲーション

1 フレーム戻すまたは 1 フレーム進めるボタンをクリックして、前または次のフレームに移動できるようになりました。また、1 フレーム戻すまたは 1 フレーム進めるボタンをクリックしてマウスボタンを押したままにすると、それぞれ、最初または最後のフレームに移動できます。

再生ボタンをクリックすると、アニメーションのプレビューを表示できます。

VCR コントロール

制御メニューを使用して、アクティブなレイヤー上のキーフレーム間を移動できます。Alt + . キーまたは Alt + , キーを使用して、それぞれタイムライン上の次のキーフレームまたは前のキーフレームに移動することもできます。

キーボードショートカットが割り当てられたキーフレームナビゲーションオプション
キーボードショートカットが割り当てられたキーフレームナビゲーションオプション

レイヤー上の左右のナビゲーションコントロールを使用して、アクティブなレイヤー上のキーフレーム間を移動できます。また、メニューやキーボードショートカットも使用できます。 

navigation-controls
レイヤー上に左右のナビゲーションコントロールが表示されているタイムライン

注意:

ページナビゲーション用のショートカットを使用できます(例えば、戻る場合は Alt + Shift + , キー、進む場合は Alt + Shift + . キー)。

フレームとキーフレームの挿入

キーフレーム、空白キーフレームおよびフレームは、タイムライン上のボタンをクリックするだけで追加できます。キーフレームアイコンをクリックしてマウスボタンを押したままにすると、オプションが表示され、選択可能になります。タイムラインでフレームを選択し、キーフレームアイコンをクリックして、前回選択したとおりにフレーム、キーフレーム、空白キーフレームのいずれかを挿入します。

タイムラインパネルでキーフレームまたは空白キーフレームを挿入すると、視覚的なフィードバックが表示されるようになりました。かすかな輝きの場合は、操作が実行されたことを示します。

キーフレームを作成

タイムラインパネルでキーフレームまたは空白キーフレームを挿入すると、視覚的なフィードバックが表示されるようになりました。かすかな輝きの場合は、操作が実行されたことを示します。

「アクティブレイヤーのみ」モード

タイムラインビューアイコンが変更され、「アクティブレイヤーのみ」という新しいモードが追加されました。タイムラインにアクティブレイヤーだけを表示するには、「タイムラインビュー」オプションをクリックしてマウスボタンを押したままにして、「アクティブレイヤーのみ」を選択します。

ステージからのタイムライン全体のパン

  • 手のひらツールを使用してタイムラインを水平方向にスライドさせることもできるようになりました。
  • 新しいタイムスクラブツールを使用して、ステージからタイムラインをスクラブできます。このツールは、ツールパネルでは手のひらツールと同じグループに属しています。スペースバー + T のキーボードショートカットを使用して、このツールを一時的に有効にすることもできます。左または右にドラッグすると、パンした方向のタイムラインが表示されます。 
scrub-tool
タイムスクラブツールの表示

カスタマイズ可能なタイムラインツールバー

カスタマイズ可能なタイムラインを使用すると、タイムラインツールバーに表示されるアクションボタンを選択できます。タイムラインのハンバーガーメニューで、「タイムラインツールをカスタマイズ」をクリックします。

A - タイムラインハンバーガーメニュー B - タイムラインツールバーをカスタマイズするためのメニューオプション
A - タイムラインハンバーガーメニュー B - タイムラインツールバーをカスタマイズするためのメニューオプション

タイムラインツールバーから追加または削除された可能性のあるツールバーボタンを含むパネルが表示されます。パネルの外側の任意の場所をクリックして、パネルを閉じます。パネルが開いている場合、タイムラインツールバーに表示されているボタンがパネルで選択されます。ボタンの選択を切り替えるには、適切なボタンをクリックします。変更は、直ちにタイムラインツールバーに表示されます。 

タイムラインツールパネル
A - ツールパネル B - フレームボタングループ C - トゥイーンボタングループ D - リセット

タイムラインツールバーには、単一のボタンにグループ化されたいくつかのオプションがあります。ボタンにグループ化されたすべてのオプションを表示するには、ボタンをクリックしてマウスボタンを押したままにします。

例えば、キーフレームを挿入またはフレームグループボタンには、グループ化された次の 4 つのオプションがあります。

  • キーフレーム
  • 空白キーフレーム
  • フレーム
  • 自動キーフレーム

ツールバーパネルでは、前述のオプションがグループ化されたボタンおよび個別のボタンとして表示されます。グループボタンが選択されている場合、そのグループの個別のボタンが自動的に選択解除されます。また、グループの任意の個別のボタンが選択されている場合、グループボタンが選択解除されます。

ツールパネルには、2 つのグループがあります。1 つはキーフレームまたはフレームの挿入用で、もう 1 つはトゥイーンの挿入用です。

ツールパネルのボタンには、ペアで選択および選択解除されるものがあります。例えば、キーフレームに戻る/進むためのボタンや、1 フレーム戻る/進むためのボタンです。

設定パネルの変更を破棄してタイムラインツールバーをデフォルトの状態に戻すには、「タイムラインコントロールをリセット」をクリックします。

タイムラインのカスタマイズ方法を学習するためのビデオを視聴してください。

タイムラインのカスタマイズ方法を学習するためのビデオを視聴してください。

次のステップ

タイムラインの使い方およびパーソナライズ方法について説明しました。次に、アセットパネルを使用したアニメーションの作成方法について学習できます。