TupiTube Documentation

User Tools

Site Tools

Trace: • basic_example • wiki_code
basic_example

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
basic_example [2017/02/01 03:14] – [1. First things, first!] maeflorestabasic_example [2017/03/11 23:22] (current) – external edit 127.0.0.1
Line 29: Line 29:
 {{ wiki:basic_example_tupi_ui.png }} {{ wiki:basic_example_tupi_ui.png }}
 ;#; ;#;
-**Fig 2**. Tupi Main Window+**Fig 2**. Tupi main window
 ;#; ;#;
  
Line 45: Line 45:
 {{ wiki:basic_example_new_dialog.png }} {{ wiki:basic_example_new_dialog.png }}
 ;#; ;#;
-**Fig 4**. New Project Dialog+**Fig 4**. New project dialog
 ;#; ;#;
  
Line 51: Line 51:
 ----- -----
 ====3. Drawing Time!==== ====3. Drawing Time!====
-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 it!+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!
  
 {{ wiki:basic_example_animation_module.png }} {{ wiki:basic_example_animation_module.png }}
Line 57: Line 57:
 **Fig 5**. Animation module **Fig 5**. Animation module
 ;#; ;#;
-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 as a guide in every frame, we will add it from the **Static Background Mode**. To activate this mode, we need to select from the first combo in the top panel: + 
 +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: 
  
 {{ wiki:basic_example_animation_modes.png }} {{ wiki:basic_example_animation_modes.png }}
Line 73: Line 74:
 ;#; ;#;
  
-Notice that you can adjust the reference path using the Select Node tool, available from the left side toolbar:+Notice that you can adjust the reference path using the **Nodes Selection** tool, available from the left side toolbar:
  
 {{ wiki:basic_example_nodes01.png }} {{ wiki:basic_example_nodes01.png }}
 ;#; ;#;
-**Fig 8**. Selection node tool+**Fig 8**. Nodes selection tool
 ;#; ;#;
  
-When you select the reference path clicking on it with the mouse cursor, a bunch of green nodes will show up and your path will look like this:+When you select the reference path clicking on it, a bunch of green nodes will show up and your path will look like this:
  
 {{ wiki:basic_example_path02.png }} {{ wiki:basic_example_path02.png }}
 ;#; ;#;
-**Fig 9**. Activating node selection+**Fig 9**. Activating nodes selection
 ;#; ;#;
  
Line 98: Line 99:
 {{ wiki:basic_example_frames_mode.png }} {{ wiki:basic_example_frames_mode.png }}
 ;#; ;#;
-**Fig 11**. Final reference path+**Fig 11**. Enabling frames mode
 ;#; ;#;
  
-Time to draw our main character. The first thing we'll do is to adjust the thickness of our pencil by clicking on the Pen Properties button located in the external left sidebar: +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: 
  
 {{ wiki:basic_example_brush_properties.png }} {{ wiki:basic_example_brush_properties.png }}
 ;#; ;#;
-**Fig 12**. Pen properties panel+**Fig 12**. Brush properties panel
 ;#; ;#;
  
Line 115: Line 116:
 ;#; ;#;
  
-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:+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:
  
 {{ wiki:basic_example_color_palette.png }} {{ wiki:basic_example_color_palette.png }}
 ;#; ;#;
-**Fig 14**. Color Palette+**Fig 14**. Color palette
 ;#; ;#;
  
Line 129: Line 130:
 ;#; ;#;
  
-Ok, now pick the Pencil tool and start drawing:+Ok, now pick the **Pencil** tool and start drawing:
  
 {{ wiki:basic_example_pencil_tool.png }} {{ wiki:basic_example_sketch01.png }} {{ wiki:basic_example_pencil_tool.png }} {{ wiki:basic_example_sketch01.png }}
Line 136: Line 137:
 ;#; ;#;
  
-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 number 1:+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:
  
 {{ wiki:basic_example_blue_color.png }} {{ wiki:basic_example_sketch02.png }} {{ wiki:basic_example_blue_color.png }} {{ wiki:basic_example_sketch02.png }}
Line 154: Line 155:
 ====4. Adding new frames==== ====4. Adding new 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:  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: 
 +
 {{ wiki:basic_example_adding_new_frame.png }}  {{ wiki:basic_example_adding_new_frame.png }} 
  
Line 160: Line 162:
 **Fig 19**. Adding a new frame **Fig 19**. Adding a new frame
 ;#; ;#;
-We will repeat this procedure every time we need a new frame. For now, it's time to work on the second one, so we will 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:+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: 
 {{ wiki:basic_example_onion_skin.png }}  {{ wiki:basic_example_onion_skin.png }} 
  
Line 167: Line 170:
 **Fig 20**. Activating onion skin **Fig 20**. Activating onion skin
 ;#; ;#;
-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:+ 
 +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: 
 {{ wiki:basic_example_skin_in_action.png }} {{ wiki:basic_example_skin_in_action.png }}
 ;#; ;#;
 **Fig 21**. Onion skin feature in action **Fig 21**. Onion skin feature in action
 ;#; ;#;
 +
 Using the information of the first frame as reference, we'll draw the butterfly again, but this time moved a little forward: Using the information of the first frame as reference, we'll draw the butterfly again, but this time moved a little forward:
 +
 {{ wiki:basic_example_sketch03.png }} {{ wiki:basic_example_sketch03.png }}
 ;#; ;#;
 **Fig 22**. Drawing the butterfly in the second frame **Fig 22**. Drawing the butterfly in the second frame
 ;#; ;#;
