Simple Tweening Animation
Created and designed by Vivienne Trulock for ilikecake, 2005
Car & Plane
To make the car drive and the plane move across the sky, you'll use a simple animation technique called tweening. To tween, you define settings for the starting and ending frames, and Director fills in the frames in between. See completed movie
We will use these images. Once you have saved them, open Director and import them in, using the 'File > Import' option.
Drag the car from the cast onto the stage so that it is also in row 1 of the score.
Click on row 1 frame 1 of the score to select the first frame of the car
Position the car where you want it to begin driving from - in this case off the edge of the left stage
Next, select the last frame of the car sprite in the score
Now, drag the sprite across the screen. A dotted line will appear between the cars start and end position.
Rewind and play the movie. The car should animate across the screen. Do the same for the plane.
The Bounding Box Problem
You will notice that where the two sprites cross over each other, the planes boundary box can be seen.
To get rid of this box, select the plane and right click the mouse. Select the properties option.
In the planes properties window, select the ink dropdown menu, and change it from copy to background transparent.
The sprite should look something like this
Perspective
The plane should get larger as it flys towards the viewer. To do this select the last frame of the plane. With this frame selected, change the width and height properties of the plane in the plane properties window.
Completed Movie
Finished movie of car-plane animation. This is a .dcr file. It is compressed and you can only see this if you have shockwave installed.
DIY Exercise
Using the tweening techniques shown above, use the traffic light images with the car to create the following:
scene 1: traffic light green to left and right, car enters stage left, speed medium
scene 2: traffic light amber to left and right, car slows
scene 3: traffic light red to left and right and red to front, car stops
scene 4: traffic light red to left and right and green to front, car waits stopped
scene 5: traffic light red to left and right and amber to front, car waits stopped
scene 6: traffic light red to left and right and red to front, car waits stopped
scene 7: traffic light green to left and right, car zooms off at speed
you should end up with something like this
Hints
If using separate sprites for each of the instances of the car above, use the sprite properties window x and y coordinates to position the first frame of the second car to the exact position of the first car.
Alternatively, use key frames (Insert > Keyframe) and change the position of the keyframe on the stage to control the speed.
The further the sprite has to travel on the stage the faster it will travel.
resize the car to 200 * 50 to make it easier to manipulate
resize the traffic lights to 60 * 100 to match the car better
Extras - 1
Use the flip horizontal tool to create a second car which will travel from right to left and add in to the scene above
.
.
.
-
-
-
-
-
.