dnjiro’s 9VAe blog

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

SVGイラストからアニメGIF作成「ネコのしっぽを動かす」

絵を描かずになめらかなアニメGIFを作ってみました。9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。なれてくれば10から15分で作れます。

 

f:id:dnjiro:20181023093523g:plain

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

 

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

 

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

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

    f:id:dnjiro:20181022190045p:plain

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

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

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

3. 画面サイズの調整

  1. 「ページ>ページ設定」(iPadの場合「ファイル>ページ設定」)で全体がみえるようにページサイズを調整します。(幅1800, 高さ3200)

4. 点の数を減らす

イラストの制御点が多いと動きをつけにくいので、点の数を減らします。

  1. ネコをドラッグして選ぶ。選択枠が表示される。
  2. 「編集>効果>点を減らす」(iPadの場合「編集>点を減らす」)
  3. これで制御点の数が減りました。

5. 続きのページをつくる

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

6. しっぽの形をかえる

  1. しっぽをドラッグして選ぶ
  2. 左側の点編集ボタンをクリック(「A」ボタンの2つ下。右側が点の追加、左側が追加なし、どちらでもよい)これで、ネコの制御点が全部表示されます。
  3. ドラッグでしっぽの一部を選びます。点編集ボタンをもう一度クリック。これで、えらんだしっぽだけが表示されます。

    f:id:dnjiro:20181022202054p:plain

  4. 左下の虫眼鏡の左側の「+」を2回クリック。これでしっぽが拡大されます。
  5. 点を動かして、しっぽの形をかえてください。
  6. しっぽの先を回転させる場合、回転中心を指定できます。まず、ドラッグで回転したい点を選びます。
  7. 選択枠の角の■をクリック。メニューから「中心点の移動」をクリック。ドラッグして回転中心(+)の場所を指定。
  8. 選択枠の角の■をクリック。メニューから「回転」をクリック。マウスを移動(iPadの場合はドラッグ)すると回転します。

 7. さらに続きのページをつくってしっぽの形をかえる

  • 同様に3ページ目をつくってしっぽの形をかえます。
  • しっぽの形を変えるときに、点の位置を自由に変更すると、アニメーションしたときにしっぽの太さが変化してしまいます。しっぽの太さが変化しないためには、近くの制御点が同じように変形する必要があり、注意深く点を移動させる必要があります。
  • うまくいかないときは、「やり直し」ボタンf:id:dnjiro:20181023071022g:plainをクリックして何回もやり直してください。

    f:id:dnjiro:20181023073825p:plain

8. 「往復」を入れる

  1. f:id:dnjiro:20181023072419g:plainやページをクリックして1ページに移動

  2. 「ツール>往復」をクリック。「往復」ボタンがはいります。
  3. 選択枠の中心の「+」をクリック。メニューから「次ページにリンクコピー」。2ページに往復ボタンが広がります。
  4. プレイボタンを押すと往復します。

9. 時間の調整

  1. 1ページの上の時間表示(1秒)をクリック。メニューから「0.1秒短くする」を5回クリックし、0.5秒にします。(iPhoneでページの上部が見えない場合、f:id:dnjiro:20181023074752g:plainをタッチすれば見えるようになります。)
  2. 2ページの時間も0.5秒にします。
  3. プレイボタンを押して確認
  4. 完成したら「ファイル>上書き保存」で上書き保存しておきます。

10. 画面サイズの調整(全体のサイズ縮小、位置調整)

  1. 「ページ>ページ設定」(iPadの場合「ファイル>ページ設定」)で全体がみえるようにページサイズを調整します。(幅1800, 高さ3200)
  2. 幅と高さの数字が大きすぎると設定できなくなります。この場合は全体を縮小、位置調整します。
  3. 先頭ページのページ番号「1」をクリック。メニューから「ページの指定 ここから」をクリック。
  4. 最後のページ番号「3」をクリック。メニューから「ページの指定 ここまで」をクリック。これで全部のデータが選択されます。
  5. 選択枠の角の■をクリックし「拡大/縮小」をクリック。これで全体のサイズ調整ができます。
  6. 選択枠の中心「+」をクリックし「移動」をクリック。これで全体の位置調整ができます。

11. アニメGIF作成

  1. 「ファイル>アニメGIF出力」で保存場所とファイル名を指定(iPad版は設定画面でファイル名を指定)
  2. アニメGIF設定画面で、画面サイズ、秒数、秒間コマ数、背景を透明にするかどうかを指定。往復がはいっており無限ループになっているため、時間の指定が必要。往復時間「2」秒を指定します。
  3. 「出力開始」または「OK」でアニメGIFができます。(iPad版は出力後にカメラロールにコピーされます。)

 

 

12.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