Easily create animation traced over video with 9VAe

13 min readFeb 5, 2020

This tutorial explains how to trace over a video using 9VAe. You can make this using 9VAe for Android, PC and iPad/iPhone. To learn how to make other animations, please click here.

For trace over videos, the basic method is to capture the video and trace all frames by hand. For example, for the following 14-second video, 24 frames per second,you have to trace 336(=14x24) frames.

With 9VAe, however, you can trace only the key frames and automatically interpolate the intermediate frames. So you can greatly reduce the number of pictures to be traced. With this video, you can recreate it in just 6 frames of tracing. Another advantage is that you can make as many corrections as you want later.

Download 9VAe

You can download the free software 9VAe below.

Win/Mac/Linux：9VAe Lab
Android：9VAe Android (Google Play)
iPad / iPhone：9VAeDanga (Apple)
Amazon Fire : 9VAe Fire (Amazon)

1. Select within 8 key frame images from a video that you want to trace.

I selected the following six pictures from the 14-second video capture above . The time below is the time when the selected frame will play. Use them if you want to try tracing image. The image size is 280x210. 2 seconds of tressing can take from 2 to several hours.

2. Read the key frame images and set the playback time

Click on the picture/photo input button (shown in A above) and enter the first image. If the screen size doesn’t match, go to Page Menu > Page Setup (on a iPhone/Android, go to File > Page Setup) to adjust the screen size to the image size (the sample image above is 280x210).
Click on the “+” on the right side of the page (see above B). From the menu, click “Add blank page”. A new page will be created and you can put the original images to be traced in order.
After inserting the original image, set the time for each page (Figure C above). Click on this part and set the time duration between the original image and the next one.
Press the play button (D above) and the original image will be played back at the correct time. Add a traced vector image on the original image and replace it with a smooth moving movie.

3. Create a background page and add the first original image to the background page

Click on the “<” (E above) on the left side of the first page. Click on “Add Background Page”. A background page will be created at the top of the page.
Click on page 2 (F below) to go to page 2
Click on the original image (G below) to select it. Click on the Cut button (H, below) to cut the image. The original image will be cropped in the Clip tool.
Click on the background page (Figure I below) to go
Click on the “Extract Figure” button (J below). Click on “Paste to the Stage” in the menu. The original image will be moved to the background page.

4. Trace left cloud.

Trace over the original picture on the background page with 9VAe .
9VAe is a graphic editor, so the order of overlap is important. You can change the overlap later, but you should better trace from behind as much as possible.

Click on page 2 (Figure F above) to go to page 2. You will see a background page.
To make it easier to distinguish, click on the color of the line (K, below) and change it to red.
First, let’s trace the cloud in the upper left corner. You can zoom in by pressing the “+” button at the bottom left of the screen (L below). On a PC, you can change the magnification position by dragging the screen while holding down the spacebar. On iPhone/Android, you can pinch in, pinch out, and two-finger drag.
Try using a polygonal line (M below) for tracing.
The point marked with a triangle in the diagram below is the input point. A triangle indicates a sharp point and a square indicates a curved point. You can switch between the two points with pressing the “Shift” button (O below). These two points can be selected and switched by pressing the “Corner, Curve” button (N below) .
To enter a polygonal line, just click on the first point you enter to complete the shape entry.
If you make a mistake, click the Undo button (P below) to return to the original point. If you click on the Select Point button (Q), the point you entered is displayed as shown in the picture below. You can correct the position, change the Curve and Corner point.

5. Duplicate the cloud and enter the shadow

Click the Select button (R below). The selection frame is displayed.
Click the shift button below (S below). Click the “+” button in the center of the selection frame (T below). Click on “Duplicate” from the menu. If you click “Duplicate” while holding down the Shift key, the image will be duplicated in the same location. In the PC version, holding down the Shift key and clicking on “Duplicate” will duplicate the image in the same position.
Click the point selection button (U). Drag a point to move it to create a cloud shadow.

The figure below shows a cloud shadow input.

6. Set the cloud shadow color and cloud color, and add them to the palette

