How to make a moving video background: Free software 9VAe Kyubee

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

Other Making Animations is 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

Download SVG image

Download SVG vector image from Openclipart —pink heart.

PC (Windows/Mac/Linux)

1. Click your right mouse button on [Download > SVG(Vector)] .
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)].
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.

Copy the contents of AnimeCast (when loaded from Web)

The illustration read from Web becomes a part called AnimeCast. Sometimes the AnimeCast is useful, but if you want to add some movement, open the contents of the AnimeCast.

1. Click the “+” (B in the above figure) in the center of the selection frame. Click the second “Edit AnimeCast (…)” of the menu. The inside of the AnimeCast will open.
2. Select the heart (C above) and copy it to the storage tool (D above). The heart will be placed in the memory tool.
3. “File menu> New” (E above). The paste button (F in the above figure) has “Paste to the stage” and “Duplicate”. It ’s better to select “Duplicate”.
4. Let’s add movement to this.

Move the heart to the center and change the color

1. Touch the bottom of the palette (G in the figure below) to hide the palette. This is a useful operation on the smartphone. Touch “See” at the bottom right to show the palette again.

1. Select the heart and drag the center (H in the figure above) to move the heart to the center.
2. Display the palette with “See” (I above) at the bottom right of the screen.Let’s make the heart purple with the fill color button (J in the above figure).
3. Let’s set the line to (hide) by the line type (K in the above figure). It will be a heart with no border lines.

Duplicate the heart in the same place and make it red and orange

1. Touch Shift (L in the figure below) at the bottom left, then touch the center “+” (M in the figure below) of the heart selection frame and execute “Duplicate”, it will be duplicated at the same position. You can also hold down the Shift key on your keyboard while duplicating, or you can use Ctl + C, Ctrl + V.

1. Let’s make the heart red with the fill color button (N in the above figure).Click the zoom out button “-” (O in the above figure) at the bottom left.
2. Drag the corner handle (P in the above figure) of the selection frame to make the red heart smaller. Let’s make an orange heart in the same way (above figure)

Add the next page and create yellow, green, and blue hearts

1. Touch “+” (U in the figure below) on the right side of the page. Touch “Add Next Page”. Now you have 2 pages.

1. Select three hearts (V in the above figure) and copy them with the copy button (W in the above figure).
2. Press the zoom out button “-” (X in the above figure) several times to reduce the size.
3. Drag the corner handle (Y in the above figure) of the selection frame to enlarge the three hearts. Make it larger than the page size.
4. Register the heart with the registration button “+” (Z in the above figure) on the right side.
5. Touch the registered heart (a in the above figure). “Lock” from the menu. This will lock the enlarged heart from selection.
6. Touch the paste button (b in the above figure). “Duplicate” from the menu. The three hearts you have memorized will be duplicated on the screen. (If you “Paste to the stage”, you cannot duplicate it.)
7. Touch the magnifying glass button (c in the above figure) at the bottom left to return to the original magnification.
8. Select the duplicated hearts in order and use the fill color button (d above) to make them yellow, green, and blue.

Select 4 hearts and copy to the previous page

Added 3 hearts to the second page. Copy them to the first page. If you select the orange color together, they will be reduced to the same scale as the orange color. Do the following:

1. Touch the reset button (e in the above figure) on the right side. This will remove the “Lock” setting and allow you to select an orange heart.
2. Drag the four hearts of yellow, green, and blue on page 2 to select them (f in the figure above). When selecting by dragging, the edge of the figure will be inverted.
3. Touch the button (g in the above figure) to copy to the previous page. The orange heart is on one page. Yellow, green, and blue hearts that are not on one page will be scaled down and copied to the orange scale. ( If you select only yellow, green and blue hearts , they will be copied in the same size.)
4. Touch the bottom of the palette (h in the above figure) so that the “+” button that adds the next page can be seen.

Add the next page and add hearts

Repeat the same as above to create 3 page.

1. Touch “+” (i in the above figure) on the right side of the page. Touch “Add Next Page”. This will create page 3.
2. Click the “-” button at the bottom left (j in the above figure) to zoom out.
3. Select two outer hearts and delete them (k, l in the above figure).
4. Select all and enlarge them (m in the above figure).
5. Touch the magnifying glass button (o in the above figure) to restore the original magnification, and touch the paste button (p in the above figure) to “Duplicate” to add 3 hearts.
6. Select 4 hearts (q above) and copy to the previous page (r above)
7. This will create the same heart on page 3 as on page 1.

Add Loop command

1. Enter the “Loop” from the tool menu (s in the figure below). When this command is entered, it repeats between pages 2 and 3.

1. Copy to the previous page (t in the figure above) to copy the “Loop” command to page 1. This will repeat between pages 1 and 3.
2. Play !

Animated GIF Export

1. Go to “File Menu > Save As” and save the animation.
2. Export an animated GIF by going to “File Menu > Animated GIF export”.
3. This animation has Loop. You have to set the “Length (sec)” of the animated GIF.
   It repeats in 2 seconds, so 2,4 or 6 is fine. If you want to use it as a video material, it is a good idea to specify the required time length.
4. When creating the video material, the screen size should be blank for width, 720 or 1080 for height and 30 for frames per second. Click “OK” button to export an animated GIF.
5. 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)

1. For Windows/Linux/Android/Amazon Fire, you can convert GIFs to MP4 videos with the online GIF to MP4 Video converter — Ezgif.com
2. 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

1. See Online GIF to MP4 Video converter. or APNG to MP4 Video converter — Ezgif.com
2. Select an animated GIF or APNG file (background not transparent)
3. Click on “Upload!” > Click on “Convert GIF to MP4!”
4. Click on “Save” (floppy disk icon) or long press on MP4 to download the MP4.
5. The MP4 will be downloaded to your Download folder. (Depending on your browser settings)

Originally published at https://dnjiro.hatenablog.com on June 18, 2021.