dnjiro’s 9VAe blog

dnjiro’s 9VAe blog

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

100分の1秒カウンター素材の作り方:ひとコマ解説

100分の1秒カウンター素材の作り方を説明します。動画による説明はこちら。同じ方法でカウントダウンタイマー素材も作れます。しゃべる解説の作り方はこちら

 

ほかの解説動画はこちら

内容:

 

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

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

操作方法

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

2.数字1桁のカウンタを作る

  1. 文字入力ボタンを押して、数字「0」を入力します
  2. ページの右側のプラスをタッチし、続きのページを作ります。
    同じ内容の2ページめができます
  3. 文字をタッチして選択します
  4. 選択枠の中心の「+」メニューから「このページの文字だけ変更」を実行し、「1」に変更します。
  5. ページの右側の「+」をタッチし、「続きのページを作る」を実行ます
  6. 文字をタッチして選択します
  7. 選択枠の中心の「+」メニューから、「このページの文字だけ変更」を実行し、「2」に変更します。
  8. 同じ作業を繰り返して、10ページまで作ります。
  9. 10ページの数字は、9になります
  10. プレイボタンを押して、再生してみましょう

 

3.数字2桁のカウンタを作る

  1. 10ページの番号をタッチし、「ページの指定ここから」を実行します
  2. 次に先頭ページボタン「<<」をタッチして、1ページに移動します
  3. 1ページの番号をタッチし、「ページの指定ここまで」を実行、ページを選択します
  4. きおくツールのコピーボタンで、選んだ10ページをきおくツールにコピーします
  5. 複数ページ選択された選択枠の中心の「+」をタッチし、「移動」を実行し、ドラッグして、選んだ数字を全部、左側に移動します
  6. ページの時間をタッチし、メニューから「まとめて調整する」を実行します
  7. 選んだページの時間を、100秒にします。各ページの時間は、10秒ずつになります
  8. きおくツールの下の「q」ボタンで、中に入れたページをアニメキャストにしてステージに戻します。アニメキャストの名前は好きなようにつけてかまいません
  9. 次のページにリンクコピーボタン「□→」を、9回タッチして、10ページまで、アニメキャストをコピーします
  10. プレイボタンを押して、再生してみましょう

4.小数2桁を追加する

  1. 1桁の数字をタッチして選び、中心の「+」メニューから「複製する」を実行します
  2. ドラッグして、元の数字の右側に移動します
  3. 中心の「+」メニューから、もう一度「複製する」を実行します
  4. ドラッグして、数字の右側に移動します
  5. 右はしの数字の、中心の「+」をタッチし「別のアニメにして修正」を実行します。名前は 「0.01」にしましょう。これでアニメキャスト「0.01」の中が開きます
  6. 1ページの番号をタッチして、「ページの指定ここから」を実行します
  7. 「>>」ボタンで最後のページに移動します
  8. 10ページの番号をタッチし、メニューから「ページの指定ここまで」を実行して全部のページを選びます。
  9. 選んだページのいずれかの時間をタッチし、メニューから「まとめて調整する」を実行します
  10. 選んだ10ページの時間を、「0.1秒」にします。その結果、各ページは、0.01秒になります
  11. 画面の上の太い文字をタッチし、「このアニメにもどる」を実行します。アニメキャストから元のアニメに戻ります
  12. 同じ処理を右から2つめの数字にもお構内ます。数字を選び、中心の「+」メニューから「別のアニメにして修正」を実行します。名前は 「0.1」にしましょう
  13. アニメキャストの中が開くので、1ページの番号をタッチして、「ページの指定ここから」を実行します。
  14. 「>>」ボタンで最後のページに移動します
  15. 10ページの番号をタッチし、メニューから「ページの指定ここまで」を実行。
  16. ページの時間をタッチし、「まとめて調整する」を実行します。全体の時間を、1秒にします。各ページは、0.1秒になります
  17. 画面の上の太い文字をタッチし、「このアニメにもどる」で、元のアニメにもどります
  18. 下2桁の数字を外からドラッグして選択します
  19. 前のページにリンクコピーボタン「←□」を、9回タッチして、1ページまで、アニメキャストをコピーします。4桁のカウンタができました

