dnjiro’s 9VAe blog

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

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

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

 

f:id:dnjiro:20190115004854g:plain

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

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


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きゅうべえに関する質問

 

 

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

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

f:id:dnjiro:20181221220918g:plain

ほかのアニメの作り方はこちら。年賀アニメ:2024龍うさぎとらうしねずみいのしし

 

9VAeダウンロード


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きゅうべえのダウンロード


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きゅうべえのダウンロード


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、MP4動画作成

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要Youtube解説
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

 

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きゅうべえに関する質問

 

 

Softnic にフリーソフトを登録する方法

9VAeきゅうべえが、Softnic 日本語ページに登録された。 

Softnicがちゃんとレビューも書いてくれてる。うれしい。

 

ただ日本語版はベクターサイトがあるので Softnic に載せてほしいのは英語版だ。と思って、英語サイトに登録する方法を調べた。するとソフトの登録方法が、PAD® を登録する方法になっていた。PADは、ソフトウェア掲載に必要な情報を標準化したXML文書だ。サイト側は登録が簡単になるし、作者は複数のサイトに登録するとき毎回情報入力しなくてよい。

PADファイルは正確に作らなければならない。AppVisor » PAD® サイトで作成すると、細かく文法チェックしてくれる。

 

Softnic に、英語版アプリを登録する手順

PADファイルの作成

  1. Softnic Developer Hub にユーザー登録(無料)

    Softonic Developer Hub

  2. 「Create new program」ボタンを押す。すると、PADファイルを登録せよと言われる。
  3. PADファイルは、AppVisor サイトで作成できる。最初にユーザー登録(無料) 

    http://publisher.appvisor.com/

  4. まず、左上の追加ボタンで「Brand」を作成し、開発者情報を入力。「Save and Exit」
  5. 次に追加ボタンで「Program」を追加し、プログラムの情報を入力。
  6. 右上端の「<<」ボタンで入力チェックができる。プログラム名に「-」を入れるとよくないとか、いろいろ教えてくれた。
  7. 未記入や、ダウンロードモジュールが 直接ダウンロードできない Warning か残ったが、とりあえず「Save & Exit」して「Publish」。このあと人手でチェックしてくれるらしい。
  8. PADの作成は無料だが、その後ダウンロードサイトに、PADを送る部分は親切なサービスや宣伝もついて有料みたい。なるほど。
  9. そこで、PADを無料で作成できるサイトをみつけた。ここに AppVisor で作成したデータを入力すると、PADファイルを作成してダウンロードできた(ただPADの Versionが古い)

    Online PAD Generator - Web Based XML PAD Maker - Free PAD Creator - PAD Editor

PADファイルとダウンロードモジュールを softnic に登録

  1. Softonic Developer Hub で、「Create new program」ボタンを押す。
  2.  上で作成した、PADを指定してアップロード。正しいPADでないと拒否される。
  3. Online PAD Generator のバージョンがひくいため、<Program_Target_Platform>Windows</Program_Target_Platform>  タグがないというエラーがでた。Windows を入れたものを、<Program_Install_Support>の下に追加すると、エラーがなくなった。ちなみに Macの場合は <Program_Target_Platform>OS X</Program_Target_Platform> ここに何をいれたらよいかは、AppVisor が教えてくれる。
  4. 次にダウンロードモジュールを登録する。ダウンロードURLの入力、ZIPファイルのアップロードの2通りが選べる
  5. アプリのモジュールをアップロードすると登録完了。あとは Softnic のレビュー待ち。

PADファイルの修正

 

掲載された英語版、Windows版はアップした日に公開された(ただ、Softnicのレビューはついてない)。

アイ・コラボレーション神戸 わたし達の未来をつくるハッカソンに参加

視覚障碍者をたすけるハッカソンに参加。覚書

 

9VAeきゅうべえ Ver.0.6 はアニメーションの文字を差替えできるようになる

きゅうべえVer.0.6 をつくっている。

DXライブラリとか、Webアニメコンテストとか、いろいろやって、なかなかすすまないが、とりあえず、Ver.0.6 が出せそうだ。

 

次の目玉は、

  • 検索機能
  • 再生中の文字の差し替え

だ。この2つは関係があって、これを組み合わせて、チュートリアルアニメーションのフランス語バージョンができるようにする。

 

今、9VAeきゅうべえはフランス人ボランティアの努力によって、プログラムがフランス語化されている。ところが、ソフトの操作方法を説明したチュートリアルアニメーションがフランス語されていない。

 

これをフランス語にするためには、アニメーションと文字を分離する必要がある。プログラムは、テキスト文字がリソースに分離されているため、その部分だけ対訳をつくればよい。それと同じことがアニメーションでもできるようにする。

 

ドラマの字幕の差し替えのようなものだが、9VAeきゅうべえのチュートリアルアニメは、ボタン操作ができる対話的なアニメーションなので、もっと複雑だ。

 

これを実現するためには、チュートリアルアニメーションに含まれる文字列を検索し、タグに置き換え、対訳リストと結び付けなければならない。そういった作業が完成し、リリースに近づいている。

 

検索はアニメキャストの中まで検索できるので、かなり便利である。