dnjiro’s 9VAe blog

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

SVGからアニメGIF作成「獅子舞」

9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。アニメキャストを使って、口を開け閉めしながら頭を動かします。口を動かすまでは5分。頭を動かすまでは15から20分でできます。[完成データはこちら]

 

f:id:dnjiro:20190118194926g:plain

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

 

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

 

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

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

イラストが9VAeに読み込まれたところ

 

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

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

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

  3. メニューバー「ファイル>閉じる」をクリック。
  4. メニューバー「ファイル>開く」をクリック。「shishi」を開く。
  5. これに動きをつけていきましょう

続きのページを作成

  1. 上のf:id:dnjiro:20181221171302g:plainをタッチ。「続きのページを作る」をタッチ。これで2ページができます。

2ページの獅子の口を開けて口を動かすアニメを作ってみましょう。そのためには、アゴと一部の歯だけ選んで変形する必要がありますが身体が一緒に選択されてしまうため、選択されないように登録して隠します。

 身体と模様だけ選ぶ

  1. 身体と模様を選んでから、点追加ボタンf:id:dnjiro:20181027163046g:plainをタッチ。図形全体がグループ化されているため、イラスト全部の点が表示されます。
  2. 身体と模様の一部の点の周りを線で囲むように指で書いて選びます。身体と模様の一部の点を選ぶ
  3. ここで、もう一度点追加ボタンf:id:dnjiro:20181027163046g:plainをタッチすれば選んだ点が含まれる図形だけが選ばれます。身体と模様だけが選ばれる

 選択の邪魔になる図形を登録して隠す

  1. 登録パレットのf:id:dnjiro:20181029095306p:plainをタッチ。これで選んだ身体と模様がパレットに登録されます。
  2. バレットに登録されたボタンをタッチ。「隠す」をタッチ。これで身体と模様が見えなくなります。

 下の歯とアゴを選択して口を開ける

  1. 同様にして下の歯とアゴだけ選びます。歯とアゴの点の一部を線で囲むようにして選び、もう一度点追加ボタンf:id:dnjiro:20181027163046g:plainをタッチ。これで歯とアゴだけ選ばれた状態になります。歯とアゴだけ選ばれた状態
  2. 下の歯とアゴの点だけ線で囲んで選び、ドラッグして下に移動させます。これで口を開けることができました。スクリーンショット 2017-11-25 20.12.59.png

 1ページに往復命令を入れる

  1. 1ページをタッチして1ページに移動
  2. 「ツール」メニューから「往復」をタッチ。往復命令を1ページに入れれば、1ページと2ページの間を往復します。
  3. プレイボタンを押してアニメを見て見ましょう。ストップボタン■を押せば止まります。プレイストップ

 口が模様の下になるのがおかしいですね。静止画では、口と模様がはなれていたので重なり順序が考慮されていなかったためです。頭をアニメキャストにして配置しなおせばなおります。

 

獅子の頭をアニメキャストにする

 

  1. 身体と模様を選び、登録パレットのf:id:dnjiro:20181029095306p:plainをタッチ。これで選んだ身体と模様がパレットに登録されます。
  2. バレットに登録されたボタンをタッチ。「隠す」をタッチ。これで身体と模様が見えなくなります。
  3. 画面に残っている模様を選び、バレットに登録されたボタンをタッチ。「追加登録する」をタッチ。頭だけ残して身体と模様をすべて隠します。
  4. 画面に残った獅子の頭をすべて選んで、f:id:dnjiro:20181027163046g:plainをタッチ。この段階ではグループもいっしょに選ばれています。
  5. 獅子の頭に含まれる点をすべて選んでf:id:dnjiro:20181027163046g:plainをもう一度タッチ。これでグループの中の獅子の頭だけが選ばれます。
  6. 選択枠の中心の「+」をタッチ。メニューから「つながった図形を選択」をタッチ。これで1、2ページにつながった獅子の頭だけが選ばれます。
  7. f:id:dnjiro:20181027165131p:plainをタッチして獅子の頭をきおくツールに移動。1、2ページの身体が残っていればOK。

  8. f:id:dnjiro:20181027165315g:plainをタッチ。「head」と名前をつければ、頭がアニメキャストになってはいります。

  9. f:id:dnjiro:20181221163257g:plainまたはf:id:dnjiro:20190110174431p:plainをタッチ。1、2ページにアニメキャストをいれます。

  10. 1ページに移動し、選択枠の中心の「+」をタッチ。メニューから「動き矢印を入力」をタッチ。「次のページのアニメキャストを移動させれば動き矢印ができます。移動しますか」には「いいえ」をタッチ。画面に赤い線(動き矢印)ができます。
  11. 赤い線(動き矢印)に点を追加します。この線にそって頭が動きます

    f:id:dnjiro:20190119010718p:plain

 

アニメキャストの動きの調整

  1. 2ページのアニメキャストをすこし回転させ、頭をかたむけます。
  2. アニメキャストの選択枠の中心の「+」をタッチ。「アニメ(:head)を修正」をタッチ。獅子の頭が開きます。
  3. 1ページに移動し、「ツール」メニューから「往復」をタッチ。
  4. 1ページの時間をタッチし、「0.1秒短くする」をタッチし、時間を0.5秒にします。これで0.5秒で口を開け閉めします。
  5. 画面の太文字「shishi >head」の「shishi」をタッチ。メニューから「このアニメにもどる」をタッチ。元のアニメに戻ります。
  6. f:id:dnjiro:20181029083754g:plainで動きをみてください。

 

アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。画像サイズが大きい場合や、秒間のコマ数が多いと作成に時間がかかります。
  • このアニメは無限ループなので、アニメGIFの「出力秒数」を設定する必要があります。
  • 往復するのに2秒かかるので、2を設定しましょう。
  • 完成したファイルは、Androidの場合は、端末内の「9VAe」フォルダの中に出力されます。
  • Androidの場合、フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

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

 

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

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

 

 

 

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

 

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

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