SVGからアニメGIF作成「ペンで字をかく」

9VAeきゅうべえアンドロイド版でもPC版、iPad版でもつくれます。

f:id:dnjiro:20190906092221g:plain
作業時間は１５分程度です。

他のアニメの作り方はこちら。9VAeの質問はこちら。

■ 9VAeきゅうべえのダウンロード

Win/Mac/Linux：無料ソフトでアニメを作ってみよう（9VAe きゅうべえ） - Qiita
アンドロイド：9VAeきゅうべえAndroid版（Google Play）
iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
9VAeのボタン説明

9VAeきゅうべえの使い方

１. SVGイラストのダウンロード

以下のイラストを開く。ダウンロードは「[↓] SVG FILE」ボタン
Wacom Tablet Svg Png Icon Free Download (#431412) - OnlineWebFonts.COM
スマホの場合「[↓] SVG FILE」ボタンを長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー＞「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け（ペースト）」。
パソコンの場合は「[↓] SVG FILE」ボタンを右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ツール＞9VAeアニメを入れる」をクリック。ダウンロードしたファイルを選ぶ

これで、9VAeにSVGイラストが読み込まれます。
左下の「虫眼鏡」ボタンをクリックすると全体が見えます。

f:id:dnjiro:20190905193454p:plain

２. アニメキャストの中身を保存

よみこんだイラストはアニメキャストという部品のアニメになります。編集するにはアニメキャストの中身を開きます。

選択枠の中心の「＋」をクリック。メニューの上から２番目「アニメ（...）を修正する」をクリック。アニメキャストの中が開きます。
ねんのため「ファイル＞名前をつけて保存」で「tablet」と名前をつけて保存しましょう。

３. 点の数を減らして、グループ解除

メニューバー「ファイル＞閉じる」をクリック。
メニューバー「ファイル＞開く」をクリック。上で保存した、「tablet」を開く。
これに動きをつけていきましょう。

（１）点の数を減らす

画面をタッチして図形を選択。
メニューバー「編集＞点を減らす」をクリック。これで点の数が減り、編集しやすくなります。（パソコンの場合は、編集＞効果＞点を減らす）

（２）グループの解除

画面の図形をクリック。中心の「＋」をクリック、メニューから「グループ解除」をクリック。これでペンとタブレットが別々になります。●イラストによっては図形がグループ化されていない場合もあります。その場合、9VAeきゅうべえでパーツにわけていきます（例１、例２）。

４．登録をつかって、ペンとタブレットをわける

（１）ペンを選んで点ボタン（下のまる）

ペンを選んで点ボタンを押す。ペン以外の点が選ばれた場合は、ペンの点だけ選んでもう一度「点ボタン」を押せば、その点を含む図形の点だけが選ばれる。これを使ってペンの点だけを選ぶ

（２）ペンを登録して「隠す」

スマホの場合、「＜＜」ボタン（下図１の場所）をクリックすると、登録パレットが表示されます。下の絵の「＋」ボタンの下が登録エリアです。
登録パレットの「＋」（下図２）をクリック。選んでいたペンがボタンに登録されます。
登録されたボタン（下図３）をクリック。メニューから「隠す」を選びます。ペンが見えなくなります。

５．ペンの消えた部分をなおす

タブレットを選んで、点ボタンをクリック
ペンが消えたあとの線の端の点を選びます。
スマホの場合、「配置」メニュー＞「左に寄せる」。パソコンの場合、「調整＞整列＞左に寄せる」をクリック。これで選んだ点が選択した領域の一番左端に移動します。これで線がつながりました。（最初からペンのないタブレットとペンを別々に読み込めばよいという意見もありますが、SVGイラストをパーツ分けする例として紹介しました。）

６．タブレットに色をつける

タブレットの外側の線の点を選んで、もう一度点ボタンをクリックすると、外側の線の点だけが表示されます。
外側の線上の点を全部選びます。
選択枠の中心の「＋」をクリック、メニューから「点の後ろに図形を入れる」をクリック。これでタブレットに色がつきます。色はカラーパレットで変えられます。

SVGイラストの多くは、線が線でなく、輪郭で囲まれた図形になっている場合が多いです。そういった場合に中を塗りたいときは、点を選択して「点のうしろに図形を入れる」を使います。

７．ペンをアニメキャストにして色をつける

（１）ペンを選んでアニメキャスト（部品）にする

登録パレットのペン（下図１）をクリック。メニューから「選択する」をクリック。これでペンが選ばれます。
カットするボタン（下図２）をクリック。ペンが記憶ツールの中に移動します。
アニメキャストを作る「ｑ」ボタン（下図３）をクリック。
アニメキャストの名前例えば「ペン」と入力します。これで、ペンがアニメキャストになりました。

（２）ペンの中身をひらいて色をつける

ペンの中心の「＋」をクリック。メニューから「アニメの中を修正する」をクリック
ペンの中が開くので、ペンの中を選んで、カラーパレット（下図１）で色をつけましょう。単純にペンを選んで色をつけると、線の色が変わってしまいます。ペンの中に色をつけるにはタブレットに色をつけたやり方をするとよいでしょう。ペンを選んで点モードにし、点を全部選んでから中心の「＋」をクリックし「点の後ろに図形を入れる」。はいった図形に色をつけます。

（３）反転をつかってペンを下にむける

ペン全体を選ぶ。上の辺の「■」（下図１）をクリック。メニューから「反転」をクリック。画面をもう一度クリックすると位置がきまります。

８．元のページにもどってペンに動きをつける

（１）元のページに戻る

画面の上の太字「tablet（.svg）」（上図２）をクリック。メニューから「このアニメに戻る」をクリック。元のページに戻ります。

（２）動き矢印をつける

ペンの中心の「＋」（下図１）をクリック。メニューから「動き矢印を入力」。これで赤い矢印が表示され、点を追加できるモードになります。

（３）点を追加して動きをつける

まず中心の緑色の「◇」（下図１）をドラッグしてペン先に移動してください。この点が矢印にそって移動するときの基準点になります。
赤い矢印に点を追加して、好きな形にしてください。
ページの時間（下図２）（大きな画面の場合はページの上部）をクリックし、時間を長くしましょう。
プレイボタン（下図３）をクリックすると動きます。動きをみながら赤い矢印の形や時間を調整してください。

動きをみながらいろいろ工夫してみてください。下に文字をいれ、それをなぞってみるのもよいでしょう。

９．アニメGIF出力

ファイルメニュー＞「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。
画像サイズについて、スマホ版では、幅、高さのどちらかを空白にしておけば、比率を保った数値が自動設定されます。MP4動画を作る場合は高さ「７２０」に設定するとよいでしょう。
Androidの場合、完成したファイルは、端末内の「9VAe」フォルダの中に、指定した名前、例えば「tablet.gif」といった名前で出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。

最初にあげた作例では、次の修正を行っています。

先頭ページに「背景」をいれ、タブレットを移動し、9VAe の文字をいれました。背景ページは、先頭ページの左側の「＜」をクリックしてメニューから「背景ページを入れる」を実行します。タブレットの移動は、きおくツールをつかいました。
２ページで「9VAe」の文字に動き矢印をあわせました。
画面サイズを 1100×750 にしました。スマホ版では、「ファイル＞ページ設定」。パソコン版では、「ページ＞ページ設定」で変更できます。

１０．ezgif サイトで、MP4動画に変換

アニメGIFは簡単にMP4動画に変換できます。

ezgif.com ( Online GIF to MP4 Video converter ) を開く
「ファイルを選択」をクリック＞作成したファイルを選ぶ。（Android版の場合、「ファイル」をクリックし、出力されたアニメGIFを選ぶ）
「Upload!」ボタンをクリック
「Convert GIF to MP4!」ボタンをクリック
「Save」ボタン（フロッピーディスクアイコン）をクリック

これで、MP4ファイルが保存できます。

１１．SVGアニメ出力

スマホ版、Mac版（9va-mac64）では普通に保存すれば、SVGアニメ形式で保存されます。Chrome や Firefox で開けばはアニメーションになります。（Internet Explorer や Edge では静止画になります。）
9VAeきゅうべえ（Windows版、Linux版）では、保存するときに、SVG形式で保存できます。