9VAe チュートリアル（１）ー画面の説明

"[無料ソフトでアニメを作ってみよう（9VAe きゅうべえ）](http://qiita.com/danjiro/items/253e5a33a38599098274)"でご紹介した 「9VAeきゅうべえ」の使い方について説明します。[ダウンロードはこちら](https://9vae.blogspot.com/p/9vae-download.html)



# 9VAeきゅうべえの画面


![9vae3Screen.png](https://qiita-image-store.s3.amazonaws.com/0/67734/70384e1c-7fa9-09bb-0c01-99459c081c39.png)

[[チュートリアル（２）＞](http://qiita.com/danjiro/items/7507cd9f4c19197f21ea)] [[画面デザインを変更する方法]](https://dnjiro.hatenablog.com/entry/skin)

|項目|簡単な説明|
|:--|:--|
|1. 図形入力|選択、左側は塗りのある図形、右側は塗りのない図形、文字|
|2. 図形編集|[点選択](https://dnjiro.hatenablog.com/entry/9va-point)、重ね順序、削除、[前後のページにコピー](https://dnjiro.hatenablog.com/entry/link-ghost#%E3%81%A4%E3%81%AA%E3%81%8C%E3%81%A3%E3%81%9F%E5%9B%B3%E5%BD%A2%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E5%89%8D%E5%BE%8C%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%B3%E3%83%94%E3%83%BC)、元に戻す|
|3. プレイ|再生、停止|
|4. ページ|[続きのページを作る](https://dnjiro.hatenablog.com/entry/link-ghost#%E3%81%A4%E3%81%AA%E3%81%8C%E3%81%A3%E3%81%9F%E5%9B%B3%E5%BD%A2%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E7%B6%9A%E3%81%8D%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B)。[ページとページの間を補間する](https://dnjiro.hatenablog.com/entry/link-ghost#%E3%81%A4%E3%81%AA%E3%81%8C%E3%81%A3%E3%81%9F%E5%9B%B3%E5%BD%A2%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E4%B8%AD%E9%96%93%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B)|
|5. 色、線の太さ|1.図形の塗り、線、2.文字、3.スタンプ|
|6. アニメ、音、画像入力|[アニメ](https://dnjiro.hatenablog.com/entry/9va-anmcast)、音、　絵、写真入力|
|7. コピーツール|コピー、カット、ペースト、[アニメキャストにして入れる](https://dnjiro.hatenablog.com/entry/9va-anmcast)|
|8. レイヤー、タイムカーブ|[登録して、動きグラフをつける](https://dnjiro.hatenablog.com/entry/regist)。[固定](https://dnjiro.hatenablog.com/entry/regist#%EF%BC%95%E7%99%BB%E9%8C%B2%E3%81%97%E3%81%9F%E5%9B%B3%E5%BD%A2%E3%82%92%E5%9B%BA%E5%AE%9A%E3%81%99%E3%82%8B)、[隠す](https://dnjiro.hatenablog.com/entry/regist#%EF%BC%96%E7%99%BB%E9%8C%B2%E3%81%97%E3%81%9F%E5%9B%B3%E5%BD%A2%E3%82%92%E9%9A%A0%E3%81%99)、選択|

以下、個別に説明します。

## 1.図形入力

![tut01-jp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/28432e95-afcc-12e1-ec47-05df40eb3069.gif)

- ユーザーが[図形を描く](https://qiita.com/danjiro/items/7507cd9f4c19197f21ea)ツールです。
- 左側の列は、塗りつぶしのある図形です。
- 右側の列は、線だけの図形です。
- 「A」は文字を入力するボタンです。
- １点ずつ入力する多角形入力は、ダブルクリック（最後の点を２回クリック）、最初の点をクリック、再生停止ボタン、選択ボタンなど他のボタンで終了します。

## 2. 図形編集

一番下の「元にもどす」ボタン以外は、図形を選んでから実行するボタンです。
![tut02-jp2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/81672468-fd01-9f5d-1c9e-70de9dc6b9a6.gif)


- [点の編集](https://dnjiro.hatenablog.com/entry/9va-point)（点の位置だけ変更  ／ 点の追加・削除も行う）
- 重なり順序（表にあげる ／ 裏に下げる）
- 図形、点の削除
- [前後のページへのコピー（前のページへ／後ろのページへ）](https://dnjiro.hatenablog.com/entry/link-ghost?_gl=1*1ksia3x*_gcl_au*MTQ1NjQ5NjA2Mi4xNzMyMDg4NjQ3#%E3%81%A4%E3%81%AA%E3%81%8C%E3%81%A3%E3%81%9F%E5%9B%B3%E5%BD%A2%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E5%89%8D%E5%BE%8C%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%B3%E3%83%94%E3%83%BC)
- 元にもどす

## 3. プレイ

![play2-stop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/4a533d2f-1933-b39a-a2bb-b40810dcf139.png)


- アニメの再生、停止を行います。
- 停止ボタンで、選択の解除や、多角形入力の終了が行えます。

## 4. ページ

9VAeきゅうべえでは、[キーフレームのことを**ページ**](https://dnjiro.hatenablog.com/entry/island-crab)といいます。この場所にページが表示されます。

![tut03-jp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/d6d41107-8803-9d26-0f64-bfbd9a33e0e0.gif)


- [ページを追加する](https://dnjiro.hatenablog.com/entry/link-ghost#%E3%81%A4%E3%81%AA%E3%81%8C%E3%81%A3%E3%81%9F%E5%9B%B3%E5%BD%A2%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E7%B6%9A%E3%81%8D%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B)には、ページの右端にある「＋」ボタン（上図A）をクリックし、メニューから「**続きのページを作る**」をクリックします。
- ページの上に時間が**秒で表示**されています（上図B）。ここをクリックして[時間を変更](https://qiita.com/danjiro/items/ec174df989af8db42da4)できます。メニューから「ひとコマ」を選ぶと[線や文字が順番に出てくるアニメ](https://dnjiro.hatenablog.com/entry/share-youtube)がつくれます。
- ページ番号（上図C）をクリックして、**複数のページを選択**し、[ページを記憶したり切り取ったり](https://qiita.com/danjiro/items/ffa863d303eb7d640d10)できます。
- ページの間（上図D）をクリックして、**中間のページ**、**背景**、**空白ページ**を入れることができます。
- ページの先頭（上図E）をクリックして、**前につづいたページ**、**背景**、**空白ページ**を入れることができます。

## 5. 色、線の太さ

![tut04-jp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/2b9cfe1d-515d-637a-29f4-40abcf88efea.gif)

- **[塗りつぶしの色](https://qiita.com/danjiro/items/7507cd9f4c19197f21ea)**、**線の色**、**線の太さ**、**線の種類**、**矢印の種類**は図形パレット１（上図A）で設定します。[図形を選んで後から変更](https://qiita.com/danjiro/items/7507cd9f4c19197f21ea)することもできます。
- パレットの上のタブをクリックして、[**文字の色**を設定する](https://dnjiro.hatenablog.com/entry/2019/04/24/161842)文字パレット（上図B）、[**登録された図形を入力**する](https://dnjiro.hatenablog.com/entry/twitter)スタンプパレット３（上図C）に切り替えができます。 

## 6. アニメ、音、画像入力

![qva-sound-photo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/2d7aef4b-c563-1f43-8124-26397041ccdf.png)

- 9VA： **[アニメキャスト](https://dnjiro.hatenablog.com/entry/9va-anmcast)**（部品のアニメ）を入力するボタン。このボタンをクリックし、メニューから開いた複数のアニメを切り替えできます。
- ♪：[**音、音楽**を入力する](https://dnjiro.hatenablog.com/entry/2020/04/19/231413)ボタン
- 山：[**画像**を入力する](https://dnjiro.hatenablog.com/entry/illust)ボタン


## 7. コピーツール

![tut05-jp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/bf576329-2dbc-ae7b-ca38-d44c2d508ed9.gif)

- ○：**コピー**するボタン
- ×：[**カット**する](https://qiita.com/danjiro/items/7507cd9f4c19197f21ea)ボタン
- ←：画面に戻すボタン（普通は「**[ステージに戻す](https://dnjiro.hatenablog.com/entry/link-ghost?_gl=1*1ksia3x*_gcl_au*MTQ1NjQ5NjA2Mi4xNzMyMDg4NjQ3#%E3%81%A4%E3%81%AA%E3%81%8C%E3%81%A3%E3%81%9F%E5%9B%B3%E5%BD%A2%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E3%81%8D%E3%81%8A%E3%81%8F%E3%83%84%E3%83%BC%E3%83%AB%E3%82%B9%E3%83%86%E3%83%BC%E3%82%B8%E3%81%AB%E3%82%82%E3%81%A9%E3%81%99)**」を使うとよい。同じものを複数作る場合は「**複製する**」）
- ←9：[**アニメキャスト**](https://qiita.com/danjiro/items/7507cd9f4c19197f21ea)（部品のアニメ）にしていれます。
- コピーツールには複数のページを入れることができます。上図Aの箱にコピーした内容が表示されます。

## 8. レイヤー、タイムカーブ

![tut06-jp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/2c1e5ca9-70fd-4c73-04fa-e5b8559d271e.gif)

- ＋：[登録するボタン](https://dnjiro.hatenablog.com/entry/regist)
- 登録したボタンをクリックし、[**動きグラフ**（タイムカーブ）](https://qiita.com/danjiro/items/ffa863d303eb7d640d10)を入力できます。
- 登録したボタンをクリックし、[登録した図形を**隠す**、**固定する**](https://dnjiro.hatenablog.com/entry/2019/01/19/012309)といったレイヤー処理ができます。

## ９. 選択枠のハンドルメニュー

![tut07-jp.svg.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/d76f4385-d957-eb64-bdff-26d0b08b43a4.gif)

- [選択枠の角のハンドル](https://dnjiro.hatenablog.com/entry/9va-move#%EF%BC%94%E8%A7%92%E3%81%AE%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E6%8B%A1%E5%A4%A7%E7%B8%AE%E5%B0%8F%E5%9B%9E%E8%BB%A2%E5%9B%9E%E8%BB%A2%E4%B8%AD%E5%BF%83)■（上図A）をクリックすると、回転ができます。
- [選択枠の辺のハンドル](https://dnjiro.hatenablog.com/entry/9va-move#%EF%BC%95%E8%BE%BA%E3%81%AE%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AE%E3%81%B0%E3%81%99%E6%9B%B2%E3%81%92%E3%82%8B)■（上図B）をクリックすると、曲げる、パース変形、反転などができます。
- [選択枠の中心のハンドル](https://dnjiro.hatenablog.com/entry/9va-move#%EF%BC%96%E4%B8%AD%E5%BF%83%E3%81%AE%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E7%A7%BB%E5%8B%95%E8%A4%87%E8%A3%BD%E6%B6%88%E5%8E%BB)「＋」では選んだ図形ごとに異なるメニューが表示されます。

# 10．指での操作

### 画面を指で隠さない操作（タッチして別の場所からドラッグ）

- 画面が指で隠れて位置調整が難しい場合は、つぎのように操作してください。1点の移動は枠が表示されます。
![20200707172405.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/ff821549-5a89-adf0-4d80-dd383e4f0614.gif)

![0vid-pnt3(and).svg.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/f368d614-f5c9-f6d8-230b-60d3710cc7ca.gif)
1. 図形を選んで、選択枠の枠線をタッチ、または、選択枠の中心「＋」や「■」のメニューから「移動」や「回転」「拡大・縮小」などをタッチ
1. 図形とは離れた点からドラッグしてください。指が図形からはなれているため、図形を指で隠すことなく、「移動」や「回転」などができます。
1. マウスを接続すれば、画面が指で隠れないので、より細かい操作ができます

### Windowsタブレットの注意点

- Windowsタブレットは、画面を長く押すと表示場所変更になります。うまく動作しないときはすばやく指を動かしてみてください。

# まとめ
今回は、9VAeきゅうべえの画面構成と機能を説明しました。多くのアニメソフトは、タイムラインによって、フレームごとの動作とレイヤーの重なり順序を指定します。9VAeでは、**ページの時間**と、**動きグラフ**によって動きを指定します。**ページごとに図形の重なり順序を自由に変更できる**ため、タイムラインなしで複雑な動きを作成できます。

次のチュートリアル「[9VAe チュートリアルーはじめてみよう（その２）](http://qiita.com/danjiro/items/7507cd9f4c19197f21ea)」から実際の9VAeアニメを作ってみましょう。

[[チュートリアル（２）＞](http://qiita.com/danjiro/items/7507cd9f4c19197f21ea)] 
# いろんなアニメ・動画素材の作り方

- [すごいショート動画の作り方](https://dnjiro.hatenablog.com/entry/island-crab)
- [口パクキャラクタの作り方](https://dnjiro.hatenablog.com/entry/twitter)
- [鬼滅の〇のパロディアニメの作り方](https://dnjiro.hatenablog.com/entry/3mitu-ushi)
- [ゆっくり音声でしゃべるアニメの作り方](https://dnjiro.hatenablog.com/entry/2020/04/19/231413)
- [SVGイラストを動かす動画の作り方](https://dnjiro.hatenablog.com/entry/2019/01/19/012309)
- [ハートが動く背景動画の作り方](https://dnjiro.hatenablog.com/entry/color-heart)
- [いらすとやのイラストを動かす動画の作り方](https://dnjiro.hatenablog.com/entry/illust)
- [イラストACから動画の作り方](https://dnjiro.hatenablog.com/entry/2021/03/30/142405)
- [ランキング動画の作り方](https://dnjiro.hatenablog.com/entry/ranking)
- [手描きスケッチ動画の作り方](http://dnjiro.hatenablog.com/entry/2017/09/01/122627)
- [エンドロールの作り方](http://dnjiro.hatenablog.com/entry/2019/04/26/122900)
- [解説動画の作り方](https://dnjiro.hatenablog.com/entry/share-youtube)


---
# 関連記事

## 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)