Animate Flash with driving car animation should be the most common animation created again and again over the years. This series of animation tutorials will show you how to make it with animate flash. The final flash car animation is shown as below:

This is a very interesting flash animation. It takes only a few steps to accomplish the animation.

Part 1: Create the road and animated.

Part 2: Add the Car and animated.

Part 3 3: For more interesting effect, night poles are added and animated.

Let’s get started!

Create the road and animated

The first step of car animation with flash is to create the road movieclip. The most important of moving the road is to make it moving smoothly and seamless. In other words, the end of the road must match the beginning of the road.

The completed movieclip file of the road can be downloaded at the end of this tutorial.

Step 1: Draw a Basic Road Unit

Draw a basic road unit with the size 120 pixel (width) x 60 pixel (height).

Step 2: Copy the Basic Road Unit

Copy the basic road unit for 5 times to make the size of the road to 600 pixel (width) x 60 pixel (height).

Step 3: Work on Road Symbol

Convert the road in Step 2 to a MovieClip symbol. Double click the Road MovieClip to work on the symbol.

Select the road symbol, copy and paste to the end make a long road with the size 1200 pixel (width) x 60 pixel (height) as shown below.

Note:
For irregular pattern, you may use [Alt] + [Shift] and drag to copy

Step 4: Create Motion Tween

Insert a key frame at frame 100. Create a Motion Tween for the road.

Step 5: Moving the Road Smoothly and Seamlessly

In order to make the road moving smoothly and seamlessly, the end of the road (right end side) must match the beginning of the road (left end side). This can be done as follow:

1. Select the last keyframe.

2. Select the Road symbol.

3. Hold the [Shift} key to maintain horizontal position.

4. Drag the road symbol to a position as shown below. Be sure to match the pattern. The repeated pattern must be a little right of the original pattern. Therefore the pattern on the last frame will be a little behind of the first frame, thus matching the first frame.

Remarks:
This Animate Flash animation tutorial shows how to animate the road for the car animation. If you want the road moving more smoothly, increase the Frame Rate to 25 or 30.

Create and Animate the Car

This step of car flash animation shows how to add the night background. Then add car to the stage and animate.

This car animation flash tutorial shows how to add the night background and the car. This tutorial also shows how to animate the car in step by step.

The completed flash animation of this tutorial can be downloaded at the end of this tutorial.

Step 1: Add the Night Background

Add the twinkling stars and the moon at the background. You should know how to add the twinkling stars if you already read the Particle System tutorial.

Step 2: Add the Car Body and Tires

Add the Car Body and Tires to stage. Align the Tires to correct position. Group the Car Body and Tires together.

Step 3: Animate the Car Body and Beam Light

Since the road will not be very flat, let’s add a bit vibration effect (up and down) to the Car Body.

Import the Car Beam Light to library and drag to correct position. Also add the same vibration effect to the Beam Light.

Step 4: Animate the Car Tires

Insert Animate the Car Tire as shown below so that the Tires will be rotating. The car now will look like driving.

Create and Animate Night Poles

For more interesting car flash animation effect, let’s add some night poles at the background.

The flash car animation looks very good up to now. However the background seems a bit boring. Let’s add some night poles to the background. This make the whole flash car animation looks more interesting. We are using the same technique as creating and animating the road to create the night poles. Therefore we do not provide detailed procedures in this tutorial.

The completed car animation file can be downloaded at the end of this tutorial.

Step 1: Draw the Night Pole and Animate

Draw the Night Pole on the Stage. Convert the Night Pole into a Symbol. Animate the Night Pole with the same technique as animate the road.

Remarks:
This Flash animation tutorial shows how to create the car animation with night poles animated at the background. If you want the animation moving more smoothly, increase the Frame Rate to 25 or 30.

Download Animate Flash Source File:

drive-at-night-1.fla
drive-at-night-2.fla
drive-at-night-3.fla