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

レイヤーの作成と整理

レイヤーを使用すると、ドキュメント内のアートワークを整理できます。1 つのレイヤーにあるオブジェクトの描画や編集をしても、他のレイヤーのオブジェクトに影響しません。レイヤー上に何もないステージ領域では、その下にあるレイヤーを見ることができます。

レイヤーまたはフォルダーで描画、ペイントまたは修正をおこなうには、対象となるレイヤーをタイムラインで選択してアクティブにします。タイムライン内のアクティブなレイヤーやフォルダーには、名前の隣に鉛筆のアイコンが表示されます。一度に複数のレイヤーを選択することは可能ですが、同時にアクティブにできるのは 1 つのレイヤーだけです。

Animate ドキュメントを新たに作成した場合、含まれるレイヤーは 1 つだけです。ドキュメント内のアートワーク、アニメーション、その他のエレメントを整理するには、レイヤーを追加します。レイヤーは、表示/非表示の切り替え、ロック/ロック解除の切り替え、並べ替えを行うことができます。作成できるレイヤー数は、コンピューターのメモリ容量によって制限されます。レイヤーを追加しても、パブリッシュされた SWF ファイルのファイルサイズが大きくなることはありません。レイヤー内にオブジェクトを配置することでのみファイルサイズが大きくなります。

レイヤーを整理および管理するには、レイヤーフォルダーを作成し、その中にレイヤーを配置します。タイムラインでは、ステージの表示内容を変更することなく、レイヤーフォルダーを開閉できます。サウンドファイル、ActionScript、フレームラベル、フレームコメント用に、それぞれ別個のレイヤーまたはフォルダーを使用します。別個のレイヤーを使用すると、各アイテムを簡単に見つけることができ、編集しやすくなります。

高度な効果を加えるには、描画や編集を簡単におこなったりマスクレイヤーを作成したりできる特殊なガイドレイヤーを使用します。

Animate では次の 5 つのタイプのレイヤーを使用できます。

  • 標準レイヤーには、fla ファイル内のほとんどのアートワークが含まれます。

  • マスクレイヤーには、下位レイヤーの選択した部分を非表示にするためのマスクとして使用するオブジェクトが含まれます。詳しくは、マスクレイヤーの使用を参照してください。

  • マスクされるレイヤーは、任意のマスクレイヤーの下にある、そのマスクレイヤーに関連付けられたレイヤーです。マスクされるレイヤーは、マスクで覆われていない部分だけが見えます。詳しくは、マスクレイヤーの使用を参照してください。

  • ガイドレイヤーには、他のレイヤー上にあるオブジェクトの配置をガイドするために使用できる線が含まれています。これは、他のレイヤー上にあるクラシックトゥイーンアニメーションのモーションをガイドするために使用することもできます。詳しくは、ガイドレイヤーおよびパスに沿ったクラシックトゥイーンモーションの作成を参照してください。

  • ガイドされるレイヤーは、ガイドレイヤーに関連付けられているレイヤーです。ガイドされるレイヤー上のオブジェクトは、ガイドレイヤー上の線に沿って配置またはアニメーション化できます。ガイドされるレイヤーには、静止アートワークとクラシックトゥイーンを含めることができますが、モーショントゥイーンを含めることはできません。

  • モーショントゥイーンレイヤーには、モーショントゥイーンでアニメーション化されたオブジェクトが含まれます。詳しくは、トゥイーンアニメーションについてを参照してください。

  • アーマチュアレイヤーには、インバースキネマティックボーンが割り当てられたオブジェクトが含まれます。詳しくは、インバースキネマティックアニメーションへのボーンツールの使用を参照してください。

標準レイヤー、マスクレイヤー、マスクされるレイヤーおよびガイドレイヤーには、モーショントゥイーンまたはインバースキネマティックボーンを含めることができます。これらのアイテムがこれらのレイヤーのいずれかに存在する場合は、レイヤーに追加できるコンテンツのタイプに制限があります。詳しくは、モーショントゥイーンおよびインバースキネマティックアニメーションへのボーンツールの使用を参照してください。

レイヤーの作成

