どこが違う？：9VAeきゅうべえのグループ化、いっしょに塗る

無料アプリ9VAeきゅうべえは、なめらかに動くアニメを作るために、他のアプリにないグループ化機能をもっています。その仕組みを解説します。しゃべる解説はこちら。

 

ほかの解説動画はこちら。

内容：

• １．9VAeきゅうべえのダウンロード
• ２．9VAeのグループ化
• ３．9VAeのグループ化処理
• ４．つながったグループ
• ５．いっしょに塗る
• ６．「いっしょに塗る」ときの穴の反転
• ７．文字と吹き出しのグループ化
• ひとコマ解説動画の作り方
  • 9VAeきゅうべえのダウンロード
    • 画面キャプチャ方法
    • キャプチャ画像を9VAeに読みこむ
    • 文字、矢印を入れる
    • 文字の色、縁、影をつける
    • ひとコマアニメーションにする
    • アニメGIF、動画出力
  • 9VAeをつかえば素材動画が作れる 
  • 9VAeきゅうべえに関する質問

 

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

フリーイラストからMP4動画素材が簡単につくれる無料アプリ9VAeきゅうべえは、下からダウンロードできます

• Win / Mac / Linux：9VAeきゅうべえダウンロード
• iPad / iPhone：9VAe iPad版 、9VAeDanga 、9VAePro (599ページ)
• Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
• Amazon Fire :
• 9VAeのボタン説明、メニュー/キー

操作方法

1. 9VAeきゅうべえアニメ研究所をひらき、Downloadをタッチ
2. ダウンロードする9VAeのアイコンをタッチ
3. パソコン版は右上のダウンロードボタン。スマホ、タブレット版はアプリストアから「インストール」して開きます
4. Mac版は解凍したあと、右ボタンメニューから「開く」を２回。Win版は「詳細情報」から実行します
5. 9VAe Dangla は、スマホでもタブレットでも動きます。２眼表示機能つき

２．9VAeのグループ化

グループ化は、多くのグラフィックアプリが持っている機能です。9VAeのグループ化は、以下の違いがあります

• A＜B＜Cという順番に３つの図形を重ねて入力したあと、AとCをグループ化すると、多くのアプリでは、B＜（A＜C）という重なりにかわります。これは、ACを同じ図形として扱うためです。AとCの間の重なりに別の図形をいれられません。
• 9VAeは、A＜B＜Cのままで、重なり順序はかわりません。グループ化されていても、重なり順序を自由に変更できます
• ACをグループ化し「いっしょに塗る」を設定すると、（A＜C）＜Bの重なり順になります。Aを描画するときに同時に同じ色属性でCも描画されます
• 「いっしょに塗る」が設定された状態ではグループ解除ができません

 

	PowerPointグループ化	Impressグループ化	9VAe グループ化	9VAe いっしょに塗る
重なり順序	選んだ図形の一番手前になる	選んだ図形の一番手前になる	変わらない	選んだ図形の一番背後の色、重なりになる(*)
グループ化した図形の 中間の重なりに図形を 配置できるか	×	×	◯	×

 

• アニメを作成する場合、重なりはどんどん変化します。手でボールをつかむ場合、ボールより背後の指と、ボールより手前の指があります。多くのアプリでは、ボールより背後の指と、ボールより手前の指を同じグループにいれることはできません。重なり順序が変化する場合、非常に難しくなります。9VAeはグループ化した状態で、指と指の間にボールをはさむことができます。

1. 塗りのある円のボタンをタッチ
2. 円を3つかきます
3. 選択ボタンを押して、3つの円を全部選びます
4. 選択枠の中心のプラスをタッチし、メニューから「グループ化」を実行します。
5. 塗りのある四角のボタンをタッチ
6. 四角形を重ねてかきます
7. 選択ボタンをタッチ
   色は右側のパレットで変更できます。パレットが消えている場合は、下の「もどす」をタッチしてください
8. 重なりを下に下げるボタンをタッチ
9. グループ化された図形の、あいだの重なりになります。
   多くのほかのアプリでは、一番下になるでしょう

 

３．9VAeのグループ化処理

重なり順序が変化しないグループ化を実現するために、9VAeは次のように処理しています。

• グループ化すると、グループという見えない図形をつくります。グループにはグループ番号があり、グループ化された図形はグループ番号を１つもちます。
• グループ化された図形を選ぶと、ページの中のその番号のグループと、同じ番号をもつ図形が全部選択されます。

次の例をためしてみてください

