loading

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.
 
Remove these adsRemove these ads by Signing Up

Step 1: Open Flash 8

Picture of Open Flash 8
Picture 11.png
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
Picture 3.png
Picture 12.png
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
Picture 7.png
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:

onClipEvent(enterFrame){
speed = 10;
if(Key.isDown(Key.UP)){
this._y -= speed;
}
if(Key.isDown(Key.DOWN)){
this._y += speed;
}
if(Key.isDown(Key.LEFT)){
this._x -= speed;
}
if(Key.isDown(Key.RIGHT)){
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.

if(---){

}
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.

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

this._y
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
Picture 14.png
Now, we want to check to see if our code is working properly, right? Well, to do that, we need to press:

PC- CTRL-ENTER
Mac -COMMAND-ENTER

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:

Output

**Error**

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
Picture 8.png
Picture 9.png
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!
admin7 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!
it so awesome ha
yourcat6 years ago
??? I'm using 2004, and there is no "actions" anything. I'm clueless.
thedirekter (author)  yourcat5 years ago
So right clicking gives you no actions option? How about anything in the top bar?
Found it.
cantrell85 years ago
will this work with Light-C game script maker?
thedirekter (author)  cantrell85 years ago
No, this is Actionscript 2.0 specific
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.
thedirekter (author)  i_build_stuff6 years ago
hey, if u need help, jus email me
Spint7 years ago
Great Instructable, thanks for making this. Now all I got to do is get Flash.
thedirekter (author)  Spint7 years ago
You can download a trial from Adobe at adobe.com. Right now, the trials are not working though, won't be up until July first...
Thanks for the tip!
thedirekter (author)  Spint7 years ago
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.
Great I'll read the second part now.
Ora7 years ago
This brings back so many memories.
thedirekter (author)  Ora7 years ago
Good, or Bad?
Ora thedirekter7 years ago
Good. It reminds me of my early actionscript days.
thedirekter (author)  Ora7 years ago
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.