dnjiro’s 9VAe blog

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

SVGからアニメGIF作成「カセットテープ」

9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。左右のテープリールの回転数がテープの巻き数によって変化します。この動きがプログラムなしで作れます。作成は20から30分。[完成データはこちら]

 

f:id:dnjiro:20190115004854g:plainほかのアニメの作り方はこちらをご覧ください

 

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

 

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

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

f:id:dnjiro:20190114133224p:plain

 

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

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

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

  3. メニューバー「ファイル>新規作成」をクリック
  4. メニューバー「ファイル>開く」をクリック。「mixtape」を開く。
  5. これに動きをつけていきます。

 

3. 登録パレットをつかってパーツに分ける

  次のようにします。

(1)点を選ぶ

  1. 図形を選んでf:id:dnjiro:20181027163024g:plainをタッチすると点が表示されます。
  2. 一部の点を選んでもう一度f:id:dnjiro:20181027163024g:plainをタッチするとその点を含む図形だけが選ばれた状態になります。この方法でグループ化された図形の一部の点を選択することができます。ぜひ覚えてください。

(2)登録パレットに登録して隠す

  1. 右側のf:id:dnjiro:20181029095306p:plainをタッチ。選んだ図形がパレットに登録されます。

  2. 登録されたボタンをタッチ。メニューから「隠す」。これで選んだ図形が見えなくなります。このボタンに図形を追加登録していきます。

(3)追加したい点を選んで、登録パレットに「追加登録する」

  1. 追加したい図形の点を選んで、f:id:dnjiro:20181027163024g:plainをタッチし、点を含む図形だけが選ぶ。
  2. 登録パレットに登録されたボタンをタッチ。メニューから「追加登録する」

    f:id:dnjiro:20190114135349p:plain

    登録パレットに図形を登録しているところ
  3. ボタンに登録された図形が消えていくので、残った図形を選んで、複数のボタンに分類していきます。

 

4.左右のテープリールとそれ以外のパーツにわける

  • 登録パレットに、左右のテープリールとそれ以外のパーツの3つの登録ボタンを作ります。
  • f:id:dnjiro:20181221164812g:plainで画面拡大して、テープリールの点とそれ以外の点を選んで、登録しましょう。スマホ版は、ピンチ操作で拡大縮小、2本指で場所の移動ができます。

    f:id:dnjiro:20190114140956p:plain

    登録パレットの3つのボタンに分けたところ

5.右の回転リールだけアニメキャストにする

  1. 右側の回転リールの点だけ選択。f:id:dnjiro:20181027163024g:plainをタッチし、回転リールだけが選ぶ。

    f:id:dnjiro:20190114150034p:plain

    右側の回転リールの点だけ選んだところ

  2. f:id:dnjiro:20181027165131p:plainをタッチ。これで回転リールがきおくツールに移動します。

  3. f:id:dnjiro:20181027165315g:plainをタッチ。名前を「reel」とつける。これでアニメキャストになります。

  4. f:id:dnjiro:20181029095306p:plainをタッチして後から選択しやすいよう登録。

 

6.回転するリールをつくる

  1. 回転するリールの選択枠の中心の「+」をタッチ。メニューから「アニメ(:reel)を修正」をタッチ。回転リールの中が開きます。
  2. 回転するリールの中心がグラデーションになっています。中心の図形を選んでべた塗の白色にします。
  3. 正確に回転させるために回転リールをもう一度アニメキャストにします。図形全体を選んでf:id:dnjiro:20181027165131p:plainをタッチ。f:id:dnjiro:20181027165315g:plainをタッチ。名前を「rotate」とつける。回転リールがアニメキャストの中のアニメキャストになりました。

    f:id:dnjiro:20190114152134p:plain


 

7.9秒で時計周り逆回転させる

9秒でテープが再生し、1秒で巻き戻しするアニメーションをつくってみましょう。

  1. 回転リールをタッチ。選択の枠の中心「+」をタッチ。メニューから「枠の角度0(時計回り)」をタッチ
  2. 「3600」と入力。これで回転リールが3600度回転した状態になります。
  3. ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。メニューから「続きのページを作る」をタッチ。2ページめができます。
  4. 2ページの回転リールをタッチ。選択の枠の中心「+」をタッチ。メニューから「枠の角度3600(時計回り)」をタッチ
  5. 「0」と入力。これで2ページでは0度回転した状態になります。
  6. 1ページの時間「1秒」をタッチ。メニューから「1秒長くする」を8回タッチして9秒にします。
  7. f:id:dnjiro:20181029083754g:plainボタンで回転するようすを見てください。

    f:id:dnjiro:20190115113413p:plain

    1ページを9秒3600回転、2ページを0回転に設定したところ

 

8.元のアニメにもどり、左側のリールも回転させる

  1. ステージの上の太字「mixtape.svg」をタッチ。メニューから「このアニメにもどる」をタッチ。元のアニメーションに戻ります。
  2. 1ページの時間「1秒」をタッチ。メニューから「1秒長くする」を8回タッチして9秒にします。
  3. 右側の回転リールを選び、選択枠の中心の「+」をタッチ。メニューから「複製する」をタッチ。
  4. 左側の回転リールの上に重ねます。
  5. f:id:dnjiro:20181029083754g:plainボタンで両方の回転リールが回転するようすを見てください。

 

 

