dnjiro’s 9VAe blog

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

SVGからアニメGIF作成「試食サンプルをどうぞ」

9VAeきゅうべえアンドロイド版PC版iPad版iPhone版でもつくれます。アニメキャストで動きを作っています。20分くらいで作れます動画編集用素材にもなります[完成したSVGはこちら]

f:id:dnjiro:20220102104143g:plain

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

 

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

 

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

Openclipart (Grocery Store Sample) からダウンロード

  1. スマホの場合は、「こちら(SVG (Vector))」を長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー>「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け(ペースト)」。

  2. パソコンの場合は「こちら (SVG(Vector))」を右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ファイル>開く」をクリック。ダウンロードしたファイルを選ぶ。SVGが読めない場合はバージョンが古いので最新版にしましょう。

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

f:id:dnjiro:20201016170757g:plainメモ:9VAeでSVGイラストが編集できる

 
 

2. アニメキャストの中身を保存(スマホの場合)

よみこんだイラストはアニメキャストという部品のアニメになります。静止画で使いたい場合はアニメキャストにしておくほうが便利ですが、動きをつけたい場合は、アニメキャストの中身を開きます。
 
  1. 選択枠の中心の「+」をクリック。メニューの上から2番目「アニメ(...)を修正」をクリック。アニメキャストの中が開きます。

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

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

f:id:dnjiro:20201016170757g:plainメモ:読み込んだSVGがパーツになっている場合、選択して中心メニューから中身を開くことができる。

 

 

3. パーツ作成のためにページを複製

 試食サンプル、手、左腕、を切り取ります。手と試食サンプルはそれぞれアニメキャストにします。具体的には、次のようにします。

(1)点の数を減らす

  1. 図形をタッチして全体を選ぶ
  2. メニューバー「編集>点を減らす」

これで制御点の数が減り、編集しやすくなります。

(2)続きのページをつくる

  1. ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これで2ページ目ができます。
  2. 今回は、背景、試食サンプル、腕、手の4つに分割したいので、「続きのページを作る」を使って同じページを4ページ作ります。

(3)ページの間に空白ページをいれる

 「続きのページを作る」では各ページの点がリンクでつながれており、点を削除すると他のページの対応した点も削除されてしまいます。リンクを切りはなすためにページとページの間に空白ページを入れます。

  1. ページとページの間の「>」をクリック。メニューから「空白ページを作る」

    f:id:dnjiro:20210609102753g:plain

f:id:dnjiro:20201016170757g:plainメモ:続きのページをつくると図形がつながった状態になる。間に空白ページをいれるとばらばらになって、点を削除しても影響しなくなる。

 

4.点を削除してパーツをつくる

  • 図形を選んでf:id:dnjiro:20181027163024g:plainをタッチすると点が表示されます。
  • スマホ版は、ピンチ操作で拡大縮小、2本指で場所の移動ができます。
  • 一部の点を選んでもう一度f:id:dnjiro:20181027163024g:plainをタッチすれば、その点を含む図形以外の点が消えるのでみやすくなります。
  • 不要な点を選んでf:id:dnjiro:20181221164227p:plainで削除し、パーツの点だけ残します。各ページでそれぞれパーツだけのこるようにします。

    f:id:dnjiro:20210609110132g:plain

  • 点には△と□の2種類あり、△はとがった点、□は曲線です。これはパレットのf:id:dnjiro:20181029090607g:plainf:id:dnjiro:20181029090533g:plainで切り替えできます。□は前後の点によって形が変わるので、うまく形を整えられない場合、f:id:dnjiro:20181029090533g:plainで点を△に変更してください。

    f:id:dnjiro:20210609144814g:plain

  • パーツ分けができたら間の空白ページは削除してかまいません。削除したいページ番号をタッチ。メニューから「ページを切り取る」でページ削除できます。

    f:id:dnjiro:20210609150346g:plain

f:id:dnjiro:20201016170757g:plainメモ:点を青い線で囲んで削除する。スマホ版はドラッグすると青い線がでてくる。パソコン版はCtrlキーを押しながらマウス左ボタンで青い線がでてくる。

 

5.回転するパーツはアニメキャストにする

3ページの試食サンプルと4ページの手は回転するのでアニメキャストにします。アニメキャストは正確に回転できます。しかし自由変形ができなくなります。

  1. 4ページに移動し全体を選択
  2. f:id:dnjiro:20181027165131p:plainをタッチ。これでがきおくツールに移動します。

    f:id:dnjiro:20210609152137g:plain

  3. f:id:dnjiro:20181027165315g:plainをタッチ。名前を「hand」とつける。これでがアニメキャストになりました。

  4. 3ページに移動し全体を選択(下図)
  5. f:id:dnjiro:20181027165131p:plainをタッチ。これで試食サンプルがきおくツールに移動します。

  6. f:id:dnjiro:20181027165315g:plainをタッチ。名前を「sample」とつける。これで試食サンプルがアニメキャストになりました。

    f:id:dnjiro:20210609153719g:plain

