TupiTube Documentation

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:

• Select a name for the tween you want to create.
• Select the object(s) you want to animate using the tween.
• Set the specific parameters required for the kind of tween you chose.
• Apply the tween.

Some important tips you should count on:

• You need at least one object in the scene to use a tween.
• Only one kind of tween can be applied for every object.
• 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.

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

;#; Fig 10. ;#;

;#; Fig 11. ;#;

;#; Fig 12. ;#;

;#; Fig 13. ;#;