-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:+ 
 +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: 
 {{ wiki:basic_example_adding_third_frame.png }}  {{ wiki:basic_example_adding_third_frame.png }} 
  
Line 184: Line 193:
 **Fig 23**. Adding third frame and rising to 10 the previous frames in the onion skin control **Fig 23**. Adding third frame and rising to 10 the previous frames in the onion skin control
 ;#; ;#;
-**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 :+**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: 
 {{ wiki:basic_example_sketch04.png }} {{ wiki:basic_example_sketch04.png }}
 ;#; ;#;
 **Fig 24**. Drawing the butterfly in frame #3 **Fig 24**. Drawing the butterfly in frame #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. 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: For now, we will draw as many frames as we need to complete our mini-script:
 +
 {{ wiki:basic_example_sketch05.png }} {{ wiki:basic_example_sketch05.png }}
 ;#; ;#;
 **Fig 25**. Drawing the butterfly in frame #6 **Fig 25**. Drawing the butterfly in frame #6
 ;#; ;#;
 +
 {{ wiki:basic_example_sketch06.png }} {{ wiki:basic_example_sketch06.png }}
 ;#; ;#;
 **Fig 26**. Drawing the butterfly in frame #9 **Fig 26**. Drawing the butterfly in frame #9
 ;#; ;#;
 +
 {{ wiki:basic_example_sketch07.png }} {{ wiki:basic_example_sketch07.png }}
 {{ wiki:basic_example_sketch08.png }} {{ wiki:basic_example_sketch08.png }}
Line 208: Line 223:
 **Fig 27**. Screenshot of frames #21, #31, #45, #46 **Fig 27**. Screenshot of frames #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. **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.
 ----- -----
 ====5. Time to preview our project!==== ====5. Time to preview our project!====
-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.+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. 
 {{ wiki:basic_example_player_preview.png }} {{ wiki:basic_example_player_preview.png }}
 ;#; ;#;
 **Fig 28**. Preview of the project from the Player module **Fig 28**. Preview of the project from the Player module
 ;#; ;#;
 +
 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. 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. 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.
 +
 {{ wiki:basic_example_player_controller.png }} {{ wiki:basic_example_player_controller.png }}
 ;#; ;#;
 **Fig 29**. Player control panel **Fig 29**. Player control panel
 ;#; ;#;
 +
 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.   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.  
  
Line 235: Line 255:
  
 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**. 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. 
  
 {{ wiki:basic_example_object_selection.png }} {{ wiki:basic_example_object_selection.png }}
Line 246: Line 268:
 ;#; ;#;
  
-Now, are you agree with the result you watched from the Player Module? Ok, then it's time to create our first video file!+Now, are you agree with the result you watched from the **Player** module? Ok, then it's time to create our first video file!
 ----- -----
 ====6. Exporting to video file!==== ====6. Exporting to 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.+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. 
 {{ wiki:basic_example_export_feature.png }} {{ wiki:basic_example_export_feature.png }}
 ;#; ;#;
 **Fig 33**. Export feature **Fig 33**. Export feature
 ;#; ;#;
 +
 A wizard dialog will show up. The first thing you have to choose is the format/extension you want for the video file: A wizard dialog will show up. The first thing you have to choose is the format/extension you want for the video file:
 +
 {{ wiki:basic_example_export_wizard01.png }} {{ wiki:basic_example_export_wizard01.png }}
 ;#; ;#;
-**Fig 34**. Format Selection Dialog+**Fig 34**. Format selection dialog
 ;#; ;#;
 +
 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: 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:
 +
 {{ wiki:basic_example_export_wizard02.png }} {{ wiki:basic_example_export_wizard02.png }}
 ;#; ;#;
-**Fig 35**. Scene Selection Dialog+**Fig 35**. Scene selection dialog
 ;#; ;#;
 +
 Finally, in the third dialog you have to set the name for your video file and the path where you want to export it: Finally, in the third dialog you have to set the name for your video file and the path where you want to export it:
 +
 {{ wiki:basic_example_export_wizard03.png }} {{ wiki:basic_example_export_wizard03.png }}
 ;#; ;#;
-**Fig 36**. File Export Dialog+**Fig 36**. File export dialog
 ;#; ;#;
-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!+ 
 +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!
  
 {{ wiki:basic_example_video.png }} {{ wiki:basic_example_video.png }}
Line 275: Line 305:
 **Fig 37**. Final result **Fig 37**. Final result
 ;#; ;#;
 +
 **Note:** Either the {{wiki:example.tup|source file (.tup)}} and the [[https://www.youtube.com/watch?v=QjiIVEgH6HI|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!  **Note:** Either the {{wiki:example.tup|source file (.tup)}} and the [[https://www.youtube.com/watch?v=QjiIVEgH6HI|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! 
 ----- -----
basic_example.1485918890.txt.gz · Last modified: 2017/03/11 23:22 (external edit)