dnjiro’s 9VAe blog

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

しゃべる解説動画・動くマニュアルが無料で作れる「9VAeきゅうべえ」

フリーソフト9VAeきゅうべえを使ってキャプチャ画像から動画マニュアルや解説動画を作る方法を説明します。作業15分くらいイラストを動かす方法はこちら初心者向け説明縦横変換、ブログ記事の時短作成動画素材サムネイルもつくれます。Youtubeで見る

f:id:dnjiro:20210421073844g:plain

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

 

内容:

 

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


www.youtube.com

1.「ひとコマアニメーション」で解説動画を作ると簡単

「ひとコマアニメーション」は、キッズプラザ大阪で開発されたアニメーション手法です。静止画を作るのと同じコストで動画が作成できます。

 

9VAeきゅうべえ Ver.0.8.0 (210201) から、ひとコマアニメーションが作れるようになりました。ページの時間をタッチして、メニューに「ひとコマ」がない場合、9VAeを最新版にしてください

 

「ひとコマアニメーション」は簡単です。

  1. 描いた順番にアニメーションが再生されます。
  2. 線や文字の長さに応じて再生時間が自動的に調整されます。
  3. 単なる動きの録画ではなく、動きの調整が自由にできます。

 ひとコマアニメーションは、あとから文字や画像が差し替えできるので、保守性の高い動画になります。

 

解説動画は、次のパーツで作成します。

1. 
キャプチャー画像
解説したい画面、写真
2. 
縁つき矢印
説明したい場所を示す
3. 
縁付き文字
説明文
4. 
せりふ
音声による解説

 

画面キャプチャ方法

 

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
 Mac
  • Shift + Command + 4 
デスクトップ
 Android
  •  電源 + 音量Down
 adbコマンド (開発者向け)
  •  adb shell screencap -p /sdcard/screen.png
     adb pull /sdcard/screen.png
フォトアプリ>
スクリーンショット
 
iPhone / iPad
  •  ホームボタン + 電源ボタン
  • サイドボタン + 音量UP
写真>
アルバム>
スクリーンショット
 Linux Mint
  • Print Screen キー
クリップボード
ファイル
 Amazon Fire
  • 電源 + 音量Down 1秒長押し
  • USBケーブルでPCと接続し、
    設定>接続デバイス>USB>ファイル転送
ピクチャ >
スクリーンショット

 

2.説明したい画面をキャプチャし、連番をつける

まず解説したい画面を必要な枚数だけ画面キャプチャし、ファイル名を連番にします。

f:id:dnjiro:20210420070006g:plain

9VAeは連番画像をまとめて読み込むことができ、読み込んだあとはファイル番号の指定だけで、画像を読み出せます。

 

 

3.スマホの場合、連番画像を9VAeきゅうべえフォルダに集める

画面キャプチャした画像を9VAeで直接使う方法はこちら(簡単)。ほかのアプリで作成した画像をつかう場合は、画像を9VAeフォルダ(または 9VAeDangla)にいれておきます。ファイルアプリなどでコピーします。こちらの記事も参考にしてください。

Androidでは、9VAeフォルダは、ダウンロードの中にできます。iOS/iPad は本体の直下にできます。フォルダがない場合は、なにかを保存してみてください。

パソコン版では、連番画像用フォルダを作成し、その中に連番画像を集めるとよいでしょう。

 

f:id:dnjiro:20201015125339g:plainメモ:9VAeに連番画像を読み込んだ場合、9VAeのファイルには連番画像のファイルパス名だけが記録されます。パソコン版9VAeは、保存先を指定できるので、連番画像と同じフォルダに保存するのがよいでしょう。

 

4. 9VAeで連番画像を読み込む。アニメを画像サイズにする 

  1. 画像入力ボタンをクリック。用意した連番画像の最初の画像を選びます。「すべて読み込みますか」と表示されるので「OK」をクリックします。スマホ版でパレットが消えていた場合は右下の「もどす」をタッチしてください
  2. 入力した画像の選択枠の中心の「+」をクリック。メニューから「ステージの大きさにする」をクリック。これで画像が全体に広がります。
  3. 選択枠の中心の「+」をクリック。メニューから「ページを画像に合わせる」をクリック。これでステージのサイズが画像サイズになります。
  4. 左下の虫眼鏡ボタンをおせば、画面全体が表示されます
  5. 選択枠の中心の「+」をクリック。メニューから「連番()-()」をクリック。開始番号と終了番号を同じ数字、(例えば001なら1)にします。入力欄では最初は -1 になっています

f:id:dnjiro:20201015125339g:plainメモ:連番画像は、初期設定(開始番号と終了番号が−1)になっていると、再生時に連番画像が順に表示されます。開始番号と終了番号をどちらも1に設定すれば、1番の画像だけが再生されます。

 

