dnjiro’s 9VAe blog

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

アニメーション制作の革命？：9VAeきゅうべえの３D変形

動画 アニメの作り方 おすすめ 解説動画

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

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

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

内容：

 

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

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

操作方法

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

２．9VAeの選択

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

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

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

３．選択枠のハンドル

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

ハンドルのドラッグ

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

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

ハンドルのタッチ

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

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

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

ハンドルメニューの操作

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

４．角のメニュー（拡大/縮小・回転・回転中心）

  • 拡大／縮小：
  • 拡大／縮小＋回転：

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

５．辺のメニュー（のばす・曲げる・・）

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

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

  • 反転：
  • けずる：

６．中心のメニュー（移動・複製・消去）

図形を選んだ場合

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

  • なめらかにする（後述）

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

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

文字を１つ選んだ場合（内容変更・しゃべる・・）

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

画像を１つ選んだ場合（変更・ステージの大きさ・透明・・）

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

７．端をとめて変形、端を弱くとめる

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

８．なめらかにする

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

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

９．点の結合

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

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

10．点の吸着

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

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

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 １秒長押し
  • 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きゅうべえに関する質問

 

Â