dnjiro’s 9VAe blog

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

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

9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。口パクするまでは5分。頭を動かすまでは15分くらいでできます。動画素材サムネイルもつくれます。[完成データはこちら]

 

f:id:dnjiro:20200719182812g:plain



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

 

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

 

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

Openclipart (Shishi Lion Dance) からダウンロードします。

 

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

f:id:dnjiro:20210610194025g:plain

アニメキャストの中身を保存(ツールメニューから読み込んだ場合)

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

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

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

続きのページを作成

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

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

f:id:dnjiro:20210610201226g:plain

 身体と模様だけ選ぶ

  1. 身体と模様を選んでから、点選択または追加ボタンf:id:dnjiro:20181027163046g:plain(上図E)をタッチ。イラスト全部の点が表示されます。この中からまず身体と模様と顔を区別します。
  2. 身体と模様の点の周りを線で囲むように指で書いて選びます。選んだ点のまわりに選択枠ができます。
  3. ここで、もう一度点選択または追加ボタンf:id:dnjiro:20181027163046g:plain(上図E)をタッチすれば選んだ点が含まれる図形だけが選ばれます。

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

  1. 登録パレットのf:id:dnjiro:20181029095306p:plain(上図G)をタッチ。これで選んだ身体と模様がパレットに登録されます。登録パレットのON/OFFは右下すみ(上図F)です。
  2. バレットに登録されたボタン(上図H)をタッチ。「隠す」をタッチ。これで身体と模様が見えなくなります。

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

  1. 同様にして下の歯とアゴだけ選びます。歯とアゴの点の一部を線で囲むようにして選び、もう一度点選択または追加ボタンf:id:dnjiro:20181027163046g:plain(上図E)をタッチ。これで歯とアゴだけ選ばれた状態になります。左下の「+」(下図I)で拡大して作業できます。

    f:id:dnjiro:20210610214015g:plain

  2. 下の歯とアゴの点だけ線で囲んで選び、選択枠の枠線(上図J)をドラッグして下に移動させます。これで口を開けることができました。
  3. プレイボタンを押してアニメーションを見てみましょう。もし動かなかったら、2ページめを作る作業(「+」ボタンCを押して「続きのページを作る」)を忘れていたかもしれません。

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

  1. 1ページまたは「<<」(上図L)をタッチして1ページに移動
  2. 1ページの左上のボタン(上図M)をタッチ。メニューから「往復」をタッチ(「ツール」メニューの「往復」でも同じ。)往復命令を1ページに入れれば、1ページと2ページの間を往復します。
  3. プレイボタンを押してアニメを見て見ましょう。ストップボタン■を押せば止まります。もし口が開いた状態で止まる場合は、「往復」が2ページにはいっている可能性があります。

 口が模様の下になるのがおかしいですね。静止画では、口と模様がはなれていたので重なり順序が考慮されていなかったためです。修正しましょう。

 

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

  1. 2ページ(下図O)または「>」をタッチして2ページに移動。

    f:id:dnjiro:20210610224850g:plain

  2. 獅子の頭を選んで、点選択または追加ボタン(上図P)f:id:dnjiro:20181027163046g:plainをタッチ。
  3. 獅子の頭に含まれる点を青い線で囲んで(上図Q)、点ボタンf:id:dnjiro:20181027163046g:plainをもう一度タッチ。これで獅子の頭だけが選ばれます。(パソコン版の場合、Ctrlキーを押しながら画面をドラッグすれば青い線で囲んで点を選べます。)
  4. 模様の点が残っている場合は、もう一度点を選びなおし、獅子の頭の点だけが残るようにしてください。
  5. 選択枠の中心の「+」(上図R)をタッチ。メニューから「つながった図形を選択」をタッチ。これで1、2ページ分の獅子の頭が選ばれます。
  6. f:id:dnjiro:20181027165131p:plain(上図S)をタッチして獅子の頭をきおくツールにカット。上のページの中身が身体だけになっていれば成功です。これで口を開け閉めするアニメーションが記憶ツールにはいりました。

  7. 記憶内容をアニメキャストにするボタンf:id:dnjiro:20181027165315g:plain(上図T)をタッチ。名前はなんでもかまいません。「OK」を押せばアニメキャストがはいります。

  8. 選んだ図形を前のページにコピーするボタンf:id:dnjiro:20181221163257g:plain(上図U)をタッチ。これで、2ページのアニメキャストが1ページにコピーされます。

     

アニメキャストに動きをつける

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

    f:id:dnjiro:20210610231010g:plain

  2. 赤い線(動き矢印)に点を追加します(上図W)。赤い線にそって頭が動きます。
  3. 2ページまたは「>」(上図X)をタッチして2ページに移動しましょう。
  4. 選択枠の角のハンドル(上図Y)をタッチ。メニューから「回転」を選んでアニメキャストをすこし回転させ、頭をかたむけます。プレイボタンで動きをみてください。

     

  5. アニメキャストの選択枠の中心の「+」(下図Z)をタッチ。「アニメ...を修正」をタッチ。獅子の頭が開きます。

    f:id:dnjiro:20210611164222g:plain

  6. 1ページまたは「<<」(上図a)をタッチして1ページに移動。
  7. ページ左上のボタン(上図b)または「ツール」メニューから「往復」をタッチ。
  8. 1ページの時間(上図c)をタッチし、「0.1秒短くする」をタッチし、時間を0.5秒にします。これで0.5秒で口を開け閉めします。
  9. 画面の太文字「shishi.svg >xxxxx」の「shishi.svg」(上図d)をタッチ。メニューから「このアニメにもどる」をタッチ。元のアニメに戻ります。
  10. プレイボタンf:id:dnjiro:20181029083754g:plainで動きをみてみましょう。

 

アニメGIF / 動画(MP4)出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒30コマ、高さ720 または 1080 で出力するとよいでしょう。
  • このアニメには往復ボタンがはいっており、無限ループなので「出力秒数」を設定する必要があります。
  • 往復するのに2秒かかるので、2を設定しましょう。
  • 完成したファイルは、スマホの場合、端末内の「9VAe」フォルダの中に出力されます。
  • Androidの場合は、フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

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

アニメGIFは簡単にMP4動画に変換できます。(

  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で読み込めば、自由に編集できます。
  • こちら(完成したSVGデータ)にアップしましたので、ここを長押し、もしくは右ボタンメニューでダウンロードできます。9VAeきゅうべえで中身をご覧ください。

 

9VAeきゅうべえを使えば、スマホだけで、SVGイラストから絵をかかずにアニメーションを作成できます。SVGの静止画のフリー素材イラストがネット上にたくさんあります。いろんなアニメーションを作ってみてください。

 

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

 

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

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

 

サムネイル画像の作成

  • 9VAe Ver.0.8.5 (スマホ Ver.1.5)から各ページを任意サイズのPNG画像に出力する機能がつきました。
  1. ファイルメニュー>画像出力。パソコン版は先に保存フォルダと保存名を指定します。
  2. 画像設定画面で、画像サイズ(縦横ドット数)を指定します。Youtube サムネイルは 1280x720 推奨。 サムネイルの場合「背景を透明にする」にはチェックをいれないほうがよいでしょう。
  3. 原稿の縦横比率を変更したい場合は、「ページメニュー>ページ設定」でステージのサイズを変更します。

 

 

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