TupiTube Documentation

Tupi user interface (UI) was designed as a toolbox full of compartments. Every compartment is focused on an specific task, providing an intuitive and simple set of controls and tools. Now, let's take a ride for the different components of the interface, so you can get acquainted with Tupi's resources.

Note: As Tupi is a project in continuous development. it's likely that some options and components of the interface change often. Therefore, much of the information in this manual is subject to correction in the future.

The following picture shows a regular session of Tupi:

;#; Fig 4. Tupi's GUI ;#;

Now let's take a look at its main components:

;#; Fig 5. Diagram of Tupi's Components ;#;

1. Top Side Menu: Is the conventional option bar in located at the top of most programs. It is separated by categories(File, Edit, Insert, Window, and Help modules)all options of the program.

;#; Fig 6. Top Side Menu ;#;

2. Basic Functions Panel: is composed of buttons associated with the basic functions of the program's files such as: Create new project, open existing project, save, save as, and close the current project.

;#; Fig 7. Basic Functions Panel ;#;

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

;#; Fig 8. Workspace Tabs ;#;

• Animation Module: through its interface, this module is for build the graphics of each frame that will be contained in your animation. In other words, this module is nothing more than a small vector graphics editor very easy (more to come!).
• Player Module: basically, this is a viewer that can be accessed at any time to give you an idea of how your animation is going.
• Help Module: This is the module in that you are right now!
• News Module: is a window that access directly our account in [http://twitter.com/maefloresta Twitter]. So you can be aware of the latest news on this project, including new releases, the functionality implemented in the development version, news, etc.

4. Left Sidebar: in this component are three buttons associated with some features of the “Illustration Module”:

;#; Fig 9. Left Sidebar ;#;

• Color Palette: this button displays a panel through which you can choose the color or gradient you want to use the time to paint with any type of brush.
• Pen Properties: this button displays a panel with the current property boom, for example, the bulk of it, the type of brush and some characteristics of stroke.
• Objects Library: this button displays a panel with the object management interface of the library associated with the current project. If you have an object or picture that you want to store and reuse in different frames of your animation, this component allow you to perform such task

5. Right Sidebar: similar to the left one, just that contains buttons associated with the animation process:

;#; Fig 10. Right Sidebar ;#;

• Scenes Manager: this button displays a panel that allows the administration of the scenes that make up an animation. Still do not know what a scene? Do not worry, we'll discuss it later.
• Exposure Sheet: this button enable a panel that displays the “Exposure Sheet” of each scene. Although it sounds complex, this “sheet” is in fact, a list of frames which you will illustrate for your animation. Through this component, you can manage layers and frames in your project. Do you know what a layer is? Here is a simple definition: imagine you take a bit of red paint and cover a sheet of paper with the color and let dry, then apply green on the same page, wait a while and then apply blue. Although in the end, your paper will look like the last color you used, you really know that there are other colors below. Think of each of these colors, such as layers, ie, levels of paint define yourself on a frame. Layers are very useful to achieve some kind of effects and techniques you will discover with practice.
• Help Manual: This button displays the manual you're viewing right now.

6. Bottom Bar: on this region you will find a button, the option activated in this panel is Timeline. This tool, is used by many programs and stands as a standard method for keyframing and layering, it allows you to manage layers and frames, as well as a way to develop the pieces of your animation in real time.

;#; Fig 11. Bottom Sidebar ;#;

7. Properties Panel: This zone is created according to each of the different tools found on the sidebars or at the bottom of the workspace. Although the initial image (Fig. <b># 5</b>), the panel appears on the right side of the interface, depending on where you find the button you choose, you may receive it in the left side or even at 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 is currently only serving to deploy the coordinates (x, y) where is the mouse cursor as it moves over the “Workspace”in the Animation Module.

;#; Fig 12. Status Bar ;#;

;#; Back to Basic Manual ;#;