dnjiro’s 9VAe blog

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

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きゅうべえを使った動くマニュアルの作り方

9VAeきゅうべえは、誰でも簡単にアニメーションが作れるフリーソフトです。 次のアニメーションは、「ひとコマアニメーション」を作ってプレゼンソフトにいれる方法を説明したものですが、このアニメも、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イラストを読み込んで動きをつけることができます。
  • Openclipart, FreeSVG や、OnlineWebfonts.com などの、数10万点以上のフリーのイラストを読み込んで、アニメにすることができます。その手順を紹介します。
  • 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きゅうべえを使えば、動くマニュアルや、動く教材など、動きや変化を説明したアニメーションを簡単に作れます。ご活用ください。

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

 

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

 

 

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

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

f:id:dnjiro:20190111144615g:plain

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

 

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

 

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

Openclipart (Grocery Store Sample) からダウンロード

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

  2. パソコンの場合は「こちら (SVG(Vector))」を右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。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は各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。
アプリ クリップ形式 作り方
PowerPoint
LibreOffice
Keynote
アニメGIF 背景を透明にして出力(PowerPointの例
iMovie
PowerDirector
グリーンバック動画 先頭にグリーンバック背景を入れる。(iMovieの例PowerDirectorの例
AviUtl 連番PNG 背景を透明にして出力(AviUtlの例

 

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

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

 

9VAeきゅうべえに関する問い合わせ

 

 

9VAeきゅうべえアンドロイド版で年賀アニメを作成

年賀アニメを作ってみました。9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。製作時間は30分くらいで、絵がうまくなくてもできます。作成方法を説明しましょう。

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

 

9VAeダウンロード

 

猪のSVGイラストをOpenclipartから取得

  1. こちら Openclipart - boar を使うことにしました。Openclipartは商用利用可能なSVGイラストサイトです。
  2. boar(猪)を検索するとたくさん出てくるので、これを使うことにしました
  3. f:id:dnjiro:20181221154520p:plain

  4. このページにある「Download」ボタンを長押しすると、メニューが表示されるので「リンクアドレスをコピー」をタッチします。

 

9VAeアンドロイド版でSVGイラストを開く

  1. 9VAeきゅうべえアンドロイド版を起動
  2. ツールメニュー>「ネットからダウンロード」
  3. httpアドレス入力欄を長押し>「貼り付け」。これで上でコピーした猪のSVGアドレスが入力されます。
  4. 左下の虫眼鏡ボタンで全体が表示されます。これをアニメーションにします。

    f:id:dnjiro:20181221154802p:plain

    パソコン版9VAeきゅうべえの場合はいったんダウンロードしてから、読み込んでください。
  5. 読み込んだ状態では、アニメキャスト(パーツアニメ)になっており、中身が編集できません。
  6. 選択枠の中心の「+」をタッチ。メニューから「アニメ(xxx)を修正」をタッチ。これでSVGの中身が開きました。
  7. ねんのため、ファイルメニュー>「名前を付けて保存」で「boar」と名前をつけて保存しておきましょう。
  8. ファイルメニュー>「閉じる」。ファイルメニュー>「開く」で「boar.svg」を読み込んでみてください。

地面を背景にする

猪を走らせたいので地面を分離します。

  1. 1ページの左側の「<」をタッチ。メニューから「背景ページを入れる」をタッチ。
  2. 2ページをタッチ。猪をタッチし、f:id:dnjiro:20181221163257g:plainをタッチ。これで背景ページに猪がはいります。

  3. 1ページと2ページの間の「>」をタッチ。「空白ページを入れる」をタッチ。これで1ページと3ページのリンクが切れるので、背景ページの点を自由に削除できるようになります。
  4. 1ページの背景をタッチ。猪をタッチして選び、点選択ボタンf:id:dnjiro:20181027163024g:plainをタッチ。地面以外の点を選んで、削除ボタンf:id:dnjiro:20181221164227p:plainをタッチして消していきます。


    f:id:dnjiro:20181221164453p:plain

  5. 細かい部分はf:id:dnjiro:20181221164812g:plainの「+」で拡大し、地面以外の点を削除します。
  6.  背景の猪を消したら、3ページに移動し、地面の点を削除します。

 

地面をスクロールさせる

  1. 1ページの「背景」の文字をタッチ。「スクロール→」をタッチ

    f:id:dnjiro:20181221170826p:plain

  2. 2ページは不要なのでページ番号「2」をタッチし「ページを切り取る」をタッチ
  3. f:id:dnjiro:20181029083754g:plainをタッチすると地面が右に動くのが見えるでしょう。

 

猪の足や尾を変形

  1. 2ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。「続きのページを作る」。これで2ページが3ページにコピーされます。
  2. 前足を選択し、選択枠の下の■をタッチ。「のばす」をタッチし、画面をドラッグして足の形を変えます。

    f:id:dnjiro:20181221185130p:plain

  3. 同様にほかの足や尾を動かします。
  4. 全体を選択し、中心の「+」から「ゴム変形」や「移動」なども使いました。

    f:id:dnjiro:20181221193211p:plain

2ページに「往復」を入れて時間調整

  1. 2ページに移動し、ツールメニュー>「往復」
  2. 2ページの時間をタッチし、「0.1秒短くする」をタッチ。2ページの時間を0.2秒に設定。

    f:id:dnjiro:20181221200126g:plain

  3. 尾が切れているので、ファイルメニュー>「ページ設定」で横幅を拡大します。
  4. 上書き保存でパーツの作成完了

 

1コマアニメーションで「猪突爆進」と入れる

  1. ファイルメニュー>「新規作成」
  2. 1コマアニメ作成ボタンf:id:dnjiro:20181221201107p:plainをタッチ。okをタッチ
  3. 「猪突爆進」と書いて、もう一度f:id:dnjiro:20181221201107p:plainをタッチ。これで1コマアニメの完成。
  4. 文字の形が気に入らない場合は点選択して形を修正できます。
  5. ファイルメニュー>「名前を付けて保存」で、「boartitle」と名前をつけて保存します。

 

パーツアニメを合成

  1. ファイルメニュー>「新規作成」
  2. ツールメニュー>「9VAeアニメを入れる」で「boar.svg「boartitle.svg」を入れてレイアウト。
  3. 画面サイズはファイルメニュー>「ページ設定」で調整。
  4. ページの時間を調整。文字タイトル「boartitle.svgを選んでからページの時間をタッチすれば、タイトルを表示する時間(boartitleの時間)が表示されます。(猪「boar.svgを選んだ場合、無限ループなので時間は表示されません。)
  5. ファイルメニュー>「名前を付けて保存」で、「boarmain」として保存。
  6. 再生してみると、背景がスクロールしません。

実は、パーツアニメ(アニメキャスト)の中のスクロールは無視されるのです。そこで背景スクロールページを「boarmain」に移動させます。

 

きおくツールを使って背景ページを親のアニメに移動させる

  1. アニメキャスト「boar.svgを選択
  2. 中心の「+」をタッチ。「アニメ(boar.svg)を修正」をタッチ
  3. 背景ページのページ番号「1」をタッチ。「ページを切り取る」をタッチ。これで背景スクロールページが右側のきおくツールにはいりました。
  4. 太字 boarmain.svg > boar.svg の「boarmain.svg」をタッチ。「このアニメにもどる」をタッチ。boarmain に戻ります。
  5. 1ページの左側の「<」をタッチ。「記憶したページを入れる」をタッチ。これで背景スクロールページがはいります。
  6. 地面の場所を猪にあわせて移動させます。
  7. スクロールページに書き込みをすれば、スクロールします。スクロールの方向、スピードはスクロールの矢印の向き、長さで調整できます。

 

アニメGIF出力

  1. ファイルメニュー>「アニメGIF出力
  2. 画面サイズ、秒間コマ数を設定して「OK」。すこし時間がかかります。
  3. 内部の「9VAe」フォルダとカメラロールのなかにアニメGIFができます。

 

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

 

 

 

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

 

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

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

 

9VAeきゅうべえに関する問い合わせ

 

 

SVGイラストからアニメGIF作成「ワインを飲む女」

絵を描かずになめらかなアニメGIFを作る方法を解説します。9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。制作時間は20から30分。

f:id:dnjiro:20181025162237g:plain

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

 

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

 

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

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

    f:id:dnjiro:20181025172937p:plain

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

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

  1. 選択枠の中心の「+」をクリック。メニューの上から2番目「アニメ(...)を修正」をクリック。アニメキャストの中が開きます。
  2. 「ファイル>名前をつけて保存」で「OnlyWine」と名前をつけて保存。
  3. メニューバー「ファイル>新規作成」をクリック
  4. メニューバー「ファイル>開く」をクリック。上で保存した、「OnlyWine」を開く。
  5. これに動きをつけていきます。

 

3. ワイングラスをアニメキャストにする

  1. 全体を選んで点編集ボタンf:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainをクリック。
  2. ワイングラスに近い点を選び、左下の虫眼鏡の左側の拡大ボタン「+」をクリックして拡大
  3. ワイングラスに含まれる点(グラスの上と台とワイン)を選び、点編集ボタンf:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainをもう一度クリック。これでワイングラスの点だけが表示されます。

    f:id:dnjiro:20181027163655p:plain

  4. もう一度点編集ボタンf:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainをクリック。通常選択モードになります。f:id:dnjiro:20181027165131p:plainをクリック。ワイングラスが記憶ツールにカットされます。
  5. f:id:dnjiro:20181027165315g:plainをクリック。「wineglass」と名前つけて「OK」ボタンをクリック。ワイングラスがアニメキャストになります。アニメキャストにすれば正確に回転できますし別な動きをあとからつけることができます。

 

4. 続きのページを作る

  1. 上の1ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これで2ページ目ができます。

 

5. 肘からグラスまでを回転する

  1. ワイングラスの選択と同じ手順で、肘から先とワイングラスの点を選択し、f:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainをもう一度クリック。肘から先とワイングラスの点だけを選択します。
  2. 選択枠の角の■をクリック。メニューから「中心点の移動」をクリック。画面をドラッグして肘の位置に回転中心「+」を移動させます。

    f:id:dnjiro:20181029071435p:plain

  3. 選択枠の角の■をクリック。メニューから「回転」をクリック。画面をドラッグして回転させます。

    f:id:dnjiro:20181029074111p:plain

  4. 選択枠の中心の「+」をクリック。メニューから「移動」をクリック。画面をドラッグしてワイングラスを口の前に移動させます。
  5. 手首の角度を調整するために手首から肘までの点だけ選択して反時計回りに回転させます。中心点の移動をつかってください。

    f:id:dnjiro:20181029080037p:plain

6. 肩から肘までを上に縮める

  1. 肘を選択。点編集ボタンf:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainを何回かクリックし、肘の点だけを選びます。

    f:id:dnjiro:20181029081254p:plain

  2. 選択枠の下の辺の中心の■をクリック。メニューから「のばす」をクリック。画面をドラッグして肘の位置を合わせます。
  3. プレイボタンf:id:dnjiro:20181029083754g:plainをクリックすれば、手をもちあげてワイングラスを口に運ぶアニメがみえます。肘の形がスムーズに変化するように、それぞれの点の位置を調整します。うまくいかない場合は、f:id:dnjiro:20181023071022g:plainで作業がもどせます。「Shift」ボタンをタッチしてからf:id:dnjiro:20181023071022g:plainを押せばもう一度やり直します。

 

7. 点の位置を整える

点の位置を整えるいくつかの方法を紹介します。

  1. 一部の点を選択してから形を変形すると、選んだ点と選んでいない点との間で点がねじれたり不整合が生じます。また、もともとのイラストは静止画なので、止まっていると隠れているので問題ないが、動かすと都合が悪い点もあります。そういった点の位置を調整しなければなりません。
  2. ねじれたり、ややこしくなった点は、ややこしい部分を選択してから、選択枠の中心の「+」メニューから「なめらかにする」をクリックし、右に移動させればねじれが解消します。(「なめらかにする」は Ver.0.6.4で追加された機能)
  3. 9Veの曲線の性質上、曲線の点A(□)と曲線の点B(□)の間が極端に長く、その次の点CがBと非常に近い場合、点Bと点Cの間にふくらみができます。このふくらみは点Bを角の点(△)に変更すればふくらみがなくなります。パレットの右上の

    f:id:dnjiro:20181029090533g:plainが角の点(△)、f:id:dnjiro:20181029090607g:plainが曲線の点(□)です。

  4. プレイボタンf:id:dnjiro:20181029083754g:plainで形fの変化がおかしい場合、変形途中の形は現在のページと前のページの点の位置が関係しています。したがって、場合によっては前のページの点の位置を変更します。このとき、点を選択しておいてからページを移動すれば、その点に対応した点が選ばれています。これを利用し、点を選びやすいページで点を選択し、形を修正したいページに移動するとよいです。

  5. 肘を変形するときに肘の端の点が開いていると「なめらかにする」がつかえません。端の点を選んで右上のパレットの閉じる開くボタンf:id:dnjiro:20181029092741p:plainの左側のボタンで閉じるようにすれば、「なめらかにする」が使えるようになります。

    f:id:dnjiro:20181029093045p:plain「なめらかにする」をクリックしてから右にドラッグすれば直線に近づくので台形にします。そのあともう一度「なめらかにする」をクリックし左にドラッグすれば曲線になり、以下のようにきれいになります。

    f:id:dnjiro:20181029093614p:plain

  6. 点を修正するときに、すでに修正が終わった図形は右下の登録パレットに登録し登録場所をクリックしたメニューから「固定」や「隠す」を押せば、選択されなくしたり、一時的に隠すことができます。ワイングラスと手を登録して「固定」を設定しました。登録ボタンに赤いバツ印が表示されます。登録は図形を選んでからf:id:dnjiro:20181029095306p:plainをクリックです。(iPhoneで登録パレットが見えない場合、f:id:dnjiro:20181023074752g:plainをタッチすれば登録パレットが見えます。)

    f:id:dnjiro:20181029100141p:plain

  7. 肘のおかしい部分を選んで選択します。ワイングラスをつかんだ点が「固定」に設定されているため、選択されません。

    f:id:dnjiro:20181029100900p:plain

  8. 中心の「+」メニューから「なめらかにする」をクリックし、右側にドラッグ。

    f:id:dnjiro:20181029101017p:plain

 

8. 顔、髪型の変形、髪飾り

  1. 2ページの顔を右側にむける。髪の毛を左側にのばす。髪飾りは横に縮めて位置を調整。登録パレットを使ったパーツ分け、表示の拡大縮小、点の選択、なめらかにする、ゴム変形など、いろいろな変形をつかって形を整えます。

    f:id:dnjiro:20181029104145p:plain

9. ワインをゆらしながら飲む

手をうごかしている間、ワインはそのまま。ワイングラスが止まったら、ワインがゆれながら減っていくようなアニメーションにします。

  1. 手とワイングラスが「固定」されている場合は、登録パレットの下のf:id:dnjiro:20181029155754p:plainをクリックして解除。
  2. ワイングラスを選択し、中心の「+」をクリック。メニューから「アニメ(:wineglass)を修正」をクリック。ワインとワイングラスが開きます。
  3. 上の1ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これでワイングラスの2ページ目ができます。f:id:dnjiro:20181029162606p:plain
  4. ワインをクリックしてf:id:dnjiro:20181027165131p:plainをクリック。これでワインが記憶ツールにカットされます。

    f:id:dnjiro:20181029162701p:plain

  5. f:id:dnjiro:20181027165315g:plainをクリック。「wine」と名前つけて「OK」ボタンをクリック。ワインがアニメキャストになります。

  6. 作成したワインを選択し、中心の「+」をクリック。メニューから「アニメ(:wine)を修正」をクリック。ワインが開きます。
  7. 1ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これでワインの2ページ目ができます。
  8. ゆれるワインを表現するために、ワインを選んで時計回りに少し回転させます。
  9. メニューバーの「表示>前後のページを重ねて表示」をクリックすれば、1ページのワインが線で表示されるので、それを参考にゆれた形をつくります。

    f:id:dnjiro:20181029172224p:plain

  10. 1ページに移動し、メニューバー「ツール>往復」をクリックし、往復ボタンをいれます。プレイボタンf:id:dnjiro:20181029083754g:plainを押してワインが揺れるのを確認してください。
  11. 左下の虫眼鏡ボタンf:id:dnjiro:20181029172848g:plainをクリックし倍率をもどし、画面上の太文字「wineglass」をクリック。メニューから「このアニメにもどる」をクリック。ワイングラスに戻ります。プレイボタンf:id:dnjiro:20181029083754g:plainを押してワイングラスの中でワインが揺れるのを確認してください。
  12. ワイングラスの2ページの時間「1秒」をクリックし、メニューから「1秒長くする」をクリックして4秒にしましょう。
  13. 2ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これでワイングラスの3ページ目ができます。
  14. 3ページのアニメキャスト「wine」を選んでグラスの左下に小さく縮小します。これでワインが揺れながらなくなっていきます。プレイボタンf:id:dnjiro:20181029083754g:plainを押してみてください。

    f:id:dnjiro:20181029190857p:plain

  15. 左下の虫眼鏡ボタンf:id:dnjiro:20181029172848g:plainをクリックし倍率をもどし、画面上の左端の太文字「onlywine」をクリック。メニューから「このアニメにもどる」をクリック。ワイングラスを持った女の人に戻ります。1ページの時間を3秒に、2ページの時間を4秒にします。ワイングラスの1ページの時間も3秒にします。結果3秒間でワイングラスを口につけ、4秒間でワインを飲むアニメになります。
  16. あとは、プレイをみながら気になったところを修正して完成です。
  17. 最初に掲載したアニメGIFの元データ(SVGアニメ)が

    Clipart - Only Wine Extra 003 Animation からダウンロードできます。9VAeで開いてみてください。

 

10. アニメGIF出力

  1. メニューバーの「ファイル>アニメGIF出力」をクリック。
  2. 画面サイズや秒間のコマ数を設定してアニメGIFを作成できます。

 

 

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

 

 

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

 

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

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

 

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

 

 

SVGイラストからアニメGIF作成「ネコのしっぽを動かす」

絵を描かずになめらかなアニメGIFを作ってみました。9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。なれてくれば10から15分で作れます。

 

f:id:dnjiro:20181023093523g:plain

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

 

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

 

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

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

    f:id:dnjiro:20181022190045p:plain

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

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

  1. 選択枠の中心の「+」をクリック。メニューの上から2番目「アニメ(...)を修正」をクリック。アニメキャストの中が開きます。
  2. 「ファイル>名前をつけて保存」で「CatsInLove」と名前をつけて保存。
  3. 「ファイル>開く」で、保存した「CatsInLove」を開く。
  4. これに動きをつけていきます。

3. 画面サイズの調整

  1. 「ページ>ページ設定」(iPadの場合「ファイル>ページ設定」)で全体がみえるようにページサイズを調整します。(幅1800, 高さ3200)

4. 点の数を減らす

イラストの制御点が多いと動きをつけにくいので、点の数を減らします。

  1. ネコをドラッグして選ぶ。選択枠が表示される。
  2. 「編集>効果>点を減らす」(iPadの場合「編集>点を減らす」)
  3. これで制御点の数が減りました。

5. 続きのページをつくる

  1. 上の1ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これで2ページ目ができます。

6. しっぽの形をかえる

  1. しっぽをドラッグして選ぶ
  2. 左側の点編集ボタンをクリック(「A」ボタンの2つ下。右側が点の追加、左側が追加なし、どちらでもよい)これで、ネコの制御点が全部表示されます。
  3. ドラッグでしっぽの一部を選びます。点編集ボタンをもう一度クリック。これで、えらんだしっぽだけが表示されます。

    f:id:dnjiro:20181022202054p:plain

  4. 左下の虫眼鏡の左側の「+」を2回クリック。これでしっぽが拡大されます。
  5. 点を動かして、しっぽの形をかえてください。
  6. しっぽの先を回転させる場合、回転中心を指定できます。まず、ドラッグで回転したい点を選びます。
  7. 選択枠の角の■をクリック。メニューから「中心点の移動」をクリック。ドラッグして回転中心(+)の場所を指定。
  8. 選択枠の角の■をクリック。メニューから「回転」をクリック。マウスを移動(iPadの場合はドラッグ)すると回転します。

 7. さらに続きのページをつくってしっぽの形をかえる

  • 同様に3ページ目をつくってしっぽの形をかえます。
  • しっぽの形を変えるときに、点の位置を自由に変更すると、アニメーションしたときにしっぽの太さが変化してしまいます。しっぽの太さが変化しないためには、近くの制御点が同じように変形する必要があり、注意深く点を移動させる必要があります。
  • うまくいかないときは、「やり直し」ボタンf:id:dnjiro:20181023071022g:plainをクリックして何回もやり直してください。

    f:id:dnjiro:20181023073825p:plain

8. 「往復」を入れる

  1. f:id:dnjiro:20181023072419g:plainやページをクリックして1ページに移動

  2. 「ツール>往復」をクリック。「往復」ボタンがはいります。
  3. 選択枠の中心の「+」をクリック。メニューから「次ページにリンクコピー」。2ページに往復ボタンが広がります。
  4. プレイボタンを押すと往復します。

9. 時間の調整

  1. 1ページの上の時間表示(1秒)をクリック。メニューから「0.1秒短くする」を5回クリックし、0.5秒にします。(iPhoneでページの上部が見えない場合、f:id:dnjiro:20181023074752g:plainをタッチすれば見えるようになります。)
  2. 2ページの時間も0.5秒にします。
  3. プレイボタンを押して確認
  4. 完成したら「ファイル>上書き保存」で上書き保存しておきます。

10. 画面サイズの調整(全体のサイズ縮小、位置調整)

  1. 「ページ>ページ設定」(iPadの場合「ファイル>ページ設定」)で全体がみえるようにページサイズを調整します。(幅1800, 高さ3200)
  2. 幅と高さの数字が大きすぎると設定できなくなります。この場合は全体を縮小、位置調整します。
  3. 先頭ページのページ番号「1」をクリック。メニューから「ページの指定 ここから」をクリック。
  4. 最後のページ番号「3」をクリック。メニューから「ページの指定 ここまで」をクリック。これで全部のデータが選択されます。
  5. 選択枠の角の■をクリックし「拡大/縮小」をクリック。これで全体のサイズ調整ができます。
  6. 選択枠の中心「+」をクリックし「移動」をクリック。これで全体の位置調整ができます。

11. アニメGIF作成

  1. 「ファイル>アニメGIF出力」で保存場所とファイル名を指定(iPad版は設定画面でファイル名を指定)
  2. アニメGIF設定画面で、画面サイズ、秒数、秒間コマ数、背景を透明にするかどうかを指定。往復がはいっており無限ループになっているため、時間の指定が必要。往復時間「2」秒を指定します。
  3. 「出力開始」または「OK」でアニメGIFができます。(iPad版は出力後にカメラロールにコピーされます。)

 

 

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

 

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

 

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

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

 

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