How to make a dance animation from SVG with 9VAe

Danjiro Daiwa

21 min readJul 19, 2020

This article shows how to create this animation from SVG by using Free Software 9VAe .

Other Making Animations is here. Click here for 9VAe data.

Download 9VAe

Windows / Mac / Linux: 9vae for PC
iPhone / iPad : 9VAeDangla (Apple)、9VAePro(Apple)
Android : 9VAe for Android (Google Play)
Amazon Fire : 9VAe (Amazon)

1. Download SVG image

Download SVG vector image from Openclipart — WTF Skeleton.

PC (Windows/Mac/Linux)

Click your right mouse button on [Download > SVG(Vector)] .
Click [Save Link As] in the right button menu. (The menu item will be different according to your browser.)
Click [Save] button. Now SVG file will be saved on your PC.
Open 9VAe.
Click [File] on the menu bar > Click [Open]. Select the SVG file.
Select the SVG file. Click [Open].

Android / iOS

Tap and hold on [Download > SVG(Vector)].
Tap ‘Copy (link address)’ on menu. URL address will be copied.
Open 9VAe.
Tap ‘Input’ > ‘Download from Web…’ on the menu.
Tap and hold on http input area. Tap ‘Paste’ to input URL address.
Tap ‘OK’ then the clipart will appear on stage.

