コンテンツにスキップ

Assets: Masking · Path · Compile

Assets 段階は、動画で各ページがどのように「色づけられるか」を計算します。三つのタブが順番に実行され — Masking → Path → CompileAbout タブがアプリ内でパイプラインを説明してくれます。すべてがローカルで無料です。各タブで Run All(または欠けているものだけを埋める Run Rest がある場所ではそれ)を押すだけで、たいていは十分です。

Assets 段階

Masking は、各ページの どの領域 が色を受け取るかを決めます。

コントロール 動作
Remove White トグル (デフォルト: オン) 白い紙の背景をマスクから除外し、色が絵の内側だけに乗るようにします。
Object Mask トグル (デフォルト: オフ) メインオブジェクトだけを切り分け、背景全体を黒く塗りつぶします — 対象だけをアニメーションさせたいページ用です。? ボタンが前後比較の説明を見せてくれます。
Run All すべてのページをマスキングします(既存のマスクがあれば上書き前に確認します)。

完成したマスクをクリックすると Masking Editor が開きます — 全画面の補正ツールで、フラッドフィル(領域をクリックすると黒く塗る)、ホイールズーム、右ドラッグでのパン、Zoom to Fit (F) / 1:1 (R)、そして元に戻す Reset を備えています。マスクが背景の隙間へにじみ出たときに使ってください — たいていはクリック数回で解決します。

夜空の背景が黒くマスキングされた Masking Editor

黄色いカードは、そのページのプロセス済みスケッチが無いという意味です — そのページの Sketch › Process を先に終えてください。

Path は、各マスクを実際の色塗りストロークに変えます。

コントロール 動作
Fill pattern ドロップダウン In & Out (デフォルト) — 領域の縁から内側へ塗り込んでいきます。丁寧な色鉛筆作業のような感触です。Spiral — 途切れずに続く渦巻き状の塗りで、また別の視覚的な個性です。
Run Rest / Run All 欠けているページだけ / 全ページのパスを生成します。

パス生成はアプリで最も重いローカル演算なので、コンピューターが忙しいと自動的に速度を調整します(空きメモリや CPU の余力が逼迫すると待機します) — 負荷のかかったコンピューターでは、項目が一瞬待機するのが見えることがあります。正常です。

完成した項目をクリックすると、パスを確認できます — 虹色のレンダリングが、ページ全体のストローク順序を可視化したものです:

虹色のストローク順序で可視化されたパス SVG

Run All 一回で、マスクとパスが、動画レンダラーが使用する最終アニメーションアセットにまとめられます。コンパイル済みのプレビューをクリックすると、構成を全画面で確認できます — アニメーションがページをどう塗っていくかを見せる、色塗り途中のスナップショットです:

コンパイル済みアセットのプレビュー — ストロークが領域を埋めていく色塗り途中の状態

このグリッドが埋まれば、Videos へ進む準備ができたということです。