dnjiro’s 9VAe blog

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

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

動画 アニメの作り方 解説動画 教育

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

 

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

内容：

 

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

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

操作方法

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

２．9VAeのグループ化

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

  • 9VAeは、グループ化しても重なり順序はかわりません
  • グループ化し「いっしょに塗る」を設定すると、選択した図形の一番背後（下）の重なりになり、色や線の太さなどの属性が一番背後の図形のものになります。
  • 「いっしょに塗る」が設定された状態ではグループ解除ができません

A、B、Cという３つの図形を重ねて入力したあと、AとCをグループ化すると、多くのアプリでは、B、A、Cという重なり順序にかわります。

 

 
PowerPoint
グループ化
Impress
グループ化
9VAe
グループ化
9VAe
いっしょに塗る
重なり順序
選んだ図形の
一番手前になる
選んだ図形の
一番手前になる
変わらない
選んだ図形の
一番背後の色、
重なりになる(*)

グループ化した図形の

中間の重なりに図形を

配置できるか

 × × ◯ ×

 

多くのアプリは、グループ化した図形は、ひとつの図形として扱うため、グループ化された図形の間の重なりに別の図形をはめこむことができません。アニメを作成する場合、重なり順序はどんどん変化します。手でボールをつかむ場合、ボールより背後の指と、ボールより手前の指が存在します。多くのアプリでは、ボールより背後の指と、ボールより手前の指を同じグループにいれることができません。重なり順序が変化する場合、非常に難しくなります。9VAeならグループ化をした状態で、指と指の間にボールをはさむことができます。下で説明します。

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

9VAeの「いっしょに塗る」を設定すると、グループ化された中にある多角形が、重なり順序の一番下（背後）の重なりで、その色で、同時に描画されます。その場合は、重なり順序がかわる（背後になる）こともありますし、色もかわることがあります。

 

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

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

  • グループ化すると、そのページにグループタグという見えない図形を配置します。タグには番号が割り当てられており、グループ化された図形はそのタグ番号をもちます。
  • グループ化された図形を選ぶと、同時にグループタグが選択され、さらに、同じタグ番号をもつ図形が同時に選択されます。

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

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

 

  • グループ化された図形を記憶ツールに保存する場合、見えないグループタグが選ばれておれば、同時に記憶されます。
  • 記憶ツールからステージに戻す場合、タグ番号は同じになるため、もし、同じ番号のグループタグがあれば、グループ化されることになります。グループ化したくない場合は「複製する」で別のグループ番号にして戻す必要があります。

４．グループタグのつながり

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

  • グループ化された図形を記憶ツールに保存する場合、見えないグループタグが選ばれておれば、同時に記憶されます。
  • 記憶ツールからステージに戻す場合、タグ番号は同じになるため、もし、同じ番号のグループタグがあれば、グループ化されることになります。グループ化したくない場合は「複製する」で別のグループ番号にして戻す必要があります。

 

  • グループタグは、リンク情報も持ちます。つながった図形を選択したとき、グループタグが選ばれていると、つながったグループタグが選択され、そこに含まれる図形はすべて選ばれます。つまり、１ページで、ABがグループ化されており、２ページで、BCがグループ化されており、その２つがリンクしていた場合、１ページでABを選んで、つながった図形を選ぶと、２ページのBCも選ばれることになります

 

実際の例で説明します

  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ページには図形がないため、普通に考えれば、１ページまでつながっていないのですが、グループタグが残っているため 、１ページの図形までいっしょに選ばれます。上の20で円を選んだ時に、グループタグもいっしょに選択され、それが２ページ、１ページのグループタグとつながっているということになります。

 

２ページのグループタグに対応した図形を、別々に２ページに複製でないコピーをすれば、再グループ化されることになります

５．いっしょに塗る

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

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

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

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

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

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

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

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

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

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
（ペイントに貼り付けて保存）
 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に読みこむ

f:id:dnjiro:20220119095713g:plain

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

文字、矢印を入れる

f:id:dnjiro:20220119131719g:plain

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

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

f:id:dnjiro:20220119140955g:plain

  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

作り方

 

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

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

 

 

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

 

Â