AS 3.0 Horse Race

Welcome to our two horse race. Click the Start button and
then move Horse Number 2 with the right arrow key to race.

There is then a restart "Race Again" button, which enables the
game to run again. However there is some kind of glitch, where
the grey "Horse 6" runs faster on many races, and becomes impossible
to beat. If this becomes too annoying, just reload the page to
start the game again.

We have not found a way to fix the speed glitch, despite much searching of Flash Forums on the internet.

It may be something to do with the collision detection not resetting properly?

Anyway, the game still suits our main objectives which is to show how to:

• Have an Introduction Screen before the game starts
• Move an item automatically
• Move using the arrow keys
• Use Collision Detection
• Make invisible items appear later on

We will build the game up in stages, and have a YouTube tutorial for each section.

The build steps are as follows:

• Make the opening screen in frame 1
• Set up one horse to move automatically
• Use Collision Detection to stop the horse
• Make a "Winner" message appear at the end
• Set up the other horse to move using the keyboard
• Create a Game Restart Button

We made the background and horses as follows.
First we found a picture in Google Images of two horses racing:



We then used Photoshop Rubber Stamp and Patch Tools to clone pixels
from the background over the top of the horses and create our background.



We then used the crop tool, and the eraser to isolate each horse from the original photo. The background was made transparent, and each horse saved as a .PNG file to preserve transparency.

We also had to use the rubber stamp tool and paintbrush to create the missing pieces of each horse.



This grey coloured horse is referred to as "Horse6" throughout the tutorial and is the opponent horse.

The brown horse which we race using the right arrow key is "Horse2".



Using different images, our game could easily be modified to be:

• A Car Racing Game
• A Running Race
• A Swimming Race
• A Bowling Ball hitting Skittles
• A Spaceship hitting an Asteroid
• A Dog catching a Frisbee
• A Person catching a ball

Let's get started with Part 1 which involves making the Introduction Start Screen.

(Note that all six videos for the Horse Race Game are HD, and so can be viewed full screen at HD resolution by clicking the bottom right hand corner options on the YouTube player below. Use the Esc key to return to this blog page.)



The AS 3.0 code needed in Frame 1 of the Part 1 project is as follows:



It is very important to give the Start Button an instance name in its properties of "startBTN" so that it can be found by the Actionscript Code. This is shown in the Part 1 video, but is worth remembering.

Part two of making the game involves introducing the opponent "Horse6" and getting it to move accross the screen.

We then draw a small rectangle onto the finishing post, and set up for "Horse6" to stop when it collides with this rectangle.



We ran out of time in Part 2 and did not quite finish having the "winner" sign appear on the finish post.

In the Part 3 video below, we go back and redo the setting up of the "Winner" end of race message, and this time we complete the Actionscript code.



Here is the completed Actionscript Code for Frame 2 relevant to Parts 2 and 3.



The next thing we need to do is learn how to move things around using the arrow keys on our keyboard.

Basically Flash has number codes assigned for all of the keys on the keyboard.
The keys and codes we will be using are these:

• Key Code 37 = Left Arrow Key
• Key Code 39 = Right Arrow Key
• Key Code 38 = Up Arrow Key
• Key Code 40 = Down Arrow Key

The following video shows how to code Actionscript 3.0 in Flash to make movement happen using the arrow keys.

This tutorial does not enhance the actual Horse Race game, but teaches vital skills that we will use in Part 5.



Here is the completed AS 3.0 Code for Part 4:

If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.

Alternatively, you can view or save the full size PDF by clicking the link below:

Click here to open or save the “AS 3.0 Part 4 Code” PDF

Now that we have learned how to move items around with the arrow keys, it is time to bring "Horse 2" into our race.



Here is the completed AS 3.0 Code for Part 5:

If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.

Alternatively, you can view or save the full size PDF by clicking the link below:

Click here to open or save the “AS 3.0 Part 5 Code” PDF

The final tutorial for our Horse Race Game creates a "Restart" option so that the player can race again.



The following PDF supplies the finished full Actionscript 3.0 Code for this project.

If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.

Alternatively, you can view or save the full size PDF by clicking the link below:

Click here to open or save the “AS 3.0 Complete Code” PDF

So that's it for our fabulous Horse Race Game. Hopefully people can make this project and have some fun learning some useful Actionscript 3.0 fundamentals.

Enjoy,
Big Passy Wasabi