Click on color 1 in the color palette (V below). Click on “Picup Screen”.
Click on the color of the cloud shadow (W, below). The color of the cloud shadow will be painted.
Click the Register button (X below). The cloud shadows are added to the palette.
Select the cloud (Y below)
Click on color 1 in the color palette (V below). Click on “Picup Screen”.
Click on the cloud color (Z below). The color of the cloud will be painted.
Click on the palette where the shadow is registered (Figure a). Click “Add to Time Group” from the menu. Now the cloud has been added to the palette.

7. Duplicate a cloud and create another cloud

Click on the registered cloud (a). Click on “Select” from the menu.
This will select the clouds. Click on the “+” in the center of the selection frame. Click on “Duplicate” in the menu to duplicate the cloud.
Click on the registered cloud (a). Click on “Add to Time Group” in the menu.
Click the “-” button at the bottom left of the screen (b below) to decrease the magnification.
Drag the selection frame to the right side of the cloud.
Click on a registered cloud (figure c below). Click on “Through” from the menu. Now you can see the background through the clouds.
Click on the point selection button (d below) and adjust the cloud shape to the background.
When you’re done, duplicate it again to create the cloud above.

8. Trace the house on the lower left.

Trace the house in the lower left corner. Using the line input (e below), start with the shape on the backside of the house.
After you completed all the input, add the color to the shape in order starting from front using “Pickup Screen” from the fill color (f below).
When you finished, select the entire house and click on the “+” in the palette (g below) to group them together in the palette.

9. Trace the mountain behind.

Trace on the mountain behind.
After completing the input, click the button to lower the overlap (h below) several times, making it behind the house.
下図は、登録パレットに登録したあと、ボタン（下図ｉ）をクリックし「下と重ねる」設定して背景と重ねて見せています。

10. Trace the hair in the back, the neck, and the shadow under the chin.

11. Trace clothing.

Trace on the clothes.
Make mountains invisible by clicking on the registered palette (j below) and setting it to Hide.

12. Trace face

Trace the face.
The parts that get in the way should be set to “hide” from the registration palette to make them invisible.
The skin color and the color of the shadow under the hair were entered from the screen.

13. Trace left eye.

Trace on the left eye.
Input the eyes with the circle button (k below) and the eyebrows with the line button (l below).
The face is hidden by setting the registration palette (m below) to “Hide”.

14. Duplicate the left eye and adjust the shape to the right eye

The right eye was created by duplicating and transforming the left eye.
Pickup the eye color from the screen and put it on.

15. Trace the hair and change the line color to black or none

Trace hair.
Hide other parts with the “hide” setting in the registration palette for parts that would get in the way.
The traced hair is added to the registration palette by clicking the “+” button (n) as shown below.
Then selected each shape and set the color of the line to black by clicking on the color of the line (o, below) or the type of line (p, below) and set it to “None”.
Finally, click on the Reset button (q below) to reset the settings of the registration palette and deactivate the “Hide” setting, as shown below.

16 Replace the background image with the next key frame image

Click on the background page (r above) to move to the background.
Click on the image to select it and click the Cut button (s above). The image will be moved to the Memory Tool.
Click on page 2 (above t) to go to page 2
Click the Paste button (u above). Click on “Paste to the Stage” from the menu. The image will return to page 2.
Click on page 3 (v above) to go to page 3
Click on the image to select it and click the Cut button (s above). The image will be moved to the Memory Tool.
Click on the background page (r above) to move to the background.
Click on the Paste button (above image u). Click on “Paste to the Stage” from the menu, and the image on page 3 will appear in the background.
Click on page 3 (v above) to go to page 3. You will see the background.

17. Link copy of the traced image on page 2 to page 3

Click on page 2 (shown above W) to go to.
Edit Menu > Select > All (or “Edit Menu > Select All” on iPhone/Android).
Click on the link copy button (x above) to the next page. This will copy the entire figure from page 2 to page 3. The link-copied shapes will be automatically interpolated when you transform them.
Now the figures on page 2 has been copied onto page 3. The original image will be visible at the bottom.
In the figure below, click on the registration palette (z below) and check the “Through” .

