Animation Tutorial:

Tween Animation

Part 2: Creating the Tween

Adding the Tween Object

In this part of the tutorial we will create the tween itself.

Now our object is complete we can create the tween object itself. Click the Tween creation tool in the Tools toolbar.

Click the Tween creation cursor towards the top left of your page and drag down and right to create the tween frame at the size and shape you need. Remember to allow for the fact that we will be moving the star across the page to the right so you need to allow room for this.

Once you have created the Tween the Tween Properties dialog will pop up automatically. This allows you to set whether the tween starts automatically, whether it repeats and the speed of the animations (in frames per second).

Now you we must add the object we created earlier to the tween object.

In the Organiser right-click on the starcircle object and, keeping the mouse button down, drag the object onto the Tween object. Select "Insert into" from the pop up menu. You should find the starcircle object is now a sub-object or child of the tween itself as illustrated in the final portion of screenshot below.

Now when we select the starcircle object we will see it listed in the tween timeline which appears in the panel below the page editing area. If you cannot see the tween timeline make sure Notes View toggle button is set to On and then select the Tween 1 tab.

The pertinent section of your screen should look something like this:

 

Keyframes and Movement

You will note that at the top of the timeline window is a ruler. This marks the individual frames of the tween object. Each object has it's own channel in the timeline and there is a black rectangle below the first frame which indicates a keyframe at that frame. The first keyframe marks the point at which the object first appears. Let's add another keyframe to mark the end of the animation.

Locate the frame marker for Frame 20 on the ruler at the top of the timeline. Right-click on this division and choose Set Keyframe from the menu which appears.

A second keyframe indicator should now appear at frame 20.

Make sure that the end keyframe is still active (highlighted by a blue block in the ruler) and then select the starcircle object on the page. Drag it to a new position towards the right side of the page. That's all you need to do to create animation!

Press the Page Preview button to preview and you should now see the circle move quickly across the screen.

In the next part of the tutorial we will use node-editing to create and animate the star.