無料なのにすごい、自由自在に変形できる：9VAeきゅうべえの点選択

無料アプリ9VAeきゅうべえは、なめらかに動くアニメを作るために、他のアプリにないすごい点選択、3D変形機能をもっています。ここでは点選択機能を解説します。

パソコンやスマホでできます。いらすとやを動かす方法はこちら。しゃべる解説はこちら。

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

内容：

１．9VAeきゅうべえのダウンロード
２．獅子舞のイラストの口をあける
３．9VAeの選択
４．点選択モード
５．点の移動
６．点の結合
７．まがった点□、とがった点△
８．点の追加削除モード
９．点を選んで前後のページにリンクコピー
10．記憶ツールをつかった点の置き換え
11．ドラッグして連続した点を修正する方法
ひとコマ解説動画の作り方

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

ぬるぬる動く動画素材が簡単につくれるフリーソフト9VAeきゅうべえは、下からダウンロードできます

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

操作方法

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

２．獅子舞のイラストの口をあける

Openclipart獅子舞のSVGをダウンロード

Openclipart で「shishi lion dance」を検索（こちら）
SVGをダウンロードしてください。

獅子の口をあける

9VAeで獅子の口をあける手順は以下のようになります。

この操作は、他のアプリでは難しいです。というのは

元のSVGは、口をあけることを考えてつくられていない
口をあけるには、あごの図形の一部を選んで変形する必要がある
異なる複数の図形の中から必要な一部の点を選んで同じ変形をする

以上の操作が、他のアプリでは難しいです

項目	Capcut	Canva	Impress	9VAe
SVGが読み込める	×	⚪︎	⚪︎	⚪︎
内部の点を表示できる	×︎	×︎	⚪︎	⚪︎
内部の点を複数選択できる	︎×	×︎	⚪︎︎	⚪︎
複数図形の一部の点を同時に選択できる	×︎	×︎	⚪︎	⚪︎
複数図形の一部の点を同時に選択して移動変形できる	︎×	×︎	×	⚪︎

Capcut（動画編集）

SVGを読み込めません

Canva（動画編集・プレゼンテーション）

SVGは読み込めますが、SVG内部の点を修正できません

Impress（プレゼンテーション）

SVGを読み込んで、曲線に変換。グループ化を解除すれば、ばらばらに図形を選択できます
「制御点に編集モードに切り替え」れば、複数の制御点を選択できますが移動がむずかしい

9VAeは、SVGイラストを自由に変形してアニメ素材を作る目的で開発されたので、このような内部の点の変形処理が充実しています。

３．9VAeの選択

9VAeにはつぎの３種類の選択があります

図形の選択
図形内部の点の選択（点選択、点の追加）
複数ページの選択

選択した図形、点に対して、拡大縮小、移動、色、太さ変更など同じ処理を行うことができます。図形の選択方法は、一般的なアプリと同じ操作です

図形をタッチすれば１つ選択。なにもないところのタッチで選択解除
外側から四角形でドラッグすれば、接触した図形が全部選択されます
シフトキー（シフトボタン）を押しながら選択すれば、追加選択・選択解除になります。
シフトキー（シフトボタン）を押せば、今選択されている図形の輪郭線が反転します
図形の数が多くなると選択が難しくなります。9VAeは、選択状態も「元にもどす」「やりなおす」ができます

４．点選択モード

図形の内部の点が表示されるモードです。
△の点は尖った点です
□の点はなめらかにまがった点です
◇の点はグラデーションやアニメキャストの制御点です
点選択モードにするには、先に図形を選択する必要があります

点を選んで拡大・縮小する

修正する場合、点を選んで、左下の「虫眼鏡」の左の「＋」ボタンで拡大するとよいです。キーボードでは「↑」（縮小は「ー」「↓」）
「虫眼鏡」ボタンで元のサイズにもどります。キーボードは「Ctrl＋０(ゼロ)」

点選択にする：点選択ボタン

複数の図形を選択し、点選択ボタンを押せば、選んだ図形が点選択モードになります。

点選択にする：図形をタッチ

図形を選択したあと、図形をタッチすれば、タッチした図形が１つ選択され、点選択モードになります

点選択にする：「＋」メニュー＞点の修正

複数の図形を選択し、選択枠の中心の「＋」をタッチして、メニューから「点の修正」すれば、選んだ図形が点選択モードになります

点を選ぶ

点の上からドラッグすると、１点の移動になります
点のない部分からドラッグして複数の点を選ぶことができます。
マウス、ペンでは、四角形で複数の点が選択できます
スマホなど、ゆびで選ぶ場合は、青い線が表示され、自由に囲んだ範囲の点が選択できます
選んだ点は赤と白色になります

点を選んで点選択ボタン

点選択モードで、複数の点を選んだあと、もう一度点選択ボタンをおせば、点を選んでいない図形の選択がはずれ、選んだ点を含む図形の点だけが表示されます。たくさんの点の中から変形したい図形の点だけ選ぶときにこの方法が使えます
もう一度点選択ボタンをおせば、通常の図形選択モードに戻ります

５．点の移動

１点の移動

指で１点だけ選んだ場合、選んだ点のまわりに枠がつきます。
１点のまわりの枠をドラッグして点を移動できます。
１点のまわりの枠を一度タッチし、画面のどこかをドラッグしても、点を移動できます。こうすれば、点が指で隠れることがありません
マウスでは、点をドラッグすれば、１点だけ移動できます
マウスで、１点をクリックすれば、ボタンを押さない状態（ホバー）で、点を動かすモードになります。もう一度マウスボタンを押せば、点の位置が確定します。
ホバー状態で、ステージの外に点を移動させれば、点は元の位置にもどります

