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

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

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

 

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

• Win/Mac/Linux：無料ソフトでアニメを作ってみよう（9VAe きゅうべえ） - Qiita
• アンドロイド：9VAeきゅうべえAndroid版（Google Play）
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• 9VAeのボタン説明

9VAeきゅうべえの使い方

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

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

   Happy housewife - FreeSVG

2. スマホの場合「DOWNLOAD SVG」ボタンを長押し。メニューから「リンクアドレスをコピー」または「コピー」をタッチ。9VAeきゅうべえのツールメニュー＞「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け（ペースト）」。
3. パソコンの場合は「DOWNLOAD SVG」をクリック。9VAeきゅうべえメニューから「ファイル＞開く」をクリック。ダウンロードしたファイルを選ぶ。SVGが読めない場合はバージョンが古いので最新版にしましょう。

これで、9VAeにSVGイラストが読み込まれます。
左下の「虫眼鏡」ボタンをクリックすると全体が見えます。 (図はiPhone版ダークモードで背景が黒で表示されています)

２. アニメキャストの中身を保存（スマホの場合）

「ツール＞ネットからダウンロード」で読み込むと、イラストはアニメキャストという部品のアニメになります。イラストを動かすにはアニメキャストの中身を開きます。

 

1. 選択枠の中心の「＋」をクリック。メニューの上から２番目「アニメ（...）を修正する」をクリック。アニメキャストの中が開きます。

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

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

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

（１）点の数を減らす

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

（２）グループの解除

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

（３）続きのページをつくる

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

   

４．右手を選んで点を表示する

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

   

 

５．右手を下に移動

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

   

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

   

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

   

   
   

 

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

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

   

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

７．アニメGIF出力

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

  

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

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

 

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

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

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

• 9VAeきゅうべえを使えば、SVGイラストから絵をかかずに動くアイコンが作れます。FreeSVGのような多くのSVGイラストサイトがあります。いろんな動くアイコンをつくってみてください。

• もっと長いアニメや動画を作ることもできます。以下をご覧ください。

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

 

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

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。