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

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

他のアニメの作り方はこちら。9VAeの質問はこちら。

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

• Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Win / Mac / Linux：無料ソフトでアニメを作ってみよう - Qiita
• Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
• 9VAeのボタン説明、メニュー/キー

9VAeきゅうべえの使い方

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

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

これで、9VAeにSVGイラストが読み込まれます。
左下の「虫眼鏡」ボタンをクリックすると全体が見えます。 

 

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

よみこんだイラストはアニメキャストという部品のアニメになります。静止画で使いたい場合はアニメキャストにしておくほうが便利ですが、動きをつけたい場合は、アニメキャストの中身を開きます。

 

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

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

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

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

  次のようにします。

（１）点を選ぶ

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

（２）登録パレットに登録して隠す

1. 右側のをタッチ。選んだ図形がパレットに登録されます。

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

（３）追加したい点を選んで、登録パレットに「追加登録する」

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

   

   登録パレットに図形を登録しているところ

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

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

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

  

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

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

1. 右側の回転リールの点だけ選択。をタッチし、回転リールだけが選ぶ。

   

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

   
   

2. をタッチ。これで回転リールがきおくツールに移動します。

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

4. をタッチして後から選択しやすいよう登録。

６．回転するリールをつくる

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

   

   
   

７．９秒で時計周り逆回転させる

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

1. 回転リールをタッチ。選択の枠の中心「＋」をタッチ。メニューから「枠の角度０（時計回り）」をタッチ
2. 「3600」と入力。これで回転リールが3600度回転した状態になります。
3. ページの右側の をタッチ。メニューから「続きのページを作る」をタッチ。２ページめができます。
4. ２ページの回転リールをタッチ。選択の枠の中心「＋」をタッチ。メニューから「枠の角度3600（時計回り）」をタッチ
5. 「0」と入力。これで２ページでは0度回転した状態になります。
6. １ページの時間「１秒」をタッチ。メニューから「１秒長くする」を８回タッチして９秒にします。
7. ボタンで回転するようすを見てください。

   

   １ページを９秒3600回転、２ページを０回転に設定したところ

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

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

９．重ね順序の調整

1. をタッチ。これで「隠す」がリセットされ、全体が見えます。

2. テープを選んで、 をタッチし重ね順序を調整します。
   
   
3. 重ね順序の調整ではうまくいかないので、をタッチし、下のような凹型多角形を描きます。

   

   テープを隠すために多角形を入力。あとで色をつける。

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

   

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

   
   
   

１０．９秒かけて再生し、１秒で巻き戻すアニメをつくる

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

1. ページの右側の をタッチ。メニューから「続きのページを作る」をタッチ。２ページめを作ります。
2. １ページの左側のテープを選択して拡大し、右側のテープを選択して縮小します。
3. ２ページでは、左側のテープを縮小します。
4. １ページのページ番号「１」をタッチ。メニューから「ページを記憶する」をタッチ。これで記憶ツールに１ページがはいります。
5. ２ページの右側の をタッチ。メニューから「記憶したページを入れる」をタッチ。これで３ページができます。
6. ２ページの時間を１秒、３ページの時間を０秒にしましょう。

7. ボタンで動きをみてください。

   

   ２ページの内容

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

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

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

   

   最初はゆっくり、だんだん速くなる動きグラフ

4. また１秒で巻き戻しを行う２ページについて。回転がはやくてリールが見えないとして、中心に白い円をかぶせます。
5. ステージの上の太字「mixtape.svg」をタッチ。メニューから「このアニメにもどる」をタッチ。で動きをみてください。

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

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

   

   最初は速く、だんだんゆっくりになる動きグラフ

6. 元のアニメにもどって、で動きをみてください。

１３．アニメGIF出力

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

１４．ezgif サイトで、MP4動画に変換

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

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

• これで、MP4ファイルが保存できます。

 

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

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

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

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

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

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

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