dnjiro’s 9VAe blog

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

SVGイラストからアニメGIF作成「ワインを飲む女」

絵を描かずになめらかなアニメGIFを作る方法を解説します。9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。制作時間は20から30分。

f:id:dnjiro:20181025162237g:plain

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

 

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

 

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

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

    f:id:dnjiro:20181025172937p:plain

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

よみこんだイラストは静止画のアニメキャストになります。動きをつけたい場合は、アニメキャストの中身を開きます。(静止画で使いたい場合はアニメキャストにしておくほうが便利です)

  1. 選択枠の中心の「+」をクリック。メニューの上から2番目「アニメ(...)を修正」をクリック。アニメキャストの中が開きます。
  2. 「ファイル>名前をつけて保存」で「OnlyWine」と名前をつけて保存。
  3. メニューバー「ファイル>新規作成」をクリック
  4. メニューバー「ファイル>開く」をクリック。上で保存した、「OnlyWine」を開く。
  5. これに動きをつけていきます。

 

3. ワイングラスをアニメキャストにする

  1. 全体を選んで点編集ボタンf:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainをクリック。
  2. ワイングラスに近い点を選び、左下の虫眼鏡の左側の拡大ボタン「+」をクリックして拡大
  3. ワイングラスに含まれる点(グラスの上と台とワイン)を選び、点編集ボタンf:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainをもう一度クリック。これでワイングラスの点だけが表示されます。

    f:id:dnjiro:20181027163655p:plain

  4. もう一度点編集ボタンf:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainをクリック。通常選択モードになります。f:id:dnjiro:20181027165131p:plainをクリック。ワイングラスが記憶ツールにカットされます。
  5. f:id:dnjiro:20181027165315g:plainをクリック。「wineglass」と名前つけて「OK」ボタンをクリック。ワイングラスがアニメキャストになります。アニメキャストにすれば正確に回転できますし別な動きをあとからつけることができます。

 

4. 続きのページを作る

  1. 上の1ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これで2ページ目ができます。

 

5. 肘からグラスまでを回転する

  1. ワイングラスの選択と同じ手順で、肘から先とワイングラスの点を選択し、f:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainをもう一度クリック。肘から先とワイングラスの点だけを選択します。
  2. 選択枠の角の■をクリック。メニューから「中心点の移動」をクリック。画面をドラッグして肘の位置に回転中心「+」を移動させます。

    f:id:dnjiro:20181029071435p:plain

  3. 選択枠の角の■をクリック。メニューから「回転」をクリック。画面をドラッグして回転させます。

    f:id:dnjiro:20181029074111p:plain

  4. 選択枠の中心の「+」をクリック。メニューから「移動」をクリック。画面をドラッグしてワイングラスを口の前に移動させます。
  5. 手首の角度を調整するために手首から肘までの点だけ選択して反時計回りに回転させます。中心点の移動をつかってください。

    f:id:dnjiro:20181029080037p:plain

6. 肩から肘までを上に縮める

  1. 肘を選択。点編集ボタンf:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainを何回かクリックし、肘の点だけを選びます。

    f:id:dnjiro:20181029081254p:plain

  2. 選択枠の下の辺の中心の■をクリック。メニューから「のばす」をクリック。画面をドラッグして肘の位置を合わせます。
  3. プレイボタンf:id:dnjiro:20181029083754g:plainをクリックすれば、手をもちあげてワイングラスを口に運ぶアニメがみえます。肘の形がスムーズに変化するように、それぞれの点の位置を調整します。うまくいかない場合は、f:id:dnjiro:20181023071022g:plainで作業がもどせます。「Shift」ボタンをタッチしてからf:id:dnjiro:20181023071022g:plainを押せばもう一度やり直します。

 

7. 点の位置を整える

点の位置を整えるいくつかの方法を紹介します。

  1. 一部の点を選択してから形を変形すると、選んだ点と選んでいない点との間で点がねじれたり不整合が生じます。また、もともとのイラストは静止画なので、止まっていると隠れているので問題ないが、動かすと都合が悪い点もあります。そういった点の位置を調整しなければなりません。
  2. ねじれたり、ややこしくなった点は、ややこしい部分を選択してから、選択枠の中心の「+」メニューから「なめらかにする」をクリックし、右に移動させればねじれが解消します。(「なめらかにする」は Ver.0.6.4で追加された機能)
  3. 9Veの曲線の性質上、曲線の点A(□)と曲線の点B(□)の間が極端に長く、その次の点CがBと非常に近い場合、点Bと点Cの間にふくらみができます。このふくらみは点Bを角の点(△)に変更すればふくらみがなくなります。パレットの右上の

    f:id:dnjiro:20181029090533g:plainが角の点(△)、f:id:dnjiro:20181029090607g:plainが曲線の点(□)です。

  4. プレイボタンf:id:dnjiro:20181029083754g:plainで形fの変化がおかしい場合、変形途中の形は現在のページと前のページの点の位置が関係しています。したがって、場合によっては前のページの点の位置を変更します。このとき、点を選択しておいてからページを移動すれば、その点に対応した点が選ばれています。これを利用し、点を選びやすいページで点を選択し、形を修正したいページに移動するとよいです。

  5. 肘を変形するときに肘の端の点が開いていると「なめらかにする」がつかえません。端の点を選んで右上のパレットの閉じる開くボタンf:id:dnjiro:20181029092741p:plainの左側のボタンで閉じるようにすれば、「なめらかにする」が使えるようになります。

    f:id:dnjiro:20181029093045p:plain「なめらかにする」をクリックしてから右にドラッグすれば直線に近づくので台形にします。そのあともう一度「なめらかにする」をクリックし左にドラッグすれば曲線になり、以下のようにきれいになります。

    f:id:dnjiro:20181029093614p:plain

  6. 点を修正するときに、すでに修正が終わった図形は右下の登録パレットに登録し登録場所をクリックしたメニューから「固定」や「隠す」を押せば、選択されなくしたり、一時的に隠すことができます。ワイングラスと手を登録して「固定」を設定しました。登録ボタンに赤いバツ印が表示されます。登録は図形を選んでからf:id:dnjiro:20181029095306p:plainをクリックです。(iPhoneで登録パレットが見えない場合、f:id:dnjiro:20181023074752g:plainをタッチすれば登録パレットが見えます。)

    f:id:dnjiro:20181029100141p:plain

  7. 肘のおかしい部分を選んで選択します。ワイングラスをつかんだ点が「固定」に設定されているため、選択されません。

    f:id:dnjiro:20181029100900p:plain

  8. 中心の「+」メニューから「なめらかにする」をクリックし、右側にドラッグ。

    f:id:dnjiro:20181029101017p:plain

 

