dnjiro’s 9VAe blog

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

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

9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。アニメキャストで動きを作っています。20分くらいで作れます。[完成データはこちら]

f:id:dnjiro:20190111144615g:plain

ほかのアニメの作り方はこちらをご覧ください

 

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

 

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

  1. こちら Openclipart - Grocery Store Sample を開く
  2. スマホの場合は、「ダウンロード」ボタンを長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー>「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け(ペースト)」。
  3. パソコンの場合は「ダウンロード」ボタンを右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ファイル>開く」をクリック。ダウンロードしたファイルを選ぶ。SVGが読めない場合はバージョンが古いので最新版にしましょう。
これで、9VAeにSVGイラストが読み込まれます。
左下の「虫眼鏡」ボタンをクリックすると全体が見えます。 f:id:dnjiro:20190110090031p:plain
 

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

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

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

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

 

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

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

(1)点の数を減らす

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

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

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

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

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

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

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

f:id:dnjiro:20190110094826p:plain

 

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

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

    f:id:dnjiro:20190110100507p:plain

    点を選択して削除しているところです
  • 点には△と□の2種類あり、△はとがった点、□は曲線です。これはパレットのf:id:dnjiro:20181029090607g:plainf:id:dnjiro:20181029090533g:plainで切り替えできます。□は前後の点によって形が変わるので、うまく形を整えられない場合、f:id:dnjiro:20181029090533g:plainで点を△に変更してください。
  • パーツ分けができたら間の空白ページは削除してかまいません。削除したいページ番号をタッチ。メニューから「ページを切り取る」でページ削除できます。
  • 下の図は、表示メニュー>「前後のページを重ねて表示」にチェックをいれて、1ページ、2ページ、3ページを表示したものです。

    f:id:dnjiro:20190110104129p:plain

    パーツ分け完了

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

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

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

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

  4. 同様に4ページの手を「hand」というアニメキャストにします。

 

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

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

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

    f:id:dnjiro:20190110110312p:plain

    支点をつまようじの端に移動させたところ

 

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

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

  1. 先頭ページの左側の「<」をタッチ。メニューから「背景ページを入れる
  2. 2ページに移動。全体を選ぶ。
  3. 左ページにコピーするボタンf:id:dnjiro:20181221163257g:plainをタッチ。これで2ページの内容が背景ページにはいります。

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

 

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

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

  1. 手がはいったページ番号をタッチ。メニューから「ページを切り取る」。これで手がきおくツールに移動します。
  2. 2ページのうでに移動
  3. f:id:dnjiro:20190110124400p:plainをタッチ。メニューから「ステージにもどす」

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

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

f:id:dnjiro:20190110125346p:plain

2ページに手と試食サンプルを移動したところ

 

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

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

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

 

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

  • 3ページの手と試食サンプルを拡大します。図形を選択し、選択枠の角の■をドラッグすれば拡大できます。
  • うでの形を手にあわせて変形します。点の一部を選んで回転(選択枠の角の■をタッチしたメニューの中にある)、なめらか(中心の+をタッチ)、ゴム変形(中心の+をタッチ)などを使いました。
  • f:id:dnjiro:20181029083754g:plainボタンで動きをみながら形を修正します。

  • 完成したら、3ページを2ページ分コピーします。
  1. 3ページのページ番号3をタッチ。メニューから「ページを記憶する」
  2. 3ページの右側の「>」をタッチ。メニューから「記憶したページを入れる
  3. ページの右側の「>」をタッチ。メニューから「記憶したページを入れる

    f:id:dnjiro:20190110133759p:plain

    手を手前に動かして2ページコピーしたところ

  4. 4ページ、5ページの試食サンプルを選び、f:id:dnjiro:20181221164227p:plainをタッチして削除します。

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

 

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

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

    f:id:dnjiro:20190110140122p:plain

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

 

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

  • お盆の上から試食サンプルを取り出すようにするため、先頭ページのつかんだ試食サンプルを削除します。点を削除しその部分に何もなかったように修正します。
  • そのかわり、6ページか7ページでつかんだアニメキャストの試食サンプルを選んで、f:id:dnjiro:20181221163257g:plainをタッチし前のページにコピーします。
  • これで試食サンプルがお盆の上に現れ、それをつかんで渡す、という動きができます。

 

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

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

 

  1. 背景から3本の線の点だけ選び、f:id:dnjiro:20181027165131p:plainをタッチ。3本の線をきおくツールの中に切り取ります。
  2. f:id:dnjiro:20181027165315g:plainをタッチして名前をつければアニメキャストになります。名前は何でもよいですが、ここでは「line」としました。

  3. 中心の「+」をタッチし、「アニメ(:line)を修正」。アニメキャストの中が開きます。
  4. f:id:dnjiro:20181221171302g:plainをタッチ。メニューから「続きのページを作る」。2ページを作ります。

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

    f:id:dnjiro:20190110173449p:plain

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

     

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

 

14.アニメGIF出力

  • アニメGIF出力する前に、念のため、ファイルメニュー>「上書き保存」で保存しておきましょう。
  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。画像サイズが大きい場合や、秒間のコマ数が多いと作成に時間がかかります。
  • 完成したファイルは、Androidの場合は、端末内の「9VAe」フォルダの中に「Grocery.gif」という名前で出力されます。
  • Androidの場合、フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

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ファイルが保存できます。

 

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

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

 

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

 

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

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