f:id:dnjiro:20201016170757g:plainメモ:画面上の図形を記憶ツールにカットし「q」ボタンでアニメキャストというパーツになる。階層構造が作れる。

  

6.アニメキャストの支点の位置を変更

試食サンプルのつまようじの先にアニメキャストの支点を移動させます。こうすると、支点を中心に回転するようになり、手が試食サンプルのつまようじをつかんだ状態で移動できます。9VAeきゅうべえの高度な機能です。

  1. 試食サンプルを選ぶ
  2. 中心の「+」をタッチ。メニューから「支点の位置を変える」(上図)
  3. 緑色の◇が支点です、これをつまようじの手で持つ位置に移動させます。

 f:id:dnjiro:20201016170757g:plainメモ:棒のようなものを持つ場合、棒をアニメキャストにして、持つところに支点を移動させておくと支点を中心に回転する。

 

7.最初のページを背景にする

先頭ページを背景にして、1ページの内容をコピーします。

  1. 先頭ページの左側の「<」をタッチ。メニューから「背景ページを入れる
  2. 2ページに移動。全体を選ぶ。

    f:id:dnjiro:20210609155914g:plain

  3. 左ページにコピーするボタンf:id:dnjiro:20181221163257g:plainをタッチ。これで2ページの内容が背景ページにはいります。

  4. 2ページは不要なので削除しましょう。ページ番号2をタッチ。メニューから「ページを切り取る」

f:id:dnjiro:20201016170757g:plainメモ:動かないものは背景ページにいれておくと編集が楽になる。

 

8.試食サンプルを持った手を組み立てる

2ページのうでに、手と試食サンプルを合成します。

  1. 手がはいったページ番号をタッチ。メニューから「ページを切り取る」。これで手がきおくツールに移動します。

    f:id:dnjiro:20210609163528g:plain

  2. 2ページのうでに移動
  3. f:id:dnjiro:20190110124400p:plainをタッチ。メニューから「複製する」

  4. f:id:dnjiro:20181029095306p:plainをタッチ。これで手が登録され、選びやすくなります。

同様に試食サンプルも2ページに合成します。

f:id:dnjiro:20201016170757g:plainメモ:登録パレットに登録しておくと、選ぶのが簡単。固定したり、隠したり、レイヤーのような使い方ができる。

 

 

9.続きのページを3ページ追加

動きをつけるために続きのページを作ります。3ページ=手前に差し出したところ、4ページ=次の試食サンプルをつまんだところ、5ページ=元の状態として、続きのページを3ページ追加しましょう。

  1. ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。メニューから「続きのページを作る」を3回くりかえす。

    f:id:dnjiro:20210609164747g:plain

f:id:dnjiro:20201016170757g:plainメモ:キーフレーム補間を行うためには図形がつながっていないといけない。そのために「続きのページを作る」でコピーする。

 

 

10.試食サンプルを渡したところを作る

  • 3ページの手と試食サンプルを拡大します。図形を選択し、選択枠の角の■をドラッグすれば拡大できます。

    f:id:dnjiro:20210610055745g:plain

  • うでの形を手にあわせて変形します。点の一部を選んで回転(選択枠の角の■をタッチしたメニューの中にある)、なめらか(中心の+をタッチ)、ゴム変形(中心の+をタッチ)などを使いました。
  • f:id:dnjiro:20181029083754g:plainボタンで動きをみながら形を修正します。

  • 完成したら、3ページを2ページ分コピーします。

    f:id:dnjiro:20210610070958g:plain

  1. 3ページのページ番号3をタッチ。メニューから「ページを記憶する」
  2. 3ページの右側の「>」をタッチ。メニューから「記憶したページを入れる
  3. ページの右側の「>」をタッチ。メニューから「記憶したページを入れる
  4. 4ページ、5ページの試食サンプルを選び、f:id:dnjiro:20181221164227p:plainをタッチして削除します。

これで試食サンプルを手渡しする部分ができました。

f:id:dnjiro:20210129174526g:plain

f:id:dnjiro:20201016170757g:plainメモ:複数の点を移動させて変形するには、いろんな方法をつかう。点の位置によって動き方がかわる。

 

11.次の試食サンプルをつかむところをつくる

  • 6ページの手と試食サンプルをお盆の上のサンプルに重なるように回転させます。
  • 手にあわせて腕の形を変形させます。

    f:id:dnjiro:20210610091127g:plain

  • 腕の変形をするために、5,6ページの間の「>」、6,7ページの間の「>」をタッチし、メニューから「中間ページを作る」
  • これで中間のページができるので、f:id:dnjiro:20181029083754g:plainで動きを確認しながら形を調整します。
  • ここの変形が一番むずかしいのですが、後から拡大して何回でも修正できるので、納得いくまで調整してみてください。
  • 9VAeきゅうべえは点と点が正確に対応して変形するため、点の位置は重要です。各ページの点の位置をかえると、同じ形でも異なる動きになります。

    f:id:dnjiro:20210129175921g:plain