5. 先頭ページにタイトル文字を入れる

  1. ページ左側の「<」をクリック。「空白ページを作る」で新しいページを作ります。
  2. 文字入力ボタン「A」をクリック。タイトル文字「9VAeで解説動画の作り方」を入れます。
  3. 文字の選択枠の角のハンドル■をドラッグすれば、文字を拡大できます。
  4. 線の種類を設定するボタンをクリック。メニューから「縁をつける」をクリックすると文字に縁がつきます。同様にメニューから「影をつける」をクリックすると文字に影がつきます。メニューから「太く」を何回かクリックすれば、縁や影を太くできます。
  5. 塗り色2ボタンをクリック。ここで縁の色を変更できます。ここでは白にしました。

  6. 文字タブをクリック。パレット2(文字属性)に切り替えます。
  7. 文字色ボタンをクリック。文字の色をピンク色に設定しました。

f:id:dnjiro:20201015125339g:plainメモ:線の属性ボタンをつかって、矢印や文字に縁取り、影がつけられます。縁どりの色は図形パレットの色2で設定します。下に9VAeの文字操作をまとめます

 

9VAeの文字:メモ
操作
文字を入力する
「A」ボタン
文字を変更する
(A)文字をダブルクリック
(B)選択枠の「+」メニュー>文字の内容変更
文字のサイズを変更
選択枠の角の■をドラッグして拡大・縮小
行間隔をあける
選択枠の上下の■ドラッグ
文字の色をかえる
文字タブ(パレットのタブ2)>文字色
半透明にする
文字タブ(パレットのタブ2)>文字色>透明度
縁をつける・とる
線の種類ボタン「ー」
縁の色をかえる
塗り色2ボタン
影をつける・とる
線の種類ボタン「ー」
縁、影の太さ
線の種類ボタン「ー」>広く・せまく
文字をぼかす・とる
線の種類ボタン「ー」
ぼかしにぶれをつける・とる
線の種類ボタン「ー」
文字に枠をつける・とる
線の種類ボタン「ー」>実線・(なし)
文字の背景を塗る・とる
図形の塗り色ボタン>色・「なし」
文字背景グラデーション
グラデーションボタン(塗り色の右側)
文字の枠線の太さ
線の太さボタン「|」
枠線の色を変える
線の色ボタン「■」
枠や背景の大きさ
文字タブ(パレットのタブ2)>「➗」
左寄せ、中央、右寄せ
文字タブ(パレットのタブ2)>「➗」
フォントを変更する
文字タブ(パレットのタブ2)>「F」
Android は未対応)
太字にする・しない
文字タブ(パレットのタブ2)>「F」
イタリックにする・しない
文字タブ(パレットのタブ2)>「F」
コメントにする・しない
文字を選んで「+」メニュー>コメント
しゃべる
文字を選んで「+」メニュー>しゃべる
男の声、女の声の切り替え
文字タブ(パレットのタブ2)>「➗」
特別な文字「#」
先頭が#(半角)の文字は差し替え用のタグになり、表示されません。使いたい場合は、先頭に半角スペースをいれてください

 

6. 矢印を入れる

  1. 2ページをクリックして2ページに移動。
  2. パレットのタブ1をクリックしてパレット1(図形属性)を表示。
  3. 矢印の種類ボタンをクリック。メニューから右向き矢印を選択
  4. 折れ線入力ボタンをクリック。このモードでは頂点を順番にクリックして入力します。
  5. 画像入力ボタンの場所を示すように、最初の点をクリック
  6. 終了点をクリック
  7. 選択ボタンを2回クリック。線の入力が終了し、矢印が入ります。
  8. 線の太さボタンをクリック。メニューの「太くする」を数回クリックし、矢印を太くします。
  9. 線の色ボタンをクリック。矢印の色を赤にしました。

 

f:id:dnjiro:20201015125339g:plainメモ:折れ線・多角形を入力するボタンでは点を順番にクリックして入力します。最初か最後の点と同じ点、もしくは、選択ボタンをクリックすれば入力が終了します。

 

9VAeの線:メモ
操作
折れ線を入力する
「折れ線」ボタン
頂点を順番に入力する
終了は同じ点を2回、または、開始点
自由に線を入力する
フリーハンド入力ボタン
イラストを入力する
「9VA」ボタンから、SVGイラストを選ぶ
線の色をかえる
線の色ボタン「■」
線の太さをかえる
線の太さボタン「|」
矢印をつける・とる
矢印ボタン「ー」(右端)
点線をつける
線の種類ボタン「ー」
半透明にする
線の色ボタン「■」>透明度
縁をつける・とる
線の種類ボタン「ー」
縁の色をかえる
塗り色2ボタン
ぼかす・とる
線の種類ボタン「ー」
ぶれをつける・とる
線の種類ボタン「ー」
影をつける・とる
線の種類ボタン「ー」
縁、影の太さ、ぶれ、ほかしの範囲
線の種類ボタン「ー」>広く・せまく
線の中を塗る
線を選んで「+」メニュー>背後を塗りつぶす
グラデーションをつける
グラデーションボタン(塗り色1の右側)
線を閉じる・開く
閉じる・開くボタン「口」「凵」
尖った線、まるい線
尖った・まるいボタン「∧」「∩」
形を変える
点選択ボタン
点の追加・削除
点の追加削除ボタン
複数の図形をいっしょに塗る
中心「+」メニュー>グループ化
中心「+」>いっしょに塗る

 