18. Deform the cloud shape to match the background

Click on the shift button in the lower left corner of the screen (or hold down the shift key on your keyboard). Click on Clouds registration palette (A below). Check “Hide All” in the menu. This will hide all the registered graphics.
Click on the shift button in the lower left corner of the screen again (or release the shift key on your keyboard) . Click on Clouds registration palette (A below) . Uncheck “Hide” in the menu. Now only the clouds will be visible.
Click on the Clouds registration palette (C below) and check “Through”. Now the clouds will appear to be superimposed on the original image.
Click on the Cloud Registration Palette (C below). Click on “Select” from the menu. The cloud will now be selected.
Click the point selection button (D below). The cloud points will appear on the screen, and you can transform them to match the original image.
You can move them one by one, or you can select multiple points and drag the handles of the selection frame (E below) to stretch them all together, as shown in the figure below, which is more efficient.

19. Adapt the house to the background.

20. Match the clothing, neck, and mountains to the background

21. Match the face to the original background image

Match the face to the original.
Zoom in and carefully adjust the position of the points.
If you select a part of a point and click again on the point selection button (F below), only the points of the shape containing that point will be displayed, making it easier to correct.
If you can’t match the shape because the number of points doesn’t fit, you can add points by clicking the Add Points button (G below).
Click the play button (H below) and adjust the image while checking the movement. Then, by clicking on the button to lower the overlap order (I below) with the shift key (J below), you can create a The original picture is at the bottom, and the traced shapes move smoothly from page 2 to 3.

22. Make a duplicate of a cloud that is on page 3 and not on page 2

The cloud on page 3 was not on page 2, so duplicate the cloud on page 3 (see below).
When the cloud to be added is ready, click the Select button (K below), then click the Shift button (L below). Select the cloud that is also on page 2 (M below) . This makes both the newly added cloud and the cloud linked to page 2 selected at the same time.
Click on the Link Copy to Previous Page button (N below). This will copy the newly added cloud to the matching position of the cloud on the two pages you selected.

23. Result of tracing.

The result of tracing so far is a 2-second animation, as shown below. We traced a 0-second original image and transformed it to fit the 2-second original image. Now we’ve traced it for 2 seconds, 48 frames!

The rest of the work points can be summarized as follows.

Copy the traced shape to the next page using the link copy (see above, O)
Move the original image to the background page.
Enable “Through” and “Hide” in the registration palette.
Zoom in the screen and move the points to match the background.
Select points on the figure and click on the point selection button to display only that point. Use this effectively.
If there are too few points to modify the shape, add a point.

I’ll also give you some techniques that I haven’t explained here.

If the interpolation doesn’t work, you can fix it by creating an intermediate page.
Accurate rotation and movement along the path is done with AnimeCast.
If you use a movement graph, you can express a lip-synch with fewer frames.
If you want to split one shape into two, you can insert a 0-second page to switch to another (unlinked) shape.

24．Animated GIF export

You can create an animated GIF by going to the File menu > “Animated GIF Export”.
In the case of the PC version, first specify the location and file name. Create the file in an easily understood location such as the desktop.
For iPhone/Android devices, the Animated GIF is stored in the “9VAe” folder in the device’s Inside, it will be output with the name you specify. You can view it in the Photo app under “Photos on Devic > 9VAe”.

25.9 Advantages of Tracing Videos with 9VAe

Tracing the original image on 9VAe takes a fair amount of time, but

It takes time to trace on the first key frame, but the second and subsequent key frames are copied and transformed, so it takes less time and effort.
9VAe is Vector Graphics editor. Minor corrections are very easy.
You can output videos in a variety of formats. Number of frames per second or the picture size of video can be adjusted freely.
You can replace the character parts (see example below). You can reuse the vector data.

There are many advantages.

Example of tracing video and replacing a character with 9VAe:

53-second movie with 99 key frames. How to make a 9+ page 9VAe animation is here.

9VAe Introduction

9VAe Beginner Tutorials

Originally published at https://dnjiro.hatenablog.com on February 5, 2020.