Click magnifying glass button (A bellow) in the lower left corner, you will see the whole image.(If you can’t see the magnifying glass on the iPhone’s horizontal screen, touch it in portrait mode. In portrait mode, touch the lower right corner (B bellow) to close the palette and enlarge the screen. (If the background is black, you can switch between black and white by selecting View > Dark Mode.

2. Save the contents of the animated cast

The illustration you have imported will be an animation of the component called “AnimeCast”. If you want to use it as a still image, it is convenient to use it as an AnimeCast, but if you want to add motion, open the contents of the AnimeCast.

Click the “+” in the center of the selection frame (Figure C above). Click the second from the top of the menu “Edit AnimeCast(…)”. The inside of the AnimeCast will open.
Let’s save it as “skeleton.eva” in File > Save As. Save as “.eva” extension for faster saving.
Click on “File > Close” in the menu bar.
Click on the menu bar [File > Open]. Open the “skeleton.eva”.
Break this down into parts.

3. Preparation of parts making

To create a joint animation, let’s break it down into head, arms, body, and limbs. To do so, do the following.

Touch the character (Figure D above) to select it.
Touch the Copy button above the Memory Tool (E above). This will copy your character into the Memory Tool.
Touch the green “+” (F above) on the right side of the page. Click on “Add Blank Page” from the menu. This will create a second page.
Touch the Paste button under the Memory Tool (G below). Touch “Duplicate” from the menu. Now the character is duplicated on the second page. Use [Duplicate] instead of [Paste to the Stage]. If you use [Paste to the Stage], the characters on page 1 and 2 will be linked and you will not be able to delete parts of the character on each page.
Repeat “Add Blank Page” (F below) and “Duplicate” (G below) up to page 8.

4. Delete points to make a part: head

When your character is selected, touch [Select Points] (H above). Now all the points of your character will be displayed.
Let’s keep the head of this page and delete the other points. Drag the screen to enclose all the points except the head, and touch the delete button (Figure I below). The points from the neck downwards will disappear.

3. Touch the Magnify button (J below) several times to zoom in.

4. Select the points on the neck (K below) and press the delete button (L below). The head is now ready.

5. On the iPhone, touch the blank space on the left (M above) to bring up the menu.。

5. Make AnimeCast: head

Click on the magnifying glass button (N in the above figure). Click on the “+” button (O in the above figure). The head will now appear.
Click the Cut button (shown above, P). The head enters the Memory Tool.
Click on the button to make it AnimeCast (see above Q). Change the name to “head” and click OK button. Now the head becomes AnimeCast (part).
Use the button “<” (R above) to go to the previous page 7.

6. Delete points to make a part: left arm

On page 7, I left only the left arm.
I made AnimeCast under the name “leftarm”.

7. Delete points to make a part: right arm

Page 6 left only the right arm.
I made AnimeCast under the name “rightarm”.

8. Delete points to make a part: body

For page 5, I left only the torso.
I don’t make the torso into AnimeCast with the idea of transforming it freely.

(1) Deleting heads: Processing of contour lines

Select some points on the neck (S above) and touch the magnification button “+” (T above) several times.
Touch the point selection button (left or right, as shown U above) which is already pressed. Now the points of the figure that are not included in the selected point will not be displayed and it will be easier to see (see below). Please remember to press the point selection button again, it is very useful.

3. Choose the points above (skeleton teeth, above figure V) and delete them (above W).

4. Next, notice the contour point (X above). It looks like the outer contour shape has been lost due to the removal of the head points. This sometimes happens when you remove points.

5. Then, touch Add Point (Y above) and add a new point (touch the position of Z above).

6. The point you add will be a round corner point. If you select it as shown in Figure a above, and touch the corner button of the palette (Figure b above), it will become a sharp corner point.

(2) Deletion of the foot: Attempted to deal with the hole, but failed.

If we select the point of the foot and the shadow and delete it (c above), the result is as follows. We selected some of the points on the foot (d below) and touched the Add Point button (e below) to make the other points invisible.

2. The black band (f above) is created here because of the donut-like hole. To remove this hole, add a dot in two positions above the black strip (f above).

3. Select the two points you added (see above, g) and touch the “Shift” button in the lower left corner (see above, h) (or hold down the Shift key for the PC version).

4. Touch the Delete button (i above). Shift + Delete at the point of the hole and the outer contour is a special deletion that combines the hole and the outer contour at the position of the selected point. This is a special process, but it is necessary to remove the holes. The result is the following.

5. Nothing has changed. It seems to be the same outline, not the hole and the outline. This makes it difficult to process.

6. “View menu > Show Onion Skin” . The only way to do this is to zoom in on the screen and carefully remove the points on the feet, referring to the overall picture on page 4. The result is the following.

9. Remove points to make a part: right leg thigh

Page 4 left only the right thigh.
I made AnimeCast with the name “right leg”.

10. Delete points to make a part: right foot

For page 3, I left just the right leg below the knee.
I made AnimeCast with the name “right foot”.

11. Delete points to make a part: left foot

(1) How to easily delete unwanted shapes

Here are some techniques for removing shapes.

Select some of the points on the unnecessary shapes (Figure j above).
Touch the point selection button (k above). This removes the selection on the shapes that does not contain the selected points.
Touch the point selection button (k above) again. Now only the unnecessary shapes are selected.
Touch the Delete button (see above, l). Unnecessary shapes are deleted.

12. Delete a point to make a part: left foot

For page 1, I left just the left leg below the knee.
I made AnimeCast with the name “left foot”.

13. Combine AnimeCast. Set the center of rotation, connect the points.

Now that we have the parts, let’s combine them. Let’s make the left leg first.

2. Touch the page number “1” (m in the above figure) of one page. Touch the “Cut Page” button on the menu. The first page will be put into the Memory Tool on the right side of the screen. There are several ways to put the page into the memory tool, such as memorize the page, cut out, copy button on top of the memory tool, and cut button. Use the method you are familiar with.

3. If you click on “Cut Page”, the second page will become the first page. Touch the Paste button (shown above, n). Touch the “Paste to the Stage” button from the menu. The “AnimeCast” in the first page will be added to the next page. (The figure below)

4. When you select both parts and touch the “Select points” button (o in the above figure), the control points will be displayed.

5. The green diamond in the center (shown above, p) is the center of rotation. In the joint animation, the joint rotates at the connection, so drag the green diamond (p above) to the upper center of rotation. (p in the figure above).

6. Next, select the knee connection by enclosing points (selection box below).

7. Touch the “+” in the center of the selection frame (q) and then touch “Connect Points” from the menu. Now a blue circle will appear around the selected points to indicate that they have been connected.

14. Make the right foot the same way.

15. Attach hands and feet to the body

In the same way, attach the arms and legs to the body.
Touch “Cut Page” on the page with arms (legs) > arms (legs) will be in the memory tool
Go to the body page
The “Paste to the Stage” button below the memory tool
Move the center of rotation of the AnimeCast (green diamond) to the connection
For the knee area where the AnimeCasts are connected, select points in the connection area and set the “Connect Points”.
The result is as shown below. The center of rotation of the AnimeCast (green diamond) has been moved to the position indicated by the arrow.

16. Make Animation: Resizing the screen

Increase the page size.
For the smartphone version, “File menu > Page Size”.
The PC version is “Page Menu > Page Size”.

Execute the “Page Size”. Set the size to “1300x1300”. 9VAe allows you to set the size to whatever size you want at the time of output, the numbers don’t matter much, except for the aspect ratio, but it’s easier to edit if you set it below 1600.
Select all the objects and move it to the center. Go to the View menu and select “Show Grid” to see a grid pattern from the center.

3. There is a Base Frame in the upper left corner, but you can ignore it for now.

17. Make Animation: Add Next Page and raise your right hand

Let’s raise the right arm up.

Touch “+” (r above) on the right side of the page. From the menu, touch “Add Next Page”.
Choose your right arm (see below).
Touch the corner handles of the selection frame (any of the four corners, as shown below, s). Touch the “Move Center Point” button on the menu.
Touch the screen to move the center point “+” of the rotation to the shoulder position (t, below).

5. Again, touch the handle at the corner of the selection frame (s above). From the menu, touch “Rotate”.

6. When you drag the screen, your hand rotates around (t in the figure above) and you can raise it up (as shown below).

7. Press the play button (u below) and watch your hand go up.

8. Touch the “+” in the center of rotation (t above). Look at “Rotate around Root ” in the menu. Touch this and change the number to change the angle of your arm. If the value is close to 360 degrees, try changing it to 0 degrees. If the angle is close to 0 degrees, change it to 360 degrees. Press the play button (u above) to confirm that the direction of rotation is changed. This is the basic behavior of joint animation.

18. Make Animation: Raise your left hand

Try to raise your left arm up as well. Keep the center of rotation on your left shoulder and try to rotate it from the outside. Use the play button to see the movement.

19. Make Animation: Page 3 crouches.

Let’s copy page 1 to page 3 and crouch down.

(1) Bend knees.

Touch the page number “1” (see above v) of a page. From the menu “Copy Page”.
Touch the “+” on the right side of the page (see above w). From the menu, “Add Clip Page”.

3. Select the bottom of the left foot and touch “Move Center Point” from the handle in the corner of the selection frame (figure x above) menu. Move the center of rotation to the knee position (y above).

4. Touch “Rotate” from the menu in the corner handle of the selection frame (x above). Bend your knees (above).

5. Select the top and bottom of the left leg and touch “Move Center Point” from the handle in the corner of the selection frame (x in the above figure) menu. Move the center of rotation to the knee position (y above).

6. Touch “Rotate” from the menu in the corner of the selection frame (x above) to rotate (above).

(2) Drag the connected points one by one to adjust them.

Bent the right leg the same way.

However, the shape of the knee has been misaligned (see above). Because the connected points move together, they cannot be repositioned.
If so, select the lower leg and touch the point selection button (shown above z).
You can move a connected points apart by dragging one point at a time (ABC above).

4. Rotate to select the upper and lower legs.

5. Select the all and drag the frame line of the selection frame (D below) to move it down. Use the play button to see how it moves.

20.Make Animation: Let’s take page 4 apart.

Let’s copy page 2 to page 4 and break it apart. Here’s how to unbind the connected points.

Touch the page number “2” (Figure E above) on page 2. From the menu, “Copy Page”
Touch the “+” (F above) on the right side of the page. From the menu, “Add Clip Page”.
Move the head and arms fully away from the body.

4. If you want to make the legs separate as well, you need to break the connected points. To do so, select the leg and touch the point selection button (G above). Select connected points, and then touch the “+” button in the center of the selection frame (H above). Click “Disconnect Points” in the menu.

5. This will allow the legs to move separately, so I broke them apart as follows.

21.Make Animation: Page 5 bends to the left

Let’s copy page 2 to page 5 and bend it to the left.

Touch the page number “2” (Figure E above) on page 2. From the menu, “Copy Page”
Touch the “+” on the right side of the page. From the menu, “Add Clip Page”.

3. Select both hands, head and body at the same time and touch the point selection button (I above).

4. Select the points on the top half of the hands, head and torso, as shown above.

5. Touch the corner handles of the selection frame (any of the four corners, as shown above in K). Touch “Move Center Point” from the menu.

6. Touch the screen to move the center point of rotation “+” to the center of bending the body (L in the above figure).

7. Again, touch the handle at the corner of the selection frame (shown in K above). Touch “Rotate”.

8. As you drag the screen, the upper body rotates around (L, above) and bend the body to the left (above).

9. Let’s try one more thing. Press the Select button to select the whole body, and then touch the “+” (M above) in the center of the selection frame. Touch “Rubber Transform ” from the menu and bend the body a little.

22.Make Animation: Page 6 bends to the right

Let’s copy page 2 to page 6 and bend it to the right.

Touch the page number “2” (Figure E above) on page 2. From the menu, “Copy Page”
Touch the “+” on the right side of the page. From the menu, “Add Clip Page”.
Rotate the upper body in the same way as above, and perform the rubber transformation from the “+” menu in the center of the selection frame (see below).

23. Control by text: Labeling.

Let’s make the characters we have created so far dance to the characters.
To do this, we will label each pose with a single English letter.

On page 6, touch the upper left corner (N in the above figure). Touch “Create/Edit Label” from the menu. Type “L”.
Touch the top left corner of page 5 in the same way. “Create/Edit Label” and type “R”.
Similarly, label page 2 “U”, page 3 “D”, and page 4 “W”. The first page does not need to be labeled (it is internally assigned the “.” label).

24. Control by text: Make AnimeCast

Turn every page into an AnimeCast.

Touch the page number “1” (O in the above figure) of page 1. From the menu, touch the “Select from this Page” .
On page 6 (last page), touch the page number “6” (see above, P). From the menu, touch the “Select to this Page”. Now, pages 1 to 6 are selected.
Touch the page number again (Anywhere on the selected page. For example, touch “P” above). From the menu, “Cut Selected Pages”. This will put all the pages into the memory tool.
Touch the “q” button below the memory tool (Q below). Input the name of AnimeCast “dance” and touch OK button to create the AnimeCast (see below).

25. Control by text: Adjustment of the Base Frame

If the selection frame of the inputted AnimeCast is displayed at a different position from the character as shown above, it can be corrected by adjusting the position of the Base Frame of the AnimeCast. Do the following.

Touch the “+” (R in the above figure) in the center of the selection frame. Touch “Edit AnimeCast (:dance)” from the menu. This will open the contents of the AnimeCast.

2. If the first page is not open, touch the button to move to the first page (S above).

3. Touch the name of the animation cast in bold letters “dance” (T above) in the upper left corner of the screen. Touch the “Select a Base Frame” at the bottom of the menu. Now the Base Frame will be selected as shown in the above figure. The Base Frame is a frame which is used as a reference for the position of the AnimeCast, and if you change it, it will affect all parts of the AnimeCast, so be careful to select.

4. Move the Base Frame to the position of the character. Drag the selection box’s border (shown in Figure U above) to move it over the character in the lower right-hand corner.

5. When you’ve finished modifying the Base Frame, go back to the animation below. Touch the file name (V above) at the beginning of the bold text at the top left of the screen. Touch “Return” on the menu. When you return to the main animation, you’ll see that the character is in the selection frame at the top left.

6. Drag the selection frame border (W above) to move it down the center. (Above.)

26. Control by text: Make dance with label letters

Now it’s time to control the AnimeCast.

Touch “+” in the center of the animated cast selection frame. Touch “Control by Label” from the menu.
Let’s type “60!.UDUD.LRLRDWW.” here. Here’s what it means.

The first “60!” is the same tempo as the metronome.
After that, “.UDUD.LRLRDWW.” is the action specification, and the label you set above is used. “.” is a special label for the first page.
“60!” means 60 characters per minute, and the higher the number, the faster the speed: 60 is one character per second, so it takes 14 seconds to play the whole , since the letter “.UDUD.LRLRDWW.” involves 14 characters.
With the AnimeCast selected, touch the time on the page (Y above). At the bottom of the menu, “14 sec (Time of AnimeCast)” will appear, touch this to set it to 14 seconds.
When you touch the play button (Z above), it will play as follows

Now, in the first animation in this article, the head turns and falls in front of the chest and then back again. Here’s how to make this. Modify the label “W” page in the Anime Cast.

27. Put a shape behind the head.

(1) If you move the head of label W, you can see the body through it.

Open the AnimeCast. Touch the bold file name (a above) on the upper left of the screen. From the menu, touch the name of AnimeCast (dance) to open the inside of it. You can also “Edit AnimeCast” from the central “+” menu after selecting the AnimeCast.
Touch page 4 with the label “W” (b above) to go to page 4
Select the head and move it to the body (c above). You can see that the body of the skeleton is visible underneath the head. This is because the original illustration was drawn with only black lines.
Touch the “+” in the center of the selection frame where you chose the head. From the menu, touch “Edit AnimeCast (head)”. The Animecast (head) will open.

(2) Choose an outline of the head and put a figure behind it.

Select the head and touch the point selection button (d above). Many points will be displayed (above).
Choose a point from these points that seems to be the outer contour line (Figure e above).
Touch the point selection button again (Figure d above). Now only the points of the contour line will be displayed. (Figure below)
Select all the points and touch the “+” (f bellow) in the center of the selection frame. Touch the “Create Shape behind Points” in the menu. Now a filled in figure will be placed behind the selected point as follows.

(3) Add points if necessary.

Touch the add points button (g above) because there is an area that sticks out a little bit.
Add a point at the location h in the figure above and reshape it. (Arrow below)
Touch the color palette of the fill color (i, below). Set the color to white.

4. Touch the bold text (j above) on the topmost AnimeCast (dance). Touch “Return ” on the menu. The body is no longer visible through the back of the skeleton’s head. If you fix one part of the animated cast, the back of the head on all pages will not show through. You may add white figures behind the hands and feet.

28.Rotate the head.

(1) The difference between the angle of rotation around root and the angle of the frame

Touch the “+” in the center of the selection frame when you select the head. There are two angles shown in the menu: “Frame xx degree (clockwise)” and “Rotate around Root ”.
“Root” is a point that you moved to the neck position when you made the part, and you set the head to rotate around the neck position. If you don’t set Root Point, the AnimeCast will rotate around the center of the AnimeCast. Note that the Root is initially at the center of the AnimeCast, and at that point, there is no angle “Rotate around Root”.
The two angles have different centers of rotation. When the head rotates, it means that it rotates around the center of the head, so let’s touch “Frame degree” from the menu and set 180 degrees + 360 degrees = 540. Now your head will face upside down.

4. The head of the other pages is 0 degrees, so when you display the label W, the head will rotate one and a half times. You can change the angle around the Root to various values and see how it moves.

Video / GIF Output

Save your data before outputting. Go to “File menu > Save as” and save it. In the smartphone version, the file is saved in the “9VAe” folder.
Choose “File Menu > Animated GIF Export” or “Movie Export (Mac/iPhone/iPad)”.
If you want to create a video, the screen size may be blank for width, 720 for height and 30 for frames per second. Click “OK” button to create an animated GIF or MP4 video.
For Windows/ Linux/Android/Amazon Fire, you can convert animated GIFs to MP4 videos at Online GIF to MP4 Video converter — Ezgif.com. For Windows/ Linux, you can use APNG to MP4 Video converter — Ezgif.com to convert APNGs to MP4 videos. It takes more time but more beautiful than GIFs.

Creating an MP4 Video on ezgif.com

See Online GIF to MP4 Video converter. or APNG to MP4 Video converter — Ezgif.com
Select an animated GIF or APNG file (background not transparent)
Click on “Upload!” > Click on “Convert GIF to MP4!”
Click on “Save” (floppy disk icon) to download the MP4.

Features of joint animation using 9VAe

The control screen is simple and suitable for beginners.
You can label each page of the AnimeCast yourself and control the movement with label characters.
Once you’ve created a pose set, you can create a dance video by modifying the character codes.
If you match the tempo to the tempo of the music, you can create a dance video that dances to the music.

By using Free Software 9VAe, you can create animated GIF from SVG illustration. There are over 150,000 SVG illustrations in Openclipart. Please try making animation.

9VAe Introduction

9VAe Beginner Tutorials

Originally published at https://dnjiro.hatenablog.com on July 19, 2020.