;#; Back to Tweening tutorial ;#;
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 (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 (our ball) in some point of the top-left corner of the canvas in our first frame.
;#;
Fig 3. Drawing a circle (our bouncing ball)
;#;
Now, let's open the Position tween from the Tweening menu.
;#;
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.
;#;
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.
;#;
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.
;#;
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.
;#;
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.
;#;
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.
;#;
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.
;#;
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.
;#;
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.
;#;
Fig 13. Editing the curve of the second path
;#;
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.
;#;
Fig 14. Frames per subpath
;#;
So, we will edit every segment to set 20 frames per subpath, getting a total of 40 frames for the whole example.
;#;
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.
;#;
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.
;#;
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!
;#;
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.
;#;
Fig 19. Tween manager
;#;
Note: To delete a tween, select it from the tween manager panel and click on the Remove Tween button.
;#;
Fig 20. Removing a tween from the tween manager
;#;
These are some videos from our Youtube channel with additional exercises using the Position tween feature:
;#; Back to Tweening tutorial ;#;