Navigate
-

PollPoll
Do the advertisements detract from your experience at Imusion Studio?
Yes
No
Haven't even noticed them
StatisticsStatistics
Hits

27 Guest(s) Online

0 Member(s) Online

77235 Posts

7222 Members

Latest Member: infilger
AffiliatesAffiliates
Imusion Studio - Innovative Ideas, Innovative Designs
Welcome Guest! (Login or Register)
-
Macromedia Flash Tutorial
Mini Racing
Views: 2100
Comments (19)
Rate:  
  • Currently 2.99/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Description: Making a GOOD racing game! (easy/novice)
Written by: BittenApple
CirtexHosting


Mini Racing
Written totally by BittenApple, 23/12/04
Tutorial accepted at pixel2life.com // If you like the tutorial.. PLEASE REGISTER

Download files here: http://imusion.net/tutorials/flash/flashtut5/tutorial_bittenapple.zip

People show you how to make your car move, or a car with boundarys - but you may wonder how to make your own mini-game.. good animaters will find the CPU part alot easier by the way.

Follow these easy steps to make your own racing game!

A .fla, and a .swf, is at the bottom to see what it turns out like

------------

i. If you've already downloaded, or made, your own preloader. Place that into frame 1, if you haven't im sure you can find a place to download one either from Kirupa or searching on google!

ii. Now, make 5 frames. Add a blank keyframe into frame 2 of all of them and name them like so:



iii. On your background layer, make it a graphic (something to do with racing), or you can press CTRL + F3 to bring up the properties tab, and on background select a green colour so its like grass.

iv. Select your line tool (you can do this by pressing N) and make the width of the line 10 and make the colour back.

v. Now on your layer track draw out the outline of your track. If you want corners just leave as straight lines just like the picture below:



vi. When you scroll over your straight lines that will be your corners, you will notice a curved shape just below your arrow. When this appears, click and drag your line and you'll notice that the straight line turns into a curved shape - adjust this to your liking.

Now you should have something like this:



vii. Select the whole of the track layer on frame 2 where your black lines should be, and turn this into an movie clip by pressing F8. Call it 'track1'.

viii. Now in the 'track1' movie clip, copy all of the black lines, and 'paste in' it into the white layer, on frame 2, the track and white layer should be exactly the same - if it looks like there is 2 black lines, align one of them with the other one, and none of them EXCEPT for that the track layer has a MC on it, and the white layer has a normal drawing.

ix. If you look at the track layer, you should notice 2 small circles, in between the frame name and a square. Click the one of the left (this hides the track layer).

x. Select a white colour and fill in your track on the layer named white. You may select a light grey and add some effects like skidmarks.

It should end up like this:



xi. You may delete all of the black lines on the layer named white. And click on the black circle on the properties of the layer named track.

xii. Now we've forgotten something! On the track layer, click on the MC (movie clip) and go into the Properties tab, and on the instance name, type in land. This is so Flash MX can tell which is the boundary by the MC's instance name.



xiii. Now on frame 45, press F5 on all layer. And on the player layer, press F6 on every 15 frames. You may name the frame on CPU 'countdown' by click on the frame and going into the frames propeties and typing in 'countdown' where it says framename. This is purely for refrence.

Your timeline should look like this.



xiv. Also on the layer CPU, you can draw 2 cars, one blue and one red, also draw a starting line.

This is what I came up with (make sure all of the frames are like yours as on mine):



xv. Now select all of the blue car, and press F8 and make it a MC. Name it 'player' and select the red car, press F8 and make it a MC, name it 'cpu'. Put thier instances names as 'player' for player, and 'cpu' for cpu.

xvi. Copy the blue car which is on the CPU layer, and ''paste in paste'' it into the layer called player on frame 46. You should leave the red car on the CPU layer, just make sure its in frame 46 along with the starting line.

xvii. Now, on the blue car, add this script to it:

Code:
onClipEvent(load){
speed = 0;
}
onClipEvent (enterFrame) {

if (Key.isDown(Key.UP)) {
speed += 0.5;
}
if (Key.isDown(Key.DOWN)) {
speed += -0.2;
}
if (Math.abs(speed)>10) {
speed *= .7;
}
if (Key.isDown(Key.LEFT)) {
_rotation -= 12;
}
if (Key.isDown(Key.RIGHT)) {
_rotation += 12;
}
speed *= .98;
x = Math.sin(_rotation*(Math.PI/180))*speed;
y = Math.cos(_rotation*(Math.PI/180))*speed*-1;
if (!_root.land.hitTest(_x+x, _y+y, true)) {
_x += x;
_y += y;
} else {
speed *= -.6;
}
}
 


xiix. Now, there should be 3 blank keyframes on the player layer, between frames 2 and 40 - on the first keyframe add a '3', on the 2nd add a '2' and on the 1st and a '1'. This will make our countdown..

xix. Now, animate the CPU so it looks like its gone around the track once.. it should take up roughly 100-150 frames, depends what frame rate you are using - however, make sure the player's MC is seperate to the CPU's. On the player frame, extend it so it fits when the CPU returns to the finish.

xx. After this frame, add another frame. Put 'You lose' on it with text. Add this code to it:

Code:

stop();


xxi. After this frame, again, add another frame. Put 'You win' on it. Make this frame called 'youwin'. Add this code to it:

Code:

stop();


xxii. Now, go onto the layer which the 'Start/Finish' line is on - make sure this frame goes along the whole of the CPU's animation, if not, make a new layer for it and copy and paste it onto that layer. Select the 'Start/Finish' line, and press F8. Call it anything you like.

