dnjiro’s 9VAe blog

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

SVGからアニメGIF作成「目パチ」

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

f:id:dnjiro:20190204160808g:plain



画像からまつ毛の部分を切り出します。作業時間は30分から1時間です。[完成データはこちら]。他の簡単なアニメの作り方はこちらをご覧ください

 

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

 

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

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

f:id:dnjiro:20190203173324p:plain

 

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

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

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

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

 

3. 保存したアニメをひらいて、パーツ作成のためにページを複製

(1)点の数を減らす

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

 

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

  1. ページの右側の緑色のf:id:dnjiro:20181221171302g:plainをタッチ。メニューから「続きのページを作る」をタッチ。これで2ページ目ができます。
  2. 今回は、まつげとまぶたを作るために同じページを2ページ追加します。

(3)ページの間に空白ページをいれる

 「続きのページを作る」では各ページの点がリンクでつながれており、点を削除すると他のページの対応した点も削除されてしまいます。そのためページとページの間に空白ページを入れ、リンクを削除します。

  1. ページとページの間の「>」をクリック。メニューから「空白ページを作る」

f:id:dnjiro:20190203175408p:plain



 

4.不要な点を削除してパーツをつくる

  • 3ページの目から上のまつげを作ります。

(1)不要な点を選んで削除する

  • 図形を選んでf:id:dnjiro:20181027163024g:plainをタッチすると点が表示されます。
  • f:id:dnjiro:20181221164812g:plainの「+」で拡大。スマホ版では、ピンチ操作で拡大縮小、2本指で場所の移動ができます。

  • とりあえず、目や下のまつ毛の点を選んでf:id:dnjiro:20181221164227p:plainで削除します。下の線がおかしいですが、後で修正します。

    f:id:dnjiro:20190203180818p:plain

 

(2)シフトキーを押して点を削除し、パスを結合する

  • まつげと目の上の線が重なっています。ここからまつ毛を取り出すためには、外周の線と穴の線をつなぐ必要があります。特別な点の削除を行います。下の図をみてください。

    f:id:dnjiro:20190204112556p:plain

     

    赤い点が2つ選ばれています。右上の赤い点はf:id:dnjiro:20181027163046g:plainをタッチして追加しました。この2つの点をシフトキーを押しながら削除します。
  • スマホ版では左下の「Shift」をタッチして黒くします。こうしてf:id:dnjiro:20181221164227p:plainをタッチすれば外周と穴のパスがつながって下のようになります。

    f:id:dnjiro:20190204112851p:plain



  • この方法を使って、まつ毛の横の穴と外周のパスをつなげていきます。不要な点を削除して、下図のようになります。

    f:id:dnjiro:20190204114451p:plain

  • 5ページのデータから、まぶたを作ります。上と同じ方法でパスを結合し、不要な点を削除すると、以下のようになります。わかりやすいように黄色にしました。
  • f:id:dnjiro:20190203193350p:plain

 

5.最初のページを背景にする

先頭ページを背景にして、1ページの内容をコピーします。

  1. 先頭ページの左側の「<」をタッチ。メニューから「背景ページを入れる
  2. 2ページに移動。全体を選ぶ。
  3. 左ページにコピーするボタンf:id:dnjiro:20181221163257g:plainをタッチ。これで2ページの内容が背景ページにはいります。

  4. 2ページと空白ページは不要なので削除します。ページ番号をタッチ。メニューから「ページを切り取る」で削除できます。
  5. 2ページに移動。背景に重なって上のまつ毛が見えます。f:id:dnjiro:20181027163046g:plainをタッチし、背景の目にあわせてまぶたの下の線を作り、以下のようになります。

    f:id:dnjiro:20190204120053p:plain

 

6.まつ毛の下にまぶたを入れる

3ページのまぶたを2ページにコピーし、重ね順序を一番下にします。わかりやすいようにまぶたを黄色にしています。

  1. 3ページに移動。まぶたを選んで、f:id:dnjiro:20181027165131p:plainをタッチ。きおくツールにまぶたを移動します。
  2. 2ページに移動。f:id:dnjiro:20190110124400p:plainをタッチ。元の図形と重ならないようにするため、メニューから「複製する」をタッチ。これで新しいまぶたがまつ毛の上に重なります。

  3. 「Shitt」をタッチ(PC版の場合は「Shiftキー」を押しながら)下に下げるボタンf:id:dnjiro:20190114164547p:plainをタッチ。これでまぶたの上にまつ毛が重なった状態になります。
  4. 選びやすいようにf:id:dnjiro:20181029095306p:plainをタッチして登録。
  5. 3ページは不要なので削除。ページ番号3をタッチ。メニューから「ページを切り取る」で削除できます。

    f:id:dnjiro:20190204120537p:plain

 

 

7.続きのページを追加

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

  1. ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。メニューから「続きのページを作る」をタッチ。3ページができます。
  2. 3ページに移動し、まぶたを閉じたところを作ります。

 

8.まぶたを閉じたところを作る

  • 登録したパレットのまぶたをタッチし、メニューから「固定」をタッチ。これでまぶたが選ばれなくなり、まつ毛だけを選択できます。
  • まつ毛の点を選択し、選択枠の辺の■メニューにある「のばす」や、中心メニューの「+」にある「ゴム変形」や「移動」などを使ってまつ毛の形を下のように変形します。

    f:id:dnjiro:20190204122046p:plain

  • 登録したパレットのまぶたをタッチし、メニューから「選択する」をタッチ。まぶたを選びます。

  • f:id:dnjiro:20181027163024g:plainをタッチし、点を表示し、まぶたの下の線を下のように変形します。

    f:id:dnjiro:20190204123749p:plain

  • プレイボタンf:id:dnjiro:20181029083754g:plainで動きをみながら形を調整します。変形の途中で背景が見えてしまうので、2ページのまぶたの下の線をもっと下げるという調整も行いました。

 

9.2ページに「往復」と動きグラフをいれる

  1. 2ページに移動。メニューバー「ツール>往復」をタッチ。これで2ページと3ページの間を往復します。
  2. 2ページの図形を全部選んで、f:id:dnjiro:20181029095306p:plainをタッチ。パレットに登録します。
  3. 登録したパレットをタッチ。メニューから「ゆっくり動くグラフ」をタッチ。下のような形にグラフを調整します。このグラフの形を変えれば目の閉じ方を調整できます。

    f:id:dnjiro:20190204133431p:plain

 

10.背景の上のまつ毛を消す

  • 1ページの背景の上のまつ毛は必要ないので、点選択して削除します。これで完成。

 

11.アニメGIF出力

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

 

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

 

13.SVGアニメ

  • 9VAeきゅうべえ(Android版)で保存したファイルは、SVG形式で保存され、ChromeFirefox ではプラグインなしでアニメーションになります。(Internet Explorer や Edge では静止画になります。)
  • 9VAeきゅうべえ(パソコン版)では、標準は EVA形式ですが、SVG形式でも保存できます。

 

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

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

 

 

 

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

 

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

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