How to make Barrel Fish animation from SVG : 9VAe

This is an article which describes the process of making an animation from Openclipart's SVG.

Openclipart library is a collection of 100% license-free art that you can use for any purpose.

What is 9VAe ?

• Free 2D animation software which can export SVG SMIL animation .
• It can export alternative movie such as Animated GIF / APNG or QuickTime (9va-mac).
• Based on 2D keyframe animation such as Synfig Studio.
• Lightweight and stable. It can work well even on RaspberryPi a board computer.

Step1 Download '9VAe'

You can download 9VAe from the links as follows;

• 9va-win (Windows)
• 9va-mac (Macintosh)
• 9va-pi (Raspberry Pi)
• 9va-pi (Ubuntu/Linux Mint (LinuxX86-32bit))

See 9VAe Download and Install.

Step2 Extract ZIP, Run '9VAe' '9va-win' or '9va-pi'

• Macintosh: '9VAe.app' is not an App Store application. You have to regist it to Gatekeeper at first.
  Click > System Preferences > Security & Privacy > General.
  See "Allow applications download from:". Click [Open Anyway]. Then '9VAe.app' will be registed to Gatekeeper.

• 9VAe's screen is as follows
  

Step3 Download Openclipart (barrelFish.svg) to Desktop

1. Open https://openclipart.org/detail/217565/barrel-fish with your favorite browser.
2. Download "barrelFish.svg" to your desktop as follows. Click your right mouse button on [DOWNLOAD] button.
3. Click [Save Link As] in the right button menu. (The menu item will be different according to your browser.)
4. Select [Desktop]. Click [Save] button. Now SVG file "barrelFish.svg" will be saved on your desktop.

SVG (Scalable Vector Graphics) is the vector graphics format and you can modify the shape by using SVG editor like 'Inkscape'.

Step4 Open barrelFish.svg with '9VAe'

Click '9VAe' window and open the barrelFish.svg on the desktop as follows.

1. Click [File] on the menu bar > Click [Open]. Now Open File Dialog Box will appear.
2. Select [Desktop] > Click on [barrelFish.svg].
3. Click [Open].

Step5 The message "Data couldn't be converted"

The message "Some Data couldn't be converted. (Filter)" will appear.

This message occurs because '9va-pi' doesn't have a filter operation.

1. Click [OK] button.

Step6 Ungroup barrelFish 4 times

A dark brown plate of the barrelFish is a filter conversion error.

1. In order to get rid of it, click the barrelFish. Now the selection frame will appear around the barrelFish.
2. Click [Object] on the menu bar > Click [Ungroup]. This will ungroup the barrelFish. Do the same operation 4 times. Now we are ready to select the dark brown plate.

Step7 Select dark brown plate of the barrelFish by using hide option of Registered button

I will explain how to select a shape from the complex objects.

1. To deselect the objects, click anywhere on the page away from the shape.
2. Click on the dark brown plate of the barrelFish first. It may be difficult to select it correctly at once, but it's OK.
3. Click [+] button of the Time Control panel on the right side of the window. Now the selected object will be registered in one of the blank buttons of the time control panel.
4. Click on the registered button > Click [Hide]. Now the selected object will be hide.

Repeat the same operation until selecting the dark plate in the barrelFish.

If you failed to select the dark plate, click [+] > Click registered button > [Hide] again.

Step8 Select dark brown plate of the barrelFish and delete it

1. If you succeed to hide the dark brown plate, Click the registered button of the dark brown plate > Click [Select]. Now the dark brown plate of the barrelFish will be selected.
2. Click the [Eraser] button on the lower tool palette on the left side of the window. Now the filter conversion error will be deleted.

Step9 Add the second page

1. Click the [+] button at the end of the page bar on the top of the window. > Click [Add Next Page]. Now the second page will appear on the page bar.

Step10 Select the tail of the barrelFish

1. Drag a rectangle around the tail of the barrelFish and select the tail.
2. Click on the [Edit points] button on the lower tool palette on the left side of the window. Now control points will appear.
3. Drag a rectangle around the control points of the tail and select them.
4. Click on the [+] button on the lower left corner of the window several times. Now the tail will be zoomed in.