点の連続修正

複数の点を選択し、選択枠中心の「＋」のメニューから「点の連続修正」を実行すると、点の連続修正モードになります。
マウスでは、選んだ点がホバー状態になり、マウスボタンで、点の位置を、ひとつずつ確定していきます。位置決めする点のまわりに円のしるしがつきます。選んだ点の形を修正するときに便利です
指で操作している場合は、画面のどこかをドラッグして移動させます。指をはなすと円のしるしがついた点の位置が、順番に確定していきます。

点の吸着

点を移動中に、キーボードのCtrlキーを押せば、点が吸着します
画像や文字の角や辺の中点にも吸着します
キーボードがない場合、左下の「Shift」ボタンをドラッグすると、Ctrlキーを押した状態になります（下に赤い線がでます）。その状態で移動させると吸着します
背景ページの点にも吸着します

６．点の結合

点の吸着で同じ位置に設定した点を両方選択し、選択枠中心「＋」メニューから「点の結合」を実行すれば、選んだ点が結合した状態になります
結合した点のまわりが円で囲まれます
点を結合しておくと、片方の図形を移動、変形したとき、結合した点も同時に動きます
点選択モードで、結合した点を選び、選択枠中心「＋」メニューから「点の結合解除」を実行すれば、結合が解除されます

７．まがった点□、とがった点△

折れ線や多角形の制御点には、まがった点□と、とがった点△の２種類があります。
点をえらんで、カラーパレットの右上の「∧」ボタンでとがった点△になります。ショートカットキー：Ctrl＋３
「∩」ボタンでまがった点□になります。ショートカットキー：Ctrl＋４
点選択モードで、Ctrlキーを押しながら、点をタッチすると、□と△が切り替わります。
9VAeには、ベジェ曲線の操作方法はありません。制御点の操作が初心者に難しいので採用しませんでした。まがった点□を追加し、位置を調整することで、ベジェ曲線と同じような形にすることができます

８．点の追加削除モード

点の追加

9VAeには、つながった図形は、必ず同じ数の点をもつという条件があります。その結果、点と点の対応が正確になり、なめらかに動くアニメーションが作れます。
この条件のために、点を選択するだけの点選択ボタンと、点を追加したり削除できる点追加削除ボタンをわかれています。
点の追加削除ボタンで、点選択モードにはいった場合は、線の上をタッチすると、その場所に点が追加されます

点の削除

9VAeは、つながった図形は同じ数の点をもつという条件があり、つながった図形の点を削除すると、他のページの図形の形が変わってしまいます（例えば四角形が三角形になるなど）そのため、点の追加削除ボタンがわかれています。
点の追加削除ボタンをおしたあと、点を選択し、図形を削除するボタンをおせば、点が削除できます
前後のページとつながっていない図形は、点選択ボタンでもし、点を選んで削除ボタンを押せば、点を削除できます

点を削除して輪郭線をつなぐ

点の削除には特別なオプションがあります
ドーナツのように穴のあいた図形の穴の点と、外側の点を同時に選択し、シフトキーを押しながら、削除ボタンを押すと、点を削除し、その部分で外側の輪郭線と穴の輪郭をつなぎます
画像をスキャンしてつくられたSVGイラストには、穴のあいた図形が多くふくまれており、この処理が必要になることがあります

９．点を選んで前後のページにリンクコピー

つながった図形の一部の点を選んで、前後にリンクコピーすると、選んだ点だけが前後のページの対応した点と置き換わります

10．記憶ツールをつかった点の置き換え

点選択モードで、点の一部を選んだ状態で、記憶ツールにコピーします。
点選択モードで、点の一部を選んで、記憶ツールの貼り付けボタン「←」をタッチすると「点の置き換え」「点の置き換え（逆向き）」がメニューにでてきます。選んだ点の一部が、記憶ツールの選んだ点におきかえられます。（逆向き）を選ぶと点の順番が逆向きになります
つながった図形の点を選んで、点の置き換えを実行した場合、つながった図形の点がすべて置き換えられます

11．ドラッグして連続した点を修正する方法

自由曲線ボタンをタッチして、手描きのまるをかきます
選択ボタンで、選択枠を表示し、
辺のハンドル■ をタッチし、メニューから「けずる」を実行して、
下に下げます
点選択ボタンをタッチし、点を表示させます。
この点を移動させて、元の形にもどす方法を説明します。点が重なっているため、普通の方法では、うまく移動させることができません
キーボードがある場合は、コントロールキーを押しながら、ない場合は、シフトボタンをドラッグすれば、Ctrlキーをおした状態になります。
点選択ボタンをタッチします。これで、「点のドラッグで隣の点を選ぶ」モードになります。
左端から点の上をドラッグしましょう。最初に選んだ点から連続した点だけが選択され、青いまるがつきます。さらに連続して、点の位置をきめる状態になります
順番に点の位置を、きめていきます。重なった点から、連続する点だけえらんで動かすことができます。
コントロールキーを押しながら点選択ボタンをタッチすれば、点のドラッグで隣の点を選ぶモードを終了します

9VAeきゅうべえのアニメーションの動作原理については、こちらをご覧ください。＞ベクトルとビットマップの違い

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

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

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

Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
Win / Mac / Linux：9VAeきゅうべえダウンロード
Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
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に読みこむ

f:id:dnjiro:20220119095713g:plain

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

文字、矢印を入れる

f:id:dnjiro:20220119131719g:plain

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

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

f:id:dnjiro:20220119140955g:plain

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

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

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

アニメGIF、動画出力

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