7. ページに「ひとコマ」を設定。プレイする。

  1. 1ページの時間をクリック。メニューから「ひとコマ」をクリック。
  2. 2ページの時間をクリック。メニューから「ひとコマ」をクリック。
  3. プレイボタンをクリック。これで、タイトル文字が表示され、矢印がのびていく「ひとコマアニメーション」が再生されます。 

f:id:dnjiro:20201015125339g:plainメモ:「ひとコマ」に設定したページは、プレイボタンを押すと、描いた順番に絵ができるアニメーションが作成されます。ページの時間は毎回自動設定されます。

 

8. 次ページを作成。連番画像を次の番号にする



  1. ページの右側の「+」をクリック。メニューから「続きのページを作る」。これで次のページができます。ページの時間は、前のページと同じ時間になります
  2. 画像をクリック。選択枠中心の「+」をクリック。
  3. メニューから「連番 (1)-(1) 」をクリック。開始番号、終了番号の入力画面になります。
  4. 開始番号、終了番号を次の番号「2」に変更します。これで、次の画像に変わります。
  5. 終了番号が空白の場合、開始と終了が同じ番号になります。その状態で、前後のページにリンクコピー(←□、□→)すると、前後の番号になるので便利です
  6. 開始番号と終了番号の両方を空白にすると、普通の画像に戻ります

f:id:dnjiro:20201015125339g:plainメモ:連番画像の開始番号、終了番号を変更すれば、画像の切り替えができます。

 

9.矢印をカットして複製

  1. 矢印をクリックして選択。
  2. 切り取りボタンをクリック。矢印を記憶ツールに入れます。
  3. 貼り付けボタンをクリック。メニューから「複製する」をクリック。矢印を元の位置に戻します。
  4. 点選択ボタンをクリック。矢印の点が表示されます。
  5. 矢印の先をドラッグして矢印の向きを次の説明用に変更します。

f:id:dnjiro:20201015125339g:plainメモ:矢印をいったん切り取って複製するのは前のページとのリンクをきりはなすためです。続きのページ作成では、前のページとリンクした図形になり、再生すると形が変化します。いったん削除して「複製する」を行うとリンクしていない別の図形になり形が変化しなくなります。つながった図形の説明はこちら

 

10.説明用文字を入力

  1. 文字入力ボタンをクリック。ここでは「ステージの大きさにする」と入力しました。
  2. 線の種類のボタンをクリック。メニューから実線を選ぶと文字に枠線がつきます。
  3. 塗り色ボタンをクリック。色を指定すると、文字背景に色がつきます。ここでは水色にしました。
  4. 文字をドラッグして位置を合わせます。
  5. 2ページに移動
  6. 「画像入力」という文字をいれましょう

f:id:dnjiro:20201015125339g:plainメモ:線の種類ボタンで文字枠、塗り色ボタンで文字背景に色がつけられます。

 

11.文字をしゃべらせる

  1. 1ページをクリックして1ページに移動。
  2. タイトル文字を選びます
  3. 中心の「+」メニューから「複製する」を実行。これで文字が複製されます
  4. 複製した文字の中心の「+」メニューから「文字の内容変更」を実行し、しゃべる内容に文字を変更します。
  5. もう一度中心の「+」メニューから「コメント」を実行。コメントにすると、再生したときに表示されません
  6. 中心の「+」メニューから「しゃべる」を実行すればしゃべるよう設定されます。
  7. もう一度中心の「+」メニューから「しゃべる」を実行すれば、スマホ版、Mac版では、しゃべるはずです。Windows版、Linux版9VAeでは、ツールアプリを入れる必要があります。以下をクリックして説明をご覧ください。

f:id:dnjiro:20201015125339g:plainメモ:ページの時間を「ひとコマ」に設定しておけば、ページの時間は、文字をしゃべる時間に応じて自動的にかわります。「しゃべる」設定した文字は、重なり順序の下の文字から順番に発声します。

 

