dnjiro’s 9VAe blog

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

ロック解除の素材動画の作り方:ひとコマ解説

無料アプリ9VAeきゅうべえを使って、ロック解除の素材動画を作る手順を説明します。作業時間は15分程度です。



ほかの解説動画はこちら

 

9VAeきゅうべえとは

  • 9VAe は、イラストに動きをつけてオリジナル動画素材が作れる無料のモーショングラフィックスアプリです。この解説も9VAeで作成しました。

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

 

SVGフリー素材イラストを読み込む

鍵のSVGイラストは、以下のフリー素材をつかいましょう。これに動きをつけます。

  1. フリーSVG素材を開いてダウンロードしましょう。
  2. スマホ版9VAeではSVG (Vector)」ボタンを長押しして、SVGのリンクをコピーしましょう。パソコン版ではSVGファイルをダウンロードしてください。
  3. スマホでは、ツールメニュー「ネットからダウンロード」を開きます。、SVGのリンクを貼り付けて実行します。パソコン版ではツールメニュー「9VA/SVG/WMFを入れる」でダウンロードしたSVGファイルを読み込みます。
  4. 読み込んだファイルはアニメキャストという部品になっています。選択枠中心の「+」をクリックし、メニューから「アニメ(の中)を修正」でSVGイラストが修正できます。

・画面の白黒は、表示メニュー「ダークモード」で切り替えられます。

 

続きを作ってパーツ分解

鍵のイラストからフックだけ取り出します。この操作ができるのが 9VAeのすごいところです。

  1. ページ右側の「+」をクリックし「続きのページを作る」。1ページが2ページにコピーされます。
  2. 1ページと2ページの間をクリックし「空白ページを作る」。これで1ページと2ページが切り離されます。
  3. 3ページをクリックして3ページに移動
  4. 鍵を選択します。
  5. 点選択ボタンを押します。鍵の点が表示されます。
  6. フックに不要な下の点を選びます。
  7. 削除ボタンで選んだ点を削除。
  8. フックの穴の下の点を選びます。
  9. 下の「+」ボタンで拡大。
  10. 点追加ボタンを押します。
  11. 線上をクリックして1点追加
  12. 線上をクリックしてもう1点追加
  13. 外側からドラッグして追加した2点を選びます
  14. シフトボタンを押します。キーボードのシフトキーを押してもよいです。
  15. 削除ボタンを押します。シフトを押して削除すると、内側の線と外側の線がつながります。
  16. 不要な点を選びます。
  17. 「+」で拡大
  18. 不要な点を選んで削除
  19. 右側の不要な点も選んで削除します。
  20. 虫眼鏡ボタンで全体が表示されます。


動きをつける

  1. 最後のページの右側の「+」をクリック。「続きのページを作る」。
  2. 表示メニュー「前後のページを重ねて表示」。
  3. フックを選んで選択枠の左辺の「■」をクリック。メニューから「反転」。前のページの表示をみてロック解除の状態にします。
  4. プレイボタンで動きを見てみましょう。

 

背景を作りいらない点を消す

  1. 1ページのページ番号「1」をクリック。メニューから「ページを切り取る」。これで1ページの中身がきおくツールに入ります。
  2. 先頭ページの左側「<」をクリック。メニューから「背景ページを入れる」。先頭ページが背景ページになります。
  3. パレットが消えている場合は右下の「もどす」をクリック
  4. きおくツールの下の貼り付けボタンをクリック。メニューから「複製する」。これできおくツールの中身が背景ページに入ります。
  5. パレットの下をタッチするとパレットが消えます(スマホで画面が小さい場合に使いましょう)。
  6. 「点選択」ボタン。これで鍵の点が表示されます。
  7. フックの穴の点を1点だけ選択。
  8. もう一度「点選択」ボタン。これで、フックの穴だけ選ばれた状態になり、穴の点だけが表示されます。
  9. 「選択」ボタンでフックの穴だけが選択(点選択ボタンでも同じ)
  10. 「削除」ボタンでフックの穴が削除されます。
  11. 鍵を選びます。
  12. 「点選択」で鍵の点を表示
  13. フックの点を選び、「削除」ボタンで削除します。
  14. 不要になった空白ページのページ番号「2」をクリック。メニューから「ページを切り取る」
  15. プレイボタンで再生してみましょう。

 

動きグラフをつける

  1. フックがはいっている2ページをタッチして2ページに移動
  2. フックを選ぶ
  3. パレットが消えている場合は右下の「もどす」をクリック
  4. 右側の「+」で選んだフックを登録
  5. 登録されたフックをクリック。メニューから「ゆっくり動き出すグラフ」。フックに動きをつけるグラフが入力されます。
  6. 画面が小さい場合はパレットの下をクリックするとパレットが消えます。
  7. グラフの線をクリックして点を追加。とがった点△が追加されます
  8. スマホの場合、1点の選択枠の右下をクリック。これで点の形がカーブ(□)に変わります。パソコン版の場合はパレットの「」でカーブ点になります。
  9. プレイボタンで再生してみましょう。グラフの形を変えると動き方が変わります。

素材動画出力

  • ファイルメニュー「アニメGIF出力」で、サイズ、秒コマを指定してアニメGIF動画が作れます。背景を透明に設定できます。
  • ファイルメニュー「動画出力」で、サイズ、秒コマを指定してMP4動画素材が作れます。背景を透明にしたい場合は、先頭ページに「グリーンの背景を入れる」をいれてグリーンバック動画を作成します。

 

 

内容:


解説動画の作り方

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

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

 

  • 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 が必要です
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

 

 

9VAeをつかえば素材動画が作れる 

      • 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
      • Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
      • 動画編集ソフトで動画に合成できます。

OS

フリーソフト

9VAeで作成する素材動画

Windows

AviUtl

連番PNG または MP4

Mac/iPhone/iPad

iMovie

MP4 または QuickTime(古いMac)

Android

PowerDirector

GIF または MP4

作り方

 

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

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

 

 

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