9VAe チュートリアル（６）ー解説動画の作り方

「[ひとコマアニメーション](https://qiita.com/danjiro/items/8dd0d7c7263f62189437)」を使った解説動画の作り方を説明します。

9VAeチュートリアル
[（１）－画面の説明](http://qiita.com/danjiro/items/ea71567fa8c313f6f3fc)
 [（２）－図形入力、選択、移動、サイズ変更](http://qiita.com/danjiro/items/7507cd9f4c19197f21ea)
[（３）－アニメキャストを作る、時間調整](http://qiita.com/danjiro/items/ec174df989af8db42da4)
 [（４）－アニメキャストの修正、往復](http://qiita.com/danjiro/items/70cfb20980fee4fdd245)
 [（５）－動きグラフ、ページコピー、GIF作成](http://qiita.com/danjiro/items/ffa863d303eb7d640d10)
 [（●６）－解説動画の作り方](https://qiita.com/danjiro/items/e5b2af0e9d0c3b15dbff)




# 解説動画とは

いろんな物事を解説する動画の作り方を説明します。このページで使われている動画もここで説明する方法で作りました。

キャプチャーした画面の上に、数字と矢印、説明を加え、「ひとコマ」設定するだけです。


# 1. 画面キャプチャする

各OSでスクリーンキャプチャする方法をまとめました。

|OS|画面キャプチャ方法|保存先|
|:--:|:--|:--|
| Windows|Print Screen キー<br>Shift + Windows + S<br> 無料ソフト「kioku」|クリップボード|
| Mac|Shift + Command + 4 |デスクトップ|
| Android| 電源 + 音量Down<br> adbコマンド (開発者向け)<br> adb shell screencap -p /sdcard/screen.png<br> adb pull /sdcard/screen.png|フォトアプリ＞<br>スクリーンショット|
|iPhone / iPad| ホームボタン + 電源ボタン<br>サイドボタン + 音量UP|写真＞<br>アルバム＞<br>スクリーンショット(Screenshots)|
| Linux Mint|Print Screen キー|クリップボード|


# 2. キャプチャ画像を9VAeに読みこむ

![１画像入力.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/b4e995ae-13a4-ba08-e9f9-4ce962aa411f.gif)

1. 画像入力ボタン「山」でキャプチャ画像を読み込む
2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

# 3. 文字、矢印を入れる

![２文字入力b.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/03f7fd60-4856-b12b-c1ba-5ef4653838bd.gif)

1. 文字入力ボタン「A」で数字を入力
- 角の■をドラッグでサイズ変更。
- 中心の「＋」または枠線のドラッグで移動
- 線の種類ボタンをクリック。メニューから「→」で矢印に設定
- 折れ線ボタンをクリック
- 開始点
- 終了点
- 選択ボタンで入力終了
- 太さ設定ボタン。メニューから「太くする」で太くできます。
- 文字入力ボタン「A」で説明文章を入力
- 背景の色を設定
- 線の種類メニューの「ー」で枠線がつきます
- 太さ設定ボタン。メニューから「太くする」で太くできます。
 
# 4. 文字の色、縁、影をつける

![３文字色.svg.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/48e2ffbd-c26e-3487-1584-4e19a6a0b29d.gif)

1. 文字を選ぶ
- 文字タブ２をクリック
- 文字の色をクリック
- 赤に設定
- 文字と矢印をドラッグして選ぶ
- 図形タブ１をクリック
- 線の種類から「縁をつける」
- 線の種類から「影をつける」、線の種類から「広く」
- 線の色「赤」

# 5. ひとコマアニメーションにする

![４ひとコマ.svg.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/bbd5c219-e634-47fd-19d7-3c4e387404ae.gif)

1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
- プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
- これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

# 6. アニメGIF、動画出力

- ファイルメニュー＞アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
- Win / RaspberryPi / Linux版 で[MP4動画を作るには FFmpeg が必要](https://dnjiro.hatenablog.com/entry/2022/01/12/081725)です
- スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
- アニメGIFは、背景を透明にできます。音がいれられません。
- MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、１秒30コマ、高さ720 または 1080 で出力するとよいでしょう。


# まとめ
今回で、「チュートリアル」は終わりです。最後に解説動画の作り方を説明しました。動画作成に9VAeをご活用ください。

上級編では、Openclipart のきれいなイラストを読み込んでアニメーションにする方法を説明します。素材のイラストを実際にダウンロードし、アニメ制作を体験できますので、ぜひお試しください。


[[＜ チュートリアル（５）](https://qiita.com/danjiro/items/ffa863d303eb7d640d10)]

---
# 関連記事

## 9VAeきゅうべえ のご紹介

1. [無料ソフトでアニメを作ってみよう（9VAe きゅうべえ）](http://qiita.com/danjiro/items/253e5a33a38599098274)
2. [インストール方法](http://qiita.com/danjiro/items/1debda10c37fd8a55927)
3. [スクラッチ、ビスケットの次は 9VAe＝第３のプログラミング学習環境](http://qiita.com/danjiro/items/d856d393b3e138af123a)
4. [よくある質問](http://qiita.com/danjiro/items/205efee350bfbbef488e)

## 9VAeきゅうべえ 初級編
1. [9VAe チュートリアル（１）－画面の説明](http://qiita.com/danjiro/items/ea71567fa8c313f6f3fc)
2. [9VAe チュートリアル（２）－図形入力、選択、移動、サイズ変更](http://qiita.com/danjiro/items/7507cd9f4c19197f21ea)
3. [9VAe チュートリアル（３）－アニメキャストを作る、時間調整](http://qiita.com/danjiro/items/ec174df989af8db42da4)
4. [9VAe チュートリアル（４）－アニメキャストの修正、往復](http://qiita.com/danjiro/items/70cfb20980fee4fdd245)
5. [9VAe チュートリアル（５）－動きグラフ、ページコピー、GIF作成](http://qiita.com/danjiro/items/ffa863d303eb7d640d10)
- [9VAe チュートリアル（６）－解説動画の作り方](https://qiita.com/danjiro/items/e5b2af0e9d0c3b15dbff)
- [書き順・ひとコマアニメーション](http://qiita.com/danjiro/items/8dd0d7c7263f62189437)
- [9VAeきゅうべえ：長いアニメを作る方法](http://qiita.com/danjiro/items/020cd885edb5eb3d9fb0)

## 9VAeきゅうべえ 中級編
1. [アニメの作り方](http://dnjiro.hatenablog.com/archive/category/%E3%82%A2%E3%83%8B%E3%83%A1%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)


## 9VAeきゅうべえ 上級編
1. [動くLINEスタンプのAPNG作成：無料ソフト9VAeきゅうべえ](http://qiita.com/danjiro/items/e4d9eb2b22f90ebd1e91)
2. [萌えキャラ デジたんを目ぱちさせるまで：APNGアニメの作り方](http://qiita.com/danjiro/items/67af46418b4831cda10b)
2. [openclipartの無料イラストをアニメ化する６つの手順](http://qiita.com/danjiro/items/161fc6bb0dc7aaa4f76d)
2. [イラストから動くLINEスタンプのようなアニメを簡単に作る方法](http://qiita.com/danjiro/items/f7ffcf5027babf3b03e9)
4. [Openclipart の 無料SVG をアニメにするテクニック](http://qiita.com/danjiro/items/1fcdd55a346d30b40b5e) 
5. [無料アニメソフト9VAeきゅうべえの裏技集](http://qiita.com/danjiro/items/6ce85f33bcda11c04f71)


## 9VAeきゅうべえ サンプル作品
1. [9VAeきゅうべえ」で絵を描かずに作れるGIFアニメ](http://qiita.com/danjiro/items/7fa584a4336cda9c0a05)