レイヤーを作成すると、そのレイヤーは選択されたレイヤーの上に表示されます。新しく追加されたレイヤーがアクティブなレイヤーになります。

  1. 次のいずれかの操作をおこないます。
    • タイムラインの下部にある新規レイヤーボタン  をクリックします。

    • 挿入/タイムライン/レイヤーを選択します。

    • タイムラインでレイヤー名を右クリック(Windows)または Control キーを押しながらクリック(Mac OS)して、コンテキストメニューから「レイヤーを挿入」を選択します。

レイヤーフォルダーの作成

  1. 次のいずれかの操作をおこないます。
    • タイムラインでレイヤーまたはフォルダーを選択し、挿入/タイムライン/レイヤーフォルダーを選択します。

    • タイムラインでレイヤー名を右クリック(Windows)または Control キーを押しながらクリック(Mac OS)して、コンテキストメニューから「フォルダーの挿入」を選択します。選択したレイヤーまたはフォルダーの上に、新しいフォルダーが表示されます。

    • タイムラインの下部にある新規フォルダーアイコン をクリックします。選択したレイヤーまたはフォルダーの上に、新しいフォルダーが表示されます。

レイヤーとレイヤーフォルダーの整理

ドキュメントを整理するには、タイムラインのレイヤーとフォルダーを再配置します。

レイヤーフォルダーでは、ツリー構造でレイヤーを配置してワークフローを整理できます。ステージに表示されるレイヤーに影響を与えることなく、フォルダー内のレイヤーを確認するには、フォルダーを開閉します。フォルダーには、レイヤーおよび他のフォルダーを格納することができるので、コンピューターでファイルを整理するのと同じ感覚でレイヤーを整理できます。

タイムラインのレイヤーコントロールを操作すると、フォルダー内のすべてのレイヤーに反映されます。例えば、レイヤーフォルダーをロックすると、そのフォルダー内のすべてのレイヤーがロックされます。

  • レイヤーまたはレイヤーフォルダーを別のレイヤーフォルダーに移動するには、レイヤー名またはレイヤーフォルダー名を移動先のレイヤーフォルダー名にドラッグします。
  • レイヤーまたはフォルダーの順序を変更するには、タイムライン上のレイヤーまたはフォルダー(複数も可)を新しい位置にドラッグします。
  • フォルダーを開閉するには、フォルダー名の左側にある三角形をクリックします。
  • すべてのフォルダーを開閉するには、右クリック(Windows)または Control キーを押しながらクリック(Mac OS)して、「すべてのフォルダーを開く」または「すべてのフォルダーを閉じる」を選択します。

レイヤー名またはフォルダー名の変更

デフォルトでは、新しいレイヤーには作成順に名前が割り当てられます(レイヤー 1、レイヤー 2 など)。コンテンツがわかりやすい名前にするには、レイヤー名を変更します。

  1. 次のいずれかの操作をおこないます。
    • タイムラインのレイヤー名またはフォルダー名をダブルクリックして、新しい名前を入力します。

    • レイヤー名またはフォルダー名を右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、コンテキストメニューから「プロパティ」を選択します。「名前」ボックスに新しい名前を入力し、「OK」をクリックします。

    • タイムラインでレイヤーまたはフォルダーを選択し、修正/タイムライン/レイヤープロパティを選択します。「名前」ボックスに新しい名前を入力し、「OK」をクリックします。

レイヤーまたはフォルダーの選択

  1. 次のいずれかの操作をおこないます。
    • タイムラインでレイヤー名またはフォルダー名をクリックします。

    • 選択するレイヤーのタイムラインで、フレームをクリックします。

    • 選択するレイヤーに置かれたステージ上のオブジェクトを選択します。

    • 隣接するレイヤーやフォルダーを選択するには、タイムラインで Shift キーを押しながら名前をクリックします。

    • 離れているレイヤーやフォルダーを選択するには、タイムラインで Ctrl キー(Windows)または Command キー(Mac OS)を押しながら、名前をクリックします。

