図表を動かす動画の作り方

図表を動かす動画の作り方、無料アプリ 9VAe で正確な図表を書く方法を説明します。

パソコンやスマホでできます。いらすとやを動かす方法はこちら。音声合成はこちら。

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

内容：

１．9VAeきゅうべえのダウンロード
２．グリッドの設定
３．文字を入れる
４．選んで配置横に整列
５．選んで配置縦に整列
６．選びたくない時、登録して固定
７．選んで配置縦に整列
８．四角形で表の罫線を入力
９．文字に枠をつける
10．ひとこまアニメにする
11．動画をMP４出力
ひとコマ解説動画の作り方

１．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版は「詳細情報」から実行します

２．グリッドの設定

正確な図形を入力するにはグリッドを設定するとよいです

操作方法

表示メニューから、「グリッドを表示する」を設定しましょう。
スマホ版で、画面が黒なら、表示メニューの「ダークモード」で白黒を反転できます。
画面にグリッドが表示され、入力した点がグリッド上に正確に配置されます。
移動量がグリッドの間隔になります

３．文字を入れる

文字サイズは選択枠の拡大縮小、位置はドラッグで移動します

操作方法

文字入力ボタンをタッチし、文字を入れます。
文字を入力したら、中心の「＋」をドラッグして移動できます。
選択枠の角の黒いハンドル■をドラッグして、文字のサイズを変更できます。
表示する順番に、図表にいれる文字を入力します

正確に入力するのは難しいので、適当に入力してあとから整列するのがよいです。

文字サイズについて、編集メニューの「色・種類を記憶」「記憶した色・種類に設定」をつかえば、同じ色、サイズのフォントにそろえられます

４．選んで配置横に整列

まず文字を横に整列しましょう

操作方法

上の1行をドラッグして選択します
配置メニューから「横軸を合わせる」をタッチします
パソコン版は、調整メニュー＞整列の中にあります
同じようにして、２行目、３行目の文字も横にならべます

５．選んで配置縦に整列

次に縦に整列しましょう

操作方法

左の1列をドラッグして選択します
配置メニューから「縦軸を合わせる」をタッチします、
パソコン版は、調整メニュー＞整列のなかにあります

６．選びたくない時、登録して固定

中央に選びたくない文字があります。選びたくないので登録して固定します

操作方法

選びたくない文字を選びます。
右側の登録エリアの「＋」ボタンで登録します。スマホ版で、右側のパレットがきえていたら、右下の「もどす」をタッチすればパレットが表示されます（もう一度押すと消えます）
登録したパレットをタッチし、メニューから「固定」をタッチします。
登録された文字が選ばれなくなります

７．選んで配置縦に整列

操作方法

２列目、３列目、そのほかの列の文字を縦に選んで、メニューから「縦軸を合わせます」

８．四角形で表の罫線を入力

操作方法

四角形ボタンをタッチします。
右列のボタンは、塗りのない四角、左列のボタンは塗りのある四角が入力できます。「キーボードがある場合は、コントロールキーを押しながら、四角形を入力するとよいでしょう。スマホやタブレットでも、キーボードがあれば正確な図形を入力するのに役立ちます。ショートカットキーが使えるので便利です。グリッドを表示しておけば、グリッド上に枠線が引けます
続けてコントロールキーを押しながら、四角形を入力します。
コントロールキーで点が吸着します。最初に入力した四角形の頂点に点が吸着するので、入力しやすくなります
続けて枠線を入力しましょう

９．文字に枠をつける

操作方法

右側の登録パレットの文字を登録したボタンをタッチし、メニューから、「選択する」をタッチします。登録された文字が選ばれます
塗り色パレットで色をえらべば、文字の背景に色がつきます。
線の種類で「実線」を選べば、文字に枠線がつきます
文字の上に枠線がかかれているので、重なり順序を上にあげるボタンを、何回かおして、文字を枠線の上に出しましょう

文字の枠線の色、太さは、線の色、太さで設定できます

右側の文字パレットのボタンで、文字枠のサイズを調整できます

10．ひとこまアニメにする

この図に動きをつける方法を説明します

操作方法

方法は簡単で、ページの上の時間をタッチし、メニューから「ひとこま」をタッチするだけです
プレイボタンをタッチして、動きをみてみましょう

ひとコマアニメについてはこちら

11．動画をMP４出力

操作方法

「ファイル」メニューから動画出力を実行します。パソコン版9VAeでは、ファイルの保存場所を先に指定します
高さは1080か、720に設定すると良いでしょう。
幅は空白にすると比率を合わせて自動設定されます。時間は自動的に設定されます。
秒のコマ数は30が滑らかな動画になります。
OKボタンを押して、動画出力されるまで待ちましょう。
iPhone、iPad版では、カメラロールに動画ができます。Android、Chromebook、Amazon Fire版では、ダウンロードフォルダのなかの「9VAe」フォルダに出力されます

ファイルメニューから「アニメGIF出力」を選べば、アニメーションGIFを作成できます。プレゼンテーション素材やブログの動画素材として使えます。このサイトの動画もすべて9VAeでアニメGIF作成しています。

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 で出力するとよいでしょう。