5.背景に小数点を入れる

  1. 先頭ページの左側をタッチして、メニューから、「背景ページを入れる」を実行します。背景ページがはいります
  2. 表示メニューから、「前後のページを重ねて表示」を実行します。後ろのページがムラサキ色で見えます
  3. 文字入力ボタンを押して、小数点「.」を入力します。
    背景ページにかきこむと、後ろのページ全ての背景になります
  4. 枠をつけてみましょう。四角形ボタンをタッチ。
  5. ドラッグして数字を囲む四角形をかきます
  6. 重なりを下にして、小数点を表に出します
  7. プレイボタンで動きを見てみましょう

 


解説動画の作り方

この記事のひとコマ解説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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

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

アニメGIF、動画出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要Youtube解説
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒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きゅうべえに関する質問

 

 

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

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

 

ほかの解説動画はこちら

内容:

 

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

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

操作方法

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

2.9VAeのグループ化

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

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

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

 

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

グループ化した図形の

中間の重なりに図形を

配置できるか

× × ×

 

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

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

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

 

3.9VAeのグループ化処理

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

 

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

 

  • グループタグが見えない図形であるため、動作がわかりにくい問題はあります
  • グループタグは、リンク情報も持ちます。つながった図形を選択したとき、グループタグが選ばれていると、つながったグループタグが選択され、そこに含まれる図形はすべて選ばれます。つまり、1ページで、ABがグループ化されており、2ページで、BCがグループ化されており、その2つがリンクしていた場合、1ページでABを選んで、つながった図形を選ぶと、2ページの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ページには図形がないため、普通に考えれば、1ページまでつながっていないのですが、グループタグが残っているため 、1ページの図形までいっしょに選ばれます。上の20で円を選んだ時に、グループタグもいっしょに選択され、それが2ページ、1ページのグループタグとつながっているということになります。

 

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

 

 

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


解説動画の作り方

この記事のひとコマ解説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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

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

アニメGIF、動画出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要Youtube解説
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒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きゅうべえに関する質問

 

 

9VAeきゅうべえ Windows版 再構築メモ

アニメ作成ソフト9VAeきゅうべえの アプリストア版を開発するのは難しいことがわかったが、開発環境を最新に変更できないか(すくなくともWindows8 以降)と思い、調査した。

 

 

Visual Studio 2022 では、XPプロジェクトを開くことができない

  • 9VAe Windows版は、Windows XP のころの Visual Studio で作られている。このプロジェクトを読み込んで、コンバートできるのは、Visual Studio 2019 までみたいだ。Visual Studio 2022 では読み出せない。Visual Studio の過去バージョンは、サブスクリプション登録しないと入手できないみたい。古い VisualStudio は貴重。
  • いったん、VisualStudio 2019 で、コンバートすれば、VisualStudio2022で、さらに上位バージョンに変換できる。ビルドするには、以下の修正が必要だった

デバッグ情報の形式をなしにする(/Zi→なし)

  • 古い形式はつかえない

添字が負の値ですエラー(/Zp1→規定)

  • 構造体メンバーのアライメントを1バイトにしているとエラーがでるみたい
  • 2バイトでもエラー。「規定」に変更。64ビットとか、ARM版などには規定にしとかないといけないのだろう

 

afxres.h がみつからない

strmbasd.libがみつからない

  • strmbase.lib に変更するとエラーがなくなった