単一レイヤーからのフレームのコピー

  1. 1 つのレイヤー内でフレームの範囲を選択します。レイヤー全体を選択するには、タイムラインでレイヤー名をクリックします。
  2. 編集/タイムライン/フレームのコピーを選択します。

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

    フレームをペーストして上書きのワークフロー

    A. フレームを選択してコピーします。 B. ペースト先のフレームを右クリックして、「フレームをペーストして上書き」を選択します。 C. タイムライン上の同じ数のフレームが、ペーストされたフレームによって上書きされます。 

レイヤーフォルダーからのフレームのコピー

  1. フォルダー全体を選択するには、フォルダーを折りたたみ(タイムライン内のフォルダー名の左側にある三角形をクリック)、フォルダー名をクリックします。 

  2. 編集/タイムライン/フレームのコピーを選択します。

  3. 挿入/タイムライン/レイヤーフォルダーを選択して、フォルダーを作成します。

  4. 作成したフォルダーをクリックし、編集/タイムライン/フレームのペーストを選択します。

レイヤーまたはフォルダーの削除

  1. レイヤーまたはフォルダーを選択するには、タイムラインのレイヤーまたはフォルダーの名前をクリックするか、レイヤー内の任意のフレームをクリックします。
  2. 次のいずれかの操作をおこないます。
    • タイムラインのレイヤーの削除ボタンをクリックします。

    • 削除するレイヤーまたはフォルダーをレイヤーの削除ボタンまでドラッグします。

    • レイヤー名またはフォルダー名を右クリック(Windows)または Control キーを押しながらクリック(Mac OS)して、コンテキストメニューから「レイヤーを削除」を選択します。

    注意:

    レイヤーフォルダーを削除すると、フォルダー内のレイヤーおよびそのコンテンツもすべて同時に削除されます。

レイヤーまたはフォルダーのロックまたはロック解除

  • レイヤーまたはフォルダーをロックするには、名前の右側にあるカギアイコンの列をクリックします。レイヤーまたはフォルダーのロックを解除するには、カギアイコンの列を再度クリックします。

  • すべてのレイヤーとフォルダーをロックするには、カギのアイコンをクリックします。すべてのレイヤーとフォルダーのロックを解除するには、カギのアイコンを再度クリックします。

  • 複数のレイヤーまたはフォルダーをロックまたはロック解除するには、カギアイコンの列をドラッグします。

  • 他のすべてのレイヤーまたはフォルダーをロックするには、カギアイコンの列を Alt キーを押しながらクリック(Windows)するか、Option キーを押しながらクリック(Mac OS)します。すべてのレイヤーまたはフォルダーのロックを解除するには、もう一度、カギアイコンの列を Alt キーを押しながらクリック(Windows)するか、Option キーを押しながらクリック(Mac OS)します。

レイヤーのコピー&ペースト(CS5.5 のみ)

タイムライン内のレイヤー全体およびレイヤーフォルダー全体をコピーして、同じタイムラインや別のタイムラインにペーストできます。どのタイプのレイヤーでもコピーできます。

レイヤーをコピー&ペーストすると、コピーされたレイヤーのレイヤーフォルダー構成が保存されます。

  1. レイヤー名をクリックして、タイムライン内のレイヤーを選択します。連続するレイヤーを選択するには、Shift キーを押しながらクリックします。連続していない複数のレイヤーを選択するには、Ctrl キー(Windows)または Command キー(Mac OS)を押しながらクリックします。

  2. 編集/タイムライン/レイヤーをコピーまたはレイヤーをカットを選択します。レイヤーを右クリックし、コンテキストメニューから「レイヤーをコピー」または「レイヤーをカット」を選択することもできます。

  3. ペースト先のタイムライン内で、レイヤーをペーストする位置のすぐ下のレイヤーを選択します。

  4. 編集/タイムライン/レイヤーをペーストを選択します。

タイムライン内の選択したレイヤーの上に、ペーストしたレイヤーが表示されます。レイヤーフォルダーを選択した場合は、ペーストしたレイヤーはフォルダーの内部に表示されます。

レイヤーをマスクレイヤーまたはガイドレイヤー内に配置するには、最初にマスクレイヤーまたはガイドレイヤーの下のレイヤーを選択してから、ペーストをおこなう必要があります。マスクレイヤーまたはガイドレイヤーの下には、マスクレイヤー、ガイドレイヤーおよびフォルダーレイヤーはペーストできません。

