;#; → Traducción en Desarrollo ← ;#;

Tell a story! Do you have a story to tell? It's the first step to create an animation project. Usually, newbies start drawing over the first frame from Tupi's Animation Module, not having the slightest idea about what will happen in the last frame of their projects; this definitely is not a good strategy to create your first animation exercise.

As any kind of project, animations also require a minimum level of planning. Before grabbing the pen or the mouse in your computer, take a moment to think about your idea and ask to yourself: What is the story I want to tell? No matter how small your project is, invest a few minutes to think about the details that will take part of your animation. Try to answer questions like these: Which are my characters? How they will look like? Where they will come from? Where they will move toward? How many scenes will you include in your project? The bigger your animation is, the answers to all these questions require more specific details.

For professional animators, the result of this planning is reflected in a document known as the script, which contains the whole story, references and descriptions of the animation project. The script will be the recipe that an entire team of animators will have to follow to make that project come true. Understanding that as newbie you are your own team, you must not despise the idea of writing your own scripts. This is a good exercise to make you a great animator. When you think of the importance of writing your script, think about the importance of the blueprints for an architect or the music scores for a musician.

For our first example, we have chosen a very simple idea: let's create a basic animation of a butterfly flying around the canvas, following a path like this:

;#; Fig 1. El recorrido de la mariposa ;#;

The butterfly will appear from the left side of the screen, moving to the right and disappearing in just few seconds. That's all folks. Probably you're thinking that we could try more complex and interesting animations, but remember that this is just our first example. Our goal right now is just to get used to the Tupi basic resources.

Well, now that we have created the mini-script for our example, let's get to work!

---

It's time to run Tupi for the first time:

;#; Fig 2. Ventana principal de Tupi ;#;

At this point you have two options, either to create a new project or to open an existing one. As this is our first time, we will create a new project by clicking on the first icon of the top toolbar:

;#; Fig 3. Creando un nuevo proyecto ;#;

A small dialog will show up on your screen. You will have to enter some basic information about your animation project: a file name, the author name, the size/resolution of our animation in pixels, the background color and the frames per second (FPS) we want to use initially.

For this example, we are going to fill in just the first two fields of the form, using the default values for the other parameters:

;#; Fig 4. Diálogo de nuevo proyecto ;#;

When you click the OK button, the Tupi workspace is set to start our project. The starting point is always the Animation module and more specifically, a blank canvas containing the first frame of our animation. Ok, we're ready to start drawing!

---

Every time we create a new project, the Animation tab is selected, the Pencil tool is enabled by default and our canvas is pointing to the first frame of our timeline, so we are ready to illustrate!

;#; Fig 5. Módulo de animación ;#;

Now, let's start drawing a line. It will be the reference path to guide the flight of our butterfly. Note that this is an item that we will use as a temporal helper to draw our animation. As we need it in every frame, we will add it from the Static Background Mode. To activate this mode, we need to select it from the first combo in the top panel:

;#; Fig 6. Habilitando el modo de fondo estático ;#;

Time to draw our first line!

;#; Fig 7. Dibujando una línea ;#;

Notice that you can adjust the reference path using the Nodes Selection tool, available from the left side toolbar:

;#; Fig 8. Herramienta de selección de nodos ;#;

When you select the reference path clicking on it, a bunch of green nodes will show up and your path will look like this:

;#; Fig 9. Activando la selección de nodos ;#;

Now, try to smooth your reference path editing the nodes that you consider are requiring some adjustment. Our goal here is to define the definitive flying route for our butterfly. The final result should be something like this (more or less):

;#; Fig 10. Ruta de referencia final ;#;

As our reference curve is done, we have to get back to the Frames Mode to start our animation:

;#; Fig 11. Activando modo de marcos ;#;

Time to draw our main character. The first thing we'll do is to adjust the thickness of our pencil by clicking on the Brush Properties button located in the external left sidebar:

;#; Fig 12. Panel de propiedades de la brocha ;#;

Choose the size you want for the pencil brush:

;#; Fig 13. Seleccionando el grosor del lápiz ;#;

Now, all we need is to choose the color we want to use for our first sketch. To do this, we must click on the Color Palette button, located on the external left sidebar:

;#; Fig 14. Paleta de colores ;#;

We will choose a brown color for the butterfly body and some blue for the wings. So, let's start with brown:

;#; Fig 15. Seleccionando el color café ;#;

Ok, now pick the Pencil tool and start drawing:

;#; Fig 16. Dibujando el cuerpo de la mariposa ;#;

Following with the wings, change the pencil color and finish the first position of our butterfly. Remember that we are still drawing in the frame #1:

;#; Fig 17. Dibujando las alas de la mariposa ;#;

It's a good practice to save your projects from time to time while you are working on it. So, let's save it.

;#; Fig 18. Guardando el proyecto ;#;

Ok, the first frame of our animation is done. Now we must draw the rest, so let's create more frames.

---

It's time to add more frames to our project. Let's do it from the Exposure Sheet panel located at the right side of Tupi's interface. The procedure is pretty simple, you just have to click on the second cell of the only column in the panel. In other words, you are selecting the Frame #2 from the Layer #1, just like this:

;#; Fig 19. Añadiendo un nuevo marco ;#; We'll repeat this procedure every time we need a new frame. For now, it's time to work on the second one, so we'll need to draw our butterfly in a new position, but before we have to activate the Onion Skin feature to see the previous frame as a reference in our canvas:

