GIF動画で書き順を伝える

文字、とりわけ古典などにみられる古い書跡をパソコンの画面で伝えることは、楽しい。単純にその書かれた順番を示すだけでときにはまったく新しい印象を与える。ここに、すでに何回となく触れてきた文字絵の「いぬ」を実例に記してみたい。（「江戸の犬は怒りっぽい」）

書き順を動画にという目的に特化したツールもいくつかあるようだ。ただ、AdobeのAfter Effectsには専用の機能が用意されており、やはりパワフルなのだ。ちょっと時間をかけて、その使い方を模索した。そのプロセスなどを備忘にメモしておく。

方法の基本は、文字などの線をマスクで隠し、それを時間軸において、マスクの透明度を順に0にして線を見せる、というものだ。画面上にマスクを自由に設けるために、対象の画像に対して事前の処理を行う。対象の線を取り除いたバックグラウンドとなる画像、線のみで残りが透明のGIF画像という二つのグループ。とりわけ線の交差が対象となる場合、交差された線が隠されきれないとなれば台無しなので、交差を取り除いて別の画像を事前に作っておけば処理はだいぶやりやすい。

After Effectsでの作業では、まずペンツールを使って線の上をなぞる。そのあと、Effect> Generate> Strokeを選び、なぞった軌道をStrokeに変える。つづいてStrokeのサイズを調整し、対象の線を隠していることを確認する。最後は時間軸に移し、開始時点ではStrokeの透明度を100とし、終わりの時点ではそれを0とする。時間の移動とともにマスクが消え、隠された線がみられるようになる、という仕組みだ。

仕上げた結果を動画にすることには、Adobeならではの対応がある。ExportからAdobe Media Encoder Queueをまずは立ち上げて作業をそれに取り入れる。そのうえ、かなり数あるフォーマットからアニメGIFを選び、Queueを始める。分かれば苦労はしないが、これに辿りつくまでにはあれこれと調べなければならなかった。

出来上がったのは、いたって素朴なものだ。添えておく。