This is an old revision of the document!
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.
Now, tweening is a software feature that allows you make this process easier and faster for some specific kind of animations by calculating and generating some frames for you between an initial and a final state. In Tupi, there are several types of tweens: position, rotation, scale, shear, opacity and color. These transformations are calculated by the software in every frame following the parameters that you provide, saving you a lot of time.
Once you select the tween you want to use, the general workflow for all them is similar:
Some important tips you should count on:
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.
Fig 1. Tweening tools button
Fig 2. Tweening tools menu
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