また、レイヤーを選択し、編集/タイムライン/レイヤーを複製を選択して、レイヤーを複製することもできます。複製したレイヤーのレイヤー名には「コピー」の文字が付加されます。

複数のレイヤーへのプロパティの設定

  1. Animate で、FLA ファイルを作成するか、既存の FLA ファイルを開きます。

  2. 変更するプロパティのあるレイヤーを複数選択し、右クリックして「プロパティ」を選択します。

  3. レイヤープロパティダイアログで、プロパティを変更します。

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

レイヤーまたはフォルダーの表示または非表示

タイムラインでレイヤー名やフォルダー名の横に赤の × が表示されている場合、そのレイヤーまたはフォルダーは非表示になっています。パブリッシュ設定で、SWF ファイルをパブリッシュするとき、非表示レイヤーを含めるかどうかを選択することができます。

  • レイヤーまたはフォルダーを非表示にするには、タイムラインでレイヤー名またはフォルダー名の右にある目のアイコンの列をクリックします。そのレイヤーまたはフォルダーを表示するには、再度クリックします。

  • タイムラインのすべてのレイヤーおよびフォルダーを非表示にするには、目のアイコンをクリックします。すべてのレイヤーとフォルダーを表示するには、目のアイコンをもう一度クリックします。

  • 複数のレイヤーまたはフォルダーを表示または非表示にするには、目のアイコンの列全体をドラッグします。

  • 現在のレイヤーまたはフォルダー以外のレイヤーおよびフォルダーをすべて非表示にするには、Alt キー(Windows)または Option キー(Mac OS)を押しながら、目のアイコンの列をクリックします。すべてのレイヤーおよびフォルダーを表示するには、再度 Alt キーまたは Option キーを押しながらクリックします。

アウトラインによるレイヤーのコンテンツの表示

オブジェクトがどのレイヤーに属しているかを区別するには、1 つのレイヤーにあるすべてのオブジェクトを、カラー付きのアウトラインで表示します。

  • レイヤーにあるすべてのオブジェクトをアウトラインで表示するには、そのレイヤー名の右にあるアウトラインの列をクリックします。アウトライン表示を無効にするには、アウトラインの列を再度クリックします。

  • すべてのレイヤーにあるオブジェクトをアウトラインで表示するには、アウトラインアイコンをクリックします。すべてのレイヤーのアウトライン表示を無効にするには、アウトラインアイコンを再度クリックします。

  • 現在のレイヤーを除くすべてのレイヤーのオブジェクトをアウトラインとして表示するには、Alt キー(Windows)または Option キー(Mac OS)を押しながら、アウトラインの列をクリックします。すべてのレイヤーのアウトライン表示を無効にするには、Alt キーまたは Option キーを押しながら、アウトラインの列を再度クリックします。

注意:

レイヤー上のモーションパスもレイヤーのアウトラインカラーを使用します。

レイヤーのアウトラインカラーの変更

  1. 次のいずれかの操作をおこないます。
    • タイムラインで、レイヤー名の左にあるアイコンをダブルクリックします。

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

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

  2. レイヤープロパティダイアログで、「アウトラインカラー」パレットをクリックし、新しいカラーを選択してから「OK」をクリックします。

レイヤーとレイヤーフォルダーの表示

レイヤーまたはフォルダーの表示または非表示

タイムラインでレイヤー名やフォルダー名の横に赤の × が表示されている場合、そのレイヤーまたはフォルダーは非表示になっています。パブリッシュ設定で、SWF ファイルをパブリッシュするとき、非表示レイヤーを含めるかどうかを選択することができます。

  • レイヤーまたはフォルダーを非表示にするには、タイムラインでレイヤー名またはフォルダー名の右にある目のアイコンの列をクリックします。そのレイヤーまたはフォルダーを表示するには、再度クリックします。

  • タイムラインのすべてのレイヤーおよびフォルダーを非表示にするには、目のアイコンをクリックします。すべてのレイヤーとフォルダーを表示するには、目のアイコンをもう一度クリックします。

  • 複数のレイヤーまたはフォルダーを表示または非表示にするには、目のアイコンの列全体をドラッグします。

  • 現在のレイヤーまたはフォルダー以外のレイヤーおよびフォルダーをすべて非表示にするには、Alt キー(Windows)または Option キー(Mac OS)を押しながら、目のアイコンの列をクリックします。すべてのレイヤーおよびフォルダーを表示するには、再度 Alt キーまたは Option キーを押しながらクリックします。