9.重ね順序の調整

  1. f:id:dnjiro:20181029155754p:plainをタッチ。これで「隠す」がリセットされ、全体が見えます。

  2. テープを選んで、f:id:dnjiro:20190114164532g:plain f:id:dnjiro:20190114164547p:plainをタッチし重ね順序を調整します。

  3. 重ね順序の調整ではうまくいかないので、f:id:dnjiro:20190115132634p:plainをタッチし、下のような凹型多角形を描きます。

    f:id:dnjiro:20190115132810p:plain

    テープを隠すために多角形を入力。あとで色をつける。
  4. 多角形をカセットと同じ色にします。塗色のカラーパレットの中に「画面から色を選ぶ」があり、これをタッチし、カセットテープのケースを選んで同じ色にします。多角形の線は線の種類のパレットで「(なし)」「ぶれをとる」に設定します。重ね順序をテープの上に設定すれば下のようになります。

    f:id:dnjiro:20190115112757p:plain

    カセットと同じ色の凹型を入れて重なり順序を調整したところ


 

10.9秒かけて再生し、1秒で巻き戻すアニメをつくる

最初テープは左側にあって、9秒かけて右側に移動し、1秒で左側に巻き戻す、というアニメーションにしましょう。

  1. ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。メニューから「続きのページを作る」をタッチ。2ページめを作ります。
  2. 1ページの左側のテープを選択して拡大し、右側のテープを選択して縮小します。
  3. 2ページでは、左側のテープを縮小します。
  4. 1ページのページ番号「1」をタッチ。メニューから「ページを記憶する」をタッチ。これで記憶ツールに1ページがはいります。
  5. 2ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。メニューから「記憶したページを入れる」をタッチ。これで3ページができます。
  6. 2ページの時間を1秒、3ページの時間を0秒にしましょう。
  7. f:id:dnjiro:20181029083754g:plainボタンで動きをみてください。

    f:id:dnjiro:20190115111129p:plain

    2ページの内容

 

11.動きグラフで回転リールのスピードを変化させる

テープの回転スピードはテープの巻き数が少ないときは速く、巻き数が多くなるとゆっくりになります。動きグラフを使えば簡単に再現できます。

  1. ステージの上の太字「mixtape.svg」をタッチ。メニューから「reel」をタッチ。アニメキャスト「reel」を開きます。
  2. 1ページのアニメキャストをタッチして選択。f:id:dnjiro:20181029095306p:plainをタッチし登録パレットに登録します。
  3. 登録されたボタンをタッチ。メニューから「ゆっくり動き出すグラフ」をタッチ。下のような動きグラフが追加され、最初はゆっくり、だんだん速く回転する動きになります。

    f:id:dnjiro:20190115105555p:plain

    最初はゆっくり、だんだん速くなる動きグラフ
  4. また1秒で巻き戻しを行う2ページについて。回転がはやくてリールが見えないとして、中心に白い円をかぶせます。
  5. ステージの上の太字「mixtape.svg」をタッチ。メニューから「このアニメにもどる」をタッチ。f:id:dnjiro:20181029083754g:plainで動きをみてください。

 

12.アニメキャストを複製して、別の動きをつける

  1. 右側の回転リールは、最初は速く、だんだんゆっくりという逆の動きになります。そのため、右側の回転リールを選択し、選択枠中心の「+」をタッチ。メニューから「別のアニメにして修正」をタッチします。
  2. 「他のページの内容も修正しますか?」と表示されるので「はい」をタッチ。
  3. アニメキャストの名前を「reelR」として「OK」をタッチ。アニメキャスト「reelR」がひらきます。
  4. 右側の登録ボタンをタッチ。メニューから「動きグラフを修正」をタッチ。動きグラフの形が変更できるようになります。
  5. 中央の点を移動させ、下のようにして、最初は速く回転し、あとからゆっくりになるように設定します。

    f:id:dnjiro:20190115105244p:plain

    最初は速く、だんだんゆっくりになる動きグラフ
  6. 元のアニメにもどって、f:id:dnjiro:20181029083754g:plainで動きをみてください。

 

13.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。画像サイズが大きい場合や、秒間のコマ数が多いと作成に時間がかかります。
  • 完成したファイルは、Androidの場合は、端末内の「9VAe」フォルダの中に「mixtape.gif」という名前で出力されます。
  • Androidの場合、フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

14.ezgif サイトで、MP4動画に変換

アニメGIFは簡単にMP4動画に変換できます。動画にする場合、アニメGIFの高さは「720」で作成するとよいでしょう。

  1. ezgif.com ( Online GIF to MP4 Video converter ) を開く
  2. 「ファイルを選択」をクリック > 作成したファイルを選ぶ。(Android版の場合、「ファイル」をクリックし、出力されたアニメGIFを選ぶ)
  3. Upload!」ボタンをクリック
  4. Convert GIF to MP4!」ボタンをクリック
  5. Save」ボタン(フロッピーディスクアイコン)をクリック
  • これで、MP4ファイルが保存できます。

 

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

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

 

 

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

 

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

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