dnjiro’s 9VAe blog

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

【大阪工業大学】2020.1.27 梅キャンX勉強会【梅田キャンパス】の原稿

【大阪工業大学】第34回 梅キャンX勉強会【梅田キャンパス】 で LT やることになったので、その原稿

アニメーションフォーマットの比較

拡張子 方式 色数 マスク メモ
GIF ビットマップ 256色 2値 × パソコン通信用に開発。どこでも再生できる。256色でもきれい。ボタンを押さなくても再生する。古い規格だが手軽で使いやすい
APNG ビットマップ × GIFの後継としてFirefoxが提唱。動くLINEスタンプが採用、Safariが採用したがiPhoneカメラロールでGIFは動くがAPNGはだめ
MP4 ビットマップ × 音〇 動画フォーマットとして普及、スマホ、パソコンで再生できる。自動スタートしない 。最初音を消すようにしている
Flash
(SWF)
ベクトル 音〇 動画、アニメ、ゲーム、なんでもできる。いったん世界制覇したがiPhoneで禁止され消滅。プラグインがないと再生できない
SVG ベクトル 音△ Flashに対抗して作られた標準規格。静止画はどのブラウザでも再生できる、アニメ、ゲーム用仕様(SMILE)は、IE、EDGE以外で再生できるが、複雑すぎて非推奨。9VAeの保存フォーマット。
プログラム 両方 音〇 ビットマップやSVGを使い、動きはプログラムで表現。Flashがなくなっていろんなライブラリが混在

アニメーションと絵画、音楽の比較

000a.gif

  • 絵画、音楽は、子供のころから作っている。大人で趣味にする人がおり、一部がプロになる。
  • アニメーションは子供から大人になるまで作らない。一部の人がプロになる

  • 子供から大人までアニメーションを作る人が少なすぎる。

  • 原因はアニメを作るのが手間がかかる、アニメを作る必然性がない、と考えられるが、今はどちらも間違い。

アニメーションと動画の違い

  • 動画を作りたい人は増えている。Youtube, Instagram, Twitter, Facebook...
  • 一般の人は、アニメーションと動画が区別できていない
項目 動画ソフト アニメーションソフト 描画ソフト
機能 複数の動画をつなぐ、合成、音を入れる、イフェクトをつける 動きをつける、キーフレーム補間、時間調整 絵を描く
有料ソフト
(プロ/一般)
Premiere AfterEffects, Animate(Flash), LIVE2D Photoshop, Illustrator, ClipStudio
無料ソフト
(一般)
iMovie(Mac/iPhone/iPad),
AviUtl(Windows)
9VAeきゅうべえ
AnimeEffects
ペイントブラシ
アイビスペイント
文字を動かす
吹き出しを動かす
キャラクタがしゃべる
  • 9VAe と AnimeEffects の違い、9VAeはベクトル、AnimeEffectsはビットマップのポリゴンメッシュ変形+関節アニメーション。9VAeのほうが自由度が高い。AnimeEffectsはキャラクタがしゃべる、歩く、走るなどきまった動きに向いている。
  • 絵が苦手な人がSVGイラストを動かしたい場合は、9VAeきゅうべえのほうが簡単。
  • 9VAeきゅうべえはネット上の100万点以上のフリーイラストを読み込んで使える。AnimeEffects は、Photoshop を使って絵のパーツ分けをする必要がある。AnimeEffects は、最近更新されていない。

9VAeきゅうべえができること

  • ひとこまアニメーション
  • ネット上に100万点以上あるフリーSVGイラストを読み込んで、自由に動かせる >高度な編集機能
  • 連番PNG出力してAviUtlで合成、MP4出力して iMovie で合成、GIF 出力


9VAeで簡単動く年賀状作成「獅子舞」

9VAeきゅうべえの無償モデル

  • 9VAeきゅうべえはフリーソフト、商業利用可能、ライセンスフリー、再配布、カスタマイズ自由
  • アニメーションの中身は自由、100万点のフリーイラストがあるので、いろんな分野で活用できる
  • 9VAeきゅうべえをつかって利益をあげられる人がたくさんいるはず

事例