xxiii. The 'Start/Finish' line MC doesnt need an instance frame, just add this code to it:

Code:
onClipEvent (enterFrame) {
if(this.hitTest(_root.player)){
_root.gotoAndStop("youwin");
}
}


----------

I think thats about it - if I have left anything out, please download the .fla, or the .swf to see what its like. You can edit the code/s to your likings.

EDIT: The .fla is for Flash MX 2004, and I have fixed the bug(s) on the .swf file iswell..

----------

_________________
If you need to contact me, e-mail or AIM me, ill be happy to help if im online!
If you're a guest reading this, register - and join the community!!

Comments
Post Icon
Comment #1
Johnathan
Status: Offline
Damn it's so hard to beat the computer! Anywho great tut for learning the basics of how to use action script in your flash stuff.
Rank: Forum Administrator
Wednesday February 2nd, 2005 at 1:47 PM

Post Icon
Comment #2
Guest: BittenApple
No Avatar
Status: Offline
Thanks guys, yes its hard to beat the computer on my example as its so it doesnt look easy. You can EASILY change the speed because you animate itself.. ;) I hope you all enjoy and vote well, I tried my best to explain it as best as I can.
Rank: Guest
Thursday February 3rd, 2005 at 4:09 PM

Post Icon
Comment #3
Guest: patellio
No Avatar
Status: Offline
Looks like a nice tut...Ill try it out and post my results
Rank: Guest
Monday February 21st, 2005 at 1:20 AM

Post Icon
Comment #4
Robert
Status: Offline
Nice, I'm gonna set it up within the next couple of days and let myself have some FUN FUN FUN! haha.
Rank: Public Relations
Thursday April 7th, 2005 at 10:14 AM

Post Icon
Comment #5
Guest: flash_unlmeted
No Avatar
Status: Offline
Great fun but how would you add say a lap counter to it thanks
Rank: Guest
Sunday November 5th, 2006 at 8:47 AM

Post Icon
Comment #6
Guest: jacks0n
No Avatar
Status: Offline
anyone preview of the final result? I want to play it :)
Rank: Guest
Thursday January 25th, 2007 at 10:57 AM

Post Icon
Comment #7
Guest:
No Avatar
Status: Offline
Great man KEEP IT UP
Rank: Guest
Sunday September 9th, 2007 at 7:45 PM

Post Icon
Comment #8
Guest: jm
No Avatar
Status: Offline
very hard to follow :(
Rank: Guest
Friday October 19th, 2007 at 7:37 PM

Post Icon
Comment #9
Guest: jithin
No Avatar
Status: Offline
i need to make a simple racing game not a hard one
Rank: Guest
Thursday December 27th, 2007 at 8:36 AM

Post Icon
Comment #10
Guest: amyth
No Avatar
Status: Offline
need to make a simple football game not a hard one
Rank: Guest
Tuesday January 22nd, 2008 at 2:17 AM

Post Icon
Comment #11
Guest: jimmy
No Avatar
Status: Offline
I neeed start off with something easier
Rank: Guest
Monday January 28th, 2008 at 10:19 AM

Post Icon
Comment #12
Guest: Jesse Tuck
No Avatar
Status: Offline

Short ans sweet! I love your tutorial! I used this model to make more complicated tank shooting game. Thank you!

PS To beat the computer in your game, all, you have to do is move back!

Rank: Guest
Saturday March 15th, 2008 at 12:23 PM

Post Icon
Comment #13
Guest: antimage
No Avatar
Status: Offline
How 2 use databases in flash?
Rank: Guest
Tuesday May 6th, 2008 at 2:29 AM

Post Icon
Comment #14
Guest: antimage
No Avatar
Status: Offline
How 2 use databases in flash?
Rank: Guest
Tuesday May 6th, 2008 at 2:30 AM

Post Icon
Comment #15
Guest:
No Avatar
Status: Offline
g
Rank: Guest
Tuesday May 13th, 2008 at 2:37 PM

Post Icon
Comment #16
Guest:
No Avatar
Status: Offline
fdhvejqhfkkwhq
Rank: Guest
Tuesday May 13th, 2008 at 2:37 PM

Post Icon
Comment #17
Guest:
No Avatar
Status: Offline

I changed this:

}
if (Key.isDown(Key.LEFT)) {
_rotation -= 12;
}
if (Key.isDown(Key.RIGHT)) {
_rotation += 12;

to this

if (Key.isDown(Key.LEFT)) {
  _rotation -= speed*0.9;
 }
 if (Key.isDown(Key.RIGHT)) {
  _rotation += speed*0.9;  
 }

and it seems to work well

Rank: Guest
Saturday May 17th, 2008 at 8:31 PM

Post Icon
Comment #18
Guest: GGGGGGGG
No Avatar
Status: Offline
GGGGGGGGGGGGG
Rank: Guest
Tuesday June 24th, 2008 at 5:51 PM

Post Icon
Comment #19
Guest: la chicholina
No Avatar
Status: Offline

la pagina esta muy buena, pero les recommendaria q agregue una seccion de recetas de cocina para los amantas de la cocina.

aguante BOCA¡¡¡¡¡

Rank: Guest
Friday July 4th, 2008 at 6:27 PM

Post Your Comment
Name:
Login to post under your account.
Comment:

Member Area
Welcome Guest! Please login to view your Member Area.

Options:
Login anonymously.
Remember me?


Copyright 2003-2005 - Imusion LLC. - All Rights Reserved