How to make talking animation from SVG:”School girl”

This article shows how to create this animation from SVG by using Free Software 9VAe . It takes about 15 minutes to create this.

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

1. Download 9VAe

https://9vaelab.blogspot.com/p/blog-page.html

2. Download SVG image

1. Open here: Openclipart — School girl #5

PC (Windows/Mac/Linux)

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

Android / iOS

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

Click magnifying glass button in the lower left corner, you will see the whole image.

3. Save animation

The imported SVG becomes a part (called AnimeCast). You have to open the AnimeCast to create animation.

1. Click the center handle [+] of the selection frame. Click [Edit AnimeCast(:xxx)] — The AnimeCast will be opened.
2. Click [File] on the menu bar > Click [Save as].
3. Save the animation with the name ‘schoolgirl.

4. Set screen size and copy page

1. Click [File] on the menu bar > Click [New].
2. Click [File] on the menu bar > Click [Open]. Open the ‘cryingfem’.

(1) Decrease points

1. Click the image to select all.
2. Click [Edit] on the menu bar > Click [Effect > Decrease points].

This reduces the number of control points and makes editing easier.

(2) Set screen size

1. Click [File] on the menu bar > Click [Page Size].
2. Set the page height to 1010.

(3) Add Next Page

1. Click the green [+] on the right side of the page. Click [Add Next Page] from the menu. You can now create the second page.

5. Select mouth and Set color

1. Select image and click

Then the points are displayed.

2. Select some points of the mouth and click

again. The points of the figures which do not contain the selected points will disappear.

3. Click

The selected mouth will be registerd to the palette.

4. Convert the mouth to a polygon with lines. Click the large color palette on the upper right and touch “None”. This will make the line color as the same color as the mouth.

5. Click the same palette again to make the inside color pink. You may click[Pickup screen] and click on cheek to select pink.

6. Make the line width a little thick.

7. Set the time of 1st page and 2nd page to 0.5 seconds. Click the time [1 sec] and click [- 0.1 second] from the menu five times.

6. Make the shape of the mouth “a”

1. Select only points of the mouth. Click [Shift] and carefully select points one by one carefully. After selecting all the points on the top, click the handle on the lower side of the selection frame. Click [Mirror] from the menu.Move the points upwards as following figure.

2. Since the nose is hidden, select all the points of the mouth and lower them.

7. Add Next Page and Make the shape of the mouth “i”

1. Click

Click [Add Next Page] from the menu.

2. Click the mouth of the pallet. Click [Select] from the menu.

3. Click the upper handle of the selection frame. Click [Stretch] from the menu. Click the center [+]. Click [Move].

8. Add Clip Page and Make the shape of the mouth “e”

1. Copy the second page “a”. Click the page number 2. Click [Copy pages] from the menu.
2. Click

Click [Add Clip Page] from the menu.

3. Click the mouth. Select upper points. Click the upper handle of the selection frame. Click [Stretch] from the menu.

9. Add Clip Page and Make the shape of the mouth “u”

1. Click

Click [Add Clip Page] from the menu.

2. Click the mouth. Select upper points. Click the corner handle of the selection frame. Click [Resize] from the menu.

3. Click

to see animation.

10. Animated GIF Export

1. Click [File] on the menu bar > Click [Animated GIF Export].
2. Click [OK] or [Start] to export Animated GIF.

11. Make Loop Animation and Save SVG

1. Go to the 1st page. Click [Input] on the menu bar > Click [Loop]. This will make a loop animation between 1st page and 2nd page.
2. Click the center [+] of the selection frame. Click [Copy to Next Page] from the menu. The [Loop] command will be copied to the next page.
3. Repeat [Copy to Next Page] until the [Loop] is copied to the last page.
4. Click [File] on the menu bar > Click [Save as]. You can create SVG SMIL animation.

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

Related articles

9VAe Introduction

1. 9VAe Free SVG/GIF Animation editor: Introduction
2. 9VAe Download and Install
3. 9VAe’s Frequently Asked Questions

9VAe Beginner Tutorials

1. 9VAe Beginner Tutorial 0 — Overview
2. 9VAe Beginner Tutorial 1 — Input, Select, Move, Resize…
3. 9VAe Beginner Tutorial 2 — AnimeCast, Time
4. 9VAe Beginner Tutorial 3 — Edit AnimeCast, Loop
5. 9VAe Beginner Tutorial 4 — Time Curve, Copy Pages, GIF
6. How to make a great short video from 5 pictures

Originally published at dnjiro.hatenablog.com on February 3, 2019.