dnjiro’s 9VAe blog

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

9VAeきゅうべえを使った手描きスケッチ風動画の作り方

9VAeきゅうべえを使えば、写真から手描きスケッチ風動画が誰でもつくれます。9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。下の作品は15分でできました。

 

f:id:dnjiro:20190207103630g:plain

手順は次のとおり。

 

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

 

1.9VAeの「1.」をクリックしてから、背景ページに写真を入れる

  1. 9VAeきゅうべえを起動。
  2. 「ファイル>新規作成」
  3. ページの右側のf:id:dnjiro:20181221201107p:plainをクリック。「線を書いた後もう一度「1.」ボタンを押してください」が出たら、OKをクリック。★この作業は重要でこれをやっておかないと、書き順アニメを作ってくれません。
  4. ページの左側の「<」をクリック。メニューから「背景ページを入れる」をクリック。>背景ページが左側にできます。
  5. 背景ページの「背景」をクリック。メニューから「絵・写真を入れる」をクリック。好きな写真を入れます。★Android版の場合、ファイルマネージャを使って入れたい写真を端末内部の 9VAe フォルダにいれておけば読み込めます。

2.画面サイズの調整

  1. 写真を選んで、選択枠の中心「+」をクリック。「ステージの大きさにする」をクリックします。これで写真が画面全体に広がります。
  2. もう一度、選択枠の中心「+」をクリック。「ページを画像に合わせる」をクリックします。これでステージの縦横比率が写真と同じになります。(★この項目がない場合は最新版の9VAeきゅうべえをダウンロード

3.写真をなぞって絵を描く 

  1. 2ページをクリックして2ページに移動。背景に入れた写真が下に見えるはず。
  2. 左上のツールパレットから「えんぴつ」ボタンf:id:dnjiro:20190207084344p:plainをクリック。上のf:id:dnjiro:20181221201107p:plainをもう一度クリックしてもよいです。これで線を書くモードになります。
  3. 写真の上をなぞります。線が太いと感じたら右側のパレットで調節できます。4つならんだ箱が線の属性。左から「線の色」「線の太さ」「線の種類」「矢印」。ちなみに上の色は塗り色です。
  4. 失敗したら、f:id:dnjiro:20181023071022g:plainまたは「Backspace」キーで元に戻れます。
  5. 描いた線は、あとから選択して、頂点を移動させることもできるので、あまり気にせず入力すればよいです。

     

4.書き順アニメの作成

  1. 絵が完成したら、写真を取り除きます。背景ページの下の番号「1」をクリック。メニューから「ページを切り取る」をクリック。写真がきおくツールに入ります。

    f:id:dnjiro:20190207103813p:plain



  2. ここでf:id:dnjiro:20181221201107p:plainをクリック。これで絵を描いていく書き順アニメ(1コマアニメーション)ができます。簡単でしょう。

5.手描きスケッチから写真に変化させる

  1. ページの右側のf:id:dnjiro:20181221171302g:plainをクリック。メニューから「続きのページを作る」をクリック。これで2ページ目ができます。
  2. 2ページの時間が長すぎるので、2ページの上の時間「xx秒」をクリック。一番上の時間をクリックして「2秒」ぐらいにします。ここに写真をいれます。
  3. 右側のf:id:dnjiro:20190110124400p:plainをクリック。メニューから「ステージにもどす」をクリック。これで写真が2ページにはいります。
  4. 写真の中心の「+」をクリック。メニューから「透明にする」をクリックしてチェック。これで写真が透明になります。(★「透明にする」がない場合は最新版の9VAeきゅうべえをダウンロード
  5. ページの右側のf:id:dnjiro:20181221171302g:plainをクリック。「続きのページを作る」をクリック。3ページ目ができます。
  6. 3ページの透明な写真をクリックして選択。中心の「+」をクリック。メニューから「透明にする」をクリックしてチェックをはずせば写真が元に戻ります。これで完成。
  7. プレイボタンf:id:dnjiro:20181029083754g:plainをクリックして、スケッチが描かれたあと、写真に変化するアニメを見てください。

6.アニメGIFにする

  1. 「ファイル>アニメGIF出力」をクリック。PC版はまず保存先のフォルダを選んでファイル名をいれる。
  2. アニメGIFの出力画面が出るので、出力したいサイズ、秒間のコマ数を設定。「背景を透明にする」のチェックは外しておくとよいでしょう。
  3. MP4動画にする場合は、高さを「720」に設定するとよいです。スマホ版の場合、幅を空白にすれば同じ比率で「幅」が自動的に設定されます。
  4. 上のアニメGIFも、このようにして作りました。

 

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

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

8.応用編

 

 

 

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

 

 

SVGからアニメGIF作成「泣く女」

9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。とても簡単で、10分ぐらいでできます。[完成データはこちら]

 

f:id:dnjiro:20190201122658g:plain

ほかのアニメの作り方はこちらをご覧ください

 

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

 

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

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

f:id:dnjiro:20190201124218p:plain

 

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

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

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

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

 

3. 続きのページを作る

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

 

3. 涙を下に移動

(1)点を選ぶ

  1. 図形を選んでf:id:dnjiro:20181027163024g:plainをタッチすると点が表示されます。
  2. f:id:dnjiro:20181221164812g:plainの「+」をタッチして拡大し、涙の点を囲んで選びます。パソコンの場合、Ctrlキーを押しながら画面をドラッグすると青い線で囲んで選べます。

    f:id:dnjiro:20190201130428p:plain

  3. もう一度f:id:dnjiro:20181027163024g:plainをタッチすると涙の点だけが表示されます。この方法は便利ですのでぜひ覚えてください。

     

(2)涙を下に移動

  1. 涙の点を全部選び、中心の「+」をタッチ。メニューから「移動」をタッチ。画面をドラッグして涙を下に移動させます。f:id:dnjiro:20190201131752p:plain

 

4.顔を下に向ける

  • もう一度顔を選んでf:id:dnjiro:20181027163024g:plainをタッチ。涙以外の顔左手を選びます。下の赤い点が選んだ点です。

    f:id:dnjiro:20190201133057p:plain

    中心の「+」をタッチ。メニューから「ゴム変形」をタッチ。画面下にドラッグすると顔が下を向きます。これで完成。
  • プレイボタンf:id:dnjiro:20181029083754g:plainで再生してみてください。

 

5.アニメGIF出力

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

 

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

 

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

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

 

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

 

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

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

 

 

9VAeきゅうべえを使った動くマニュアルの作り方

9VAeきゅうべえは、誰でも簡単にアニメーションが作れるフリーソフトです。 次のアニメーションは、「1コマアニメーション」を作ってプレゼンソフトにいれる方法を説明したものですが、このアニメも、9VAeきゅうべえで作りました。作り方を説明します。

000a.gif

9VAeきゅうべえで動くマニュアルを作る利点

動くマニュアル作成は、作業を撮影し、動画編集するのが一般的ですが、9VAeを使うと次の利点があります。

  • 動画撮影、動画編集機材が不要(カメラ、照明、大容量ハードディスクがなくても作れる)
  • データ容量が非常に小さく(動画の1/100以下)処理が軽い。
  • 完成したあとの修正が簡単(文章修正、パーツ差し替え、仕様変更など)。
  • 部品を再利用できるため、似たアニメーション作成がどんどん楽になる。
  • 同じデータから日本語、英語版が作成できる。

解説アニメの構造

9VAeはアニメーションを階層構造で作成します。上の解説アニメのトップの階層は次の5ページです。

strkOrdr01.png

  1. 表紙
  2. 書き順アニメの入力
  3. 書き順アニメの再生
  4. アニメGIF出力
  5. LibreOfficeに挿入

2ページ(書き順アニメの入力)の中には以下のような8ページのアニメが入っています。

strkOrdr02.png

  1. 背景(エディタ画面)
  2. 「1」ボタンを赤い丸で表示
  3. 指で「1」ボタンを押す
  4. 「線で書いたあともう一度1ボタンを押してください」
  5. 押した後の画面を表示
  6. 「アニメの作り方」を書く
  7. 書き終わった状態
  8. もう一度「1」ボタンを押す

9VAeきゅうべえのアニメ制作は、アニメーションパーツを作成し、 階層的に組み立てていきます。レゴブロックを組み立てていくようなイメージです。

動くマニュアルの作り方

このような動くマニュアルをどう作っているか解説します。

  1. SVGイラストを読み込んでアニメにする(画面をタッチする指)
  2. アニメキャスト(アニメーションの部品化)
  3. アニメキャストの作り方
  4. 背景にアニメキャストを入れる
  5. アニメキャストをパスにそって動かす
  6. 複数のアニメを切り替えてコピーする
  7. 複数ページをアニメキャストにする
  8. 日本語と英語の文字の切替え

1.SVGイラストを読み込んでアニメにする

  • 9VAeきゅうべえは、SVGイラストを読み込んで動きをつけることができます。
  • FreeSVG や、OnlineWebfonts.com などの、100万点以上のフリーのイラストを読み込んで、アニメにすることができます。その手順を紹介します。
  • SVG ファイルを 「9VA」ボタンから読み込めば、アニメキャストになります。
  • アニメキャストの中身を編集して動きをつけます。
  • なお、アニメキャストのサイズを変更しても、線の太さはかわりません。太さを調整する必要があります。

000m.gif

2.アニメキャスト(アニメーションの部品化)

2ページには書き順アニメの入力方法を記述したアニメが、アニメキャストになってはいっています。

アニメキャストは、アニメをパーツ化する仕組みで、以下の特長があります。

  • アニメーションができる。
  • アニメキャストの中にアニメキャストが入れられる。
  • 軌道(動き矢印)にそって動かせる。
  • 角度を指定して正確に回転させられる。
  • アニメキャストの中の図形全体の太さを変更したり、色をつけたりできる。
  • 同じアニメキャストの中身は一か所で管理されるため、そこを修正すれば、全部のアニメキャストを同時に修正できる。

よく使うパーツはアニメキャストにしておくと便利です。

3.アニメキャストの作り方

アニメキャストにしたい図形やページを記憶ツールに入れます。それに名前をつけてアニメキャストにします。

  1. 図形を入力し、記憶ツールの中にカットする
  2. 「q」ボタンをクリック
  3. アニメキャストに好きな名前をつける。

000p.gif

4.背景にアニメキャストを入れる

  • 変化しない背景は、背景ページに入れると便利です。
  • 背景ページの内容は、次の背景ページが来るまで、背後に表示されます。

上で説明したアニメキャストを背景に入れる手順を紹介します。

000e.gif

5.アニメキャストをパスにそって動かす

  • アニメキャストは「動き矢印」というパスにそって動かせます。
  • 動き矢印上の点(支点)は最初はアニメキャストの中心にありますが移動させることができます。
  • 文字を書くようにペンを書き順アニメの上に重ねる手順を示します。

000o.gif

6.複数のアニメを切り替えてコピーする

  • 9VAeは複数のアニメを同時に編集することができ、「9VA」ボタンで切り替えできます。
  • 「書き順」アニメを作るために、新しいアニメを開いて書き順アニメを作成し、背景ページの後ろに入れる手順を示します。

000n.gif

7.複数ページをアニメキャストにする

  • 作成した複数ページのアニメを1ページに入れる手順を示します。
  • 空白ページを作成してアニメキャストを入れたあと、ページの時間をアニメキャストの時間に設定します。

000h.gif

8.日本語と英語の文字の切替え

  • 9VAeきゅうべえの文字には、日本語、英語、区別なしの3種類の設定ができます。日本語に設定した場合、ヘルプから英語表記に変えると表示されなくなります。

000b.gif

まとめ

9VAeきゅうべえを使った動くマニュアルの作り方を説明しました。

9VAeきゅうべえを使えば、動くマニュアルや、動く教材など、動きや変化を説明したアニメーションを簡単に作れます。ご活用ください。

SVGからアニメGIF作成「獅子舞」

9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。アニメキャストを使って、口を開け閉めしながら頭を動かします。口を動かすまでは5分。頭を動かすまでは15から20分でできます。[完成データはこちら]

 

f:id:dnjiro:20190118194926g:plain

ほかのアニメの作り方はこちらをご覧ください

 

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

 

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

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

イラストが9VAeに読み込まれたところ

 

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

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

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

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

続きのページを作成

  1. 上のf:id:dnjiro:20181221171302g:plainをタッチ。「続きのページを作る」をタッチ。これで2ページができます。

2ページの獅子の口を開けて口を動かすアニメを作ってみましょう。そのためには、アゴと一部の歯だけ選んで変形する必要がありますが身体が一緒に選択されてしまうため、選択されないように登録して隠します。

 身体と模様だけ選ぶ

  1. 身体と模様を選んでから、点追加ボタンf:id:dnjiro:20181027163046g:plainをタッチ。図形全体がグループ化されているため、イラスト全部の点が表示されます。
  2. 身体と模様の一部の点の周りを線で囲むように指で書いて選びます。身体と模様の一部の点を選ぶ
  3. ここで、もう一度点追加ボタンf:id:dnjiro:20181027163046g:plainをタッチすれば選んだ点が含まれる図形だけが選ばれます。身体と模様だけが選ばれる

 選択の邪魔になる図形を登録して隠す

  1. 登録パレットのf:id:dnjiro:20181029095306p:plainをタッチ。これで選んだ身体と模様がパレットに登録されます。
  2. バレットに登録されたボタンをタッチ。「隠す」をタッチ。これで身体と模様が見えなくなります。

 下の歯とアゴを選択して口を開ける

  1. 同様にして下の歯とアゴだけ選びます。歯とアゴの点の一部を線で囲むようにして選び、もう一度点追加ボタンf:id:dnjiro:20181027163046g:plainをタッチ。これで歯とアゴだけ選ばれた状態になります。歯とアゴだけ選ばれた状態
  2. 下の歯とアゴの点だけ線で囲んで選び、ドラッグして下に移動させます。これで口を開けることができました。スクリーンショット 2017-11-25 20.12.59.png

 1ページに往復命令を入れる

  1. 1ページをタッチして1ページに移動
  2. 「ツール」メニューから「往復」をタッチ。往復命令を1ページに入れれば、1ページと2ページの間を往復します。
  3. プレイボタンを押してアニメを見て見ましょう。ストップボタン■を押せば止まります。プレイストップ

 口が模様の下になるのがおかしいですね。静止画では、口と模様がはなれていたので重なり順序が考慮されていなかったためです。頭をアニメキャストにして配置しなおせばなおります。

 

獅子の頭をアニメキャストにする

 

  1. 身体と模様を選び、登録パレットのf:id:dnjiro:20181029095306p:plainをタッチ。これで選んだ身体と模様がパレットに登録されます。
  2. バレットに登録されたボタンをタッチ。「隠す」をタッチ。これで身体と模様が見えなくなります。
  3. 画面に残っている模様を選び、バレットに登録されたボタンをタッチ。「追加登録する」をタッチ。頭だけ残して身体と模様をすべて隠します。
  4. 画面に残った獅子の頭をすべて選んで、f:id:dnjiro:20181027163046g:plainをタッチ。この段階ではグループもいっしょに選ばれています。
  5. 獅子の頭に含まれる点をすべて選んでf:id:dnjiro:20181027163046g:plainをもう一度タッチ。これでグループの中の獅子の頭だけが選ばれます。
  6. 選択枠の中心の「+」をタッチ。メニューから「つながった図形を選択」をタッチ。これで1、2ページにつながった獅子の頭だけが選ばれます。
  7. f:id:dnjiro:20181027165131p:plainをタッチして獅子の頭をきおくツールに移動。1、2ページの身体が残っていればOK。

  8. f:id:dnjiro:20181027165315g:plainをタッチ。「head」と名前をつければ、頭がアニメキャストになってはいります。

  9. f:id:dnjiro:20181221163257g:plainまたはf:id:dnjiro:20190110174431p:plainをタッチ。1、2ページにアニメキャストをいれます。

  10. 1ページに移動し、選択枠の中心の「+」をタッチ。メニューから「動き矢印を入力」をタッチ。「次のページのアニメキャストを移動させれば動き矢印ができます。移動しますか」には「いいえ」をタッチ。画面に赤い線(動き矢印)ができます。
  11. 赤い線(動き矢印)に点を追加します。この線にそって頭が動きます

    f:id:dnjiro:20190119010718p:plain

 

アニメキャストの動きの調整

  1. 2ページのアニメキャストをすこし回転させ、頭をかたむけます。
  2. アニメキャストの選択枠の中心の「+」をタッチ。「アニメ(:head)を修正」をタッチ。獅子の頭が開きます。
  3. 1ページに移動し、「ツール」メニューから「往復」をタッチ。
  4. 1ページの時間をタッチし、「0.1秒短くする」をタッチし、時間を0.5秒にします。これで0.5秒で口を開け閉めします。
  5. 画面の太文字「shishi >head」の「shishi」をタッチ。メニューから「このアニメにもどる」をタッチ。元のアニメに戻ります。
  6. f:id:dnjiro:20181029083754g:plainで動きをみてください。

 

アニメGIF出力

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

 

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

 

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

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

 

 

 

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

 

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

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

 

 

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

 

 

SVGからアニメGIF作成「試食サンプルをどうぞ」

9VAeきゅうべえアンドロイド版PC版iPad版iPhone版でもつくれます。アニメキャストで動きを作っています。20分くらいで作れます。[完成したSVGはこちら]

f:id:dnjiro:20190111144615g:plain

ほかのアニメの作り方はこちらをご覧ください

 

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

 

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

  1. スマホの場合は、「こちら(grocery.svg)」を長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー>「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け(ペースト)」。

  2. パソコンの場合は「こちら(grocery.svg)」を右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ファイル>開く」をクリック。ダウンロードしたファイルを選ぶ。SVGが読めない場合はバージョンが古いので最新版にしましょう。

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

 

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

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

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

  3. メニューバー「ファイル>新規作成」をクリック
  4. メニューバー「ファイル>開く」をクリック。上で保存した、「Grocery」を開く。
  5. これに動きをつけていきましょう。

 

3. パーツ作成のためにページを複製

 試食サンプル、手、左腕、を切り取ります。手と試食サンプルはそれぞれアニメキャストにします。具体的には、次のようにします。

(1)点の数を減らす

  1. 図形をタッチして全体を選ぶ
  2. メニューバー「編集>点を減らす」

これで制御点の数が減り、編集しやすくなります。

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

  1. ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これで2ページ目ができます。
  2. 今回は、背景、試食サンプル、腕、手の4つに分割したいので、「続きのページを作る」を使って同じページを4ページ作ります。

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

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

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

f:id:dnjiro:20190110094826p:plain

 

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

  • 図形を選んでf:id:dnjiro:20181027163024g:plainをタッチすると点が表示されます。
  • スマホ版は、ピンチ操作で拡大縮小、2本指で場所の移動ができます。
  • 一部の点を選んでもう一度f:id:dnjiro:20181027163024g:plainをタッチすれば、その点を含む図形以外の点が消えるのでみやすくなります。
  • 不要な点を選んでf:id:dnjiro:20181221164227p:plainで削除し、パーツの点だけ残します。各ページでそれぞれパーツだけのこるようにします。

    f:id:dnjiro:20190110100507p:plain

    点を選択して削除しているところです
  • 点には△と□の2種類あり、△はとがった点、□は曲線です。これはパレットのf:id:dnjiro:20181029090607g:plainf:id:dnjiro:20181029090533g:plainで切り替えできます。□は前後の点によって形が変わるので、うまく形を整えられない場合、f:id:dnjiro:20181029090533g:plainで点を△に変更してください。
  • パーツ分けができたら間の空白ページは削除してかまいません。削除したいページ番号をタッチ。メニューから「ページを切り取る」でページ削除できます。
  • 下の図は、表示メニュー>「前後のページを重ねて表示」にチェックをいれて、1ページ、2ページ、3ページを表示したものです。

    f:id:dnjiro:20190110104129p:plain

    パーツ分け完了

5.回転するパーツはアニメキャストにする

3ページの試食サンプルと4ページの手は回転するのでアニメキャストにします。アニメキャストは正確に回転できます。しかし自由変形ができなくなります。

  1. 3ページに移動し全体を選択
  2. f:id:dnjiro:20181027165131p:plainをタッチ。これで試食サンプルがきおくツールに移動します。

  3. f:id:dnjiro:20181027165315g:plainをタッチ。名前を「sample」とつける。これで試食サンプルがアニメキャストになりました。

  4. 同様に4ページの手を「hand」というアニメキャストにします。

 

6.アニメキャストの支点の位置を変更

試食サンプルのつまようじの先にアニメキャストの支点を移動させます。こうすると、支点を中心に回転するようになり、手が試食サンプルのつまようじをつかんだ状態で移動できます。9VAeきゅうべえの高度な機能です。

  1. 試食サンプルを選ぶ
  2. 中心の「+」をタッチ。メニューから「支点の位置を変える」
  3. 緑色の◇が支点です、これをつまようじの手で持つ位置に移動させます。

    f:id:dnjiro:20190110110312p:plain

    支点をつまようじの端に移動させたところ

 

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

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

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

  4. 2ページは不要なので削除しましょう。ページ番号2をタッチ。メニューから「ページを切り取る」

 

8.試食サンプルを持った手を組み立てる

2ページのうでに、手と試食サンプルを合成します。

  1. 手がはいったページ番号をタッチ。メニューから「ページを切り取る」。これで手がきおくツールに移動します。
  2. 2ページのうでに移動
  3. f:id:dnjiro:20190110124400p:plainをタッチ。メニューから「ステージにもどす」

  4. f:id:dnjiro:20181029095306p:plainをタッチ。これで手が登録され、選びやすくなります。

同様に試食サンプルも2ページに合成します。

f:id:dnjiro:20190110125346p:plain

2ページに手と試食サンプルを移動したところ

 

9.続きのページを3ページ追加

動きをつけるために続きのページを作ります。3ページ=手前に差し出したところ、4ページ=次の試食サンプルをつまんだところ、5ページ=元の状態として、続きのページを3ページ追加しましょう。

  1. ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。メニューから「続きのページを作る」を3回くりかえす。

 

10.試食サンプルを渡したところを作る

  • 3ページの手と試食サンプルを拡大します。図形を選択し、選択枠の角の■をドラッグすれば拡大できます。
  • うでの形を手にあわせて変形します。点の一部を選んで回転(選択枠の角の■をタッチしたメニューの中にある)、なめらか(中心の+をタッチ)、ゴム変形(中心の+をタッチ)などを使いました。
  • f:id:dnjiro:20181029083754g:plainボタンで動きをみながら形を修正します。

  • 完成したら、3ページを2ページ分コピーします。
  1. 3ページのページ番号3をタッチ。メニューから「ページを記憶する」
  2. 3ページの右側の「>」をタッチ。メニューから「記憶したページを入れる
  3. ページの右側の「>」をタッチ。メニューから「記憶したページを入れる

    f:id:dnjiro:20190110133759p:plain

    手を手前に動かして2ページコピーしたところ

  4. 4ページ、5ページの試食サンプルを選び、f:id:dnjiro:20181221164227p:plainをタッチして削除します。

これで試食サンプルを手渡しする部分ができました。

 

11.次の試食サンプルをつかむところをつくる

  • 6ページの手と試食サンプルをお盆の上のサンプルに重なるように回転させます。
  • 手にあわせて腕の形を変形させます。

    f:id:dnjiro:20190110140122p:plain

    次の試食サンプルをつかんだところ
  • これだけでは腕の変形がうまくいかないので、5,6ページの間の「>」、6,7ページの間の「>」をタッチし、メニューから「中間ページを作る」
  • これで中間のページができるので、f:id:dnjiro:20181029083754g:plainで動きを確認しながら形を調整します。
  • ここの変形が一番むずかしいのですが、後から拡大して何回でも修正できるので、納得いくまで調整してみてください。
  • 9VAeきゅうべえは点と点が正確に対応して変形するため、点の位置は重要です。各ページの点の位置をかえると、同じ形でも異なる動きになります。

 

12.背景からつかんだ試食サンプルを消す

  • お盆の上から試食サンプルを取り出すようにするため、先頭ページのつかんだ試食サンプルを削除します。点を削除しその部分に何もなかったように修正します。
  • そのかわり、6ページか7ページでつかんだアニメキャストの試食サンプルを選んで、f:id:dnjiro:20181221163257g:plainをタッチし前のページにコピーします。
  • これで試食サンプルがお盆の上に現れ、それをつかんで渡す、という動きができます。

 

13.アクセントの線をアニメキャストにして動かす

顔の左側の3本の線を動かしましょう。

 

  1. 背景から3本の線の点だけ選び、f:id:dnjiro:20181027165131p:plainをタッチ。3本の線をきおくツールの中に切り取ります。
  2. f:id:dnjiro:20181027165315g:plainをタッチして名前をつければアニメキャストになります。名前は何でもよいですが、ここでは「line」としました。

  3. 中心の「+」をタッチし、「アニメ(:line)を修正」。アニメキャストの中が開きます。
  4. f:id:dnjiro:20181221171302g:plainをタッチ。メニューから「続きのページを作る」。2ページを作ります。

  5. 1ページの時間をタッチし、「0.1秒短くする」を5回タッチ。0.5秒にします。
  6. 1ページに移動し、ツールメニュー>「往復」をタッチ。「往復」命令をいれます。これで1ページと2ページの間を往復します。往復は必ず1ページに入れてください。
  7. f:id:dnjiro:20181029083754g:plainで動きを確認しながら、2ページの線を移動させてください。

    f:id:dnjiro:20190110173449p:plain

    アクセントの線をアニメキャストにして動かす

     

  8. 画面の上にあるファイル名「Grocery.svg」の文字をタッチ。メニューから「このアニメにもどる」。これで元のアニメに戻ります。
  9. アニメキャストが背景にあると静止画になっていまうので、f:id:dnjiro:20181027165131p:plainをタッチして記憶ツールに切り取り。
  10. 2ページに移動し、f:id:dnjiro:20190110124400p:plainをタッチ。メニューから「ステージにもどす」。これで2ページにアニメキャストがはいりました。
  11. 右ページにコピーするボタンf:id:dnjiro:20190110174431p:plainをタッチしてアニメキャストを最後のページまでコピーします。

 

14.アニメGIF出力

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

 

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

 

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

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

 

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

 

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

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