Moving a car on a road with Adobe Flash 8 Motion Guide

In this tutorial you will learn how to move a car on a road by using Motion Guide. Later we will apply custom ease to the motion (Flash Professional only).

1. Create a new Flash document about 500x500 pixels.
2. Choose File >> Import >> Import To Stage … (CTRL+R) and choose a proper image, or take the one below.

3. Rename the first layer background. Insert a new layer and name it car.
4. In the first frame of the car layer import (CTRL+R) this time an image of a car or take the one below.

5. With the car image selected choose Modify >> Convert to Symbol (F8) and then select Movie Clip behavior. Name it carMC.
6. Put the car in the front of the road.
7. From the Properties Inspector of the first frame of the car layer choose Tween: Motion.
8. Go to the frame 100 of the car layer and press F6 to insert a new keyframe. Also press F6 in the frame 100 of the background layer.
9. In the frame 100 of the car layer put the car Movie Clip in the other part of the road.
10. Right click on the car layer and choose Add Motion Guide.
11. Select the first frame of the Guide:car and draw a path that follows the road like in the picture below:

12. Snap the center of the car Movie Clip to the beginning of the line in the first frame, and to the end of the line in the frame 100.
13. Great job! Now we will add some ease to the motion. Go to the first frame of the car layer. In the Properties Inspector choose Edit… button from the right of the Ease. A new window is open like in the picture below:

14. Using the mouse curve the line as you wish then press OK.
15. Now test the movie (CTRL+Enter) and see how the car is moving on the road.

You need to Register in order to download the FLA file.

Subscribe now via RSS feed and get all the new tutorials

written by LJ , July 04, 2007

hi, im already on step 6, but don't how to follow step 7 onwards..where the properties inspector located is?pls reply..i'm so interested to learn this..tnx!

written by AnaS , July 08, 2007

Hi,

Ussualy the Properties Inspector, also known as Properties Panel, is located in below the stage.
If you don't see it go to Window>>Properties>>Properties (CTRL F3).

Hope it helps,
Tutorial5.com Team

written by Sagar , July 14, 2007

I loved your website. Its helped me a lot. PLS. keep up the good work

written by ku , July 18, 2007

i tried to ur tutorial.but my car is not going on the road.it goes in a straight line.pls hlp me

written by ryna , July 18, 2007

how to put the car movie clip in the car layer?

written by AnaS , July 20, 2007

how to put the car movie clip in the car layer?


You should go in the first frame of the car layer (on the Timeline). Make a click in the Timeline on the frame ti select it, and then go to File>>Import>>Import to Stage (CTRL R) and select the picture of the car you want to insert.

Hope it helps!

written by AnaS , July 20, 2007

i tried to ur tutorial.but my car is not going on the road.it goes in a straight line.pls hlp me


If you followed exactly the steps of this tutorial, probably you didn't snap ok the center of your movie clip to the beggining and the end of the line.

So the center of your movie clip (is a white circle with a cross in the middle when you select the movie clip) should be on the path you want to follow.

written by jessica , July 23, 2007

how do i snap the center of the car movie clip

written by flash , July 24, 2007

Hi I'm stuck on step 13, as the Edit button is greyed out so I can't select it to do step 13 onwards.. what am I doing wrong?

written by AnaSt , July 31, 2007

Go to the first frame of the car layer and click to select it, now choose Edit button. If itis still disabled maybe you don't have Flash Professional, but Flash Standard Edition.

written by snowcone , August 01, 2007

12. Snap the center of the car Movie Clip to the beginning of the line in the first frame, and to the end of the line in the frame 100.
13. Great job! Now we will add some ease to the motion. Go to the first frame of the car layer. In the Properties Inspector choose Edit? button from the right of the Ease. A new window is open like in the picture below:


how do you do this?????
its really comfusing

written by Martti010 , August 04, 2007

That's a good tutorial,thanks for sharing this:D

written by damned , August 10, 2007

god tutorial...how can i do to leave trace behind the car?! please reply...tnx all

written by eder , August 14, 2007

hello i'm eder...thank you for helping because i need it on my exam..thanx so much...

written by mike , August 17, 2007

what does snap the movie clip

written by Jared , September 17, 2007

Great tutorial!

written by faith , September 24, 2007

yes i made an animation with an arrow
www.faithcopeland.com/arrow.swf
but as ou see the arrow wont fly right
how can i fix this
faith

written by faith , September 24, 2007

i cannot make the arrow fly correctly how can i do this

written by AnaSt , September 25, 2007

The arrow is moving acording to its registration point. Probably your arrow's registration point is center both horizontal and vertical. Change the registration point to the point of the arros.

written by yams , November 13, 2007

step by step tutorials for web designing

written by yo , February 05, 2008

por k el carrito no va un poco mas rapido de lo k sta llendo ahorita????????????????????????????? ehh aver diganme por k weyes????????????????????????

written by kindLerX , February 08, 2008

Tnx For Da help evEn I donT underStnd!!!!!!!!!!!!!1

written by Matt , February 25, 2008

I was having the same problem with "Snapping" in step 12, but I figured it out.

All you have to do is, in the first frame, click the "Snap" button on the bottom of the screen, in the Properties Inspector box...Do the same for frame 100.

written by nicole , February 29, 2008

11. Select the first frame of the Guide:car and draw a path that follows the road like in the picture below:


how do you draw a path? with what?

written by Cameron Mackenzie , April 30, 2008

this is really really difficult !!!!!!!
it took me 2 hrs just to finish the so call"easy" work !!!
im very fustrated !

I thought that it helped me very littly, and that it wasn't very easy to follow the instructions. I suggest that next time, you should do a better job!

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (25)