トレス動画は9VAeきゅうべえで作ると絵を描く枚数を減らせる

9VAeを使って動画をトレスする方法を説明します。イラストを動かす方法はこちら。9VAeアンドロイド版でもPC版、iPad/iPhone版でもつくれます。しゃべる解説はこちら。

他のアニメの作り方はこちら。9VAeの質問はこちら。

内容：

 

トレス動画は、動画をキャプチャし、全コマ手書きでトレスするのが基本です。以下の１４秒の動画は、秒２４コマなら、３３６コマも、絵をトレスする必要があります。

ところが、9VAeなら、キーフレームだけトレースし、中間は自動で中割りできます。この動画を６コマのトレスで作る方法を説明します。

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

• Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Win / Mac / Linux：無料ソフトでアニメを作ってみよう - Qiita
• Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
• 9VAeのボタン説明、メニュー/キー

9VAeきゅうべえの使い方

 

メモ： スマホの場合は、Bluetooth マウスやペンを使うと操作しやすいです。キーボードがあるとショートカットキーが使えます。

 

１．トレスしたい動画１カットからキーフレーム画像を選ぶ

最初の14秒の動画から以下の６枚の絵を選んでキャプチャしました。下の時間は選んだコマが再生される時間です。トレスを試してみたい場合はご使用ください。画像サイズは、２８０ｘ２１０です。２秒トレスするのに２時間くらいかかります。

1. 

   ０秒

2. 

   ２秒

3. 

   ５秒

4. 

   ６秒

5. 

   ８秒

6. 

   １３秒

 

以下の 図のABCDEの順番に操作していきます。

 

２. キーフレームのコマを読み込み、再生時間を設定

1. 絵・写真入力ボタン（上図A）をクリックし、最初のコマを入力(Android版の場合はこちらを参照)。もし画面サイズがあわなかったら、ページメニュー＞ページ設定（スマホの場合は、ファイル＞ページ設定）で画面サイズの縦横を画像サイズ（上のサンプル画像は２８０ｘ２１０）に合わせてください。
2. ページの右側の「＋」（上図B）をクリック。メニューから「空白ページを作る」。新しいページができるので、順番にトレスする原画を入れてください。
3. 原画をいれたらページの時間（上図C）を設定しましょう。この部分をクリックし、そこに入れた原画の再生時間から次の原画の再生時間までの時間を設定します。
4. 再生ボタン（上図D）を押せば、原画が正しい時間に再生されます。この上にトレス画像を追加していき、なめらかに動く動画にかえていきます。

 

３．背景ページ作成し、最初の原画を背景ページに入れる

1. 先頭ページの左側の「＜」（上図E）をクリック。「背景ページを入れる」をクリック。先頭に背景ページができます。
2. ２ページ（下図F）をクリックして２ページに移動
3. 原画（下図G）をクリックして選択。図形を切り取るボタン（下図H）をクリック。原画がクリップツールに切り取りされます。
4. 背景ページ（下図I）をクリックして移動
5. 図形を取り出すボタン（下図J）をクリック。メニューから「ステージにもどす」をクリック。背景ページに原画がはいります。

 

４. 左の雲をトレス

• 背景ページの原画の上を9VAeきゅうべえでなぞっていきます。
• 9VAeは図形エディタなので、重なり順序が重要です。あとから重なりを変更できますが、なるべく背後にあるものからトレスしていきます。

 

1. ２ページ（上図F）をクリックして２ページに移動。背景ページが見えます。
2. わかりやすいように線の色（下図K）をクリックして、赤色にします。
3. まず、左上の雲をトレスしてみましょう。画面左下の「＋」（下図L）で画面を拡大できます。パソコンの場合、スペースキーを押しながら画面をドラッグすれば拡大位置を変更できます。スマホではピンチイン、ピンチアウト、２本指ドラッグが使えます。
4. トレスは折れ線（下図M）を使ってみてください。
5. 下図の△□で表示されている点が入力した点です。△がとがった点、□が曲がった点を表します。この２つは右側のパレットの「コーナー、カーブ」（下図N）または、シフトボタン（下図O）で切り替えられます。
6. 折れ線入力では、最初に入力した点をクリックすれば図形入力がひとつ完了します。
7. 間違えたときは、Undoボタン（下図P）で戻してください。点選択ボタン（下図Q）をクリックすれば下図のように入力した点が表示されるので、点を選んで位置を修正したり、△、□を変更できます。

 