アウトラインによるレイヤーのコンテンツの表示

オブジェクトがどのレイヤーに属しているかを区別するには、1 つのレイヤーにあるすべてのオブジェクトを、カラー付きのアウトラインで表示します。

  • レイヤーにあるすべてのオブジェクトをアウトラインで表示するには、そのレイヤー名の右にあるアウトラインの列をクリックします。アウトライン表示を無効にするには、アウトラインの列を再度クリックします。

  • すべてのレイヤーにあるオブジェクトをアウトラインで表示するには、アウトラインアイコンをクリックします。すべてのレイヤーのアウトライン表示を無効にするには、アウトラインアイコンを再度クリックします。

  • 現在のレイヤーを除くすべてのレイヤーのオブジェクトを表示するには、Alt キー(Windows)または Option キー(Mac OS)を押しながら、アウトラインの列をクリックします。すべてのレイヤーのアウトライン表示を無効にするには、Alt キーまたは Option キーを押しながら、アウトラインの列を再度クリックします。

レイヤーのアウトラインカラーの変更

  1. 次のいずれかの操作をおこないます。
    • タイムラインで、レイヤー名の左にあるアイコンをダブルクリックします。

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

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

  2. レイヤープロパティダイアログで、「アウトラインカラー」パレットをクリックし、新しいカラーを選択してから「OK」をクリックします。

注意:

レイヤー上のモーションパスもレイヤーのアウトラインカラーを使用します。

レイヤーの透明部分の設定

  1. Animate で、fla ファイルを作成するか、既存の fla ファイルを開きます。

  2. タイムラインにある目のアイコンの列で Shift キーを押しながらクリックして、可視性を透明に設定します。

    注意:

    Shift キーを押しながらクリックしても、非表示レイヤーには影響しません。

    レイヤーの透明部分の設定
    レイヤーの透明部分の設定

  3. 次のいずれかのオプションを使用して、レイヤーの透明度を設定します。

    • 任意のレイヤーを右クリックし、コンテキストメニューから「プロパティ」を選択します。レイヤープロパティダイアログで、可視性/透明を選択します。
    • 任意のレイヤーを右クリックし、「その他の透明を表示」を選択します。
    レイヤープロパティ
    レイヤープロパティ

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

注意:

レイヤーの透明度は、非表示レイヤーには影響しません。 

高度なレイヤーの使用

Animate で高度なレイヤーモードを使用すると、タイムライン内のすべてのレイヤーはシンボルとしてパブリッシュされます。高度なレイヤーモードでは、次の機能にアクセスすることができます。

高度なレイヤーモードは、デフォルトで有効になっています。変更/ドキュメント設定を使用して高度なレイヤーを有効または無効にできます。変更を適用した後でデフォルトにするを選択し、後続のドキュメントや Animate セッション全体で現在の設定を保持します。

高度なレイヤーモード
高度なレイヤーモード

Animate のスクリプトでこれらのシンボルにアクセスする際は、レイヤーをオブジェクトとして使用して、それらのシンボルを呼び出す必要があります。例えば、高度なレイヤーを使用していない場合、次のサンプルのようなスクリプトを使用して、シンボルに直接アクセスできます。

getchildbyname("symbol1");

一方、高度なレイヤーを使用する場合、次のサンプルのようなスクリプトを使用し、レイヤーを介してシンボルにアクセスする必要があります。

Layer=getchildbyname("L1");

Layer.getchildbyname("symbol1");

高度なレイヤーを使用してシンボルにアクセスするサンプルコード(ドキュメントタイプが AS3 の場合):

Var Layer:MovieClip =MovieClip(getchildbyname("L1"));
Layer.getchildbyname("symbol1");

