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

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

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

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

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

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

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!



    • IoT Challenge

      IoT Challenge
    • Classroom Science Contest

      Classroom Science Contest
    • Party Challenge

      Party Challenge

    18 Discussions


    10 years ago

    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!


    10 years ago on Introduction

    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.

    1 reply

    Reply 10 years ago on Introduction

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


    Reply 10 years ago on Introduction

    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.


    Reply 10 years ago on Introduction

    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.