Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Flash Car Animation - Create and Animate the Road

Car animation on road with flash is the most basic animation.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

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 of the road is shown as above.

Step 1: Draw a Basic Road Unit

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

Basic Road Unit

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).

Copy the basic road unit

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

car animation - the road

Step 4: Create Motion Tween

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

Create Motion Tween

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.

Join the Road

Download Flash Source File:

Flash Source File drive-at-night-1.fla

Remarks:

This 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.