Main Components

Tupi is a suite of tools for 2D animation created for children from 8-100 years old. When you think of Tupi, think of it as a toolbox full of different components, each designed for a specific task. Let’s take a look at each of the parts that make up the work environment, this really is a must before you start using Tupi.

Note: Because we are still in a beta phase of development, it is likely that some options and/or features are different within the interface or appear in different places. Much of the information found in this manual is subject to correction in future versions.

The Following is a typical display of the running application:

Fig # 4. Tupi’s GUI

Now, let’s take a closer look at its components.

Fig # 5. Diagram of the Tupi components

1. Top Menu Bar: this is the conventional menu located along the top of the window like you find in most programs. It is separated into categories (File, Edit, Insert, Window, and Help). All the main options that affect the whole program are here.

   Fig # 6. Top Menu Bar

2. Project File Management Panel: is composed of buttons associated with the task of managing project files such as, create a new project, opening an existing project, saving, saving under a new name and closing an open project.

   Fig # 7. Project File Management Panel

3. Workspace: this is the main area of the application, the space where you design, build and visualize your animations. The workspace is comprised of four tabs, each of which contains one of the following modules:

   Fig # 8. Workspace Tabs

   - Animation Module: this module is used to build the graphics of each frame which will appear in your animation. It is little more than a small vector graphics editor, very simple ... for now.
   - Player Module: This is an animation viewer that you can use at any time to give you an idea of how your animation is looking.
   - Help Module: This is the module that you are referring right now.
   - News Module: is a window directly onto our Twitter account. |Here you can find the latest news on this project, including new releases, the functionality implemented in the development version, news, etc.
4. Left Sidebar: In this component there are three buttons associated with different features of drawing in the workspace:

   Fig # 9. Left Sidebar

   - Colour Palette: This button displays a panel through which you can choose the colour or gradient you want to use when painting with any type of brush.
   - Brush Properties: This button displays a panel with the current properties of the brush, such as the size of it and some characteristics of the stroke.
   - Object library: This button displays a panel with the object management interface of the library associated with the project. If you have an object or a particular image you want to store and reuse in different frames of your animation, you can use this component.
5. Right Sidebar: similar to the left, but contains buttons associated with the animation process.

   Fig # 10. Right Sidebar

   - Scene Manager: This button displays a panel that allows the management of the scenes that make up an animation. If you don't yet know what a scene is, don’t worry, we’ll talk about it later.
   - Exposure Table: This button opens a side panel displaying the table of exposures that make up each scene. Although it sounds complex, this table is really just a list of frames on which you illustrate your animation. Through this component, you can control the layers and frames of your project. Do you know what a layer? Here is a simple definition: imagine you take a bit of red paint and cover a sheet of paper with the colour and let it dry, then apply on the same sheet a coat of green, wait a while and then apply blue. Although in the end, your paper will look like the last colour you used, really you know that there are other colours below. Think of each of these colours, as layers, that is, levels of paint that you define yourself over a frame. Layers are very useful to achieve certain effects and techniques which you can discover and practice later.
   - Help Manual: This button displays the manual you’re referring to now.
6. Bottom Bar: on this region will find a stopwatch button, this is the option to activate the Timeline panel. This tool, well used by animators from other programs, allows you to manage layers and frames, as well as visualize how the pieces of your animation will unfold in real time.

   Fig # 11. Bottom Bar

7. Properties Panel: This zone is created temporarily each time you click on one of the buttons are in the sidebars or at the bottom. Although the initial image (Fig. # 5), the panel appears on the right side of the interface, depending on where is the button you choose, may appear on the left side or even in the bottom. If you go back to click on the button initially selected, then the properties panel is closed.
8. Status Bar: located at the bottom of the program, this bar has only one purpose, that is to display the coordinates (x, y) of the mouse cursor as it moves over the workspace in the Animation Module.

   Fig # 12. Status Bar