1. 塗りのある円のボタンをタッチし、
2. 円を4つかきます
3. ページの右側の「＋」をタッチし、続きのページを作ります
4. 外からドラッグして左側２つの円を選びます
5. 選択枠の中心の「＋」をタッチし、メニューから「グループ化」を実行します。グループができます
6. 右側２つの円を選びます
7. 選択枠の中心の「＋」をタッチし、メニューから「グループ化」します。２つめのグループができます
8. １ページをタッチして、１ページに移動します。
9. ドラッグして、中央の２つの円を選びます
10. 選択枠の中心の「＋」をタッチし、メニューから「グループ化」します。グループがつくられ、グループと円が２つ選ばれた状態になります。
11. ２ページをタッチして、２ページに移動します。１ページで選択した円は、２ページにもつながっているので、２つの円が選ばれています。グループはつながっていないため、選ばれません。
12. ２ページで選び直すとどうなるでしょうか。中央の円を２つ選ぶと、グループが２つ選ばれ、グループに属する円が４つ選ばれます。

 

４．つながったグループ

グループが見えない図形であるため、動作がわかりにくいです

• グループ化された図形を記憶ツールに保存する場合、グループが選ばれておれば、記憶されます。前述の３のように、別のページで選択すると、グループの中の一部の図形が選ばれた状態もあります。その場合は、グループは記憶ツールにはいりません。
• 記憶ツールから「ステージに戻す」場合、グループ番号は変わりません。もし、同じ番号のグループがあれば、いっしょにグループ化されます。グループ化したくない場合は「複製する」にしてください。新しいグループ番号になります。

 

• グループも前後のページとつながります。複数ページのつながった図形を選択した場合、グループがつながっていれば、グループの図形は全部選ばれます。つまり、１ページで、ABがグループ化されており、２ページで、BCがグループ化されて、グループがつながっていた場合、１ページでABを選んで、つながった図形を選ぶと、２ページのBCも選ばれる（１ページで選ばれていないCも選ばれる）ことになります

 

実際の例で説明します

1. 塗りのある円のボタンをタッチし、
2. 円を4つかきます
3. 塗りのある円のボタンをタッチし、円を4つかきます
4. 選択枠の中心の「＋」をタッチし、メニューから、グループ化を実行します。
   ここでグループがつくられます
5. ページの右側の「＋」をタッチし、続きのページを作ります。グループもコピーされます
6. もう一回、ページの右側の「＋」をタッチし、続きのページを作ります
7. 円をタッチして選び、点選択ボタンをタッチします
8. 内部の点が表示されるので、左側の2つの円の点をえらび、
9. もう一度点選択ボタンをタッチします。この操作で、選んだ点を含まない図形や、グループの選択がはずれます
10. 左側の2つの円の点だけが表示されるので、もう一度点選択ボタンをタッチして、選択モードに戻し
11. ケシゴムボタンをおして、削除します。これで２つの円が削除されますが、選択からはずれたグループは削除されません
12. 2ページをタッチして、2ページに移動します
13. 円をタッチして選び、
14. 点選択ボタンをタッチします。内部の点が表示されます。
15. 全部の円の点をえらび、
16. もう一度点選択ボタンをタッチ
17. もう一度点選択ボタンをタッチして通常選択にしてから、
18. ケシゴムボタンをおして、削除します。これで円は全部削除されますが、
    点選択ボタンで円だけを選んだので、グループは残ります
19. 3ページをタッチして、3ページに移動します
20. 円をタッチして選択します。グループも選ばれます
21. 選択枠の中心のプラスをタッチし、メニューから、つながった図形を選ぶ、
    を実行します。

2ページには図形がないため、１ページと３ページの円は、つながっていないのですが、グループがつながっているため 、１ページのグループが選ばれ、その結果、１ページの円もいっしょに選ばれます。

 

５．いっしょに塗る

グループ化した図形の「いっしょに塗る」処理を説明します。

1. 塗りのある円のボタンをタッチし、
2. 円を3つ、位置をずらして、かきます
3. 塗り色はパレットで変更できます。
   パレットが消えている場合は、下の「もどす」をタッチしてください
4. ドラッグして、上の２つの円を選びます
5. 選択枠の中心の「＋」をタッチし、メニューから、「グループ化」を実行します。この操作では重なりはかわりません。
6. 選択枠の中心の「＋」をタッチし、メニューから「いっしょに塗る」を実行します。重なりや、色や、線の太さなどの属性が、グループの一番下の図形と同じになります。
7. さらに選択枠の中心の「＋」メニューから、「いっしょに塗る」のチェックをはずさない限り、グループ化の解除ができなくなります。
8. 「いっしょに塗る」のチェックをはずすと、元の色にもどります。重なり順序は元に戻りません