事例 内容 収益
LINEアニメーションスタンプを作って売る本 解説本 印税
Mr.PC 9VAeをDVDにいれて販売 雑誌代金
キッズプラザ大阪 アニメ制作コーナーを設置 入場料
プログラミング教室
お絵描き教室
アニメ制作カリキュラム追加 受講料
動くLINEスタンプ 9VAeでスタンプを作成して販売 スタンプ代金
ブログ
Youtube
9VAeの解説記事 アフィリエイト
・・・ ・・・ ・・・
  • 既存ビジネスに9VAeを追加すればローコストでアニメーションが追加できる
  • アニメーション単独では購入動機がない(今までアニメを作ってない、誰も困っていない)が既存ビジネスの拡張なら利益が出せる。
  • 9VAe 側は、開発費を0円にすれば継続できる(外注しない、出張しない、むやみに拡張しない・・)
  • 9VAeきゅうべえを有料でも購入したい人が増えるまで、このモデルで続ける。

時間があれば、キジEVAの紹介

  • こちら(キジEVA)
  • アニメーションがパーツ化され、交換できるようになると、コンテンツが進歩する。初音ミク、Unity などでそれがみられる。

Flaskの調査

Flaskは、Python がつかえるWebアプリ開発環境らしい。パソコンの中に独立したサーバーがつくれるみたいだ。

 

これを利用すれば、アニメ教室で作ったアニメをスマホにダウンロードするサーバーがラズパイで作れるかもしれん。ということで調査することにした。

 

まず関連情報を検索

以下が初心者向きでわかりやすい

 

インストール

 

FlaskサーバーにGIF動画を表示する方法

Flaskサーバーはいろんなアドレスを実データに変換する仕組みをもっているらしい。/image との記述を変換して適当なデータを与える。

静的なデータ(後述のQRコードなど)は "{{ url_for('static', filename='xxxxxx') }}" のように設定。

 

FlaskサーバーとGIF変換を同時に行う方法

WebサーバーとGIF変換を同時に行うにはマルチスレッドをつかう

 

Flaskサーバーの公開用IPアドレスを設定する方法

下のようにするとできるらしい。8080 は公開するポート(コマンド起動する場合)

flask run --host='xxx.xxx.xxx.xxx' --port=8080

*もし  FLASK_APP 未定義エラーがでたら Windowsなら

set FLASK_APP=app.py

*Mac or Linux なら以下のように設定する

export FLASK_APP=app.py

 

python の app.run の引数でも、URLとポートが指定できるようだ

if __name__ == '__main__':
app.run(host='xxx.xxx.xxx.xxx', port=8080)

 

公開IPアドレスQRコードで表示する方法

Pythonで簡単にQRコードが生成できるみたいだ。すばらしい。(pip or pip3 でインストール)

pip install qrcode

pip install pillow

 

Flaskサーバーにファイルをアップロードする方法

試してないが、これをつかえば、スマホで作ったアニメをアップロードする機能がつくれそう

Android

 

Windows で ローカル Flask サーバーをたてる方法

Flask で作るサーバーは一般に公開するサーバーには適してないと書いてある。しかし、ローカルでインターネット接続しない前提でスマホに公開するには、以下のように設定する。

 

  1. Windowsパソコンの ip アドレスを調べる。コマンドから「ipconfig」
  2. Flask サーバーのURL を上でしらべた 'xxx.xxx.xxx.xxx' ポート 8080 にする。(デフォルトは、'127.0.0.1' ポート 5000 になっている)
  3. Windows Defender ファイアーウォール > 詳細設定 >受信の規則 > python が接続禁止になっているので、「python (プロトコル TCPのほう)」を選んでプロパティ「接続を許可する」に設定する。

ラズベリーパイの場合、ファイアウォールの設定なしで http://xxx.xxx.xxx.xxx:8080 に接続できた。

 

 

 

 

 

Bottle

Bottleというのはもっと小さくて、Pythonだけでサーバーができるみたい

9VAeでiMovie用グリーンバック素材を作成

無料で入手できる Mac, iPhone/iPad の動画編集ソフトiMovie 用のグリーンバック動画を9VAeきゅうべえで簡単に作る方法を説明します。9VAe Mac版iPad/iPhone版でつくれます。

f:id:dnjiro:20200111110019g:plain


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

 

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

iMovie のダウンロード

 

1.サンプル動画を準備(自分で撮影した動画でもOK)

作り方を説明するために、9VAeきゅうべえで、サンプル動画を作成します。自分で撮影した動画をつかってもかまいません。

  1. 9VAe>「ヘルプメニュー>(かおであそぼう(練習用))>変身」
  2. 「ファイルメニュー>動画出力」(動画出力は、Mac版、iPad/iPhone版にあります)
  3. パソコン版の場合、先に保存ファイルを指定します。iPad/iPhone版の場合、動画サイズ設定画面になりますのでOKをタッチすれば、動画がカメラロールに保存されます。

 

 

2. iMovie で新規プロジェクトを作成、動画を入力

