Tupi User Interface
Main Components
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.
Tip: In case you don't know some of the technical concepts related to animation, please consult our glossary.
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 Menu: It's the conventional menu located at the top of most desktop programs. It contains the general options of the software grouped by categories (File, Edit, Import, Window, Modules and Help).
Fig 6. Top Menu
2. Top Toolbar: It's composed by the basic actions related to any Tupi project: Create, Open, Save, Save as, and Close current project.
Fig 7. Top Toolbar
3. Workspace: It's the main application area where you design, create and visualize your animation projects. The workspace contains three modules separated by tabs:
Fig 8. Workspace Tabs
- Animation Module: This module contains the canvas where you illustrate every frame of your animation project. Think of it as an embedded vector graphics editor with onion skin support and other handy tools.
- Player Module: This is a video player that allows you to preview your animation project anytime along your creation process.
- News Module: This is a complementary module that serves all the latest news about the project. Additionally, it informs you when a new version of Tupi has been released.
Tip: You can switch between workspace tabs using the shortcuts: Ctrl+1, Ctrl+2 and Ctrl+3.
4. Left Sidebar: This component contains three expandable panels related to Animation module's features, specifically those related to the illustration process:
Fig 9. Left Sidebar
- Color Palette: This panel contains the resources related to color management. From this resource, you can set the color of the brush for all the drawing tools, including the color of your scene background.
- Pen Properties: This panel contains all the settings related to the pen brush. Features like size and texture of the brush can be set from here.
- Objects Library: This panel contains the library manager for all the visual/audio objects of your animation projects. From here, you can import external items like images (JPG, PNG, GIF and SVG files) directly to the workspace.
5. Right Sidebar: This component contains two expandable panels related to the animation process, but focused on frames and scenes management:
Fig 10. Right Sidebar
- Scenes Manager: This panel as its name suggest, allows you to handle your project scenes. It supports basic operations like create, remove and rename them.
- Exposure Sheet: This panel contains the set of frames for each scene of your project. It is not the timeline as you possibly know it from other animation software, but it has a similar goal. From this interface you can handle the frames and layers that compose your scenes.
6. Bottom Sidebar: This component only contains one resource: the Timeline panel. This is a very popular interface piece used by many programs. In fact, it already became a standard tool to manage layers and frames. From this utility you can build the timeline of your animation project adding, editing and removing the frames and layers from all your scenes.
Fig 11. Bottom Sidebar
7. Expanded Panel: By default, when a new project is created in Tupi, the Exposure Sheet panel is expanded by default, but it can be collapsed any time. All the options from the left, bottom and right toolbar works in the same way, showing up on the side every panel belongs to, i.e. the Timeline panel appears in the bottom side of the interface.
Now, let's study in detail the Animation Module.