Introduction: Creating Your First Game: Part 1: Character Creation and Movement

Picture of Creating Your First Game: Part 1: Character Creation and Movement

In this Instructable, we'll be looking into creating a simple game with Flash Professional 8. This is the first part of many and each time, we'll be making the game more and more complex. I will make sure you understand each part fully. For the first thing, we'll want to make our character and make him move. Nothing to complex, there's only about 15 lines of code. If that seems like it might be difficult, it's really not. Many games I have made have a few hundred, lines of code. So, let's get started.

Step 1: Open Flash 8

Picture of Open Flash 8

The first step is easy, just open up Flash Professional 8, and create a new, empty FLA. (FLA is the extension name of any saved flash file, it stands for Flash Animation) Make sure as soon as you open it, you save the document as game.fla, the extension is automatically added, so don't worry about that.

Step 2: Creating Our Character

Picture of Creating Our Character

The first thing you're going to want to do in this game is get the circle tool from the "tools" panel, mine is on the right side of the screen, that's just my preference though. You can also just press "o" on your keyboard. Move your mouse to the stage (the white part of the window, usually in the window), hold "shift", click and drag a decent sized circle, not gigandor, but not tiny either. Next, we want to select it, so just right click on it and you'll get a little box with a bunch of options in it. You want to pick the "Convert to Symbol..." button. (usually if there is a "..." after something, that means another window will pop up) When the new window pops up, hahaha, deja vu... You want to name the circle "ball". Select the "Movie Clip" and select the the middle square of the "Registration" part. Then click "OK".

Step 3: 15 Commandments

Picture of 15 Commandments

These are the actions you'll need to put into the actions window. First, right click on the ball movieclip and select the "Actions" button. A window will pop up and add these actions to it:

speed = 10;
this._y -= speed;
this._y += speed;
this._x -= speed;
this._x += speed;

Alright, I'm sure that this is completely confusing to you. If not, good job. First things, onClipEvent(enterFrame){

just means that whatever is in the curly brackets will happen every frame.


Means that if whatever's in the parenthesis happens, something else will occur. In our case it means if an arrow key is pressed, we want the ball to move.

This is saying that when a key is pressed, or down, in this case the up arrow key, that something will happen.

Means that "this" what ever "this" may be, in our case the ball, and it's y-coordinate

speed = 10
Speed is a variable i created which equals ten, so when I say: this._x += speed;
it means that the ball's x-coordinate will increase (go right) by speed, which equals ten.

Y-coordinates are flipped in Flash, subtracting will make something go up, and adding will make something go down. X-coordinates are normal, adding makes something go right and vice-versa when you subtract.

Step 4: Testing It Out

Picture of Testing It Out

Now, we want to check to see if our code is working properly, right? Well, to do that, we need to press:


This will open a new window like the picture below with our SWF file, the actual game. Press the arrow keys and if you added the code correctly, the ball should move around. If he doesn't and two windows pop up, with one saying:



Like the second picture, then something is wrong. Go back to the previous page and just copy and paste the code into the actions panel. I have already tested the code so it should be bug free.

Step 5: Glitchy

Picture of Glitchy

The game looked sort of bad, didn't it? Really choppy motion. Well, here's the solution... With the selection tool, hit "v" on the keyboard, just click once on the stage (remember the white part of the screen?) Then, in the properties panel, look at the picture, find the "Frame Rate:" then a small box that has "12" in it, then fps next to it, in the second picture. (Mine says 24 because I took the picture after I changed it) Click in the box and change that "12" to a "24". Now test the game again( CTRL/COMMAND - ENTER) and it should be much smoother.

Step 6: Savin' Me

Picture of Savin' Me

Alright, for the last and final step of this 'Ible, we need to save our work. Just click on "File", then find "Save". Click it and you're done! Thanks for checking out my 'Ible. See you again for Part 2: Boundaries!


admin (author)2008-06-03

This is a great Instructable, but you need to add a main image of the final project to the intro step. Please do that and leave me a message when you have so that we can publish your work. Thanks!

Waren-Neutron (author)2010-11-19

it so awesome ha

yourcat (author)2009-02-19

??? I'm using 2004, and there is no "actions" anything. I'm clueless.

thedirekter (author)yourcat2009-10-12

So right clicking gives you no actions option? How about anything in the top bar?

yourcat (author)thedirekter2009-10-12

Found it.

cantrell8 (author)2009-10-10

will this work with Light-C game script maker?

thedirekter (author)cantrell82009-10-12

No, this is Actionscript 2.0 specific

i_build_stuff (author)2008-09-16

I can't do it, *sigh* i guess gassmask Pete will never come alive. Its to bad I already drew him. But I just can't handle flash I'm not "smart" enough. I guess i could find someone good with flash to do it.

hey, if u need help, jus email me

Spint (author)2008-06-03

Great Instructable, thanks for making this. Now all I got to do is get Flash.

thedirekter (author)Spint2008-06-04

You can download a trial from Adobe at Right now, the trials are not working though, won't be up until July first...

Spint (author)thedirekter2008-06-06

Thanks for the tip!

thedirekter (author)Spint2008-06-06

No problem. I believe it's a 30- day trial so that will definitely be enough time to do this, I also made the secpnd part to this 'ible.

Spint (author)thedirekter2008-06-07

Great I'll read the second part now.

Ora (author)2008-06-03

This brings back so many memories.

thedirekter (author)Ora2008-06-04

Good, or Bad?

Ora (author)thedirekter2008-06-04

Good. It reminds me of my early actionscript days.

thedirekter (author)Ora2008-06-04

Ya, I on what you mean, this was like soooooo hard when I first started and had no idea of what any of it meant, now I'm like, man, was that really that hard? It's funny.

About This Instructable




More by thedirekter:Recreating OriginsCreating Your First Game: Part 2: Boundaries and Character FlippingCreating Your First Game: Part 1: Character Creation and Movement
Add instructable to: