dnjiro’s 9VAe blog

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

SVGからアニメGIF作成「動く温泉マーク」

9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。

f:id:dnjiro:20190405174302g:plain



作業時間は10分程度です。[完成データはこちら]。他のアニメの作り方はこちらをご覧ください

 

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

 

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

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

f:id:dnjiro:20190405095741p:plain

 

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

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

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

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

 

3. 点の数を減らして、グループ解除

(1)点の数を減らす

  1. 画面をタッチして図形を選択。
  2. メニューバー「編集>点を減らす」をクリック。これで点の数が減り、編集しやすくなります。(パソコンの場合は、編集>効果>点を減らす)

 

(2)グループの解除

  1. 画面の図形をクリック。中心の「+」をクリック、メニューから「グループ解除」をクリック。もう一度湯気をクリック。中心の「+」をクリック、メニューから「グループ解除」をクリック。これで図形がばらばらになります。

 

4.湯気をのばして透明グラデーションをつける

(1)湯気3本を複製して下につなげる

  1. 3本の湯気をいっしょに選択。中心の「+」をクリック、メニューから「複製」をクリック。
  2. 複製した湯気を下に移動し、長い湯気を作ります。中央の湯気は少し下に移動させましょう。

    f:id:dnjiro:20190405141536p:plain

(2)6本の湯気をグループ化し「いっしょに塗る」ようにしてグラデーションをつける

  1. 6本の湯気を同時に選択。中心の「+」をクリック、メニューから「グループ化」をクリック。湯気をひとつのグループにまとめます。
  2. 中心の「+」をクリック、メニューから「いっしょに塗る」をクリック。
  3. 右上のパレットからグラデーションのパレットをクリック。上から4番目のかまぼこ型グラデーションをクリック。下のようなグラデーションになります。

    f:id:dnjiro:20190405143106p:plain

(3)グラデーションの制御点◇を選んで右上に移動させる

  1. 点選択ボタンf:id:dnjiro:20181027163024g:plainをクリック。湯気の点が表示されるので、右端の◇、または左上の湯気の点を1点だけ選んで、もう一度f:id:dnjiro:20181027163024g:plainをクリック。これで下図のようにグラデーションの点が選びやすくなります。
  2. グラデーションの点◇4点を選んで、右上に移動。選択枠の角のハンドルをドラッグして、サイズを半分に縮めます。

    f:id:dnjiro:20190405144401p:plain

    グラデーションの点の意味は、緑色の◇がグラデーションの範囲、オレンジ色の◇を結ぶ線がグラデーションの方向になります。

(4)グラデーションの色2を透明にする

  1. カラーパレットの色2ボタン(上図の黄色いボタン)をクリック。色を赤にし、カラーパレットの上の透明度を一番左側(透明)にします。虫眼鏡ボタンを押して再描画すると下図のようになります。

    f:id:dnjiro:20190405150010p:plain

 

5.続きのページを追加

動きをつけるために続きのページを作りましょう。

  1. ページの右側の f:id:dnjiro:20181221171302g:plain をクリック。メニューから「続きのページを作る」をクリック。2ページができます。

 

6.前後のページを表示し、下の湯気を前のページの上の湯気に合わせる

  1. メニューバー「表示>前後のページを重ねて表示」をクリック。前のページの湯気の場所が水色で表示されます。
  2. 2ページの湯気を選び、下の湯気が前のページの上の湯気に重なるように移動させます。
  3. 中心の湯気の位置も合わせましょう。湯気を選んで、点選択ボタンf:id:dnjiro:20181027163024g:plainをクリック。中心の湯気の点を一部選んで、2回f:id:dnjiro:20181027163024g:plainをクリック。これで中心の湯気だけ選ばれるので前のページの湯気の位置にあわせます。

    f:id:dnjiro:20190405152638p:plain

7.2ページのグラデーションを1ページと同じ位置にする

  1. 2ページのグラデーションの点を選んで、1ページのグラデーションの点と同じ位置に移動させます。

    f:id:dnjiro:20190405153815p:plain

8.1ページに「繰り返し」をいれる

  1. 1ページに移動。メニューバー「ツール>繰り返し」をクリック。これで1ページと2ページの間を繰り返します。
  2. プレイボタンf:id:dnjiro:20181029083754g:plainをクリックし、下から湯気があがっていくアニメーションをみてください。

 

9.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。
  • 「繰り返し」を入れているため、アニメーションの時間が無限になっています。アニメGIFの時間は、「1」を入力し、繰り返し1秒のアニメGIFをつくりましょう。
  • 画像サイズについて、スマホ版では、幅、高さのどちらかを空白にしておけば、比率を保った数値が自動設定されます。MP4動画を作る場合は高さ「720」に設定するとよいでしょう。
  • Androidの場合、完成したファイルは、端末内の「9VAe」フォルダの中に、指定した名前、例えば「onsen.gif」という名前で出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

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

 

11.SVGアニメ出力

  • Ver. 0.6.6 以上のバージョンでSVG出力してください。
  • 9VAeきゅうべえ(スマホ版)は、SVG形式で保存されます。ChromeFirefox ではプラグインなしでアニメーションになります。(Internet Explorer や Edge では静止画になります。)
  • 9VAeきゅうべえ(Windows版、Linux版)では、保存するときに、SVG形式で保存できます。Mac版では、ファイルメニューの中に、SVG出力があります。

 

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

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

 

9VAeでイラストからループアニメーションがすぐ作れる 

  • 9VAeきゅうべえを使えば、SVGイラストから絵をかかずにループアニメが作れます。Openclipart には15万点以上のSVGイラストがあります。そのまま静止画として使うのはもったいない。ぜひ動きをつけてご利用ください。
  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

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