dnjiro’s 9VAe blog

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

SVGからアニメGIF作成「手をあげる」

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

 

f:id:dnjiro:20191004171816g:plain



作業時間は15分程度です。他のアニメの作り方はこちらをご覧ください

 

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

 

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

  1. 以下のイラストを開く 。ダウンロードは「DOWNLOAD SVG」ボタン

    Happy housewife - FreeSVG

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

f:id:dnjiro:20191012231025p:plain

 

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

「ツール>ネットからダウンロード」で読み込むと、イラストはアニメキャストという部品のアニメになります。イラストを動かすにはアニメキャストの中身を開きます。
 
  1. 選択枠の中心の「+」をクリック。メニューの上から2番目「アニメ(...)を修正する」をクリック。アニメキャストの中が開きます。

  2. 「ファイル>名前をつけて保存」で「housewife」と名前をつけて保存しましょう。

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

 

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

(1)点の数を減らす

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

 

(2)グループの解除

  1. iPhoneの場合「<<  <」ボタンをタッチすれば画面が広くなります。
  2. 画面の図形をクリック。選択枠の中心の「+」をクリック、メニューから「グループ解除」をクリック。これで図形が別々になります。

(3)続きのページをつくる

  1. iPhoneの場合、メニューバーをタッチするとページが見えます。画面を横にしてください。
  2. ページの右側の緑色のf:id:dnjiro:20181221171302g:plainをタッチ。メニューから「続きのページを作る」をタッチ。これで2ページ目ができます。

    f:id:dnjiro:20191004161030p:plain

 

4.右手を選んで点を表示する

  1. iPhoneの場合「<<  <」ボタン
  2. 右腕を左上から四角形で囲むようにして選ぶ。
  3. 選択枠の中心の「+」をクリック、メニューから「点の編集」をタッチ。これで右腕の点が表示されます。

    f:id:dnjiro:20191004161125p:plain

 

5.右手を下に移動

  1. 右手と腕の上半分の点を選んで下に移動させます。

    f:id:dnjiro:20191004163013p:plain

  2. 肩から腕の点を下に移動させます。このとき、線と塗りの2つの図形が重なっているので、1点を移動させるときでも点を囲むように選択し、選択枠中心の「+」をクリックし、メニューから「移動」をタッチして移動させるとよいでしょう。スマホの場合、2本指のピンチアウトで画面を拡大できます。パソコンの場合、マウスダイヤルをまわせば、画面を拡大縮小できます。

    f:id:dnjiro:20191004163438p:plain

  3. このイラストは塗りと縁が別の図形になっており、1点ずつ移動させると塗りと縁の線の形がずれてしまいます。その場合、塗りの点と線の点を選んで「配置>1点に集める」とすれば同じ位置になります。外から四角形で2点同時に選び中心の「+」から「移動」で2点同時に移動させるとよいでしょう。
  4. 肩の部分は別の図形なので、何もないところをタッチし、肩の図形を選んで、形を整えます。

    f:id:dnjiro:20191004164155p:plain


     

 

6.1ページに移動し、往復ボタンをいれる

  1. iPhoneの場合、メニューバーをタッチし、画面を横にするとページが見えます。
  2. 1ページをタッチして1ページに移動。1ページの左上(下図の赤丸)をタッチし、メニューから「往復」をタッチ。これで1ページに「往復」がはいります。

    f:id:dnjiro:20191004165450p:plain

  3. プレイボタンf:id:dnjiro:20181029083754g:plainを押してアニメが動くのをみてください。おかしい部分は図形を選び、点の位置を移動させて調整しましょう。

 

7.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。

    f:id:dnjiro:20191004172828p:plain

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

 

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

 

9.SVGアニメ出力

  • スマホ版、Mac版(9va-mac64)では普通に保存すれば、SVGアニメ形式で保存されます。ChromeFirefox で開けばはアニメーションになります。(Internet Explorer や Edge では静止画になります。)
  • 9VAeきゅうべえ(Windows版、Linux版)では、保存するときにフォーマットを選べば、SVG形式で保存できます。

 

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

  • 9VAeきゅうべえで保存したSVGアニメーションは、9VAeで読み込めば、自由に編集できます。

 

9VAeでイラストから動くアイコンがすぐ作れる 

  • 9VAeきゅうべえを使えば、SVGイラストから絵をかかずに動くアイコンが作れます。FreeSVGのような多くのSVGイラストサイトがあります。いろんな動くアイコンをつくってみてください。
  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

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