Step11 Transform the tail of the barrelFish

The transform menu places each handles (little squares) of the selection frame, one in each corner and one on the top, bottom, left, and right. We can modify the shape by clicking on any of the handles or dragging them.

1. Click the right side handle of the selection frame > Click [Stretch]. Now the shape will be changed according to your mouse movement.
2. Click the mouse button when the shape becomes desired shape.
3. Click the [Magnifying glass] button on the lower left corner of the window.

Step12 Register the side fin of the barrelFish

To deselect the control points, click several times anywhere on the page away from the shape.

1. Click on the side fin of the barrelFish.
2. Click [+] button of the Time Control panel on the right side of the window. Now the selected object will be registered in one of the button of the time control panel.
3. Click on the registered button > Click [Hide]. Now the registered object will be hide.
4. Click on another part of the side fin of the barrelFish.
5. Click on the registered button > Click [Add to Time Group]. Now the selected shape will be hide.
6. Repeat the same operation until selecting all parts of the side fin of the barrelFish.

Step13 Select and Transform the side fin of the barrelFish

1. Click on the registered button > Click [Select]. Now the side fin will be selected.
2. Click on the [Edit points] button on the lower tool palette on the left side of the window.
3. Drag a rectangle around the control points of the side fin.
4. Click the right side handle of the selection frame > Click [Stretch]. Now the shape will be changed according to your mouse movement.
5. Click the mouse button when the shape becomes desired shape.

Step14 Zoom in the anal fin of the barrelFish

1. To deselect the control points, click several times anywhere on the page away from the shape.
2. Drag a rectangle around the anal fin of the barrelFish and select the anal fin.
3. Click on the [Edit points] button on the lower tool palette on the left side of the window. Now control points will appear.
4. Drag a rectangle around the control points of the anal fin.
5. Click on the [+] button on the lower left corner of the window several times. Now the anal fin will be zoomed in.
6. Use the Lasso select tool to select the anal fin. Hold down the Ctrl key on the keyboard, drag and draw a blue line around the control points of the anal fin. (If you are a Macintosh user use Command key.) The selection frame will appear around the anal fin.

Step15 Transform the anal fin of the barrelFish by using soft pin

1. Click the right side handle of the selection frame > Click [Transform with pin] twice. The menu item will change to [Transform with soft pin].
2. Click [Stretch]. Now the shape will be changed according to your mouse movement. Click the mouse button when the shape becomes desired shape.

When the [Transform with pin] is active, the control points near the edge of selection won't move so much. The transformation result will be smooth.

Step16 Enlarge the mouth of the barrelFish

1. Click the [Magnifying glass] button on the lower left corner of the window.
2. To deselect the control points, click several times anywhere on the page away from the shape.
3. Click the mouth of the barrelFish. The selection frame will appear around the mouth.
4. Drag the center handle [+] of the selection frame toward the left.
5. Drag a rectangle around the head of the barrelFish and select the head.
6. Click on the [Edit points] button on the lower tool palette on the left side of the window. Now control points will appear.
7. Drag a rectangle around the control points of the mouth.
8. Drag the corner handle of the selection frame outward. Now the head will become larger by using Transform with soft pin.
9. Click and select the mouth of the barrelFish.
10. Drag the center handle [+] of the selection frame toward the mouth's original position.
11. Drag the corner handle of the selection frame outward. Now the mouth will become larger.

Step17 Group iron balls and iron rings in 2 registered buttons

In order to make iron balls' animation, we should group all iron balls together.

1. Click an iron ball or an iron ring and select it.
2. Click [+] button of the Time Control panel on the right side of the window. Now the selected object will be registered to a button of the time control panel.
3. Click on the registered button > Click [Hide]. Now the registered shape will be hide.
4. Click another iron ball or a ring and select it.
5. If the selected object is the same kind of the registered button , Click the same registered button > Click [Add to Time Group]. Now the selected shape will be hide.
6. If the selected object is not the same kind of the registered object, Click [+] button to make a new registered button. Click the new registered button > Click [Hide]. Now the new registered shape will be also hide.
7. Finally iron balls and iron rings will be hide. They are grouped in the iron ball or the iron ring.