以下、iPhoneで説明します。

  1. iMovie を起動
  2. 「+」プロジェクトを作成 をタッチ
  3. 「ムービー」をタッチ
  4. サンプル動画(下図A)をタッチして選択、下の「ムービーを作成(下図B)」をタッチ

    f:id:dnjiro:20200111152328p:plain

  5. プレイボタン(下図C)をタッチして動画を見てみましょう。

    f:id:dnjiro:20200111152828p:plain

 

この動画に動く文字と吹き出しを9VAeきゅうべえで作成していれてみます。

 

3.9VAeきゅうべえで文字と吹き出しを入れる

  1.  9VAeを起動。

  2. もし画面が黒い場合「表示メニュー(下図D)>ダークモード」で画面が白くなります。(黒でもできますが、白画面で説明します)
  3. 文字入力ボタン(下図E)をタッチ。
  4. 「9VAeで(改行)グリーンバック(改行)素材を作成」と入力
  5. 上の図形タブ3(下図F)をタッチし、吹き出し(下図G)をタッチ。これで文字の背後に吹き出しが入ります。
  6. 画面右下すみ(下図H)をタッチ。パレットが消えます。もう一度タッチでパレットが出てきます。
 

f:id:dnjiro:20200111153800p:plain

4. 文字と吹き出しに「書き順」効果をつける

  1. 画面の外(下図I)からドラッグして文字と吹き出しを両方選びます。
  2. 「調整メニュー(下図J)>書き順」をタッチ。これで吹き出しと文字が順番にでてくるアニメーション効果がつきます。
  3. ページの上の「1秒(下図K)」をタッチ。 メニューから「1秒長くする」を3回タッチし時間を4秒にします。
  4. プレイボタン(下図L)をタッチして動きをみてください。

f:id:dnjiro:20200111154757p:plain



5. 続きのページ、背景ページを作る

  1. ページの右側の「+」ボタン(上図M)をタッチ。メニューから「続きのページを作る」。これで1ページの内容がコピーされます。
  2. ページの左側の「<」(上図N)をタッチ。メニューから「背景ページを入れる」これで先頭に背景ページができます。

 

f:id:dnjiro:20200111155650p:plain

6. 背景ページ全体に四角形をかく

  1. 四角形入力ボタン(上図O)をタッチ。iPhone版の場合アイコンが消え、画面全体が見えるのでドラッグして画面全体をおおうように四角形を描きます。
  2. iPhone版の場合上のメニューのどれかをタッチすれば、パレットがもう一度表示されます。
  3. 図形パレット(上図P)をタッチ
  4. 塗り色(上図Q)をタッチ。カラーパレットから緑色を選び、四角形をグリーンにします。これでグリーンバックができます。
  5. プレイボタン(上図R)で動きをみてください。
 

7. グリーンバック素材を動画出力

  1. 「ファイルメニュー>動画出力」。「OK」ボタンでMP4動画を作成します。

     

 

8. iMovie で素材動画を追加

f:id:dnjiro:20200111160243p:plain

  1. 下(上図T)を左右にドラッグして先頭に移動します。
  2. 「+」(上図U)をタッチ。「ビデオ」をタッチ
  3. 「最後に追加した項目」をタッチ。
  4. グリーンバック動画(下図V)をタッチ。「・・・」(下図W)をタッチ
  5. 「グリーン/ブルースクリーン」をタッチ。

    f:id:dnjiro:20200111160833p:plain

  6. これで動画の上に文字と吹き出しのアニメーションが合成されました。

    f:id:dnjiro:20200111161128p:plain

 画面上の文字と吹き出しの位置をかえるには、9VAeに戻って位置を変更します。例を示します。

 

 

 

9. 9VAeきゅうべえの縦横サイズを変更(iPhone縦長の場合)

  1. 9VAe 「ファイルメニュー>ページ設定」
  2. 縦と横の数字を入れ替えると、用紙が横長になります。
  3. 右下隅(下図X)をタッチしてパレットを消す。
  4. 左下の「ー」(下図Y)を何回かタッチすれば外側が見えるようになります。
  5. 背景ページにいれた図形を選択し、選択枠の右辺ハンドル(下図Z)をドラッグし、緑色を画面全体に広げます。

    f:id:dnjiro:20200111162312p:plain



 

10. 複数ページを選択して移動、吹き出しに色をつける

  1. ページ2の番号(上図a)をタッチ。メニューから「ページの指定ここから」
  2. ページ3の番号(上図b)をタッチ。 メニューから「ページの指定ここまで」これで、2ページ、3ページにある文字、吹き出しが同時に選択されます。
  3. 選択枠中心の「+」(下図c)をドラッグして右上に移動
  4. iPhoneの場合、メニューバーをタッチしてパレットを表示。塗り色をタッチして色を選べば、吹き出しに色をつけることができます。

    f:id:dnjiro:20200111162752p:plain

 

11. 上と同様にグリーンバック動画を出力し、iMovie に入れる

  1. 「ファイルメニュー>動画出力」。「OK」ボタンでMP4動画を作成します。

 

  1. iMovie で、下をドラッグして動画を挿入する場所に移動。
  2. 「+」(下図e)をタッチ。
  3. 「ビデオ」をタッチ「最後に追加した項目」をタッチ。
  4. 一番上のグリーンバック動画をタッチ。
  5. 「・・・」をタッチ
  6. 「グリーン/ブルースクリーン」をタッチ。
  7. これで2つめの吹き出しのアニメーションが合成されました。プレイボタン(下図f)で結果をみてください。

    f:id:dnjiro:20200111163231p:plain

 

12. iMovieから youtube に投稿

  1. 「完了」(上図g)をタッチ
  2.  「アップロードボタン」(下図h)をタッチ
  3. youtube」をタッチ
  4. youtube アカウントを入力して、ログイン
  5. 「公開」「非公開」などを設定し「共有」をタッチ

これでムービー書き出しが行われ、youtubeへのアップロードが完了します。

 

f:id:dnjiro:20200111163445p:plain

 

13.アニメGIF作成

  • このサイトの一番上の画像はアニメGIFで、iMovie を使わずに、9VAeだけで作成しています。
  • サンプルの動画、最初の素材、2番目の素材を別々に保存し、アニメキャストにして重ねました。素材のアニメはグリーンバックがはいった背景ページを削除しました。
  • アニメGIFは色数が256色しかなく、音が入れられませんが、画像の代わりに使うことができ、簡単なアニメーションを表現するのにむいています。
  • 9VAeは同じデータからアニメGIFや動画素材を出力できます。

 

9VAeをつかえばグリーンバック動画がすぐ作れる 

  • 9VAeきゅうべえを使えば、グリーンバック動画がすぐ作れます。
  • 今回は、文字と吹き出しの例を示しましたが、FreeSVG など多くのSVGイラストをつかって動くキャラクタ素材が作れます。動画作成にご利用ください。
  • もっと長いアニメを作ることもできます。以下をご覧ください。

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

 

 

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

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

 

f:id:dnjiro:20190118194926g:plain

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

 


9VAeきゅうべえで動く年賀状作成「獅子舞」

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

 

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

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

f:id:dnjiro:20191220075744p:plain



 



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

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

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

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

続きのページを作成

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

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

 身体と模様だけ選ぶ

  1. 身体と模様を選んでから、点選択または追加ボタンf:id:dnjiro:20181027163046g:plain(下図E)をタッチ。イラスト全部の点が表示されます。この中からまず身体と模様と顔を区別します。
  2. 身体と模様の点の周りを線で囲むように指で書いて選びます。選んだ点のまわりに選択枠(下図)ができます。

    f:id:dnjiro:20191220082532p:plain

  3. ここで、もう一度点選択または追加ボタンf:id:dnjiro:20181027163046g:plain(下図E)をタッチすれば選んだ点が含まれる図形だけが選ばれます。

    f:id:dnjiro:20191220083824p:plain

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

  1. 登録パレットのf:id:dnjiro:20181029095306p:plain(上図G)をタッチ。これで選んだ身体と模様がパレットに登録されます。登録パレットのON/OFFは右下すみ(上図F)です。
  2. バレットに登録されたボタン(上図H)をタッチ。「隠す」をタッチ。これで身体と模様が見えなくなります。

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

  1. 同様にして下の歯とアゴだけ選びます。歯とアゴの点の一部を線で囲むようにして選び、もう一度点選択または追加ボタンf:id:dnjiro:20181027163046g:plain(上図E)をタッチ。これで歯とアゴだけ選ばれた状態になります。左下の「+」(下図I)で拡大して作業できます。

    f:id:dnjiro:20191220085610p:plain

  2. 下の歯とアゴの点だけ線で囲んで選び、選択枠の枠線(下図J)をドラッグして下に移動させます。これで口を開けることができました。

    f:id:dnjiro:20191220090716p:plain

  3. プレイボタン(上図K)を押してアニメーションを見てみましょう。もし動かなかったら、2ページめを作る作業(「+」ボタンCを押して「続きのページを作る」)を忘れていたかもしれません。

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

  1. 1ページまたは「<」(下図L)をタッチして1ページに移動
  2. 1ページの左上のボタン(下図M)をタッチ。メニューから「往復」をタッチ(「ツール」メニューの「往復」でも同じ。)往復命令を1ページに入れれば、1ページと2ページの間を往復します。
  3. プレイボタンを押してアニメを見て見ましょう。ストップボタン■を押せば止まります。もし口が開いた状態で止まる場合は、「往復」が2ページにはいっている可能性があります。

    f:id:dnjiro:20191220092418p:plain

 口が模様の下になるのがおかしいですね。静止画では、口と模様がはなれていたので重なり順序が考慮されていなかったためです。修正しましょう。

 

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

 

