dnjiro’s 9VAe blog

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

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

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

 

f:id:dnjiro:20190118194926g:plain

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

 


9VAeきゅうべえで動く年賀状作成「獅子舞」

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

 

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

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

f:id:dnjiro:20191220075744p:plain



 



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

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

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

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

続きのページを作成

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

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

 身体と模様だけ選ぶ

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

    f:id:dnjiro:20191220082532p:plain

  3. ここで、もう一度点選択または追加ボタンf:id:dnjiro:20181027163046g:plain(下図E)をタッチすれば選んだ点が含まれる図形だけが選ばれます。

    f:id:dnjiro:20191220083824p:plain

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

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

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

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

    f:id:dnjiro:20191220085610p:plain

  2. 下の歯とアゴの点だけ線で囲んで選び、選択枠の枠線(下図J)をドラッグして下に移動させます。これで口を開けることができました。

    f:id:dnjiro:20191220090716p:plain

  3. プレイボタン(上図K)を押してアニメーションを見てみましょう。もし動かなかったら、2ページめを作る作業(「+」ボタンCを押して「続きのページを作る」)を忘れていたかもしれません。

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

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

    f:id:dnjiro:20191220092418p:plain

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

 

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

 

f:id:dnjiro:20191220094805p:plain

  1. 2ページまたは「>」(上図O)をタッチして2ページに移動。
  2. 獅子の頭を選んで、点選択または追加ボタン(上図P)f:id:dnjiro:20181027163046g:plainをタッチ。
  3. 獅子の頭に含まれる点を青い線で囲んで(上図Q)、点ボタンf:id:dnjiro:20181027163046g:plainをもう一度タッチ。これで獅子の頭だけが選ばれます。(パソコン版の場合、Ctrlキーを押しながら画面をドラッグすれば青い線で囲んで点を選べます。)
  4. 模様の点が残っている場合は、もう一度点を選びなおし、獅子の頭の点だけが残るようにしてください。

    f:id:dnjiro:20191220100925p:plain


  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ページにコピーされます。

    f:id:dnjiro:20191220102314p:plain

  9. 選択枠の中心の「+」(上図V)をタッチ。メニューから「動き矢印を入力」をタッチ。「次のページのアニメキャストを移動させれば動き矢印ができます。移動しますか」には「いいえ」をタッチ。画面に赤い線(動き矢印)ができます。
  10. 赤い線(動き矢印)に点を追加します(下図W)。赤い線にそって頭が動きます。プレイボタンを押して動きをみてください。

    f:id:dnjiro:20191220103517p:plain


     

 

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

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

    f:id:dnjiro:20191220104848p:plain

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

    f:id:dnjiro:20191220110547p:plain

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

 

アニメGIF出力

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

 

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

アニメGIFは簡単にMP4動画に変換できます。(Mac / iPhone / iPad版の場合は、「ファイルメニュー>動画出力」で直接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で読み込めば、自由に編集できます。
  • こちら(完成したSVGデータ)にアップしましたので、ここを長押し、もしくは右ボタンメニューでダウンロードできます。9VAeきゅうべえで中身をご覧ください。

 

 

 

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

 

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

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

 

9VAeきゅうべえに関する問い合わせ