Differences

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

--- tweening [2017/02/24 05:30] – [Position Tween] maefloresta
+++ tweening [2017/03/11 23:22] (current) – external edit 127.0.0.1
@@ Line 4: / Line 4: @@
 =====Tweening Tutorial=====
+====Introduction====
 Traditional animation techniques require that you illustrate every frame of your project. So in example, if you are animating a bouncing ball using 20 frames, you will have to draw the ball 20 times in a different position, one time for every frame, just like we did it in our [[basic_example|basic example]].
@@ Line 20: / Line 20: @@
     * Once an object is part of a tween, that object can't be edited as a vector path.
-The access to the list of tween features is available from the left toolbar at the Animation tab, so let's make a basic example using each of them.
+The access to the list of tween features is available from the left toolbar at the Animation tab, you just have to click on the Tweening button.
 {{ wiki:tweens_menu.png }}
@@ Line 32: / Line 32: @@
 ;#;
-====Position Tween====
+Now it's time to make a basic example using each of them:
-As its name implies, this tween is related to movement. Let's say you have an object in the frame #1 and you want to take it through the canvas area from the current position to another point following an specific path and using N frames, well this tween can help you to do the hard work creating N-1 frames for you and placing the object in the right place for every frame, generating the illusion of movement for that item.
+    * [[position_tween|Position Tween]]
+    * [[rotation_tween|Rotation Tween]]
+    * [[scale_tween|Scale Tween]]
+    * [[shear_tween|Shear Tween]]
+    * [[opacity_tween|Opacity Tween]]
+    * [[color_tween|Color Tween]]
-Ok, let's animate a bouncing ball to make things go easier. First at all, let's add a circle in some point of the top-left corner of the canvas in our first frame.
-{{ wiki:position_tween_circle.png }}
 ;#;
-**Fig 3**. Drawing a circle
+[[misc_doc#Miscellaneous Tupi Resources|Back to Previous Page]]
 ;#;
-Now, let's open the Position tween from the Tweening menu.
-{{ wiki:position_tween_menu.png }}
-;#;
-**Fig 4**. Selecting the Position tween
-;#;
-Take a look at the panel in the right side of the canvas. This is the Position tween manager, the interface where you will create and edit all the tweens of this type.
-{{ wiki:position_tween_manager.png }}
-;#;
-**Fig 5**. Position tween manager
-;#;
-The next step is to create our first Position tween, so let's fill in the first field of the panel with the name "ball" and click on the plus button.
-{{ wiki:position_tween_name.png }}
-;#;
-**Fig 6**. Creating new tween
-;#;
-Now you will have access to the properties of your current tween. As you can see, you will have to do two tasks: 1. Select the object you want to move and 2. Define the path you want for your object goes over.
-{{ wiki:position_tween_properties.png }}
-;#;
-**Fig 7**. Position tween properties
-;#;
-Following the first step, let's select the only object we have in the scene. **Tip:** It's possible to select several objects for the same tween.
-{{ wiki:position_tween_selection.png }}
-;#;
-**Fig 8**. Selecting object for the Position tween
-;#;
-Following the second step, let's pick on the **Set Path Properties** checkbox, to define the path we want for the selected object.
-{{ wiki:position_tween_path.png }}
-;#;
-**Fig 9**. Setting the path for the Position tween
-;#;
-{{ wiki:position_tween_subpath01.png }}
-;#;
-**Fig 10**.
-;#;
-{{ wiki:position_tween_subpath02.png }}
-;#;
-**Fig 11**.
-;#;
-{{ wiki:position_tween_editpath01.png }}
-;#;
-**Fig 12**.
-;#;
-{{ wiki:position_tween_editpath02.png }}
-;#;
-**Fig 13**.
-;#;
-{{ wiki:position_tween_spreadsheet01.png }}
-;#;
-**Fig 14**.
-;#;
-{{ wiki:position_tween_spreadsheet02.png }}
-;#;
-**Fig 15**.
-;#;
-{{ wiki:position_tween_apply01.png }}
-;#;
-**Fig 16**.
-;#;
-{{ wiki:position_tween_apply02.png }}
-;#;
-**Fig 17**.
-;#;
-{{ position_tween_preview.png }}
-;#;
-**Fig 18**.
-;#;
-{{ position_tween_close.png }}
-;#;
-**Fig 19**.
-;#;
-====Rotation Tween====
-====Scale Tween====
-====Shear Tween====
-====Opacity Tween====
-====Color Tween====