６．「いっしょに塗る」ときの穴の反転

「いっしょに塗る」図形の「穴の反転」処理を説明します。

1. 塗りのある円のボタンをタッチし、
2. 大きさの違う円を3つ、位置をずらしてかきます
3. 塗り色はパレットで変更できます。
   パレットが消えている場合は、下の「もどす」をタッチしてください
4. ドラッグして、上の２つの円を選びます
5. 選択枠の中心の「＋」をタッチし、メニューから、「グループ化」を実行します。
6. 選択枠の中心の「＋」をタッチし、メニューから「いっしょに塗る」を実行します。重なりや、色や、線の太さなどの属性が、グループの一番下の図形と同じになります。
7. 選択枠の中心の「＋」メニューから、「穴の反転」を実行します。
8. 小さい円をタッチすると、大きい円と重なった部分が、透明になります。線の向きが逆向きの多角形が重なった部分が、透明になります
9. もう一度、小さい円をタッチすれば、点選択モードになります
10. ドラッグして、点を全部選択し、
11. 左側に移動して、ドーナツの形にします
12. 重なりを上ボタンを押せば、穴があいていることがわかります

• この方法をつかって、ひとつの図形にたくさんの穴をあけることができます
• SVGイラスト素材のなかで、スキャナで作成した素材は、この方式で9VAeに読み込まれます。

７．文字と吹き出しのグループ化

文字と吹き出しをグループ化しておけば、文字の修正に応じて、吹き出しの形がかわります

1. 文字入力ボタン「A」をタッチし、
2. 「文字に吹き出しをつける」と入力します。
3. スタンプタブを、タッチして開きます
4. スタンプから吹き出しをタッチします。文字が選ばれていれば、文字を囲むように、吹き出しがはいります
5. 文字と吹き出しを両方選んで、
6. 選択枠の中心の「＋」メニューから、「グループ化」を実行します
7. グループ化した文字を、タッチすれば、文字の内容を変更できます。
   文字を3行に変更します。文字の配置がかわるとそれに応じて吹き出しの形もかわるので便利です

 

ベクトルとビットマップの違い はこちらをご覧ください

---

ひとコマ解説動画の作り方

この記事の動画は、フリーソフト9VAeきゅうべえで作成しています。

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

• Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Win / Mac / Linux：9VAeきゅうべえダウンロード
• Amazon Fire :
• 9VAeのボタン説明、メニュー/キー

↑これを見るとダウンロード、キーフレーム補間、SVGイラストをパーツ化して口パクさせる方法がわかります。パソコンでもiPadでも同じ操作です。

• 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定すると解説動画が作れます。
• Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
• FFmpeg を使って Youtube 動画にすることもできます。

 

画面キャプチャ方法

OS	画面キャプチャ方法	保存先
Windows	Print Screen キー Shift + Windows + S  無料ソフト「kioku」	クリップボード（ペイントに貼り付けて保存）
Mac	Shift + Command + 4 （ShiftキーはZの左、スペースでウィンドウ指定）	デスクトップ
Android	電源 + 音量Down  adbコマンド (開発者向け)  adb shell screencap -p /sdcard/screen.png  adb pull /sdcard/screen.png	フォトアプリ＞ ライブラリ＞ Screenshots
iPhone / iPad	ホームボタン + 電源ボタン サイドボタン + 音量UP	写真＞ アルバム＞ スクリーンショット
Linux Mint	Print Screen キー	クリップボード ファイル
Amazon Fire	電源 + 音量Down １秒長押し USBケーブルでPCと接続し、 設定＞接続デバイス＞USB＞ファイル転送	ピクチャ > スクリーンショット
Chromebook	Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）	マイファイル > ダウンロード

キャプチャ画像を転送する方法はこちら

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

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

文字、矢印を入れる

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

文字の色、縁、影をつける

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

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

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

アニメGIF、動画出力

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

 

 

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

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

OS	無料動画ソフト	9VAeで作れる素材
Windows	CapCut AviUtl	MP4 連番PNG または MP4
Mac/iPhone/iPad	CapCut iMovie	MP4  MP4
Android	CapCut PowerDirector	MP4 GIF または MP4

作り方

• CapCut用動画素材の作り方

• AviUtl動画に合成する方法 (Windows)

• グリーンバック動画を作成してiMovieに合成する方法 (iPhone/iPad/Mac)

• PowerDirector でグリーンバック動画を入れる方法（Android 他）

• キネマスター用グリーンバック動画を作る方法

 

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

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

 

 

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

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。