シンボル内にキャラクターのアートワークをネストするときにアイマスクを保持する方法
Adobe Animateでキャラクターのアートワークをネストするときにアイマスクを保持するには、マスクレイヤーとマスク対象レイヤーのセット全体を新しいシンボルに移動します。その後、外側のインスタンスをアニメーション化する前に、内部のレイヤー関係、位置合わせ、再生設定を確認します。表示されているアートワークだけを選択しても、この設定全体は取り込めません。
このワークフローは、すでにマスクされた瞳やアニメーションする目の開閉部分を作成していて、組み立て済みの頭部をひとつの単位として移動、拡大縮小、回転したいキャラクター制作者向けです。Adobe Animateのシンボルとタイムラインのツールを使用します。
目をネストするとき、何を一緒に保持する必要がありますか？
各目の設定をひとつのパッケージとして扱います。開口部を定義するシェイプ、その開口部を通して表示されるアートワーク、そして両者の動きを制御するフレームです。Adobeでは、マスクレイヤーとマスク対象レイヤーを区別しています。マスク対象レイヤーには、対応するマスクで表示される部分だけが表示されます。こうしたレイヤー間の関係も、保持すべき設定の一部です。Adobe: Animateでタイムラインレイヤーを作成する
変換する前に、どのレイヤーがどの役割を担っているかを確認します。目の輪郭は単なる表示用アートワークで、別の塗りつぶされたシェイプが瞳のクリッピングを制御している場合があります。新しいシンボル内で見分けられるよう、レイヤーにわかりやすい名前を付けます。
たとえば、頭部のレイヤー構成は上から下に次のようになります。もう一方の目を個別に制御する必要がある場合は、その目に固有のレイヤーも同様に追加します。
| レイヤー | 役割 |
|---|---|
| まぶたと輪郭 | Normalレイヤー上の表示用アートワーク |
| 目の開口部 | 瞳の表示領域を定義するマスク |
| 瞳 | 「目の開口部」に関連付けられたマスク対象アートワーク |
| 白目 | Normalレイヤー上の表示用背景 |
| 頭部アートワーク | 残りの表示用頭部シェイプ |
この構成は推奨される出発点であり、必須のリグではありません。既存の目がすでに機能しているなら、まずその構造を保持します。再編成とネストを別々の工程に分けると、どの変更が問題を引き起こしたのか特定しやすくなります。
キャラクターのアートワークを格納するシンボルの種類は？
ネストしたアニメーションを親のタイムラインに従わせ、スクラブしながら確認したい場合は、グラフィックシンボルを使用します。アニメーションに独立したタイムラインが必要な場合は、ムービークリップを使用します。Adobeはどちらの動作も説明しているため、まばたきが止まって見える問題を調べる前に、意図する再生方法に合わせて選びます。Adobe: Animateでのシンボルの使用
特定のフレームに合わせてまばたきを行う頭部の動きには、グラフィックシンボルのコンテナが実用的な出発点です。独立してループするキャラクター要素には、ムービークリップが適している場合があります。どちらを選んでも、内部のマスク設定を保持する必要があることに変わりはありません。
ネストを使うと、頭部の動きと目のアニメーションを分けることもできます。BMCCの初期のAnimate教材では、頭部シンボル内にまばたきする目を作成し、目が独自のアニメーションを維持したまま頭部と一緒に動く例が示されています。この例はネストの手法を示すもので、マスクを使った目のチュートリアルではありません。BMCC: Adobe Animate: 歩行とまばたきのサイクル
既存のレイヤーをシンボルに変換するには？
構成を変更する前に、FLAの作業用コピーを別に保存します。元のフレーム範囲を記録し、参考となる3つのポーズ（完全に開いた状態、半分閉じた状態、完全に閉じた状態）を確認します。変換後に比較するための具体的な基準になります。
レイヤーをシンボルに変換コマンドが使えるAnimateのバージョンでは、タイムラインで対象のレイヤー名を選択し、右クリックしてそのコマンドを選びます。AdobeはAnimate 2021でこのレイヤー単位のワークフローを導入しました。すべてのアイマスク、その関連アートワーク、そして一緒に動かす頭部の残りのレイヤーも含めます。Adobe: 5分で初めてのアニメーションを作成 — Adobe Animate 2021が登場！
次の手順で進めます。
- 通常の表示用アートワークとしては見えないマスクレイヤーも含め、頭部のレイヤーセット全体を特定します。
- タイムラインでそれらのレイヤーを選択し、レイヤーをシンボルに変換を選びます。
- コンテナに
Character_Headのようなわかりやすい名前を付け、意図するシンボルの種類を選びます。 - 作成されたシンボルを開き、レイヤーとフレーム範囲を元のものと比較します。
- 外側のインスタンスに動きを加える前に、参考用の3つのポーズを確認します。
レイヤーをシンボルに変換と、選択したステージ要素を変換するコマンドとしてAdobeが説明している修正 > シンボルに変換は区別してください。既存のレイヤーアニメーションには、タイムライン構造を明示的に含められるレイヤー単位のコマンドから始めます。Adobe: Animateでのシンボルの使用
レイヤー単位のコマンドが使えない場合、Adobeはフレームをコピーする方法を説明しています。対象のレイヤーにまたがる必要なフレームをすべて選択し、フレームをコピーを選び、挿入 > 新規シンボルから空のムービークリップを作成して、1フレーム目にフレームをペーストします。これにより、コピーしたフレームとレイヤーが独立したアニメーションに移されます。置き換えたインスタンスを配置して確認するまでは、元のデータをそのまま残します。Adobe: ステージ上のアニメーションをムービークリップシンボルに変換する
シンボル内のアイマスクの関係を復元するには？
新しいコンテナの中で個々のシェイプを動かす前に、タイムラインを確認します。マスクは、それを通してアートワークを表示するレイヤーの上に配置します。Adobeのマスクの手順では、関連付けられたマスク対象レイヤーは、インデントと変化したアイコンで判別できます。作業画面でクリッピング効果を表示するには、マスクレイヤーとマスク対象レイヤーの両方をロックします。Adobe: Adobe Animateでマスクレイヤーを使用する方法
関連付けが失われている場合は、目の開口部レイヤーを対象の瞳レイヤーのすぐ上に置き、コンテキストメニューからマスクに設定します。レイヤープロパティのマスク対象設定を使って、ほかに関連付けるレイヤーを追加します。頭部のアートワークや装飾的な輪郭もクリップしたい場合を除き、それらは関連付けの外に置きます。Adobe: Adobe Animateでマスクレイヤーを使用する方法
マスクのジオメトリも確認します。Animateの標準的なレイヤーマスクでは塗りつぶされた領域を使います。線のスタイル、グラデーション、透明度では、エッジをぼかしたクリッピングは定義できません。そのため、線で描かれた目の輪郭をマスクとして機能させるには、適切な塗りつぶしの開口部が必要です。Adobe: Adobe Animateでマスクレイヤーを使用する方法
開いた状態のポーズが正しく見えたら、半分閉じた状態と完全に閉じた状態も確認します。最初のフレームで問題がないからといって、シーケンス全体でマスクと瞳の内容が一致しているとは限りません。
クリッピング、位置合わせ、タイミングの問題を見分けるには？
目を描き直す前に、次の順番で原因を調べます。これは、文書化されているレイヤーとシンボルの動作から導いた実用的な判断材料であり、すべての表示上の不具合に同じ原因があるという意味ではありません。
| 症状 | 最初に確認すること | 次の対応 |
|---|---|---|
| 瞳が開口部からはみ出す | 内部のマスクとマスク対象の関係、およびプレビュー時のロック | 関連付けを復元し、両方のレイヤーをロックする |
| 目は内部で揃っているが、頭部全体がずれている | 外側のインスタンスの位置 | 内部のアートワークを変更する前に、組み立てたインスタンスの位置を直す |
| 片方の目のパーツだけが内部でずれている | 問題が発生しているフレームでの、そのパーツの位置 | 元の参考ポーズと比較する |
| 親の中ではまばたきせず、内部では動作する | シンボルの種類、再生オプション、親に存在するフレーム数 | インスタンスの再生設定を確認する |
| 開いた状態のポーズは正しいが、後のポーズで問題が起きる | そのフレームでのマスクと瞳の内容 | 両者のフレーム範囲とキーフレームを比較する |
グラフィックインスタンスの場合は、プロパティ > ループを確認します。Adobeによると、再生方法にはループ、1回再生、単一フレームがあり、開始フレームも設定できます。単一フレームでは内部のポーズが意図的に固定されます。ループでは、インスタンスが占めるフレームの範囲でシーケンスが繰り返されます。マスクが機能していないと判断する前に、これらの設定を確認します。Adobe: Animateでのシンボルインスタンス、フレームピッカー、自動リップシンクの使用
位置合わせは、問題が起きている階層で修正します。ネストした頭部全体を動かす必要があるなら、外側のインスタンスを調整します。頭部内部で瞳だけに問題があるなら、その内部要素を確認します。両方の階層を同時に変更すると、元のポーズとの比較が役に立ちにくくなります。
作業を続ける前に、ネストしたキャラクターをどう確認すればよいですか？
組み立てた頭部を使って、短い確認作業を行います。まず頭部を動かさずに目のシーケンスを確認します。次に外側のインスタンスを動かし、同じポーズをもう一度確認します。こうすると、目の内部の問題とキャラクターを変形したことで生じた問題を切り分けられます。
一時的な変形には複製したテスト用インスタンスを使い、確認後に削除します。内部のアートワークを個別に試したい場合は、ライブラリのシンボルも複製します。シンボル定義を編集すると、そのインスタンスにも変更が反映されるためです。Adobe: Animateでのシンボルの使用
実際に使用する出力で、次の点を確認します。
- 開口部の端に向かって視線を動かしても、瞳がクリッピングされる。
- 目を半分閉じたとき、瞳のアートワークが意図せず細長く見えない。
- 目を完全に閉じたポーズでは、意図したアートワークだけが表示される。
- 頭部を動かすと、目のセットも一緒に動く。
- まばたきが意図したフレームで始まり、繰り返される。
必要な形式で短いサンプルを書き出し、同じポーズを確認します。違いがあれば、最初に問題が起きるフレームに戻り、上記の診断手順に従って調べます。原因を調査している間は、動作するネスト済みのバージョンを保持します。
内部の目の設定を編集可能な状態で保持でき、アニメーション全体でマスクの関係が維持され、組み立てた頭部が意図する出力で正しく動作すれば、作業は完了です。これらの確認が済めば、目を作り直さずに外側のキャラクターシンボルのアニメーションを続けられます。