５．雲を複製して影を入力

 

1. 選択ボタン（下図R）をクリック。選択枠を表示させます。
2. 下のシフトボタン（下図S）をクリック。選択枠中心の「＋」（下図T）をクリック。メニューから「複製する」をクリックします。シフトが押された状態で「複製する」を実行すれば、同じ位置に複製されます。パソコン版の場合はシフトキーを押しながら「複製する」をクリックしても同じです。
3. 点選択ボタン（下図U）をクリック。点が表示されるので点をドラッグして移動させ、雲の影をつくります。

雲の影を入力した状態を下図に示します。

 

６. 雲の影の色、雲の色を設定、パレットに登録

1. カラーパレットの色１（下図V）をクリック。「画面から色を選ぶ」をクリック
2. 雲の影の色（下図W）をクリック。雲の影の色が塗られます。
3. 登録ボタン（下図X）をクリック。雲の影がパレットに登録されます。
4. 雲（下図Y）を選択
5. カラーパレットの色１（下図V）をクリック。「画面から色を選ぶ」をクリック
6. 雲の色（下図Z）をクリック。雲の色が塗られます。
7. 影が登録されたパレット（下図a）をクリック。メニューから「追加登録する」をクリック。これで雲がパレットに登録されました。

 

７. 雲を複製し、別の雲をつくる

1. 登録された雲（上図a）をクリック。メニューから「選択する」をクリック
2. これで雲が選択されます。選択枠の中心の「＋」をクリック。メニューから「複製する」をクリックこれで雲が複製されます。
3. 登録された雲（上図a）をクリック。メニューから「追加登録する」をクリック
4. 画面左下の「ー」（下図ｂ）をクリックして倍率を下げます。
5. 選択枠をドラッグして右側の雲の上に移動。
6. 登録された雲（下図ｃ）をクリック。メニューから「下と重ねる」をクリック。これで背景が透けて見えるようになります。
7. 点選択ボタン（下図ｄ）をクリックし、雲の形を背景に合わせます。
8. 完成したら、もう一度複製し、上の雲を作ります。

 

８. 左下の家をトレス

1. 左下の家をトレスしました。折れ線入力（下図ｅ）を使って、家の向こう側の図形から入力していきます。
2. 全部入力が完了したら、今度は手前の図形から順番に、塗り色（下図ｆ）から「画面から色を選ぶ」を使って色をつけていきます。
3. 完成したら家全部を選んで、登録パレットの「＋」（下図ｇ）をクリックしてパレットにまとめておきます。

９. 後ろの山をトレス

1. 後ろの山をトレスしました。
2. 入力が完了してから重なりを下にするボタン（下図ｈ）を何回かクリックし、家よりも背後にしました。
3. 下図は、登録パレットに登録したあと、ボタン（下図ｉ）をクリックし「下と重ねる」設定して背景と重ねて見せています。

 

10. 後ろの髪、首、顎の下の影をトレス

 

11．服をトレス

1. 服をトレスしました。
2. 山が邪魔になるので、登録されたパレット（下図ｊ）をクリックし「隠す」にして見えなくしました。

 

12．顔をトレス

1. 顔をトレスしました。
2. 邪魔になるパーツは、登録パレットから「隠す」設定して見えなくして作業します。
3. 肌の色、髪の毛の下の影の色は画面から入力しました。

 

13．左目をトレス 

1. 左目をトレスしました。
2. 瞳は円ボタン（下図ｋ）、眉毛は折れ線ボタン（下図ｌ）で入力しました。
3. 顔は、登録パレット（下図ｍ）を「隠す」設定にして、見えなくしています。

 

14．左目を複製し、右目に形を合わせる

1. 右目は左目を複製し、変形して作成しました。
2. 画面から色を取得してつけました。

 

15．髪の毛をトレス、線の色を黒、または、なしに変更

