How to make talking animation for Twitter: 9VAe
This article shows how to make a short animation using 9VAe for Android. It takes about 10 minutes to complete the process. You can also use 9VAe for iPhone/iPad, the PC version of 9VAe
To learn how to make other animations, click here.
Download 9VAe
- iPhone / iPad : 9VAeDangla (Apple)、9VAePro(Apple)
- Android/Chromebook : 9VAe for Android (Google Play)
- Amazon Fire : 9VAe (Amazon)
- Windows / Mac / Linux: 9vae for PC
Free Talking Characters
- Miku usagi, Miku usagi VR
- The girl who explains on the blackboard, The girl who points, Split the watermelon, Beats the corona, Sing with the broom
In the following instructions, operate in the order of ABCD in the figure.
1. Press “1.” to start creating a stroke order animation.
- Touch the “1.” (A below) on the right side of the “+”. Touch the bottom of the palette (B below) and the palette will disappear and you can touch the “1.”(A below).
- In the case of the iPhone version of 9VAe, if the background of the 9VAe is black, change the background to white by going to the “View Menu” and selecting “Dark Mode”. We will explain here with a white background.
3. If you touch “1.” without any input, “How to make Stroke Order Animation, Draw figures. Click this button again.” will be displayed. Press “OK”. The “Stroke Order Animation” mode is activated.
4. If “How to make Stroke Order Animation” doesn’t appear, touch “New” in the “File Menu” and then touch “1.” again.
2. Put in the text to be tweeted
- Tap the text input button (C below) and enter the text you want to tweet.
2. If you touch “1.” (Figure D above) after inserting the characters, a stroke order animation will be created and played once.
So now we have a video with the letters coming out (how easy!) You can add balloons and mouth-breathing characters. If there is a “#” at the beginning of a character, it has a special meaning and won’t work. Please put a space before “#”.
3. Put in a speech bubble
- Touch the text (E above) to select the text. If you don’t see the palette, touch the bottom right corner to display the palette.
2. Tap tab 3 on the right palette (G above) to enter a basic shape. With the text selected, touch the speech bubble (H above) to add a speech bubble behind the text.
3. After the balloon is inserted, touch the point selection button (Figure I above). Touch and drag the balloon point (J below) to adjust its position.
4. To set the line color, touch tab 1 (K above). Touch the Line Color button (L above) to set the color of the line. The thickness of the line can be changed with the thickness button (M above).
Grouping characters and speech bubble
- Touch the selection button (N above) and drag to select the text and speech bubble at the same time.
2. Touch the “+” in the center of the selection frame (O above). Touch “Group” from the menu. The text and speech bubble will be grouped.
3. If you group characters and speech bubble together, the size of the speech bubble will change in response to changes in the size of the rectangle when you change the text.
4. If you want to change the content of the text, touch the text twice. In the PC version, you can also change the text by selecting it and then pressing the “Return” key. The lower left-hand corner of the screen above is an example of changing the text.
5. Try changing the text to see if the size of the speech balloon changes.
4.Import SVG character into 9VAe
- Open here: miku usagi hat animation.
Android / iOS
- Tap and hold on [Download > SVG(Vector)] button(P above).
- Tap ‘Copy (link address)’ on menu. URL address will be copied.
- Open 9VAe.
- Tap ‘Input’ > ‘Download from Web…’ on the menu(Q above).
Tap and hold on http input area. Tap ‘Paste’ to input URL address.(R above) - Tap ‘OK’ then the clipart will appear on stage.
Click magnifying glass button in the lower left corner, you will see the whole image.
PC (Windows/Mac/Linux)
- Click your right mouse button on [Download > SVG(Vector)] button(P above).
- 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 [Input] on the menu bar > Click [9VA/SVG/WMF](Q above). Select the SVG file.
- Select the SVG file. Click [Open].
5. Adjustment of character position and size
- Touch the bottom-left “-” (S above) several times to see the whole picture. (If you can’t see the magnifying glass in the horizontal screen of the iPhone version, please touch it in the vertical screen. You can turn the palette on or off by touching the lower right corner (Q above).
- Drag the handle (T above) on the corner of the selection frame that surrounds the character to resize it. Use the center (U above) to move it. Let’s move the character to the right of the text.
- If the line thickness is too thick, touch the line thickness button and then touch the “Wide/ Narrow” at the bottom of the menu to adjust. (Depending on how the illustration is made, the line thickness may not change.)
6. Put a mouth animation on your character.
- Touch a character (W below) to select it. Touch the “+” menu in the center of the selection frame (W below), and then select “Control by Alphabet…”.
2. Enter the words “4.22:kyuubee can meik a tolking animeition with alphabet.”. It means
- The first “4.22:” means four seconds to speak.
- It is followed by the roman characters (See here) that are spoken, and the mouths are crunched accordingly. The “.” indicates a closed mouth.
- The reason why loaded miku usagi can lip-synch in roman characters is because the mouth shapes are registered in the SVG in the order of “.aiueo”. I’ll explain the contents of the animated cast later. For more information on how to make a talking character, see here.
- Touch the time at the top of the page (Y above) to adjust the time.
- Click the play button (Z above) to play the animation.
7. Animated GIF Export
- Go to “File Menu > Save As” and save the animation.
- Export an animated GIF by going to “File Menu > Animated GIF export”.
- When creating the video material, the screen size should be blank for width, 720 for height and 30 for frames per second. Click “OK” button to export an animated GIF.
- In the smartphone version, the movie is saved in the “9VAe folder” or “Camera Roll”. In the PC version, you choose the place to save the file first.
Make Video (MP4 from Animated GIF)
- For Windows/Linux/Android/Amazon Fire, you can convert GIFs to MP4 videos with the online GIF to MP4 Video converter — Ezgif.com
- For Windows/Linux, you can use APNG to MP4 Video converter — Ezgif.com to convert APNG to MP4 video. It takes a while, but it’s better than GIF.
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) or long press on MP4 to download the MP4.
- The MP4 will be downloaded to your Download folder. (Depending on your browser settings)
8. Post a video on Twitter
If you post an animated GIF from the Twitter app, it will become a movie. Note that if you post to Twitter from the camera roll, it will be a still image.
- Touch the post button on the Twitter app.
- You may copy-paste the text from the 9VAe text.
3. Select the animated GIF you created from the photo button on the left side (shown above). If you can’t see the GIF, try changing the permissions in the Twitter app to “all photos visible”. The picture below shows the animated GIF you created.
4. You can post it by clicking the “Tweet” button.
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 article
9VAe Introduction
- 9VAe Free SVG/GIF Animation editor: Introduction
- 9VAe Download and Install
- 9VAe’s Frequently Asked Questions
9VAe Beginner Tutorials
- 9VAe Beginner Tutorial 0 — Overview
- 9VAe Beginner Tutorial 1 — Input, Select, Move, Resize…
- 9VAe Beginner Tutorial 2 — AnimeCast, Time
- 9VAe Beginner Tutorial 3 — Edit AnimeCast, Loop
- 9VAe Beginner Tutorial 4 — Time Curve, Copy Pages, GIF
- How to make a great short video from 5 pictures
Originally published at https://dnjiro.hatenablog.com on September 25, 2020.