フリーソフト9VAeきゅうべえを使ってキャプチャ画像から動画マニュアルや解説動画を作る方法を説明します。作業時間は１５分くらいです。動画素材、サムネイルもつくれます。
内容：
- 「ひとコマアニメーション」とは（１）
- 画面キャプチャし、連番をつける（２）
- 連番画像を9VAeフォルダに集める（３）
- 連番画像を読み込む。画像サイズ設定（４）
- タイトル文字を入れる（５）
- 矢印を入れる（６）
- 「ひとコマ」を設定（７）
- 次ページを作成。連番画像を次の番号に（８）
- 矢印をカットして複製（９）
- 説明用文字を入力（１０）
- 複製して修正（１１、１２）
- 複数ページをアニメキャストにまとめる（１３）
- アニメキャストの複製（１４）
- アニメキャスト中の修正（１５）
- ひとコマアニメーションの時間調整（１６）
- 動画にする（１７）
- サムネイル作成（１８）
■ 9VAeきゅうべえのダウンロード
- Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
- iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
- Win / Mac / Linux：無料ソフトでアニメを作ってみよう - Qiita
- Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
- 9VAeのボタン説明、メニュー/キー
１．「ひとコマアニメーション」で解説動画を作ると簡単
「ひとコマアニメーション」は、キッズプラザ大阪で開発されたアニメーション手法です。静止画を作るのと同じコストで動画が作成できます。
9VAeきゅうべえ Ver.0.8.0 (210201) から、各ページでひとコマアニメーションが作成できるようになりました。ページの時間メニューに「ひとコマ」の項目がない場合、9VAeを最新版にしてください。
「ひとコマアニメーション」は簡単です。
- 描いた順番にアニメーションが再生されます。
- 線や文字の長さに応じて再生時間が自動的に調整されます。
- 単なる動きの録画ではなく、動きの調整が自由にできます。
ひとコマアニメーションで作成した解説動画は、あとから文字や画像の差し替えが簡単にでき、保守性の高い動画になります。
解説動画は、次のパーツで作成します。
- キャプチャー画像
- 縁つき矢印
- 縁つき文字
静止画画面をつくれば、そのまま動画になります。9VAeのキーフレーム補間を組み合わせると複雑な動きも表現できます。
画面キャプチャ方法
|
||
|
||
|
スクリーンショット |
|
| |
|
アルバム＞ スクリーンショット |
|
ファイル |
|
|
スクリーンショット |
２．説明したい画面をキャプチャし、連番をつける
まず解説したい画面を必要な枚数だけ画面キャプチャし、ファイル名を連番にします。
9VAeは連番画像をまとめて読み込むことができ、読み込んだあとはファイル番号の指定だけで、画像を読み出せます。
３．スマホの場合、連番画像を9VAeきゅうべえフォルダに集める
スマホ版の9VAeきゅうべえは連番画像を9VAeフォルダにいれておく必要があります。キャプチャ画像は最初カメラロールにはいるため、カメラロールの画像をファイルマネージャなどでコピーします。こちらの記事も参考にしてください。
パソコン版では、連番画像用フォルダを作成し、その中に連番画像を集めるとよいでしょう。
メモ：9VAeに連番画像を読み込んだ場合、9VAeのファイルには連番画像のファイルパス名だけが記録されます。従って、9VAeは連番画像と同じフォルダに保存するのがよいでしょう。
４. 9VAeで連番画像を読み込む。アニメを画像サイズにする
以下、説明画面で、ABCDの順番に操作していきます。
- 画像入力ボタン（上図Ａ）をクリック。用意した連番画像の最初の画像を選びます。「すべて読み込みますか」と表示されるので「OK」をクリックします。
- 入力した画像の選択枠の中心の「＋」（上図Ｂ）をクリック。メニューから「ステージの大きさにする」をクリック。これで画像が全体に広がります。
- 選択枠の中心の「＋」（上図Ｂ）をクリック。メニューから「ページを画像に合わせる」をクリック。これでステージのサイズが画像サイズになります。
- 選択枠の中心の「＋」（上図C）をクリック。メニューから「連番()-()」をクリック。開始、終了番号が「-1」「-1」（-1は自動設定の意味）になっています。これを先頭の画像番号（001なら1）にします。１番なら「1 」「1」とします。
メモ：連番画像は、初期設定（開始番号と終了番号が−１）になっていると、再生時に連番画像が順に表示されます。開始番号と終了番号をどちらも１に設定すれば、１番の画像だけが再生されます。
５. 先頭ページにタイトル文字を入れる
- ページ左側の「＜」（上図Ｄ）をクリック。「空白ページを作る」で新しいページを作ります。
- 文字入力ボタン「Ａ」（上図Ｅ）をクリック。タイトル文字「9VAeで解説動画の作り方」を入れます。
- 文字の選択枠の角のハンドル（上図Ｆ）をドラッグすれば、文字を拡大できます。
- 線の種類を設定するボタン（上図Ｇ）をクリック。メニューから「縁をつける」をクリックすると文字に縁がつきます。同様にメニューから「影をつける」をクリックすると文字に影がつきます。メニューから「太く」を何回かクリックすれば、縁や影を太くできます。
-
塗り色２ボタン（上図Ｈ）をクリック。ここで縁の色を変更できます。ここでは白にしました。
- 文字タブ（上図Ｉ）をクリック。パレット２（文字属性）に切り替えます。
- 文字色ボタン（上図Ｊ）をクリック。文字の色をピンク色に設定しました。
メモ：線の属性ボタンをつかって、矢印や文字に縁取り、影がつけられます。縁どりの色は図形パレットの色２で設定します。
６. 矢印を入れる
- ２ページ（上図K）をクリックして２ページに移動。
- パレットのタブ１（上図L）をクリックしてパレット１（図形属性）を表示。
- 線の種類ボタン（上図M）をクリック。メニューから矢印を選択
- 多角形入力ボタン（上図N）をクリック。このモードでは頂点を順番にクリックして入力します。
- 最初の点（上図O）をクリック
- 終了点（上図P）をクリック
- 選択ボタン（上図Q）を２回クリック。線の入力が終了し、矢印が入ります。
- 線の太さボタン（上図R）をクリック。メニューの「太くする」を数回クリックし、矢印を太くします。
-
線の色ボタン（上図S）をクリック。矢印の色を赤にしました。
メモ：多角形を入力するボタンでは点を順番にクリックして入力します。最初か最後の点と同じ点、もしくは、選択ボタンをクリックすれば入力が終了します。
７. ページに「ひとコマ」を設定。プレイする。
- ２ページの時間（上図T）をクリック。メニューから「ひとコマ」をクリック。
- プレイボタン（上図U）をクリック。これで矢印がのびていく「ひとコマアニメーション」が作成されます。
メモ：「ひとコマ」に設定したページは、プレイボタンを押すたびに、描いた順番に絵ができるアニメーションが作成されます。ページの時間は毎回自動設定されます。
８. 次ページを作成。連番画像を次の番号にする
- ページの右側の「＋」（上図V）をクリック。メニューから「続きのページを作る」。これで次のページができます。
- 画像をクリック。選択枠中心の「＋」（上図W）をクリック。メニューから「連番 (1)-(1) 」をクリック。開始番号、終了番号の入力画面になります。
- 開始番号、終了番号を次の番号「２」に変更します。これで、次の画像に変わります。
- ページの時間（上図X）をクリック。「ひとコマ」に設定します。
メモ：連番画像の開始番号、終了番号を変更すれば、画像の切り替えができます。
９．矢印をカットして複製
- 矢印をクリックして選択（上図Y）。
- 切り取りボタン（上図Z）をクリック。矢印を記憶ツールに入れます。
- 貼り付けボタン（上図a）をクリック。メニューから「複製する」をクリック。矢印を元の位置に戻します。
- 点選択ボタン（上図b）をクリック。矢印の点が表示されます。
- 矢印の先（上図c）をドラッグして矢印の向きを次の操作の位置に変更します。
メモ：矢印をいったん切り取って複製するのは前のページとのリンクをきりはなすためです。続きのページ作成では、前のページとリンクした図形になり、再生すると形が変化します。いったん削除して「複製する」を行うとリンクしていない別の図形になり形が変化しなくなります。
１０．説明用文字を入力
- 文字入力ボタン（上図d）をクリック。ここでは「ステージの大きさにする」と入力しました。
- 線の種類のボタン（上図e）をクリック。メニューから実線を選ぶと文字に枠線がつきます。
- 塗り色ボタン（上図f）をクリック。文字背景色を指定すると、文字背景に色がつきます。ここでは水色にしました。
- 文字（上図g）をドラッグして位置を合わせます。
メモ：線の種類ボタンで文字枠、塗り色ボタンで文字背景に色がつけられます。
１１．続きのページ作成、切り取り、複製、ひとコマに設定
- 最後のページの右側の「＋」（上図h）をクリック。メニューから「次のページを作る」。次のページを作ります。
- 画面全体をドラッグして選択（上図i）。
- 切り取りボタン（上図j）をクリックして全部切り取ります。
- 貼り付けボタン（上図k）をクリック。メニューから「複製する」。これで前のページにリンクしていない図形になります。
- 文字（上図l）をクリックして選択。中心の「＋」をクリック。メニューから「文字の内容変更」をクリック。文字を「ページを画像に合わせる」に変更します。
- ページの時間（上図m）をクリック。「ひとコマ」にします。
メモ：ページを複製し、文字、矢印、画像を修正していきます。
１２．空白ページを作成、ページを複製、内容変更
- 最後のページの右の「＋」（上図n）をクリック。メニューから「空白ページを作る」を実行。次のページを作ります。
- 貼り付けボタン（上図o）をクリック。メニューから「複製する」。
- ページの時間（上図p）をクリック。「ひとコマ」に設定します。
- 矢印（上図q）を２回クリック。矢印内部の点が表示されるので、ドラッグして矢印の向きを変更。
- 文字（上図r）をクリックして選択。中心の「＋」メニューから「文字の内容変更」をクリック。文字を「空白ページを作る」に変更します。ドラッグして位置を矢印の近くに移動します。
メモ：空白ページに複製して、内容を修正していきます。
- 最後のページの右の「＋」（上図s）をクリック。メニューから「空白ページを作る」で次のページを作ります。
- 貼り付けボタン（上図t）をクリック。メニューから「複製する」。
- ページの時間（上図u）をクリック。「ひとコマ」に設定。
- 矢印（上図v）を２回クリック。矢印内部の点が表示されるので、ドラッグして矢印の向きを変更。
- 文字（上図w）をクリックして選択。中心の「＋」メニューから「文字の内容変更」をクリック。文字を「9VAeで解説動画の作り方」に変更します。
- 最後のページの右の「＋」（上図x）をクリック。メニューから「空白ページを作る」。次のページを作ります。
- 貼り付けボタン（上図y）をクリック。メニューから「複製する」。
- ページの時間（上図z）をクリック。「ひとコマ」に設定します。
- 連番画像（上図A）をクリックして選択。選択枠中心の「＋」をクリック。メニューから「連番 - 」をクリック。開始番号を次の番号にして画像を変更します。
- 文字（上図B）をクリックして選択。
- 削除ボタン（上図C）をクリックして文字を削除。
- 矢印（上図D）を２回クリック。矢印内部の点が表示されるので、ドラッグして矢印の向きを変更します。
- 最後のページの右の「＋」（上図E）をクリック。メニューから「空白ページを作る」。次のページを作ります。
- 貼り付けボタン（上図F）をクリック。メニューから「複製する」。
- ページの時間（上図G）をクリック。「ひとコマ」に設定します。
- 連番画像（上図H）をクリックして選択。選択枠中心「＋」メニューから「連番 - 」をクリック。開始番号を変更して次の画像にします。
- 矢印（上図I）を２回クリック。矢印内部の点が表示されるので、ドラッグして矢印の向きを変更します。
- 文字（上図J）をクリックして選択。中心の「＋」メニューから「文字の内容変更」をクリック。文字を「縁をつける」に変更します。
- 画面全体をドラッグして選択（上図K）。
- コピーボタン（上図L）をクリックして全部コピー。
- 最後のページの右の「＋」（上図M）をクリック。メニューから「空白ページを作る」。次のページを作ります。
- 貼り付けボタン（上図N）をクリック。メニューから「複製する」。
- ページの時間（上図O）をクリック。「ひとコマ」に設定します。
- 文字（上図P）をクリックして選択。中心の「＋」メニューから「文字の内容変更」をクリック。文字を「影をつける」に変更します。
１３．ページを増やすためにアニメキャストにする
- 最後のページのページ番号（上図Q）をクリック。メニューから「ページ指定ここから」をクリック。
- 先頭ページ移動ボタン「＜＜」（上図R）をクリック。
- 先頭ページのページ番号１（上図S）をクリック。メニューから「ページ指定ここまで」をクリック。
- 選択範囲のページ番号（どれでもよい）（上図T）をクリック。「まとめて切り取る」をクリック。これで全部のページが記憶ツールにはいります。
- アニメキャストにするボタン（上図U）をクリック。適当な名前をいれて「OK」。これで切り取ったページが１つのアニメキャストになります。
- 先頭ページの時間（上図V）をクリック。メニューから「アニメキャストの時間」をクリック。これで、１ページの時間がアニメキャストの再生時間になります。
メモ：9VAeきゅうべえは９ページ単位で動画をつくるのが基本です。８ページ程度になったらまとめてアニメキャストにすれば長いアニメが作れます。
１４．次のページにアニメキャストを複製。別のアニメにする
- アニメキャストが選択された状態で、コピーするボタン（上図W）をクリック。
- ページの右側の「＋」（上図X）をクリックし、メニューから「空白ページを作る」。新しいページを追加します。
- 貼り付けボタン（上図Y）をクリック。メニューから「複製する」。これでアニメキャストが複製されます。
- アニメキャスト中心の「＋」（上図Z）をクリック。メニューから「別の名前にして修正」をクリック。アニメキャストの名前を入力して「OK」。これでアニメキャストが複製され、中身のページが開きます。
メモ：アニメキャストを複製した場合、元のアニメキャストを残しておきたい場合は、中心メニューから「別の名前にして修正」を行います。これで別のアニメキャストになります。これを行わずにアニメキャストを修正すると、複製したアニメキャストは同じものなので中身が同時に変わります。
１５．アニメキャストの中を修正
- 最初のページは不要なので、１ページのページ番号１（上図a）をクリック。メニューから「ページを切り取る」を実行してページを削除します。
- 連番画像（上図b）をクリックして選択。選択枠中心の「＋」をクリック。メニューから「連番 - 」をクリック。開始番号を変更して次の画像にします。
- 矢印（上図c）を２回クリック。矢印内部の点が表示されるので、ドラッグして矢印の向きを変更します。このページはこれで完了です。
- 次のページ（上図d）をクリックして移動。
- 連番画像（上図e）をクリックして選択。選択枠中心の「＋」をクリック。メニューから「連番 - 」をクリック。開始番号を変更して次の画像にします。
- 矢印（上図f）を２回クリック。矢印内部の点が表示されるので、ドラッグして矢印の向きを変更します。このページはこれで完了です。
メモ：アニメキャストの中から元のアニメに戻るにはステージの上の太字の「ファイル名＞アニメキャスト名」リストを使います。
- アニメキャストの修正を終了し、元のアニメに戻るには、ステージの上の太字の「ファイル名＞アニメキャスト名」リスト（下図h）の先頭の太字をクリックします。メニューから「このアニメにもどる」で元のアニメに戻ります。
- また、同じく太字（下図i ）をクリックすると、そこにアニメキャストの名前のリストが表示されるので、クリックすれば、アニメキャストの中身を修正できます。
１６．ひとコマアニメーションの時間調整
ひとコマアニメーションはプレイボタンを押すごとに時間が自動計算されます。これで大体の時間設定をおこなってから、ページの時間を調整するとよいでしょう。
ページの時間をクリックし、秒を指定して細かく調整できます。
ページ番号から複数ページを範囲指定して、まとまったページの時間をまとめて変更することもできます。
メモ：ページの時間を変更すると「ひとコマ」設定が解除されます。
１７. アニメーションを動画にする
- 出力する前に「ファイルメニュー＞名前を付けて保存」で名前をつけて保存しておきましょう。
- 「ファイルメニュー＞アニメGIF出力」でアニメGIFが出力できます。スマホ版では、「9VAeフォルダ」と「カメラロール」に保存されます。パソコン版では最初に保存場所を選びます。
- 動画素材を作る場合、画面サイズは、幅を空白、高さを７２０、コマ／秒を３０にするとよいでしょう。「OK」ボタンでアニメGIFが出力されます。
動画（MP4）の作成
-
Windows/Linux/Android/Amazon Fire の場合、変換サイト：Online GIF to MP4 Video converter - Ezgif.comでアニメGIF を MP4 動画に変換できます。
-
Windows/Linux の場合、 APNG to MP4 Video converter - Ezgif.com を使えば、APNG をMP4 動画に変換できます。時間がかかりますがGIFよりきれいです。
ezgif.comでMP4動画を作成する方法
- GIF to MP4 または、APNG to MP4 を開く
-
アニメGIFまたはAPNGファイルを指定（背景は透明にしない）
-
「Upload!」をクリック ＞ 「Convert GIF to MP4!」をクリック ＞ 「Save」(フロッピーディスクアイコン)をクリック。MP4をダウンロードできます。
メモ：Mac版、 iPhone版は、MP4動画が出力できます。iPhoneを使った音入りアニメの変換方法はこちら
9VAeをつかえば素材動画が作れる
- 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
- Openclipart や FreeSVG など多くのSVGイラストをつかって動くキャラクタ素材も作れます。
- 動画編集ソフトで動画に合成できます。
|
OS |
9VAeで作成する素材動画 |
|
|---|---|---|
|
連番PNG または MP4(Ezgifで変換) |
||
|
PowerDirector |
GIF |
作り方
- もっと長いアニメを作ることもできます。以下をご覧ください。
サムネイル画像の作成
- ファイルメニュー＞画像出力。パソコン版は先に保存フォルダと保存名を指定します。
- 画像設定画面で、画像サイズ（縦横ドット数）を指定します。Youtube サムネイルは 1280x720 推奨。 サムネイルの場合「背景を透明にする」にはチェックをいれないほうがよいでしょう。
- 原稿の縦横比率を変更したい場合は、「ページメニュー＞ページ設定」でステージのサイズを変更します。
9VAeきゅうべえに関する質問
- 9VAeに関する質問（Yahoo知恵袋）
- よくある質問（Qiita）
- 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。