1. 髪の毛をトレスしました。
2. トレス作業中、邪魔になるパーツは登録パレットで「隠す」設定にして作業しました。
3. トレスした髪の毛は「＋」ボタン（下図ｎ）をクリックし登録パレットに登録しました。
4. その後、各図形を選択し、線の色（下図ｏ）をクリックし黒色にするか、線の種類（下図ｐ）をクリックし「なし」に設定しました。
5. 最後に登録パレットの設定をリセットするボタン（下図ｑ）をクリックし、「隠す」設定を解除した状態が下図です、

 

16．背景の画像を次のキーフレームの画像と入れ替える

1. 背景ページ（上図ｒ）をクリックして背景に移動
2. 画像をクリックして選んで、切り取りボタン（上図ｓ）をクリック。画像が記憶ツールに移動します。
3. ２ページ（上図ｔ）をクリックして２ページに移動
4. 取り出しボタン（上図ｕ）をクリック。メニューから「ステージに戻す」をクリック。画像が２ページに戻ります。
5. ３ページ（上図ｖ）をクリックして３ページに移動
6. 画像をクリックして選んで、切り取りボタン（上図ｓ）をクリック。画像が記憶ツールに移動します。
7. 背景ページ（上図ｒ）をクリックして背景に移動
8. 取り出しボタン（上図ｕ）をクリック。メニューから「ステージに戻す」をクリック。３ページの画像が背景に入ります。
9. ３ページ（上図ｖ）をクリックして３ページに移動。背景が背後に見えます。

 

17．２ページのトレス画像を３ページにリンクコピー

1. ２ページ（上図ｗ）をクリックして移動。
2. 編集メニュー＞選択する＞全て（スマホの場合は「編集メニュー＞すべて選択」）。
3. 次のページにリンクコピーするボタン（上図ｘ）をクリック。これで２ページの図形が全て３ページにリンクコピーされます。リンクコピーされた図形は、変形したときに途中の形が自動補間されます。
4. これで、３ページに２ページの図形がコピーされ、下に背景の原画が見える状態になりました。
5. 下図では、登録パレット（下図ｚ）をクリックし、「下と重ねる」にチェックを入れています。

 

 

18．雲の形を原画に合わせて変形

1.  画面左下のシフトボタンをクリック（もしくはキーボードのシフトキーを押しながら）雲の登録パレット（下図A）をクリック。メニューから「全部隠す」にチェック。これで登録された図形が全部見えなくなります。
2.  画面左下のシフトボタンをもう一度クリック（もしくはキーボードのシフトキーをはなして）雲の登録パレット（下図A）をクリック。メニューから「隠す」のチェックをはずす。これで雲だけ見えるようになります。
3. 雲の登録パレット（下図C）をクリックし「下と重ねる」にチェック。これで雲が原画と重なって見えます。
4. 雲の登録パレット（下図C）をクリック。メニューから「選択する」をクリック。これで雲が選ばれます。
5. 点選択ボタン（下図D）をクリック。雲の点が表示されるので、原画に合わせて変形していきます。
6. １点ずつ移動することもできますし、下図のように複数の点を選んで、選択枠の辺のハンドル（下図E）をドラッグしてまとめて引き伸ばすと効率よく変形することができます。

 

19．家を原画に合わせる

 

20．服、首、背景の山を原画に合わせる

 

21．顔を原画に合わせる

1. 顔を原画に合わせます
2. 拡大して、ていねいに点の位置を調整していきます。
3. 点の一部を選んで、もう一度点選択ボタン（下図F）をクリックすれば、その点を含んだ図形の点だけ表示されるので、修正しやすくなります。
4. 点の数がたらなくて形が合わせられない場合は、点追加ボタン（下図G）をクリックすれば点を追加できます。
5. プレイボタン（下図H）を押して動きを確認しながら調整してください。２ページの原画を選んで、重なり順序を下げるボタン（下図I）をシフトキー（下図J）といっしょにクリックすれば、原画が一番下になり、２ページから３ページまでトレスした図形がなめらかに動きます。

22．３ページにあって、２ページにない雲を複製して作る

 