8. 顔、髪型の変形、髪飾り

  1. 2ページの顔を右側にむける。髪の毛を左側にのばす。髪飾りは横に縮めて位置を調整。登録パレットを使ったパーツ分け、表示の拡大縮小、点の選択、なめらかにする、ゴム変形など、いろいろな変形をつかって形を整えます。

    f:id:dnjiro:20181029104145p:plain

9. ワインをゆらしながら飲む

手をうごかしている間、ワインはそのまま。ワイングラスが止まったら、ワインがゆれながら減っていくようなアニメーションにします。

  1. 手とワイングラスが「固定」されている場合は、登録パレットの下のf:id:dnjiro:20181029155754p:plainをクリックして解除。
  2. ワイングラスを選択し、中心の「+」をクリック。メニューから「アニメ(:wineglass)を修正」をクリック。ワインとワイングラスが開きます。
  3. 上の1ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これでワイングラスの2ページ目ができます。f:id:dnjiro:20181029162606p:plain
  4. ワインをクリックしてf:id:dnjiro:20181027165131p:plainをクリック。これでワインが記憶ツールにカットされます。

    f:id:dnjiro:20181029162701p:plain

  5. f:id:dnjiro:20181027165315g:plainをクリック。「wine」と名前つけて「OK」ボタンをクリック。ワインがアニメキャストになります。

  6. 作成したワインを選択し、中心の「+」をクリック。メニューから「アニメ(:wine)を修正」をクリック。ワインが開きます。
  7. 1ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これでワインの2ページ目ができます。
  8. ゆれるワインを表現するために、ワインを選んで時計回りに少し回転させます。
  9. メニューバーの「表示>前後のページを重ねて表示」をクリックすれば、1ページのワインが線で表示されるので、それを参考にゆれた形をつくります。

    f:id:dnjiro:20181029172224p:plain

  10. 1ページに移動し、メニューバー「ツール>往復」をクリックし、往復ボタンをいれます。プレイボタンf:id:dnjiro:20181029083754g:plainを押してワインが揺れるのを確認してください。
  11. 左下の虫眼鏡ボタンf:id:dnjiro:20181029172848g:plainをクリックし倍率をもどし、画面上の太文字「wineglass」をクリック。メニューから「このアニメにもどる」をクリック。ワイングラスに戻ります。プレイボタンf:id:dnjiro:20181029083754g:plainを押してワイングラスの中でワインが揺れるのを確認してください。
  12. ワイングラスの2ページの時間「1秒」をクリックし、メニューから「1秒長くする」をクリックして4秒にしましょう。
  13. 2ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これでワイングラスの3ページ目ができます。
  14. 3ページのアニメキャスト「wine」を選んでグラスの左下に小さく縮小します。これでワインが揺れながらなくなっていきます。プレイボタンf:id:dnjiro:20181029083754g:plainを押してみてください。

    f:id:dnjiro:20181029190857p:plain

  15. 左下の虫眼鏡ボタンf:id:dnjiro:20181029172848g:plainをクリックし倍率をもどし、画面上の左端の太文字「onlywine」をクリック。メニューから「このアニメにもどる」をクリック。ワイングラスを持った女の人に戻ります。1ページの時間を3秒に、2ページの時間を4秒にします。ワイングラスの1ページの時間も3秒にします。結果3秒間でワイングラスを口につけ、4秒間でワインを飲むアニメになります。
  16. あとは、プレイをみながら気になったところを修正して完成です。
  17. 最初に掲載したアニメGIFの元データ(SVGアニメ)が

    Clipart - Only Wine Extra 003 Animation からダウンロードできます。9VAeで開いてみてください。

 

10. アニメGIF出力

  1. メニューバーの「ファイル>アニメGIF出力」をクリック。
  2. 画面サイズや秒間のコマ数を設定してアニメGIFを作成できます。

 

 

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

 

 

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

 

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

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

 

9VAeきゅうべえに関する質問