SAFESEHイメージには安全ではありませんエラー

  • ソリューションのプロパティから、「リンカー」→「詳細設定」→「安全な例外ハンドラーを含むイメージ」を「いいえ(/SAFESEH:NO)」に変更。(参考記事はこちら

 

LIBC.lib を開くことができませんエラー

  • 参考記事はこちら
  • リンカーオプションに「/NODEFAULTLIB:LIBC」を追加
  • シングルスレッドのCRTライブラリが削除されたためらしい

未解決の外部シンボル fillbuf

  • JPEGの処理でつかっているみたいなので、とりあえずつかわないようにした
  • GDI+の関数にさしかえれば、JPEGの処理ができるようだ

アニメーション制作の革命?:9VAeきゅうべえの登録と動きグラフ

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

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

ほかの解説動画はこちら

内容:

 

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

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

操作方法

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

2.9VAeの登録機能

9VAeの登録は、登録した図形を固定したり、隠したりできるので、他のアプリの、レイヤー機能に似ていますが、以下の利点があります

  • 登録しても重なり順序がかわらない
  • 重なり順序がはなれた図形でも同じグループに登録できる
  • ページごとに違う場所に登録できる

多くのアプリは、レイヤごとに重なり順序がきまっているため、登録するレイヤを変更すると重なり順序がかわってしまいます。重なり順序がはなれた図形をいっしょに登録することができません。また、所属するレイヤは時間がかわっても変えらません。9VAeはそのようなことがありません。

登録するには次のようにします

  1. 選択ボタンをタッチします
  2. 図形を選択します
  3. 右側の「+」ボタンをタッチすれば、下のパレットに、選んだ図形が登録されます。スマホ版でパレットが消えている場合は、下の、「もどす」をタッチしてください

3.登録パレットのメニュー

登録したパレットをタッチすると、メニューが表示されます。

図形を選んでいるか、いないか、選んだ図形が登録されているかどうかによって、項目が変わります

 

4.追加登録する

登録したパレットをタッチして、メニューから追加できます

  1. 図形をタッチして選択します
  2. 右側の「+」ボタンをタッチして、下のパレットに、選んだ図形を登録します。
  3. もうひとつ図形をタッチして選択します。
  4. 登録したパレットをタッチし、メニューから「追加登録する」を実行します。
  5. 登録パレットに、追加されます。登録できるのは、ひとつのパレットだけで、
    最後の登録が有効になります

5.登録した図形を固定する

登録したパレットをタッチして選択できないように固定できます

  1. 青い円をタッチして選択します
  2. 右側の「+」ボタンをタッチして、下のパレットに登録します。
  3. 登録したパレットをタッチして、メニューから「固定」を実行します。
  4. 固定すれば、外からドラッグして選んでも、固定された図形は選択されません
  5. もういちど、登録したパレットをタッチして、「固定」のチェックをはずせば、
    選択できるようになります。

6.登録した図形を隠す

登録したパレットをタッチして隠すことができます

  1. 青い円をタッチして選択します
  2. 右側の「+」ボタンをタッチして、下のパレットに登録します。
  3. 登録したパレットをタッチして、メニューから「隠す」を実行します。
  4. 登録した図形が見えなくなります。
  5. もういちどパレットをタッチし、隠すのチェックをはずすと、また見えるようになります。編集にじゃまな図形を一時的に隠すことができます

7.ゆっくり動き出すグラフ

登録パレットをタッチして動きグラフをつけることができます 

  1. 円を描くボタンをタッチし、中心からドラッグして、円を2つかきます
  2. ページの右側のプラスをタッチし、メニューから、「続きのページを作る」を、実行します。ページが複製され、2ページができます。
  3. 外からドラッグして、2つの円を選びます
  4. 2つの円を移動します
  5. 塗り色パレットをタッチして、色を変更しましょう
  6. 1ページをタッチして、1ページに移動します
  7. 下の図形をタッチして選択します
  8. 右側の「+」ボタンをタッチして、パレットに登録します。
  9. 登録したパレットをタッチし、メニューから「ゆっくり動き出すグラフ」を実行します。
  10. プレイボタンで再生してみましょう

8.いろいろなグラフの動き方

  • グラフがない場合
  • ゆっくり動き出すグラフ
  • 急に動き出すグラフ
  • ぐらぐらするグラフ
  • でたらめなグラフ

    それぞれをつけた場合の動き方をくらべてみましょう

 

9.動きグラフの複製、修正、追加登録

動きグラフは、普通の図形と同じように、点修正、点の追加削除、複製や登録ができます。

  1. 動きグラフは、選択されていないときは小さくなります。タッチして、選ぶことができます
  2. 選択枠の中心の「+」をタッチ、メニューから「複製する」で複製できます。複製されたグラフは、未登録なので赤い線になります。
  3. 点の追加削除ボタンをタッチすれば、グラフが拡大され、修正できるようになります。
  4. 点を追加して、グラフの形を変えましょう
  5. 登録パレットをタッチし、メニューから、「追加登録する」を実行します。複製して変更したグラフが登録され、線の色が青くなります。
  6. プレイボタンで再生してみましょう

動きグラフは1つのパレットに1つしか登録できません。いっしょに登録された図形が、動きグラフの形によって、動き方がかわります。複数の動きグラフをつくって、動きを差し替えてみるといった使い方ができます。

10.「ひとコマ」と動きグラフ

  • ページの時間をタッチしてメニューから「ひとコマ」を設定すれば、そのページの図形や文字が順番にでてくる、ひとコマアニメーションになりますが、そのときに、動きグラフが使われます。
  • そのため自分で登録したパレットと違うパレットに登録され、異なる動きグラフになる場合がありますが、「ひとコマ」機能はそういう仕様になっていますので、ご注意ください。
  • ひとコマで作成された動きグラフの形を後から変更することは可能です

 

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


解説動画の作り方

この記事のひとコマ解説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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

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

アニメGIF、動画出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要Youtube解説
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒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きゅうべえに関する質問

 

 

アニメーション制作の革命?:9VAeきゅうべえの3D変形

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

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

ほかの解説動画はこちら

内容:

 

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

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

操作方法

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

2.9VAeの選択

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

  • 図形の選択
  • 図形内部の点の選択(点選択、点の追加)
  • 複数ページの選択

選択すると、選択した図形や点の周りに選択枠がつきます。複数の図形を選択した場合は、選んだ図形に処理がおこなわれ、複数の点を選んだ場合は、選んだ点に処理が行われます。

3.選択枠のハンドル

選択枠には、周囲に■、中心に+のハンドルがあります。

ハンドルのドラッグ

  • 角の■をドラッグすると、拡大・縮小されます

  • 辺の中心の■をドラッグすると、引き伸ばすことができます
  • 中心の+をドラッグすると、位置をかえることができます

ハンドルのタッチ

9VAeは、ハンドルをタッチすると、メニューが表示され、多くの処理が行えます。

  • 角の■をタッチすると、拡大・縮小・回転のメニューが表示されます

  • 辺の中心の■をタッチすると、引き伸ばし、曲げなどのメニューが表示されます
  • 中心の+をタッチすると、移動その他のメニューが表示されます。選ばれているものによって表示されるメニューの内容がかわります

ハンドルメニューの操作

  • メニューの項目をタッチし、そのままドラッグすれば、指をはなした場所で終了します
  • メニューの項目をタッチし、マウスを動かす(または、べつの場所からドラッグする)と変形します。マウスを動かした場合は、ステージの外に移動させれば元の位置に戻ります

4.角のメニュー(拡大/縮小・回転・回転中心)

  • 拡大/縮小:
  • 拡大/縮小+回転:

  • 回転:
  • のばす+回転:
  • 中心点の移動:回転や拡大・縮小の中心を移動します

5.辺のメニュー(のばす・曲げる・・)

  • のばす:
  • 曲げる:
  • 波変形:

  • パース変形:
  • ゴム変形:

  • 反転:
  • けずる:

6.中心のメニュー(移動・複製・消去)

図形を選んだ場合

  • 移動:
  • 点の修正:
  • ゴム変形:

  • なめらかにする(後述)

共通項目(つながった図形選択・複製・・)

  • つながった図形を選択:
  • 複製する:
  • 消去する:
  • 次ページにリンクコピー:
  • グループ化:

文字を1つ選んだ場合(内容変更・しゃべる・・)

  • 移動:
  • 文字の内容変更:
  • このページの文字だけ変更:
  • 1文字表示
  • コメント
  • しゃべる

画像を1つ選んだ場合(変更・ステージの大きさ・透明・・)

  • 絵・写真の変更:
  • ステージの大きさにする:
  • もとの大きさにする:
  • 透明にする:
  • 連番にする:

7.端をとめて変形

  • 点の一部を選択したとき、角の■メニューにあります
  • 「端をとめて変形」を実行すると、チェックがつきます。もう一度実行すると「端を弱くとめる」になります。もう一度実行するとチェックがはずれます
  • その状態で変形すると、選ばれていない端の点に近いほど、変形の程度がゆるくなります。

8.なめらかにする

  • 図形をえらんで中心の+メニューの中にあります
  • 「なめらかにする」を実行し、マウスを左側に移動させていくと、選んだ部分の点がまるくならびます
  • 「なめらかにする」を実行し、マウスを右側に移動させていくと、選んだ部分の点が直線にならびます

  • 図形の形や選んだ点によっては思ったとおりの効果が得られないことがあります

9.点の結合

  • 図形の点をえらんで中心の+メニューの中にあります
  • 「点の結合」を実行すると、選んだ点に、同じ場所の点が含まれておれば、結合されます。
  • 異なる図形の点を結合しておくと便利です。

  • 図形を移動、変形させたとき、結合した点もいっしょに変形します(選ばれていない図形でも結合された点だけ変形します)
  • 例外として、点選択モードで1点だけ移動したときは、その点だけ移動します。点の位置関係を調整するときに使います
  • 結合した点だけ選んだ場合、中心+メニューは「点の結合解除」になります

10.点の吸着

  • Ctrlキーをおした状態で、点や図形を移動させると、基準点が、既存の点に吸着します。
  • 文字や画像の角、または、四角形の辺の中心にも吸着します。
  • Ctrlキーをおすと、画面左下のシフトボタンの下に赤い線が表示されます
  • 指でシフトボタンをタッチし、そのまま外にドラッグするとCtrlキーを押したのと同じ状態になります(Ver.1.5.11)

  • 回転中心の+を選択した図形の1点に吸着させて、そのあと、+メニューから移動させれば、正確に位置決めができます

11.点の配置

  • 複数の点を選択し、配置メニュー>左右上下によせる(パソコンの場合は調整メニュー>整列)で点を左右上下に整列できます。

 

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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

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

アニメGIF、動画出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要Youtube解説
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒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きゅうべえに関する質問

 

 

アニメーション制作の革命?:9VAeきゅうべえの点選択

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

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

ほかの解説動画はこちら

内容:

 

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

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

操作方法

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

2.獅子舞のイラストの口をあける

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

獅子の口をあける

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


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

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

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

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

 

Capcut(動画編集)

  • SVGを読み込めません

Canva(動画編集・プレゼンテーション)

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

Impress(プレゼンテーション)

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

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

3.9VAeの選択

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

  • 図形の選択
  • 図形内部の点の選択(点選択、点の追加)
  • 複数ページの選択

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

  • 図形をタッチすれば1つ選択。なにもないところのタッチで選択解除
  • 外側から四角形でドラッグすれば、接触した図形が全部選択されます
  • シフトキー(シフトボタン)を押しながら選択すれば、追加選択・選択解除になります。
  • シフトキー(シフトボタン)を押せば、今選択されている図形の輪郭線が反転します

  • 図形の数が多くなると選択が難しくなります。9VAeは、選択状態も「元にもどす」「やりなおす」ができます

 

4.点選択モード

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

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

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

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

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

点選択にする:「+」メニュー>点の修正

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

点を選ぶ

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

点を選んで点選択ボタン

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

  • もう一度点選択ボタンをおせば、通常の図形選択モードに戻ります

5.点の移動

1点の移動

  • 指で1点だけ選んだ場合、選んだ点のまわりに枠がつきます。

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

点の連続修正

  • 複数の点を選択し、選択枠中心の「+」のメニューから「点の連続修正」を実行すると、点の連続修正モードになります。

  • マウスでは、選んだ点がホバー状態になり、マウスボタンで、点の位置を、ひとつずつ確定していきます。位置決めする点のまわりに円のしるしがつきます。選んだ点の形を修正するときに便利です
  • 指で操作している場合は、画面のどこかをドラッグして移動させます。指をはなすと円のしるしがついた点の位置が、順番に確定していきます。

点の吸着

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

6.点の結合

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

 

7.まがった点□、とがった点△

  • 折れ線や多角形の制御点には、まがった点□と、とがった点△の2種類があります。

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

8.点の追加削除モード

点の追加

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

  • 点の追加削除ボタンで、点選択モードにはいった場合は、線の上をタッチすると、その場所に点が追加されます

 

点の削除

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

  • 前後のページとつながっていない図形は、点選択ボタンでもし、点を選んで削除ボタンを押せば、点を削除できます

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

  • 点の削除には特別なオプションがあります
  • ドーナツのように穴のあいた図形の穴の点と、外側の点を同時に選択し、シフトキーを押しながら、削除ボタンを押すと、点を削除し、その部分で外側の輪郭線と穴の輪郭をつなぎます

  • 画像をスキャンしてつくられたSVGイラストには、穴のあいた図形が多くふくまれており、この処理が必要になることがあります

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

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

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

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

  • つながった図形の点を選んで、点の置き換えを実行した場合、つながった図形の点がすべて置き換えられます

 

 

 

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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

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

アニメGIF、動画出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要Youtube解説
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒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きゅうべえに関する質問

 

 

9VAeきゅうべえの「つながった図形」「ゴースト」「背景」とは

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

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

ほかの解説動画はこちら

内容:

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

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

操作方法

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

2.つながった図形

つながった図形とつながっていない図形

  • 9VAeは、ベクトル方式のモーショングラフィックアプリで、複数の図形を重ねて絵をつくります。(ベクトル方式とビットマップ方式の違いはこちら)
  • 各ページの図形は、前後のページに「つながった図形」と「つながっていない図形」の2種類があります。
  • 前後のページにつながった図形は、再生するとなめらかに、形や色が変化します。
  • つながっていない図形を再生すると、ページが切り替わる瞬間に絵がかわります。つながった図形とつながっていない図形を上下に並べたアニメを示します

つながった図形の作り方:続きのページをつくる

  • つながった図形をつくる最初の方法は「続きのページをつくる」です。最後のページの右側の「+」をタッチし、メニューから「続きのページをつくる」を実行します。最後のページが複製され、すべての図形が前のページとつながった図形になります。

つながった図形の作り方:前につづいたページをつくる

  • 同様の方法で、「前につづいたページをつくる」があります。先頭のページを複製し、先頭に追加します。すべての図形が2ページとつながった図形になります。

つながった図形の作り方:記憶したページを入れる

  • ページの途中につながった図形をつくる方法です。ページの番号をクリックし、「ページを記憶する」で、そのページの内容が「きおくツール」にはいります。ページの間のメニューから「記憶したページを入れる」で、きおくツールの中の図形がはいった新しいページが作られます。その後、前後のページをサーチし、きおくツールとつながった図形があれば、リンクでつなぎます。

つながった図形の作り方:きおくツール>ステージにもどす

  • 記憶したページを入れるは、新しいページを追加しますが、新しいページをつくらずに、きおくツールの内容をコピーする命令が、記憶ツールの下にある「←」ボタンです。
  • メニューには「ステージにもどす」と「複製する」の2通りありますが、「ステージにもどす」をつかうと、コピーしたあと、前後のページをサーチし、つながる場合は、つながった図形になります。

  • なお、つながった図形は、同じページに2つ以上存在することはできません。つながる図形がすでに画面に存在する場合は、「置き換えてよいですか?」の確認が出ます。「はい」で図形が置き換えられます。この方法は、ほかのページにあるつながった図形と同じ形にもどしたいときに使えます

  • 「複製する」の場合は、つながっていない図形がコピーされます

つながった図形の作り方:前(後)のページにリンクコピー

  • 図形を選択したあと、Undoボタンの上にある緑色「←□」「□→」ボタンを押せば、前(後ろ)のページに選択した図形をコピーされ、つながった図形になります。

  • つながった図形は、同じページに2つ以上存在できません。コピー先のページに転送できる図形がひとつもない場合、「置き換えてよいですか?」の確認が出ます。
  • 図形を選択したときに表示される選択枠の中心の「+」メニューに「次ページにリンクコピー」があります。これは「□→」ボタンと同じです

前後のページにリンクコピーの特別機能(おすすめ)

  • 前後にリンクコピーするときに、前後につながっている図形をいっしょに選択してリンクコピーすると、つながった図形の位置、サイズに変更されて、リンクコピーされます
  • この機能は、位置やサイズが変化するつながった図形にあとから図形を追加するときに便利です。普通のリンクコピーは同じ位置、サイズでコピーされますが、つながった図形をいっしょに選んでリンクコピーすれば、その図形の位置、サイズに変更されてコピーされます。

つながった図形の作り方:中間ページをつくる

  • 前後につながったページの間のメニューに「中間ページを作る」があります。間にページが追加され、図形はすべて、前後につながった「ゴースト」になります。(ゴーストは次の項目で説明します)

つながった図形を選ぶ

  • つながっている図形を選んで、選択枠中心の「+」をタッチしてメニューから「つながった図形を選択」を実行すると、前後のページのつながった図形を選択できます。
  • つながった図形の色を変更したり、位置を変更したり、複製したりできます

つながっていない図形を後からつなぐには(0秒のページを使う)

  • つながっていない図形をあとからつなぐ方法はありません
  • つながっていない図形をつながっているように見せる方法はあります。それは0秒のページをつかうことです。

  • 図形A と 図形Bが前後のページでつながっていないとします。このときページAをきおくツールにコピーし、AとBの間に「記憶したページを入れる」でページを追加します。追加したページの図形a は、前のページの図形Aとつながっています。
  • この状態で、追加したページの時間を0秒にします。その後、図形a をできるだけBと同じようになるように修正します。これはぴったり一致させる必要はなく、できるだけ似た形にすればよいです。
  • 再生すると、Aからaになめらかに変化し、Bに瞬間的に切り替わるため、AとBがつながっているように見えます 

3.ゴースト

  • ゴーストは、前後につながった図形の特別な形式で、自分自身の形をもたない図形です。ゴーストの形は、つがながった図形とページの時間によって決まります

ゴーストの作り方:中間ページをつくる

  • ページ間をクリックしてメニューから「中間ページをつくる」を実行すれば、新しいページが追加され、すべての図形が前後につながったゴーストになります。


  • ゴーストは自分自身の形をもっていません。ページの時間に応じた、中間の形になります。前後のページ形やページの時間を変更すれば、ゴーストの形はかわります。
  • 図形が、A→ゴースト→B のようにつながっていた場合、Aのページの時間が短くなると、形はAの形に近づきます

ゴーストを変形して形を修正する

  • ゴーストを修正すれば、実体になります。

  • アニメーションがうまくうごかなった場合、変な動きをする部分で、中間ページをつくりましょう。変な形のゴーストを修正すればよいです。

ゴーストの作り方:調整メニュー>あいだの形にする

  • 前後につながった図形を選択し、調整メニューから「あいだの形にする」を実行すると、選択した図形の中で、ゴーストにできる図形(つながった図形のある図形)がゴーストになります。

  • ゴーストは、移動、変形するか、クリックすれば実体に戻ります

4.背景

  • 9VAeには「背景」ページがあります。背景ページに描いた図形は、それ以降のページの背後に描かれます。別の「背景」ページがあると、背景が切り替わります。
  • 背景をやめる場合は、何も入っていない背景ページをいれます
  • 動かない画像は背後にある場合は、背景ページにいれれば、データサイズが小さくてすみ、編集操作も軽くなります

グリーンの背景を入れる

  • 「グリーンの背景を入れる」を実行すると、ページ全体の大きさの緑色の四角形がはいった背景ページができます。グリーンバックの動画素材をつくるときに便利です

背景スクロール

  • 背景に「スクロール」という青い矢印を入れれば、背景がスクロールします。
  • 矢印の向きを水平にすれば水平スクロール、垂直にすれば垂直スクロールします。
  • 矢印の長さを長くするとスクロールが速くなります。
  • スクロールにどの状態が表示されるか、再生環境によってかわるため、スクロールした画面に同期したアニメを作るのは推奨されません(動画出力すれば問題ありません)

 

5.スクロールバー

  • プレイボタンで再生すると、形が変化するアニメーションがみえますが、ページの下にあるスクロールバーを左右にドラッグすれば、すきなページの間の変化する様子がみえます
  • 下に何ページを再生しているか表示されるので、どこのページを修正するかのヒントになります

6.動かない図形が残るのはなぜ

  • ページが3ページあって、つながった図形A→B→C、と変化するとします。 図形Aの上につながった図形AA→BBを作ったとしましょう。これを再生すると、図形BがCに変化する間、図形BBが画面に残ってしまうのです。
  • 図形BBは2ページが表示されるあいだ、BBの位置に存在するので、そのようになるのですが、AA→BBに変化する間だけ表示してほしいこともあります。そのようにする方法を説明します

画面に残る図形を消す:調整メニュー>このページで消える

  • 2ページの図形BBをえらんで、調整メニューから「このページで消える」を実行します。プレイボタンで再生すると、図形が消えるはずです。
  • 図形を選んで、調整メニューから「次ページまで表示」にすると元に戻ります

画面に残る図形を消す:0秒のページを入れる

  • 2ページをきおくツールにコピーし、2ページと3ページの間に「記憶したページを入れる」で入れます
  • 追加したページから図形BBを消去します。
  • 図形BBがはいった2ページの時間を0秒にします

 

 

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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

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

アニメGIF、動画出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要Youtube解説
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒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きゅうべえに関する質問