dnjiro’s 9VAe blog

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

SVGキャラクタから口パクアニメの作り方 「女子高生」

女の子がしゃべる口パクアニメをつくってみました。9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。

f:id:dnjiro:20190204232926g:plain

「AIIEU」としゃべります。作成は15分くらいです。[完成データはこちら]。ほかのアニメの作り方はこちらをご覧ください

 

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

 

1. SVGイラストのダウンロード Scoolgirl(#5)

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

f:id:dnjiro:20190204200228p:plain



2. アニメキャストの中身を保存

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

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

 

3. 画面サイズを設定してページを複製

(1)点の数を減らす

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

 

(2)画面サイズ設定

  1. メニューバー「ファイル>ページ設定」をタッチ。
  2. 服の下を切り取るように、高さを「1010」に設定。

 

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

  1. ページの右側の緑色のf:id:dnjiro:20181221171302g:plainをタッチ。メニューから「続きのページを作る」をタッチ。これで2ページ目ができます。

 

4.口を選んで色をつける

  1. 図形を選んでf:id:dnjiro:20181027163024g:plainをタッチすると全部の点が表示されます。
  2. その中から口の点を選んでもう一度f:id:dnjiro:20181027163024g:plainをタッチすると、口の点だけが表示されます。選びにくい場合、虫眼鏡f:id:dnjiro:20181221164812g:plainの「+」で拡大できます。スマホ版では、ピンチ操作で拡大縮小、2本指で場所の移動ができます。
  3. f:id:dnjiro:20181029095306p:plainをタッチ。これで口が登録パレットに登録されます。(FreeSVG Schoolgirl'sfaceの場合は顔の輪郭も登録されます)

    f:id:dnjiro:20190204203223p:plain

     

口の中に色をつける(FreeSVG Schoolgirl'sfaceの場合は色がついているので不要)

  1. 口を線のあるポリゴンに変換します。右上の大きいカラーパレットをタッチし、中の「なし」をタッチ。これで、口の色が線の色になります。

    f:id:dnjiro:20190204204441p:plain

    もう一度、同じパレットをタッチし、口の中をピンク色にします。「画面から選ぶ」をタッチし、ほおのピンク色を選んでもよいです。
  2. 線の太さを少し太くします。

時間の調整

  1. 1ページ、2ページの時間を0.5秒にします。時間「1秒」をタッチし、メニューから「0.1秒短くする」を5回タッチします。

    f:id:dnjiro:20190204205858p:plain

5.口の形を「あ」にする

  1. 口の上の点だけを選びます。「Shift」をタッチして点を1つずつていねいに追加選択していきます。上の点を全部選んだら、選択枠の下辺の■をタッチ。メニューから「反転」をタッチ。場所を上に移動させれば下図のようになります。

    f:id:dnjiro:20190204211114p:plain

  2. 鼻が隠れているので、口の点を全部選んで下に下げます。

    f:id:dnjiro:20190204211624p:plain

     

6.続きを作って口の形を「い」にする

  1. ページの右側の緑色のf:id:dnjiro:20181221171302g:plainをタッチ。メニューから「続きのページを作る」をタッチ。
  2. 登録パレットの口をタッチ。メニューから「選択する」をタッチ。
  3. 選択枠の上辺の■をタッチ。メニューから「のばす」をタッチ。中心の「+」をタッチして「移動」

    f:id:dnjiro:20190204213919p:plain

  4. 右側の緑色のf:id:dnjiro:20181221171302g:plainをタッチ。メニューから「続きのページを作る」をタッチ。「い」をもう1ページ作成。

 

7.続きを作って口の形を「え」にする

  1. 2ページ「あ」をコピーする。ページ番号「2」をタッチ。メニューから「ページを記憶する」
  2. ページの右側の緑色のf:id:dnjiro:20181221171302g:plainをタッチ。メニューから「記憶したページを入れる」をタッチ。
  3. 「あ」の口を選び、上の点を選び、「のばす」を使って「え」の形を作る。

    f:id:dnjiro:20190204215203p:plain

 

8.続きを作って口の形を「う」にする

  1. ページの右側の緑色のf:id:dnjiro:20181221171302g:plainをタッチ。メニューから「記憶したページを入れる」をタッチ。これで「あ」の口が追加される。
  2. 「あ」の口を選び、角の■をドラッグしてサイズを縮小して「う」を作る。

    f:id:dnjiro:20190204215711p:plain

  3. プレイボタンf:id:dnjiro:20181029083754g:plainで動きをみながら調整します。

 

 

9.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。
  • Android版では、画像サイズの幅、高さのどちらかを空白にしておけば、比率を保って自動的に数値が設定されます。MP4動画を作成する場合は高さを「720」に設定するとよいでしょう。
  • 画像サイズが大きい場合や、秒間のコマ数が多いと作成に時間がかかります。
  • 完成したファイルは、Androidの場合は、端末内の「9VAe」フォルダの中に、指定した名前、例えば「schoolgirl.gif」という名前で出力されます。
  • Androidの場合、フォトアプリで、「端末内の写真>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アニメの読み込み

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

 

9VAeきゅうべえAndroid版を使えば、スマホだけで、SVGイラストから絵をかかずにアニメGIFを作成できます。Openclipart には15万点以上のSVGイラストがあります。ぜひいろんなアニメを作ってみてください。

 

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

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