TupiTube Documentation

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.

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.

;#; Fig 3. Drawing a circle ;#;

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 ;#;

;#; Fig 10. ;#;

;#; Fig 11. ;#;

;#; Fig 12. ;#;

;#; Fig 13. ;#;

;#; Fig 14. ;#;

;#; Fig 15. ;#;

;#; Fig 16. ;#;

;#; Fig 17. ;#;

;#; Fig 18. ;#;

;#; Fig 19. ;#;

;#; Back to Tweening tutorial ;#;