12.タイトルイラストを入れる

  1. 「openclipart   324079  chalkboard」を検索し、フリーSVGイラストサイトOpenclipart から、「Anime Girl School Chalkboard 2 Animation」をひらきます
  2. SVG (Source Vector) ボタンを長押し、または、右ボタンでクリックし、「リンク先を保存」して、SVGイラストをダウンロードします
  3. 右側の「9VA」ボタンをクリックし、メニューから「9VAアニメを入れる」を実行し、ダウンロードした、SVGイラストを読み込みます。
  4. 重なり順序を下げるボタンを何回かクリックし、イラストを文字の下に配置します
  5. コメント文字を下に移動します。どの場所においても効果はかわりません
  6. 選んでいるイラストの中心の「+」をクリックし、メニューから「ローマ字で動かす」を実行します
  7. ローマ字で口パクを設定します。最初の数字は秒です。「6:kyuubeee de kaisetu douga no tukurikata wo setumei simasu ...........」と入力しましょう
  8. プレイボタンで動きを見てみましょう 

f:id:dnjiro:20201015125339g:plainメモ:読み込んだSVGイラストは、アニメキャストというパーツになります。AIUEOの口の形がはいっており、ローマ字で口パクが制御できます(説明はこちら)

 

解説動画の作り方のポイントを説明しました。あとは、同じ方法をつかって、続きをつくっていきます。

13. 複数ファイルの切り替え

9VAeは、複数のファイルを何本でも読み込むことができます。過去に作成した解説動画を開いて記憶ツールにいれ、「9VA」ボタンで切り替えれば、簡単に利用できます。

  1. ヘルプメニューから、「わらえもん」を開きます。
  2. ファイルメニューの「名前をつけて保存」で、適当な名前で保存してください
  3. ヘルプメニューから、「変身」を開きます。
  4. ドラッグして顔を選択し、
  5. コピーボタンで記憶ツールに入れます
  6. 「9VAボタン」をタッチ。
  7. メニューの下の、「編集中のアニメ」から、適当な名前をつけたファイルをタッチすれば、そのファイルが開きます
  8. 貼り付けボタンから、「複製する」を実行すれば、変身の顔が入れられます。
  9. 下の「←q」ボタンをおせば、アニメキャストにして入れられます。用途に応じて使い分けてください

編集中のアニメのリスト

  • 今ひらいているファイルにチェックマーク「v」がつきます。
  • 未保存のファイルに「*」がつきます。
  • 一度ひらいたアニメキャストが、親のファイルの下に「;」つきで表示され、切り替えできます
  • 数が多い場合、▲▼のタッチで続きが表示されます。右側の▲▼は1つ、左側の▲▼は1画面送ります。最後になると△▽に変わります

14. 素材をアニメキャストにまとめる

  1. よく使う素材は、「素材」といった名前のアニメキャストにまとめておくと便利です。最後に1ページ追加し、素材アニメキャストを入れておくとよいでしょう。「再生終了」命令をいれておけば、再生時に無視されます

15. アニメーションを動画にする

  • ファイルメニュー「アニメGIF出力」「動画出力」「APNG出力」で、アニメGIF/MP4動画/APNG が出力できます。詳細はこちら
  • MP4動画は、幅を空白にし、高さを720、1080、または1920、秒コマ数は30にするとよいでしょう。数字が大きいほど高解像度、出力時間がかかります
  • この記事のGIFは、高さ512、秒コマ数は10で出力しています。

 

 動画(MP4)の作成

  1. ファイルメニュー「動画出力」で、MP4動画を作成できます。

  2. Windows/Linuxの場合、FFmpegの設定が必要です

f:id:dnjiro:20201016170757g:plainメモ:スマホ版、Mac版9VAeは、FFMpegを設定しなくても、MP4動画が出力できます。iPhoneを使った音入りアニメの変換方法はこちら

  

 

9VAeをつかえば素材動画が作れる 

  • 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
  •  Openclipart や  FreeSVG など多くのSVGイラストをつかって動くキャラクタ素材も作れます。
  • 動画編集ソフトで動画に合成できます。

OS

フリーソフト

9VAeで作成する素材動画

Windows

AviUtl

連番PNG または MP4(Ezgifで変換)

Mac/iPhone/iPad

iMovie

MP4 または QuickTime(古いMac)

Android

PowerDirector

GIF

作り方

 

  • もっと長いアニメを作ることもできます。以下をご覧ください。

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

 

 

サムネイル画像の作成

  • 9VAe Ver.0.8.5 (スマホ Ver.1.5)から各ページを任意サイズのPNG画像に出力する機能がつきました。
  1. ファイルメニュー>画像出力。パソコン版は先に保存フォルダと保存名を指定します。
  2. 画像設定画面で、画像サイズ(縦横ドット数)を指定します。Youtube サムネイルは 1280x720 推奨。 サムネイルの場合「背景を透明にする」にはチェックをいれないほうがよいでしょう。
  3. 原稿の縦横比率を変更したい場合は、「ページメニュー>ページ設定」でステージのサイズを変更します。

 

 

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