1. ３ページの上の雲は、２ページにはなかったので、３ページの雲を複製してつくります（下図□△）。
2. 追加する雲ができたら、選択ボタン（下図K）をクリックし、シフトボタン（下図L）をクリックし、２ページにもある雲（下図M）を左からドラッグして追加選択します。これで、新しく追加した雲と、２ページにリンクした雲の両方同時に選択した状態にします。
3. 前のページにリンクコピーするボタン（下図N）をクリック。これで、新しく追加した雲がいっしょに選択した２ページにある雲に合わせた位置にコピーされます。

 

 

23．ここまでトレスした結果

ここまでトレスした結果は、以下のように２秒のアニメーションになります。０秒の原画をトレスし、２秒の原画にあわせて変形したわけですが、これで、２秒分、すなわち秒２４コマなら４８コマ分トレスしたことになります。

あとの作業のポイントをまとめると次のようになります。

1. リンクコピー（上図O）を使ってトレスした図形を次の原画にコピーする
2. 原画は背景ページに移動させる
3. 登録パレットの「下と重ねる」「隠す」を有効に使う
4. 画面を拡大し、背景にあわせて点を移動させる
5. 図形の一部の点を選び、点選択ボタンをクリックすれば、その図形の点だけ表示されるので有効に使う
6. 点が少なくて形が修正できないときは、点の追加を使う

 

今回説明していないテクニックもあげておきます。

1. うまく補間できない場合、中間ページを作成して修正できます。
2. 正確な回転、パスにそった動きは、アニメキャストを使います。（例１、例２）
3. 背景が動かない口パクは動きグラフをつかえば少ないコマで表現できます。（例３、例４）
4. １つの図形が２つに別れるといった場合、０秒のページをいれて別の図形（リンクしていない図形）に切り替えます。

24．アニメGIF / 動画(MP4)出力

• 「ファイルメニュー＞アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4å‹•ç”» が作成できます。
  Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要。Youtube解説
• スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
• アニメGIFは、背景を透明にできます。音がいれられません。
• MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、１秒30コマ、高さ720 または 1080 で出力するとよいでしょう。
• パソコン版の場合、最初に保存場所、ファイル名を指定します。デスクトップなど、わかりやすい場所に作成してください。
• Androidの場合、完成したファイルは、端末内の「9VAe」フォルダの中に、指定した名前で出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。

 

25．9VAeきゅうべえでトレス動画を作る利点

9VAe上で原画をトレスするのはそれなりに時間がかかりますが、

• 最初の絵のトレスには時間がかかるが、２枚目以降はコピーして変形するので手間がかからなくなる。
• 後からいくらでも細かい修正ができる。
• 完成した後で、秒間のコマ数、再生画面サイズを自由に調整できる。
• キャラクタパーツだけ取り出したり、差替えたり（下例）、いろんな応用展開ができる。
• 下の表にあるように、いろんなフォーマットで動画クリップを出力できる。

といったメリットがあります。

 

9VAeトレスの例：?VAの出撃シーンをトレスしてキャラクタを差替え

 ４４秒キーフレーム８０枚。９ページ以上のアニメを作る方法はこちら

 

9VAeをつかえば動画クリップがすぐ作れる 

• 9VAeは各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。

アプリ	クリップ形式	作り方
PowerPoint LibreOffice Keynote	アニメGIF	背景を透明にして出力
iMovie PowerDirector	グリーンバック動画	先頭に背景ページをいれ、緑色の四角を入れる
AviUtl	連番PNG	背景を透明にして出力

 

9VAeは他のアプリと比較して以下の特長があり、素材作成に適しています。

Â	9VAeきゅうべえ	他のアプリ
方式	図形のすべての点の対応関係をもったベクトル方式	タイムラインに画像を並べるビットマップ方式
修正	形を後から自由に修正できる	画像を描き直す
補間	変形した形はなめらかに変化する	形の補間はできない
データ量	中間がないので小さい	何枚も画像が必要で重い
階層化	9VAeの中に３０階層まで9VAeがはいる。全て編集できる	できても１階層中身は同時に編集できない

 

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

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。