VideoScribeで動画制作していると、自分で手書きのアニメを作ってみたい、と思うかもしれません。
VideoScribeにはすでに豊富なアニメーションが多数用意されていて、十分デフォルトのアニメーションだけで勝負できます。
が、しかし、
「あーこんなアニメーションあったらいいなー」
と思う時もありまして、どうしてもVideoScribeの標準装備のアニメーションだけでは補完できないこともあります。
なんせ、VideoScribeのアニメーションを制作しているのはユーロ圏の方々なので、我々アジアのニーズとマッチングしないこともあるでしょう。
そこで「自作のアニメーション」をホワイトボード上で動かしてみたいところです。
それは十分に可能で、実に
自作のSVGファイルを活用すると、手描きアニメーションを再現できるのです。
SVGファイルとは？
それでは「SVG」とは何の略なんでしょうか。
ズバリそれは、
Scalable Vector Graphics
の略で、Wikipediaによると、
XMLベースの二次元ベクターのイメージファイル形式
です。
XMLのソースコードを編集することで、グラフィックスを編集できます。
加えて「ベクター形式」なので、いくら拡大しても画質が劣化しない画像の種類ですね。
こちらは2001年にW3C勧告となり標準化された規格で、もう20年近い歴史がある画像ファイル形式なのです。
このSVGファイルには「ストローク属性」があり、書き方の情報を格納できます。
したがって、SVGファイルのストローク属性を使って手描きアニメーションをVideoScribeでも動かせるというわけ。
VideoScribe向けのSVGファイルの作り方
SVGファイルを作るためには「ベクター系描画ソフト」を使いましょう。
VideoScribeの公式ページでは、以下の2つのソフトが紹介されています。
わたしは常日頃からPremiereやAfter EffectsをはじめとするAdobeソフトにお世話になっていることから、今回はAdobe IllustratorでVideoScribe向けのSVGファイルを作成してみました。
「ペンツール」または「鉛筆ツール」で描く
まずはイラストレーターでSVGファイルを書きましょう。
ここでの注意点は使うツール。書き順を染み込ませたSVGを制作するためには、
- ペンツール
- 鉛筆ツール
のいずれかでなければなりません。
つまりは「ベジェ曲線」で描けるツールに限るんですね。
その他にも簡単に線をかける「ブラシツール」がありますが、こちらは残念ながらベジェ曲線で出力されませんので、VideoScribe向けではありません。
「ペンツール」ならばベジェ曲線をコントロールしやすく、狙い通りの線を描くことに長けています。ただ一方で、操作になれぬうちは残念な線ばかりが誕生してしまいます。
一方「鉛筆ツール」はマウスのドラッグ操作で感覚的に、まるでペンを握って描くように線をかけます。ベジェ曲線に不慣れな方は鉛筆ツールがおすすめ。
SVGファイルで出力
イラストレーターでは、アートボードに書いた図形を2つの方法でSVGで出力できます。
- アートボード全体を書き出し
- 選択範囲を書き出し
アートボード全体
まずはアートボード全体ですね。
ファイル上メニューの「ファイル＞書き出し」から「書き出し形式」と進んで、
「名前を付けて保存」を選び、ファイル形式を「SVG」にして、最後に「アートボードごとに作成」にチェックを入れましょう。
すると、オプションウィンドウが出てきます。
| スタイル | プレゼンテーション属性 |
|---|---|
| 画像 | 埋め込む |
| レスポンシブ | チェックはずす |
ここでは上のように設定をし、OKボタンを押して、SVGで書き出します。
アートボード一部の選択範囲をSVGで書き出す
続いて、アートボードの全体ではなく、その中の選択されたオブジェクトをSVGファイルで書き出します。
「選択ツール」でSVGにしたいオブジェを選択して、右クリック。
選択範囲を書き出し
を選びます。
そして、保存場所を選んで形式をSVGにして、プレフィックスを適当につけて書き出しましょう。
細かい設定は「歯車マーク」から設定できますよ。
設定は先程と同じように
| スタイル | プレゼンテーション属性 |
|---|---|
| 画像 | 埋め込む |
| レスポンシブ | チェックはずす |
でOKです。
VideoScribeにSVGファイルを読み込む方法
あとはVideoScribeにSVGファイルを読み込むだけ。
読み込み方法は画像と同じく、読み込んでキャンパス上に配置します。
右下の「Add Image」からローカルのファイルを読み込みましょう。
すると、イラストレーターで描いた順番で手描き表示できるではありませんか。
すごいですね、凄まじいです。
ただし、塗りがあるオブジェクトの場合、塗りは手書きでドローされません。
塗りを手書きで表現したい場合は、下記の記事を参考に試行錯誤してみてください。
それでは！
Ken
【参考記事】
動画制作のノウハウを自ら学び、わかりやすくアウトプットすると心がけています。
好きなものはアナゴのたれ。
LINEで動画制作のヒントをお届けしています！
コメントを残す