f:id:dnjiro:20191220094805p:plain

  1. 2ページまたは「>」(上図O)をタッチして2ページに移動。
  2. 獅子の頭を選んで、点選択または追加ボタン(上図P)f:id:dnjiro:20181027163046g:plainをタッチ。
  3. 獅子の頭に含まれる点を青い線で囲んで(上図Q)、点ボタンf:id:dnjiro:20181027163046g:plainをもう一度タッチ。これで獅子の頭だけが選ばれます。(パソコン版の場合、Ctrlキーを押しながら画面をドラッグすれば青い線で囲んで点を選べます。)
  4. 模様の点が残っている場合は、もう一度点を選びなおし、獅子の頭の点だけが残るようにしてください。

    f:id:dnjiro:20191220100925p:plain


  5. 選択枠の中心の「+」(上図R)をタッチ。メニューから「つながった図形を選択」をタッチ。これで1、2ページ分の獅子の頭が選ばれます。
  6. f:id:dnjiro:20181027165131p:plain(上図S)をタッチして獅子の頭をきおくツールにカット。上のページの中身が身体だけになっていれば成功です。これで口を開け閉めするアニメーションが記憶ツールにはいりました。

  7. 記憶内容をアニメキャストにするボタンf:id:dnjiro:20181027165315g:plain(上図T)をタッチ。名前はなんでもかまいません。「OK」を押せばアニメキャストがはいります。

  8. 選んだ図形を前のページにコピーするボタンf:id:dnjiro:20181221163257g:plain(上図U)をタッチ。これで、2ページのアニメキャストが1ページにコピーされます。

    f:id:dnjiro:20191220102314p:plain

  9. 選択枠の中心の「+」(上図V)をタッチ。メニューから「動き矢印を入力」をタッチ。「次のページのアニメキャストを移動させれば動き矢印ができます。移動しますか」には「いいえ」をタッチ。画面に赤い線(動き矢印)ができます。
  10. 赤い線(動き矢印)に点を追加します(下図W)。赤い線にそって頭が動きます。プレイボタンを押して動きをみてください。

    f:id:dnjiro:20191220103517p:plain


     

 

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

  1. 2ページまたは「>」(上図X)をタッチして2ページに移動しましょう。
  2. 選択枠の角のハンドル(下図Y)をタッチ。メニューから「回転」を選んでアニメキャストをすこし回転させ、頭をかたむけます。プレイボタンで動きをみてください。

    f:id:dnjiro:20191220104848p:plain

  3. アニメキャストの選択枠の中心の「+」(上図Z)をタッチ。「アニメ...を修正」をタッチ。獅子の頭が開きます。

    f:id:dnjiro:20191220110547p:plain

  4. 1ページまたは「<」(上図a)をタッチして1ページに移動。
  5. ページ左上のボタン(上図b)または「ツール」メニューから「往復」をタッチ。
  6. 1ページの時間(上図c)をタッチし、「0.1秒短くする」をタッチし、時間を0.5秒にします。これで0.5秒で口を開け閉めします。
  7. 画面の太文字「shishi.svg >xxxxx」の「shishi.svg」(上図d)をタッチ。メニューから「このアニメにもどる」をタッチ。元のアニメに戻ります。
  8. プレイボタンf:id:dnjiro:20181029083754g:plainで動きをみてみましょう。

 

アニメGIF出力

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

 

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

