dnjiro’s 9VAe blog

誰でもアニメが作れる無料ソフト9VAeきゅうべえ開発者のブログ

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

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

 

f:id:dnjiro:20190906092221g:plain
作業時間は15分程度です。他のアニメの作り方はこちらをご覧ください

 

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

 

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

  1. 以下のイラストを開く 。ダウンロードは「[↓] SVG FILE」ボタン

    Wacom Tablet Svg Png Icon Free Download (#431412) - OnlineWebFonts.COM

  2. スマホの場合「[↓] SVG FILE」ボタンを長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー>「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け(ペースト)」。
  3. パソコンの場合は「[↓] SVG FILE」ボタンを右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ツール>9VAeアニメを入れる」をクリック。ダウンロードしたファイルを選ぶ
これで、9VAeにSVGイラストが読み込まれます。
左下の「虫眼鏡」ボタンをクリックすると全体が見えます。 

f:id:dnjiro:20190905193454p:plain



 

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

よみこんだイラストはアニメキャストという部品のアニメになります。編集するにはアニメキャストの中身を開きます。
 
  1. 選択枠の中心の「+」をクリック。メニューの上から2番目「アニメ(...)を修正する」をクリック。アニメキャストの中が開きます。

  2. ねんのため「ファイル>名前をつけて保存」で「tablet」と名前をつけて保存しましょう。

 

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

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

(1)点の数を減らす

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

 

(2)グループの解除

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

 

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

(1)ペンを選んで点ボタン(下のまる)

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

    f:id:dnjiro:20190905195411p:plain

(2)ペンを登録して「隠す」

  1. スマホの場合、「<<」ボタン(下図1の場所)をクリックすると、登録パレットが表示されます。下の絵の「+」ボタンの下が登録エリアです。
  2. 登録パレットの「+」(下図2)をクリック。選んでいたペンがボタンに登録されます。
  3. 登録されたボタン(下図3)をクリック。メニューから「隠す」を選びます。ペンが見えなくなります。

    f:id:dnjiro:20190905200950p:plain

 

5.ペンの消えた部分をなおす

  1. タブレットを選んで、点ボタンをクリック
  2. ペンが消えたあとの線の端の点を選びます。

    f:id:dnjiro:20190905201824p:plain

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

    f:id:dnjiro:20190905202510p:plain

 

6.タブレットに色をつける

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

    f:id:dnjiro:20190905203546p:plain

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

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

(1)ペンを選んでアニメキャスト(部品)にする

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

    f:id:dnjiro:20190905204947p:plain

(2)ペンの中身をひらいて色をつける

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

    f:id:dnjiro:20190905205740p:plain

(3)反転をつかってペンを下にむける

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

    f:id:dnjiro:20190906005553p:plain



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

(1)元のページに戻る

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

 

(2)動き矢印をつける

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

    f:id:dnjiro:20190906011050p:plain

(3)点を追加して動きをつける

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

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

9.アニメGIF出力

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

 

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

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

 

10.ezgif サイトで、MP4動画に変換

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

  1. ezgif.com ( Online GIF to MP4 Video converter ) を開く
  2. 「ファイルを選択」をクリック > 作成したファイルを選ぶ。(Android版の場合、「ファイル」をクリックし、出力されたアニメGIFを選ぶ)
  3. Upload!」ボタンをクリック
  4. Convert GIF to MP4!」ボタンをクリック
  5. Save」ボタン(フロッピーディスクアイコン)をクリック
  • これで、MP4ファイルが保存できます。

 

11.SVGアニメ出力

 

12.完成したSVGアニメの読み込み

  • 9VAeきゅうべえで保存したSVGアニメーションは、9VAeで読み込めば、自由に編集できます。

 

9VAeでイラストから動くアイコンがすぐ作れる 

  • 9VAeきゅうべえを使えば、SVGイラストから絵をかかずに動くアイコンが作れます。15万点以上のイラストを保有するOpenclipart が、2019年からサイトリニューアルのため見えなくなっているようですが、他にも多くのSVGイラストサイトがあります。いろんなアイコンをつくってみてください。
  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

9VAeきゅうべえ:長いアニメを作る方法 - Qiita