高度なレイヤーを使用してシンボルにアクセスするサンプルコード(ドキュメントタイプが HTML5 Canvas の場合):

Layer=this.getchildbyname("L1");
Layer.getchildbyname("symbol1");

次の図は、高度なレイヤーを使用する場合と使用しない場合について、スクリプトでシンボルにアクセスする方法を示しています。 

高度なレイヤーを使用する場合と使用しない場合のシンボルへのアクセス方法を示した図
高度なレイヤーを使用する場合と使用しない場合のシンボルへのアクセス方法を示した図

注意:

Animate で高度なレイヤーを使用すると、パブリッシュしたアニメーションプロジェクトのサイズが大きくなる場合があります。カメラまたレイヤー深度機能にアクセスできない場合は、高度なレイヤーがオンになっていることを確認してください。無効になっている場合、有効化して期待する動作を実現します。 

レイヤー効果の適用

フィルターとカラー効果はムービークリップのみに適用されます。高度なレイヤーを使用すると、フィルターやカラー効果を選択したフレームに適用できるようになりました。これにより、シェイプ、描画オブジェクト、グラフィックシンボルプなどを含むすべてのコンテンツに適用できます。レイヤー効果は、複数のテキストフレームでクラシック、シェイプ、および IK トゥイーンを使用してトゥイーンすることもできます。

目的のフレームを選択して、個別または複数のフレームにレイヤー効果を適用できます。また、レイヤー全体を選択してレイヤーのすべてのフレームでレイヤー効果を適用することもできます。レイヤー効果は、シンボルのタイムライン(ムービークリップやグラフィックシンボルなど)で適用したり、、およびすべてのシーンにわたって適用したりすることもできます。

注意:

レイヤー効果は高度なレイヤーモードがオンになっている場合にのみ適用できます。この機能を使用するには、ファイルに対して高度なレイヤーモードを明示的に有効にする必要があります。

フレームにフィルターの使用

特定のフレームにフィルターを適用するには、最初にフレームを選択します。プロパティインスペクターパネルは、フレーム固有のプロパティを読み込みます。フィルタードロップダウンリストの+アイコンをクリックします。

フレームフィルター
フレームフィルター

フレームでフィルターを適用すると、プロパティインスペクターは、次のスクリーンショットのように表示されます。 

要件に応じて、フィルターごとにプロパティを設定して、フレームレベルで適用できます。トゥイーンは、すべてのフレームフィルターに適用されます。 

プロパティインスペクターのフレームフィルタープロパティ
プロパティインスペクターのフレームフィルタープロパティ

注意:

レイヤー効果は ActionScript3 ドキュメントタイプでのみサポートされます。モーショントゥイーンとカメラレイヤーはレイヤー効果をサポートしていません。 

カラー効果の使用

特定のフレームにカラーエフェクトを適用するには、最初にフレームを選択します。プロパティインスペクターパネルは、フレームの固有のプロパティを読み込みます。プロパティインスペクターパネルから希望するカラープロパティを選択します。

カラー効果
カラー効果

ブレンドモードの使用

特定のフレームにブレンドモードを適用するには、 最初に フレームを選択して、フレームプロパティパネルの「表示」セクションに表示されるブレンドモードを選択します。

レイヤーまたはフレームに ブレンド を適用する場合、そのすべてのコンテンツ(シェイプ、描画オブジェクト、グラフィックシンボルを含む)に対して適用されます。1 つのレイヤー上のすべてのオブジェクトは、そのフレームに適用されたブレンドモードに応じて、他のレイヤーのオブジェクトとブレンドされます。

レイヤーブレンドモード

ブレンドモードについて詳しくは、ブレンドモードの適用を参照してください。

レイヤー深度を適用

アニメーターは、2D アニメーションの異なるプレーンにレイヤーを配置して、深度を表現することができます。 

レイヤー深度パネルを使用して、レイヤーの深度を動的に変更することができます。レイヤー深度を開くには、ウィンドウ/レイヤー深度をクリックします。

各レイヤーを表すレイヤー深度
各レイヤーを表すレイヤー深度

注意:

レイヤー深度の最小値と最大値を -5000 ~ 10000 の範囲内で設定できます。

上のスクリーンショットに示すように、レイヤー深度値は、特定のフレームの各レイヤー名の横に表示されます。

  • それぞれの値にマウスポインターを合わせ、クリックして、スライダーを右または左にドラッグします。
  • 深度を減らすには、スライダーを左にドラッグします。深度を増やすには、スライダーを右にドラッグします。 
  • 小さい正の値にすると近くにあるオブジェクト、大きい正の値にすると離れた位置にあるオブジェクトを表現できます。

レイヤー深度値は、作業しているアニメーションのいずれかのトゥイーンスパンでトゥイーンできます。 

レイヤー深度パネルでは、各レイヤーがそれぞれ異なる色付きの線で表されます。各レイヤーを表す色は、タイムラインで確認できます。 

色分けされた線を上下に移動して、各レイヤーのオブジェクトの深度を増減させることもできます。

  • レイヤー上のオブジェクトの深度を減らすには、そのレイヤーの線をクリックして上方向にドラッグします。
  • レイヤー上のオブジェクトの深度を増やすには、そのレイヤーの線をクリックして下方向にドラッグします。

レイヤー深度を適用したアニメーションと適用していないアニメーションを以下に示します。

レイヤー深度を適用していない場合
レイヤー深度を適用していない場合

レイヤー深度を適用した場合
レイヤー深度を適用した場合

レイヤー深度を適用したアニメーションを示す図:

カメラをマルチプレーンレイヤーで使用して、パララックスエフェクトを作成したり、プレーン上のコンテンツにズームしたりすることができます。また、カメラを特定のレイヤーにロックしたり、インタラクティブ API を使用して実行時にカメラエフェクトを適用したりすることもできます。詳しくは、カメラとレイヤー深度を使用したパララックスエフェクトの作成を参照してください。

注意:

レイヤー深度はメインタイムライン上でのみ使用できます。

レイヤー深度のサイズを保持

オブジェクトのサイズや位置に影響を与えずに、オブジェクトのレイヤー深度を変更できます。サイズ保持機能を使用にするには、レイヤー深度パネルの右上隅の「サイズを保持」ボタンをクリックします。

「サイズを保持」オプションは、2 つのモードで使用できます。

  • サイズを保持」ボタンをクリックし、目的のレイヤー深度を変更します。「サイズを保持」ボタンは自動で切り替わります。
  • Alt キーを押しながらレイヤー深度の値をドラッグすると、「サイズを保持」オプションが一時的に有効になります。
レイヤー深度のサイズを保持
レイヤー深度のサイズを保持

実行時でのレイヤー深度の適用

カメラ API を使用すると、実行時にオブジェクトにカメラを導入したり、エフェクトを適用したりすることもできます。詳しくは、実行時のインタラクティブカメラの使用を参照してください。

AS3 のレイヤー深度 API

API を使用して実行時にレイヤーを管理できます。例えば、実行時に、アニメーションに追加のレイヤーを導入したい場合や、アニメーションに含まれているいずれかのレイヤーの深度を減らしたい場合があります。 

メソッド

プロトタイプ

説明

setLayerZDepth

fl.Layer.setLayerZDepth(timeline,
layerName,zDepth)

fl.Layer.setLayerZDepth("layerName", 100);

特定のレイヤーの Z 深度の値を設定します。

getLayerZDepth

fl.Layer.getLayerZDepth(layerName) : zDepth

fl.Layer.getLayerZDepth("layerName");

特定のレイヤーの Z 深度の値を返します。

addNewLayer

fl.Layer.addNewLayer(layerName,
zDepth=0)

fl.Layer.addNewLayer("layerName",-80);

新規レイヤーをタイムラインに追加し、Z 深度を設定します。

removeLayer

fl.Layer.removeLayer(layerName)

fl.Layer.removeLayer("layerName");

タイムラインからレイヤーを削除します。

HTML カンバスのレイヤー深度 API

メソッド

プロトタイプ

説明

setLayerZDepth

AdobeAn.Layer.setLayerZDepth(layerName,
zDepth)