アニメGIFは簡単にMP4動画に変換できます。(Mac / iPhone / iPad版の場合は、「ファイルメニュー>動画出力」で直接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で読み込めば、自由に編集できます。
  • こちら(完成したSVGデータ)にアップしましたので、ここを長押し、もしくは右ボタンメニューでダウンロードできます。9VAeきゅうべえで中身をご覧ください。

 

 

 

9VAeきゅうべえを使えば、スマホだけで、SVGイラストから絵をかかずにアニメーションを作成できます。SVGの静止画のフリー素材イラストがネット上にたくさんあります。いろんなアニメーションを作ってみてください。

 

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

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

 

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

 

 

SVGから動く年賀状作成「マウス」

9VAeきゅうべえアンドロイド版でもPC版iPad/iPhone版でもつくれます。

 

f:id:dnjiro:20191218062516g:plain




作業時間は10分程度です。他のアニメの作り方はこちらをご覧ください


9VAeで簡単動く年賀状作成「マウス」

 

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

 

1. 新規作成して、最初に「1.鉛筆」を押す

9VAeきゅうべえで、絵を順番にかいていく「ひとこまアニメーション」を作る場合、絵を描く前に「1.鉛筆」を押す必要があります。制作中の作品が間違えて「ひとこまアニメーション」にならないようにするためにこうしています。

  1. 「ファイルメニュー>新規作成」をクリック
  2. ページの右側のf:id:dnjiro:20190424153550p:plain(下図A)をクリック>「線を書いたあと、もう一度このボタンを押してください」が出たら「OK」
これで1コマアニメーションの作成準備ができました。

 

f:id:dnjiro:20191216174858p:plain

2.「MOUSE」と書いてもう一度「1.鉛筆」を押す

 これで「MOUSE」と書けばひとこまコマアニメーションができます。
  1. 画面に「MOUSE」と書きましょう。
  2. 「<<  <」ボタン(上図B)を押して、左下の虫眼鏡ボタンを押せば描く場所が広がります。
  3. 描けたら「1.鉛筆」をもう一度押します。これでひとこまアニメのできあがり。
  4. 選択ボタン(上図C)を押して、修正したい線を選べば、位置やサイズを調整できます。「1.鉛筆」を押せば、毎回、ひとこまアニメーションを作り直します。
 

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

  1. 以下のイラストを開く 。ダウンロードは「[↓] SVG FILE」ボタン

    wiredComputer mouse vector icon|FreeSVG

  2. スマホの場合「[↓] SVG FILE」ボタンを長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー>「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け(ペースト)」。
  3. パソコンの場合は「[↓] SVG FILE」ボタンを右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ツール>9VAeアニメを入れる」をクリック。ダウンロードしたファイルを選ぶ
これで、マウスのイラストが読み込まれます。

f:id:dnjiro:20191216180304p:plain


4. マウスを小さくしてMの左上に移動

よみこんだイラストはアニメキャストという部品になります。これを動かしてみましょう。

  1. 左下の「-」ボタン(上図D)を何回か押せばマウス全体が見えます。
  2. 選択枠の角のハンドル(上図E)をドラッグして小さくします。
  3. 選択枠の中心のハンドル「+」(上図F)をドラッグしてMの左上に移動します。

 

5. マウスに動き矢印をつける

  1. 選択枠の中心のハンドル「+」(上図F)をタッチ。メニューから「動き矢印を入力」
  2. 矢印の先の点(下図G)をドラッグして「MOUSE」の右下に移動
  3. 矢印の線上をタッチし、ドラッグすれば点(下図H)が追加されるので「M」の左下に移動

    f:id:dnjiro:20191216190106p:plain

 

6. 動き矢印をMOUSEの書き順の形にする

  1. 動き矢印の上に点を追加して、MOUSEの書き順の形にします(下図の矢印)。

    f:id:dnjiro:20191216193941p:plain

 

7. 矢印にそって向きを変えるに設定。登録ボタンに追加

  1. 選択ボタン(上図I)をタッチ
  2. 選択枠の中心の「+」(上図J)をタッチ。メニューから「矢印にそって向きを変える」をタッチ。
  3. 右側の登録エリアのボタン(上図K)をタッチ。メニューから「追加登録する」をタッチ。これで「MOUSE」の書き順と同じタイミングで動くようになります。
  4. ページの時間(上図L)をタッチ。時間を「10秒」程度にしましょう。
  5. プレイボタン(上図M)で動きをみてみましょう。
  6. 書き順とマウスの動きがあわない場合、点の追加ボタン(上図N)をタッチしてマウスが早く動きすぎる場所に点を追加します。点を増やせばその部分を通過するスピードが遅くなります。

 

8. 文字を入れる

  1. 文字ボタン(下図O)をタッチ。文字を入力します。
  2. 文字の選択枠の角のハンドル(下図P)をドラッグすれば、文字サイズを変更できます。中心の「+」または枠線(下図Q)をドラッグすれば場所を変更できます。
  3. プレイボタンで動きを見てみましょう。

    f:id:dnjiro:20191218053516p:plain

     

9. ページの複製

  1. ページ番号「1」(上図R)をタッチ。メニューから「ページを記憶する」。
  2. ページの右側の「+」(上図S)をタッチ。メニューから「記憶したページを入れる」。これで1ページが複製され、2ページができます(下図)。

    f:id:dnjiro:20191218055935p:plain

 

10. 間に0秒のページをいれる

この状態では1ページの文字、図形が2ページの文字、図形とリンクしており、書き順アニメーションが2ページで逆転します。一度、プレイしてみてください。このリンクを切るために0秒のページをいれます。

  1. ページの中間の「>」(上図T)をタッチ。メニューから「空白ページを作る」
  2. 空白ページの時間「〇〇秒」(下図U)をタッチ。メニューの「1秒短くする」を何回もタッチして0秒にします。
  3. これでプレイボタンを押せば、2回書き順アニメが繰り返されます。

    f:id:dnjiro:20191218061546p:plain

 

11. 文字を変更

  1. 3ページ(上図V)をタッチして3ページに移動
  2. 文字をタッチして文字を選択。文字のまわりに選択枠が表示されます。
  3. 選択枠中心の「+」(上図W)をタッチ。メニューから「文字の内容変更...」をタッチ。
  4. 好きな文字に変更し、プレイボタンを押してみましょう。

 

12.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。
  • 画像サイズについて、スマホ版では、幅、高さのどちらかを空白にしておけば、比率を保った数値が自動設定されます。MP4動画を作る場合は高さ「720」に設定するとよいでしょう。
  • Androidの場合、完成したファイルは、端末内の「9VAe」フォルダの中に、指定した名前で出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

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

アニメGIFは簡単にMP4動画に変換できます。(Mac / iPhone / iPadならアニメGIFを介さずに直接MP4が出力できます。)

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

 

9VAeをつかえば短い動画がすぐ作れる 

  • 9VAeきゅうべえを使えば、短い動画がすぐ作れます。FreeSVG など多くのSVGイラストサイトの素材が使えます。いろんな動画をつくってみてください。
  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

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

 

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

 

DXライブラリをつかって、Amazon版 9VAeきゅうべえをつくる

Amazon Fire7 が3000円程度に値下がりしてたので衝動買いしてしまった。ディスプレイ、筐体、カメラ、バッテリーつきで、RaspberryPi より安い。子供むけタブレットにはぴったりだ。こうなるとアニメソフト 9VAeきゅうべえアンドロイド版が動くかどうか気になって調べてみると、Amazon アプリストアへの登録が無料らしい。アプリストア登録までできるか試してみたい。

 

先ずは、FireOSとAndroidOSの違いについて調査。

Fire7は、FireOS 6.3で、Android API 25 32bitらしい

 9VAeきゅうべえは、Android API 21  以上で開発しているので動きそうだ。2014年モデル以降(第4世代)が対象になりそう。

 

Amazonアプリストアへの登録をやってみた

  1. 新規アプリを追加する>Android
  2. 一般情報>価格情報>アプリの説明
  3. 価格情報は無料にする
  4. アプリの説明>アイコン、画像サイズはGooglePlayとは違うので作り直した
  5. APK  32bit版がそのままアップできた。

GooglePlay 向けに、64bitAPK と 32bitAPKを作成していれば、32bitAPKを、Amazon用につかえるみたいだ。今、審査中。

 

32bit版APKのアップで審査パス

1週間くらいかかったが、問題なく公開された。

ということで、DXライブラリをつかって32bit APKをつくれば、Amazonアプリストアに登録できました。

Amazon Fire タブレットに 9VAeきゅうべえをインストールする方法

9VAeきゅうべえは、プログラミング教育フリーソフト第4位に選ばれた、こどもがアニメーション制作するのに適したアニメーション作成フリーソフトです。アンドロイド版・iOS版、FireOS版は、下記アプリストアからダウンロードできます。

 

9VAeきゅうべえはAmazonアプリストアに登録されたのですが、PEASmotch!はまだ登録されておらず簡単にはインストールできません。ここでは、Amazon Fire タブレットに、PEASmotch! をインストールする方法を説明します。9VAeきゅうべえは上のリンクから取得したほうが新バージョンが入手できます。

 

 1.「不明ソースからのアプリ」設定をONにする

 APKから直接インストールするため以下のように設定します。

  • Fireタブレット >設定>セキュリティとプライバシー>「不明ソースからのアプリ」をONにします。

 

2.9VAe または PEASmotch! APK(ZIP)をダウンロードする

 上のリンクをクリックしたあと、右上のダウンロードボタン Untitled.png をクリックしてダウンロードします。下が PEASmotch!です。

 

 3.ZIPを解凍できるアプリをインストールしてAPKを実行

amazon アプリストアから次のアプリをインストールします。File Managerはたくさんありますが、ZIPが解凍できる WinZip-rar がよいです。他の File Managerは解凍できないものが多いです。

  1. WinZip-rar を開く。
  2. 「Dounload」フォルダをタッチして開く
  3. ダウンロードした「xxxx.zip」をタッチ>「Extract to」が表示されるので「OK」。これでダウンロードフォルダの中に、9VAeまたはPEASmotch!のAPKファイルができます。
  4. APKファイルをタッチ>「インストール」ボタンをタッチ

これで、PEASmotch! が、amazon Fireタブレットで使えます。

 

4.アニメGIFを見えるようにする

Amazon Photo で、アニメGIFを見ると、静止画になるようです。アニメGIFを見るには、次のプレーヤー GIF Player+ をインストールするとよいです。

  • GIF Player +
  • これをいれると、ファイルマネージャ WinZip-rar から「9VAe」や「PEASmotch」フォルダの中にあるGIFアニメを直接再生できるようになりました。

 

実行環境

・9VAeきゅうべえが実行できるのは、FireOS 5.3 以上、 2014年モデル以降(第4世代以上)です。

 

9VAe で作れるアニメーション

9VAeきゅうべえは、ひとこまアニメーションと2次元アニメーションを作ることができます。PEASmotch!one は、ひとこまアニメーションが簡単に作れるソフトです。詳細はこちら

 

イラストからアニメーションを作る方法はこちらをご覧ください。

 

今までのメモ

  • Amazon Fire タブレットにインストールする方法を説明しました。
  • 9VAeきゅうべえ・PEAS motch! アンドロイド版は、Play ストアで公開しました。今後、ストアで更新します。
  • Ver.190110 で、自動バックアップファイルが残っている場合に開くか消すか起動時に尋ねるようにしました。以前のバージョンを使用して自動バックアップファイルが残っている場合は、「いいえ」ボタンで削除してください。
  • スマホを回転したあと画面をタッチすれば縦横が切り替わります。
  • ファイルの書き込み権限を許可しておかないと保存できません。
  • データはスマホ内部の「9VAe」フォルダに保存されます。(PEAS motch!は「PEASmotch」フォルダ)

 

履歴

  • 191119:9VAe 楕円の描画精度アップ、パレットのON/OFF
  • 191002:PEAS  motch! プレイストアで公開
  • 190404:PEAS  motch! デザイン変更
  • 190208 (1.1): 全体再生の改善(メニューバーの文字消去、縦横比率の保存)
  • 190207: アニメキャストを開いたときのステージが基準枠を含むように修正
  • 190206: 半透明画像が使えるようにした。サイズ変更のバグ修正
  • 190205: PEAS motch! デザイン変更, 背景バッファサイズが間違っていたのを修正
  • 190204: PEAS motch! デザイン変更(色変更矢印を追加)。動くスタンプのメニュー表示追加。
  • 190203: アニメGIF出力で、幅と高さを空白にすると比率を保って自動設定する機能を追加。
  • 190202: 塗りのあるポリゴンや穴に対してどこでも点の追加ができるよう修正(今までは開いたポリゴンの場合、開いた辺に点の追加ができなかった。)
  • 190201: 点を削除して穴を結合するときのバグ修正
  • 190121: 表示倍率拡大ボタンを押しやすくした
  • 190120: 拡張子 .svg をつけないと読み出せなくなるバグを修正
  • 190115: SVG入力(太い線が細くなる問題を改善)
  • 190111: 英語に対応
  • 190110: 起動時にバックアップファイルがあれば開く機能を追加。ファイルの上書き確認
  • 190106: 細かい修正
  • 190105: 背景、記憶ツールの文字表示を実装。バグ修正(ポップアップメニュー、線入力時のピンチ表示、ページの動きパス表示)
  • 190101: スタンプの読み込みを改善。画面サイズ設定の枠を拡大。SVG入力を改善
  • 181229: 起動時にファイルアクセス権限を取得するようにした
  • 181225: Android8 でヘルプのリンクボタンを押すと落ちる問題を修正
  • 181222: 画面サイズを720x480に拡大
  • 181212: SVG保存したアニメ情報を読み出せない場合があるバグを修正、手書き入力中に画面の再描画をおさえる処理を追加
  • 181202: 最初のバージョン