【VideoScribe】SVGファイルで自作アニメーションを作る方法〜Illustrator編〜




 

 

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向けではありません。

 

「ペンツール」ならばベジェ曲線をコントロールしやすく、狙い通りの線を描くことに長けています。ただ一方で、操作になれぬうちは残念な線ばかりが誕生してしまいます。

Image from Gyazo

一方「鉛筆ツール」はマウスのドラッグ操作で感覚的に、まるでペンを握って描くように線をかけます。ベジェ曲線に不慣れな方は鉛筆ツールがおすすめ。
Image from Gyazo

SVGファイルで出力

イラストレーターでは、アートボードに書いた図形を2つの方法でSVGで出力できます。

  1. アートボード全体を書き出し
  2. 選択範囲を書き出し

 

 

アートボード全体

まずはアートボード全体ですね。

ファイル上メニューの「ファイル>書き出し」から「書き出し形式」と進んで、
Image from Gyazo

 

 

「名前を付けて保存」を選び、ファイル形式を「SVG」にして、最後に「アートボードごとに作成」にチェックを入れましょう。

すると、オプションウィンドウが出てきます。

スタイル プレゼンテーション属性
画像 埋め込む
レスポンシブ チェックはずす

ここでは上のように設定をし、OKボタンを押して、SVGで書き出します。

 

アートボード一部の選択範囲をSVGで書き出す

続いて、アートボードの全体ではなく、その中の選択されたオブジェクトをSVGファイルで書き出します。

 

「選択ツール」でSVGにしたいオブジェを選択して、右クリック。

選択範囲を書き出し

を選びます。

Image from Gyazo

そして、保存場所を選んで形式をSVGにして、プレフィックスを適当につけて書き出しましょう。

細かい設定は「歯車マーク」から設定できますよ。

設定は先程と同じように

スタイル プレゼンテーション属性
画像 埋め込む
レスポンシブ チェックはずす

でOKです。

 

VideoScribeにSVGファイルを読み込む方法

あとはVideoScribeにSVGファイルを読み込むだけ。

読み込み方法は画像と同じく、読み込んでキャンパス上に配置します。

右下の「Add Image」からローカルのファイルを読み込みましょう。

Image from Gyazo

すると、イラストレーターで描いた順番で手描き表示できるではありませんか。
Image from Gyazo

すごいですね、凄まじいです。

ただし、塗りがあるオブジェクトの場合、塗りは手書きでドローされません。

塗りを手書きで表現したい場合は、下記の記事を参考に試行錯誤してみてください。

 

それでは!

Ken

 

【参考記事】



AEの作業を効率化!
After Effectsのショートカットポスター

Adobe動画制作ソフトAfter Effectsで便利なショートカットキーを把握できるショートカットキーポスターをどうぞ。




コメントを残す

メールアドレスが公開されることはありません。