console.log(fl.Layer.setLayerZDepth
("layerName", 100));

特定のレイヤーの Z 深度の値を設定します。

getLayerZDepth

AdobeAn.Layer.getLayerZDepth(layerName)
:zDepth

console.log(fl.Layer.getLayerZDepth
("layerName"));

特定のレイヤーの Z 深度の値を返します。

レイヤーのペアレンティング

Animate を使用すると、あるレイヤーを別のレイヤーの親にすることができます。レイヤーのペアレンティングを使用すると、アニメーションの 1 つのレイヤー/オブジェクトで他のレイヤー/オブジェクトを簡単に制御できます。アニメーションデザイナーやゲームデザイナーは、キャラクターの様々な部分の動きを制御できるので、アニメーション時間を高速化できます。

レイヤーのペアレンティングビューでは、高度なレイヤーを有効にする必要があります。デフォルトでは、新しいファイルに対して高度なレイヤーがオンになっています。タイムラインの左上隅にある階層シンボルアイコンをクリックすることで、レイヤーのペアレンティングビューを有効にできます。

レイヤーのペアレンティングを表示
レイヤーのペアレンティングを表示

注意:

ワープしたオブジェクトのペアレンティングは、子レイヤーオブジェクトの変形点がペアレンティングレイヤーオブジェクト上にある場合のみ機能します。

親レイヤーと子レイヤー

ペアレンティングビューでは、レイヤー 1 を レイヤー 2 の上に移動すると、レイヤー 1 が親であるレイヤー 2 の子になります。子レイヤーのオブジェクトは、独自のプロパティを保持するのとは別に、親レイヤーのオブジェクトの位置と回転を継承します。そのため、親を移動または回転すると、子も親に連動して移動または回転します。複数の親子関係を作成して階層を作成できます。

レイヤーのペアレンティング

レイヤーハンドル(カラーヘッド)をクリックして、他のレイヤー上にドラッグすることで、1 つのレイヤーを別のレイヤーに接続できます。また、レイヤー名の隣にある横長のスペースで任意の場所をクリックし、他のレイヤーにドラッグできます。また、どれか1 つのレイヤーをクリックするか、ポップアップリストから親レイヤーを選 択できます。 

線をクリックしてドラッグしようとするとすぐに、レイヤーのカラーヘッドのそばに点線が表示されます。クリック&ドラッグ操作を放すとすぐに、2 つのレイヤー間の親子接続が確立します。

親レイヤーを設定
親レイヤーを設定

レイヤーのペアレンティングビュー階層の一番左のカラーヘッドは、親を表します。親子階層は、左から右に移動します。

レイヤーのカラーヘッドをクリックし、点線をドラッグしてからリリースすることで、接続を削除することもできます。また、横長のスペースをクリックして、以下のスクリーンショットのように、親を削除をクリックできます。

親を削除
親を削除

下図では、レイヤーのペアレンティングを使用する前と後のレイヤー階層と位置の表示を確認できます。

レイヤーのペアレンティングの前と後
レイヤーのペアレンティングの前と後

次に、人間のボディパーツ用のレイヤーのペアレンティングの使用を表すサンプル図を示します。

レイヤーのペアレンティングを使用したボディパーツのサンプル図
レイヤーのペアレンティングを使用したボディパーツのサンプル図

上図では、次のようになります。

  • Torso(胴体)は、ボディのすべてのパーツの親。
  • Legs_thigh(太もも)は、Sneaker(スニーカー)、Leg_lower(下脚)、Ankle(足首)など、その他の様々なパーツの親。
  • Head(頭)は、親である Neck(首)の子で、Torso は Neck の親。そのため、ボディから離れて首を動かすといつでも、頭部も連動して動きます。
注意:

ペアレンティングは、子レイヤーの各キーフレームに対して設定する必要のあるフレームプロパティです。キーフレーム上で、子レイヤーを解除して他の親レイヤーに再設定できます。

レイヤーのペアレンティングのチュートリアル

レイヤー間に親子階層構造を作成し、簡単に構成を操作する方法を学びます。

その他の関連ヘルプ

アドビのロゴ

アカウントにログイン