Step18 Cut the iron balls of the first page and the second page into the Clip memory

1. Click on the iron ball's registered button > Click [Select]. Now the iron balls will be selected.
2. Click the center handle [+] of the selection frame > Click [Select Connected Objects]. Now the iron balls of the first page and the second page will be selected together. The line type of the selection frame will be changed to double-line.
3. Click the [Cut] button on the upper side of the Clipboard on the right side of the window. Now the iron balls of the first page and the second page will be cut into the Clip memory.

Step19 Go to the first page

1. Click on the first page and go to the first page.

Step20 Create Animecast from Clip memory

1. Click the [9] button on the lower side of the Clip memory on the right side of the window.
2. A dialog box will appear. Enter the Animecast's name, for example - “rotating ring”, into the text field.
3. Click [OK]. Animecast is a graphics object which includes iron balls in the Clip memory. The bold file name "barrelFish" will appear.

Step21 Open the content of AnimeCast

1. Click on the bold text "barrelFish" > Click [:rotating ring] Now the content of the animecast will appear.
2. Click the [Magnifying glass] button on the lower left corner of the window.

Step22 Add Background Page

1. Click the [<] button on the left end of the page bar > Click [Add Background Page]. The blank background page will be added.
2. Click on the second page and go to the second page.
3. Drag a rectangle around iron balls to select all of them.
4. Click on the [Copy to previous page] button on the lower tool palette on the left side of the window. Now the contents of the second page will be copied to the background page.

Step23 Delete the first ball on the top left

1. Click on the third page and go to the third page.
2. Drag a rectangle around the top 3 balls on the left balls.
3. Click the [+] button on the lower left corner of the window several times. Now 3 balls are displayed in the center of the window.
4. Drag a rectangle around the first ball to select it.
5. Click the [Eraser] button on the lower tool palette on the left side of the window. Now the first ball will be deleted but the first ball on the background page will still appear.

Step24 Select the second ball and snap the [+] handle to the bottom of it

1. Drag a rectangle around the second ball to select it.
2. Holding down Ctrl key (If you are a Macintosh user, holding down command key), drag the center handle [+] of the selection frame toward the bottom of the second ball.
3. Only the [+] handle will move. The [+] handle will be snapped to each control point of the ball.
4. Move and snap the [+] handle to the bottom of the second ball.
5. Release Ctrl key.
6. Drag the handle [+] of the selection frame toward the position of the first ball.
7. Hold down Ctrl key, then the handle [+] will be snapped to the control points of the background ball.
8. Snap it to the bottom of the first ball, then you can move the second ball to the position of the first ball precisely.

Step25 Move the other balls to the previous ball's position

Press space key, and drag the canvas toward the top. The area displayed can be changed.

Repeat as follows

1. Select the next ball.
2. Hold down Ctrl (or Command) Key
3. Drag [+] handle and snap it to the bottom of the ball.
4. Drag [+] handle without Ctrl Key to start dragging the ball upward.
5. Hold down Ctrl Key.
6. Drag and snap the ball to the position of the previous ball.

Step26 Duplicate the bottom ball and copy it to the second page

1. After you finish moving the bottom ball, Click the center handle [+] of the selection frame > Click [Duplicate]. Now the new ball will appear.
2. Drag the center handle [+] of the new ball and move it toward the lower left a little.
3. Click on the [Copy to previous page] button on the lower tool palette on the left side of the window. Now the new ball will be copied to the second page.
4. Drag the corner handle of the selection frame inward. Now the size of the ball will be small.

Step27 Move the bottom ball of the right balls and resize it

1. Click on the third page and go to the third page.
2. Drag a rectangle around the bottom ball of the right balls to select it.
3. Drag the center handle [+] of the bottom ball and move it toward the lower left a little.
4. Drag the corner handle of the selection frame inward. Now the size of the bottom ball will be small.

