Differences

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

--- position_tween [2017/02/25 02:02] – maefloresta
+++ position_tween [2017/03/11 23:22] (current) – external edit 127.0.0.1
@@ Line 4: / Line 4: @@
 =====Position Tween=====
-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.
+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 (where **N** is the frames total defined by yourself), 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.
-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.
+Ok, let's animate a bouncing ball to make things go easier. First at all, let's add a circle (our ball) in some point of the top-left corner of the canvas in our first frame.
 {{ wiki:position_tween_circle.png }}
@@ Line 54: / Line 54: @@
 **Fig 9**. Setting the path for the Position tween
 ;#;
+Now we have to define the first segment of our path by clicking once on some point of the canvas where we want our bouncing ball to move toward.
 {{ wiki:position_tween_subpath01.png }}
 ;#;
-**Fig 10**.
+**Fig 10**. Defining the first subpath of the tween
 ;#;
+We can create many subpaths as we want to, but for this example we will just create two, so we will click one more time to the define the whole route of the tween. For now, it has the shape of a "V" letter.
 {{ wiki:position_tween_subpath02.png }}
 ;#;
-**Fig 11**.
+**Fig 11**. Defining the second subpath of the tween
 ;#;
+As we are simulating a bouncing ball, we will edit the first subpath dragging the white node in its end (out of the subpath) to transform that segment into a curve.
 {{ wiki:position_tween_editpath01.png }}
 ;#;
-**Fig 12**.
+**Fig 12**. Editing the curve of the first path
 ;#;
+And we will repeat the same procedure with the second subpath to define the complete route of our tween. This will be the way our bouncing ball will go over.
 {{ wiki:position_tween_editpath02.png }}
 ;#;
-**Fig 13**.
+**Fig 13**. Editing the curve of the second path
 ;#;
-{{ wiki:position_tween_spreadsheet.png }}
+By default, the Position tween assigns few frames for every subpath, as you can see it in the table of the properties panel. To edit every frame cell you can either double click on each one or to use the **+**|**-** buttons to increment/decrement the frame values for every segment.
+{{ wiki:position_tween_spreadsheet01.png }}
 ;#;
-**Fig 14**.
+**Fig 14**. Frames per subpath
 ;#;
-{{ wiki:position_tween_spreadsheet.png }}
+So, we will edit every segment to set 20 frames per subpath, getting a total of 40 frames for the whole example.
+{{ wiki:position_tween_spreadsheet02.png }}
 ;#;
-**Fig 15**.
+**Fig 15**. Editing frames per subpath
 ;#;
+Now we have to click on the **Update Tween** button to apply this tween to the current scene. So, Tupi will calculate the position of our bouncing ball for every frame.
 {{ wiki:position_tween_apply01.png }}
 ;#;
-**Fig 16**.
+**Fig 16**. Applying tween
 ;#;
+Once the tween is applied, you will see how the new frames are generated automatically by the program. When you are done, you can close the properties panel of the current tween by clicking on the **Close** button.
 {{ wiki:position_tween_apply02.png }}
 ;#;
-**Fig 17**.
+**Fig 17**. Tween applied
 ;#;
+So now let's go to the **Player tab** and watch the result of our first tween exercise, a bouncing ball!
 {{ wiki:position_tween_preview.png }}
 ;#;
-**Fig 18**.
+**Fig 18**. Playing the tween animation
 ;#;
+Remember two things: 1. You can edit the parameters of every tween any time you need it, including to modify the path nodes and adding new subpaths as we did it at the first time, and 2. You can't add new tweens over the same object, just once. To release an object, you have to remove the tween related to that item.
 {{ wiki:position_tween_close.png }}
 ;#;
-**Fig 19**.
+**Fig 19**. Tween manager
 ;#;
+**Note:** To delete a tween, select it from the tween manager panel and click on the **Remove Tween** button.
+{{ wiki:position_tween_remove_button.png }}
+;#;
+**Fig 20**. Removing a tween from the tween manager
+;#;
+These are some videos from our [[https://youtube.com/c/maefloresta|Youtube channel]] with additional exercises using the Position tween feature:
+    * [[https://www.youtube.com/watch?v=Y0Y2z8byS8c|Spaceship]]
+    * [[https://www.youtube.com/watch?v=H3dcYzuFeAU|Fly flight]]
+    * [[https://www.youtube.com/watch?v=QOatgQuVU-A|Skater]]
+    * [[https://www.youtube.com/watch?v=o0DZ6AYWh58|Letter A]]
 ;#;
 [[tweening#Tweening Tutorial|Back to Tweening tutorial]]
 ;#;