Animate でのタイムラインレイヤーの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

レイヤーの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

レイヤーのコピー&ペースト（CS5.5 のみ）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

高度なレイヤーの使用

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

• レイヤーエフェクト
• レイヤー深度  
• レイヤーのペアレンティング
• カメラ

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

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

getchildbyname("symbol1");

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

Layer=getchildbyname("L1");

Layer.getchildbyname("symbol1");

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

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

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

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

レイヤーエフェクトの適用

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

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

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

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

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

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

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

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

カラー効果の使用

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

ブレンドモードの使用

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

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

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

レイヤーエフェクトを使用したアニメーションの強化方法

レイヤー深度を適用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AS3 のレイヤー深度 API

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

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

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

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

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

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

親レイヤーと子レイヤー

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

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

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

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

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

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

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

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

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

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

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

ペアレンティングでの拡大・縮小、傾斜および反転のサポート

Animate 2022 では、レイヤーペアレンティングが強化され、親オブジェクトの位置および回転プロパティに加えて、拡大・縮小、傾斜、および反転プロパティを伝達します。デフォルトでは、すべてのプロパティが伝達されますが、拡大・縮小、傾斜および反転の伝達は、次に示すように、タイムラインパネルの「親子関係ビューを表示」ボタンを長押しすると表示できるペアレンティングポップアップから、オフまたはオンにできます。

さらに、自由変形ツールを使用して変形する場合は、修飾キーを使用して「拡大・縮小、傾斜および反転を伝達」設定を一時的に切り替えることもできます。この設定を一時的にオーバーライドするには、アクセント（`）キーを押しながら自由変形ツールでオブジェクトを拡大・縮小または傾斜させます。これは、新しくサポートされたこれらのプロパティの伝達動作を一時的に切り替える場合に便利です。

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