Step28 Move the other balls of the right balls to the previous ball's position

Press space key, and drag the canvas toward the bottom. The area displayed can be changed.

Move the right balls toward the lower as follows

1. Select the next ball.
2. Hold down Ctrl (or Command) Key
3. Drag [+] handle and snap it to the bottom of the ball.
4. Drag [+] handle without Ctrl Key to start dragging the ball toward the lower.
5. Hold down Ctrl Key. Drag and snap the ball to the previous ball's position.

Step29 Delete the background page and the top left ball of the first page

1. Click [<<] button on the bottom of the page bar and go to the first page.
2. Click on the page number [1] of the first page. > Click [Cut Page] Now the first background page will be deleted.
3. Drag a rectangle around the top left ball to select it.
4. Click the [Eraser] button on the lower tool palette on the left side of the window. Now the top left ball will be deleted.

Step30 Input Loop button on the first page

1. Click [Input] on the menu bar > Click [Loop] Now the Loop button will appear.

Step31 Play iron ball's animation

1. Click [Play] button on the bottom of the page bar. You will see the rotating iron ball's animation.
2. Click [Stop] button or ESC key to stop the animation.

Step32 Return to barrelFish

1. Click on the bold text "barrelFish" > Click [Return] Now the barrelFish will appear.

Step33 Input Turn button on the first page

1. Click [Input] on the menu bar > Click [Turn] Now the Turn button will appear.

Step34 Play barrelFish's animation

1. Click [Play] button on the bottom of the page bar. You will see the barrelFishl's animation.
2. Click [Stop] button or ESC key to stop the animation.

Step35 Modify animation

You can modify animation by selecting the shape and move the control point of it.

Edit your animation to feel better. In the case of the sample animation you saw first, the animation was modified as the eye is moving and all fins are moving.

Step36 Export animated SVG

1. Click [File] on the menu bar > Click [Save as]
2. Click the file type [9VA/EVA] > Click [SVG] Select the folder to export SVG.
3. Click [Save]. Now the animated SVG (SMIL（Synchronized Multimedia Integration Language）) file will be exported.

• If you're a Macintosh user, Click [File] on the menu bar > Click [Export Animated SVG].

Step37 Export animated GIF

1. Click [File] on the menu bar > Click [Export Animated GIF].
2. Select the folder to export Animated GIF.
3. Enter the name of GIF file.
4. Click [Save]. Animated GIF setting dialog will appear.
5. Enter 2 (sec) into the [Time Limit] field.
6. Click [Start]. Now the animated GIF file will be exported.

Step38 Export APNG

1. Click [File] on the menu bar > Click 'Sequential images/APNG export'
2. Enter the name of APNG file. Click [Save]. Now the APNG setting panel will appear.
3. Enter 2 (sec) into the [Time Limit] field.
4. Click [Start]. Now the animated GIF file will be exported.
5. The question "Do you want to combine PNGs to an APNG file" will appear. Click [Yes]. The APNG file will be exported.
6. If you click [No], the sequential PNG images will be exported.

Final Words

This article shows how to make an animation from Openclipart's SVG by using '9VAe' a free 2D vector animation editor.

I hope this article will help you to make SVG / GIF / APNG animation. Thank you for reading!

Thanks for Openclipart and TheJChaps the writer of Barrel Fish.

---

Related article

9VAe Introduction

1. 9VAe Free SVG/GIF Animation editor: Introduction
2. 9VAe Download and Install

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 long animation with 9VAe

9VAe Next Step Tutorials

1. How to make APNG from SVG for LINE animated Stickers?
2. Make Barrel Fish animation from Openclipart SVG
3. Six steps to make SVG Animation from Openclipart
4. How to make Animated GIF from Openclipart?

9VAe Animation Examples

1. 9VAe's GIF/SVG Animation examples in Openclipart

9VAe Technical Information

1. Export Animated GIF in 9VAe