By Gustavo Deveze and Gustav Gonzalez

The following is a review of our experience producing an animation exercise using Tupi. The basic idea was to test this tool creating a short film to find out the potential of its features and also to learn its limitations.
Initially, we tried to build an animation using the traditional technique of drawing frame by frame (using Tupi as a "paperless" board), after some time, we realized that, though it can be handy to make basic sketches, it is not viable if you intend to compose complex works with high quality. In the end, we decided to give cutout technique a try.

In a few words, the cutout technique consists in building your characters using mobile and interchangeable parts like a puzzle. In that way, one arm is an independent object of the body and it can be moved rotating it over the shoulder point or even replacing it with other image of the arm in a different position, depending on what you want to do.
The same idea applies for the character mouth when it is speaking. A set of mouth shapes representing different voice sounds were used to sync the character dialogs (understanding that the shape of the mouth changes depending on the letter spoken).

The same technique was used for the head movements, the character walk cycle, etc. We believe that Tupi is a good tool to make cutout projects because you can enlarge, shrink, rotate and move each piece of the scene, including the backgrounds and the "over-layers" (the parts of the stage that are between the viewer and the character). All these transformations allow you to play with fewer pieces and plenty of different possibilities within the limitations of the cutout animation.

To make the pieces of the character, we used a vectorial authoring tool called Inkscape (http://inkscape.org). Each part was saved as a SVG file and then imported into Tupi from its library interface.

Figure 1. Character parts [ SVG Source File ]

The character close to the big red asterisk on the bottom left of the image above consists of the parts marked with the smaller asterisk. Following the same order, the character is 'rebuilt' into the Tupi workspace. Depending on the complexity of the character and its position the number of pieces may vary.

Note: The Figure 1 is just a partial set of the parts used in this exercise.

Figure 2. Character flexed arm

Figure 3. Character straight arm

The two images above correspond to 'arms' positions of the character ready to be exported as SVG files from Inkscape.
Note: This tool provides the option to export objects as PNG files. This will give you the flexibility to work with raster images directly.

Now, let's take a look at this video of 5 minutes, showing some steps of the animation process for our project using Tupi. Pay close attention to how the animator handles the pieces of the character to create the illusion of movement:

Video 1. Tupi Interface [ TUP Source File ]

To compose the backgrounds, we chose some photos previously manipulated with the Gimp application (http://www.gimp.org/). In some cases the images were divided into layers (to create some over-layers like the glass table in one of the scenes). Each background was saved as a PNG file and then imported into Tupi.

Figure 4. Scene Background

Figure 5. Over-layer for the same scene

To synchronize the character expressions with its voice we used the Jlipsync application (http://jlipsync.lamhauge.dk/). With this tool you can calculate the timing, in terms of frames, of every silence and every letter of the voice recording. The interface has a preview with standard shapes of mouths to verify that the movements are consistent with the voice being played.
The output of the software is a spreadsheet that you can use as reference to animate the character following the rhythm/speed of its voice.

Figure 6. Jlipsync Interface

The spreadsheet data was copied and pasted into Inkscape, then exported to a PDF file for easy reference along the animation process.

The original voice recording was enhanced using the Audacity application (http://audacity.sourceforge.net/). Additionally, we created a small loop with the ambient sound to cover the previous seconds to the character's introduction.

Figure 7. Audacity Interface

Finally, to combine all the scenes generated with Tupi and the sound layers (voices, ambient noise and background music) we used a video editor called Pitivi (http://www.pitivi.org/).

Figure 8. Pitivi Interface

We would like to say that during this exercise many improvements were made to the Tupi source code in order to enhance the user experience. For that, we thank the animation team's feedback and support.

Once this research was finish, the final short film was posted at Vimeo and Youtube.

Note: We are confident that in future versions, Tupi will be a great alternative as "paperless" software.

If you have questions or comments about this article, please don't forget to visit our forum. All questions are very welcome!