f:id:dnjiro:20201016170757g:plainメモ:途中の変形がうまくいかない場合は中間のページを作成して修正する。

 

12.背景からつかんだ試食サンプルを消す

  • お盆の上から試食サンプルを取り出すようにするため、先頭ページのつかんだ試食サンプルを削除します。点を削除しその部分に何もなかったように修正します。

    f:id:dnjiro:20210610095219g:plain

  • そのかわり7ページでつかんだアニメキャストの試食サンプルを選んで、f:id:dnjiro:20181221163257g:plainをタッチし前のページにコピーします。
  • これで試食サンプルがお盆の上に現れ、それをつかんで渡す、という動きができます。

    f:id:dnjiro:20210129180337g:plain

 

13.アクセントの線をアニメキャストにして動かす

顔の左側の3本の線を動かしましょう。

 

  1. 背景から3本の線の点だけ選び、f:id:dnjiro:20181027165131p:plainをタッチ。3本の線をきおくツールの中に切り取ります。アニメキャストは動くので背景でなく2ページに入れましょう。

    f:id:dnjiro:20210610102007g:plain

  2. 2ページに移動し、f:id:dnjiro:20181027165315g:plainをタッチして名前をつければアニメキャストになります。名前は何でもよいですが、ここでは「line」としました。

  3. 中心の「+」をタッチし、「アニメ(:line)を修正」。アニメキャストの中が開きます(上図)。

    f:id:dnjiro:20210610140523g:plain

  4. ページの左の「<」をタッチ。メニューから「前につづいたページを作る」。前に1ページ追加されます。

  5. 1ページの時間をタッチし、「0.1秒短くする」を5回タッチ。0.5秒にします。
  6. ツールメニュー>「往復」をタッチ。「往復」命令をいれます。これで1ページと2ページの間を往復します。往復は必ず1ページに入れてください。
  7. f:id:dnjiro:20181029083754g:plainで動きを確認しながら、2ページの線を移動させてください。 

  8. 画面の上にあるファイル名「Grocery.svg」の文字をタッチ。メニューから「このアニメにもどる」。これで元のアニメに戻ります。
  9. アニメキャストが背景にあると静止画になっていまうので、f:id:dnjiro:20181027165131p:plainをタッチして記憶ツールに切り取り。
  10. 2ページに移動し、f:id:dnjiro:20190110124400p:plainをタッチ。メニューから「ステージにもどす」。これで2ページにアニメキャストがはいりました。
  11. 右ページにコピーするボタンf:id:dnjiro:20190110174431p:plainをタッチしてアニメキャストを最後のページまでコピーします。

    f:id:dnjiro:20210129180645g:plain

f:id:dnjiro:20201016170757g:plainメモ:アニメキャストにすると、アニメキャストの中で自由に動きがつけられる。アニメキャストが動くパーツになる。

 

 

14.アニメGIFF / 動画(MP4)出力

  • アニメGIF出力する前に、念のため、ファイルメニュー>「上書き保存」で保存しておきましょう。
  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

f:id:dnjiro:20201016170757g:plainメモ:出力サイズ、1秒間のコマ数は出力のときに自由に設定できる。これが便利。

 

 

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

アニメGIFは簡単にMP4動画に変換できます。動画にする場合、アニメGIFの高さは「720」で作成するとよいでしょう。

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

f:id:dnjiro:20201016170757g:plainメモ:Mac版、iPhone版は、MP4出力ができる。ezgif でアニメGIFをMP4に変換できる。

 

 

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

  • 9VAeきゅうべえで保存したSVGアニメーションは、9VAeで読み込めば、自由に編集できます。
  • こちら(完成データ)を長押し、もしくは右ボタンメニューでダウンロードし、9VAeきゅうべえで開いてみてください。

 

9VAeきゅうべえAndroid版を使えば、スマホだけで、SVGイラストから絵をかかずにアニメGIFを作成できます。Openclipart には15万点以上のSVGイラストがあります。ぜひいろんなアニメを作ってみてください。

 

  • 9VAeは各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。
アプリ クリップ形式 作り方
PowerPoint
LibreOffice
Keynote
アニメGIF 背景を透明にして出力(PowerPointの例
iMovie
PowerDirector
グリーンバック動画 先頭にグリーンバック背景を入れる。(iMovieの例PowerDirectorの例
AviUtl 連番PNG 背景を透明にして出力(AviUtlの例

 

長いアニメや動画を作りたい場合は、以下をご覧ください。

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

 

9VAeきゅうべえに関する問い合わせ