;#; Fig 20. Activando el papel cebolla ;#;

With this handy resource, we can realize the current position of the objects and characters that we are animating from previous and next frames. Did you notice that before activating the Onion Skin, Frame #1 was completely invisible? Well, now it looks like the Frame #2 were translucent:

;#; Fig 21. Papel cebolla en acción ;#;

Using the information of the first frame as reference, we'll draw the butterfly again, but this time moved a little forward:

;#; Fig 22. Dibujando la mariposa en un segundo marco ;#;

Ok, now we'll add a third frame, but before continuing we will enable the visibility of more previous frames (10 for this example) from the Onion Skin control, so you could see how your animation is progressing as you add more frames:

;#; Fig 23. Añadiendo un tercer marco y añadiendo diez marcos previos desde el control del papel cebolla ;#;

Tip: You can enable the Onion Skin feature either for previous and next frames. So, feel free to set as many frames backward and forward as you want to. This functionality will help you to develop smooth animations.

Now, we'll continue drawing our third frame following exactly the same steps we took before:

;#; Fig 24. Dibujando la mariposa en el marco #3 ;#;

At this point, it's very likely that you wonder: How many frames are we going to need for this animation? Well, that's a good question you'll learn to answer by yourself as you create more and more projects. Practice is the key, nevertheless there are factors that help you to calculate this value: scene complexity, the frames per seconds you choose, etc. For now, we will draw as many frames as we need to complete our mini-script:

;#; Fig 25. Dibujando la mariposa en el marco #6 ;#;

;#; Fig 26. Dibujando la mariposa en el marco #9 ;#;

;#; Fig 27. Capturas de pantalla de marcos #21, #31, #45, #46 ;#;

Tip: For this exercise we had to work on 73 frames. Now, it's very important to keep something in mind: you don't have to draw the last frame of your project in order to visualize how your animation is progressing. In fact, it's a good habit to check it every few frames, to ensure that your frame's composition is creating the result that you are expecting for your project. So, let's take a look at it.

---

Ok, we already have half the frames of our animation done, so it's time to visit the Player module. Now, there is no general rule about how many frames you need to create before making a preview of your project. This is another skill that you'll have to develop with practice. In other words, you choose whenever you want to preview your works while you are animating.

;#; Fig 28. Previsualización del proyecto desde el módulo de reproducción ;#;

Additionally, keep in mind that to play your on-going animation doesn't affect your project at all, so you can do it as many times as you want to. The main goal of this feature is to provide you a way to check the progress of your project, so you can detect and fix any issue early, ensuring the final result that you are expecting. The preview interface is quite straightforward and easy to use, besides the Control Panel contains all the options necessary to play your animation, either frame by frame or completely.

;#; Fig 29. Panel de control del reproductor ;#;

At the bottom of the module, you will find a Properties Panel full of handy information about the project: the name of the current scene, the frames total of the scene, the scene duration and the frames per second (FPS) current value. The FPS parameter is editable, so you are able to adjust it depending on how fast you want to play your current animation. The larger FPS value, the faster your scene will go. Therefore a smaller value will produce a slower reproduction.

Tip: The Loop option is a handy feature if your scene have few frames and you want to appreciate how smooth your animation is going. You can enable or disable it anytime.

;#; Fig 30. Opción de repetición (loop) ;#;

Ok, now it's time to continue our project adding and drawing more frames to complete the whole reference path, according to our script. So please, review the previous section and finish all the pending frames for your project. It's likely that you feel exhausted of drawing so many illustrations after a while, but this is part of the frame-by-frame animation technique and that's the reason we chose a simple character for this first exercise.

Are you done with all the missing frames? Well, It's time to remove the reference path we created at the beginning of this exercise. So, go back to the Static Background Mode, activate the Object Selection tool and pick the curve, then remove it clicking on the Trash icon and get back to the Frames Mode.

Note: As optional task, you could illustrate a background for the butterfly flight from the Static Background Mode. In fact, we did it for this example, but it's up to you.

;#; Fig 31. Herramienta de selección de objetos ;#;

;#; Fig 32. Ícono de la papelera ;#;

Now, are you agree with the result you watched from the Player module? Ok, then it's time to create our first video file!

---

Once your animation project is done, it's time to export it as a video file so you can publish it and share it. To do this, we have to open the Player tab and click on the Export button.

;#; Fig 33. Función de Exportar ;#;

A wizard dialog will show up. The first thing you have to choose is the format/extension you want for the video file:

;#; Fig 34. Diálogo de selección de formato ;#;

In the second dialog, you have to select the scenes of your project that you want to export. In this case, it's only one:

;#; Fig 35. Diálogo de selección de escenas ;#;

Finally, in the third dialog you have to set the name for your video file and the path where you want to export it:

;#; Fig 36. Diálogo de exportar archivos ;#;

Once you clicked on the Export button, your video file will be created. Depending on the number of scenes and the frames total, this process could take either seconds or minutes. When it finally finishes, you will be able to reproduce your video file from any media player. We are done!

;#; Fig 37. Resultado final ;#;

Note: Either the source file (.tup) and the video of this basic example are available in case you want to take a closer look at them. We hope this exercise inspires you to create your own animation projects, so keep practicing!

---

;#; Regresar a la Página Principal ;#;