Forums → Programming Forum → TUTORIAL: Your First Game ( Learn The Basics ) *REMADE*

SOFTWARE USED:Adobe Flash CS4
CODE LANGUAGE USED:ActionScript 2.0
WINDOWS/MAC?: Windows
BY DannyDaNinja!

This is a little Tutorial i made for any people who just got there hands on Flash and want to make a game. The Tutorial is divided into five parts. This will teach you the basics for Adobe Flash CS4

Some of you might remember the original version of this tutorial, some people praised me for it for older and more respected developers said how it taught nobody about how to code actually executed the orders and gave the results. So I will talk about this code.

NONE OF THIS CODE IS MINE, IT BELONGS TO EMANUELE FERONATO AND IS USED BY MANY DEVELOPERS


PART ONE: Making A New Flash File

1. Go to top left corner of the screen and click on File

2. Lots of options will pour down, at the very top is " New... "

3. Now you can make a new document. Select "Flash File (ActionScript 2.0", as we will be using ActionScript 2.0 to code your first game.

PART TWO: Editing the size of your stage

4. Now go at the top left corner of the screen and you'll see new, go a bit left and you'll find " Modify " click on " Modify "

5. At the top of those options is " Document... " click on that.

6.see the dimensions there at the top? now you can adjust the width and height of the document!! Put in " 700 px " for width and " 500 px " for height then press ok.

7. Ta-da! you have now learnt how to make the size of your game.

PART THREE: Drawing and Converting to Symbols

8. Now on your right side ( maybe not but probably ) you'll see your selection of drawing tools. So draw something ( make sure it doesn't take up the entire screen!! ). I Drew a Red Square :P



9. Get your Section Tool ( black cursor in drawing tools )
( PRESS V FOR SHORTCUT! ) and select your entire drawing.

10. Go to Modify ( see step 4 if you get lost! ) and select " Convert to symbol ". Make sure the symbol is a Movie Clip. It should already be preset to assume all symbols are Movie Clips, but you should always double check.

MovieClip Symbols are used for Animations. Games are simply Interactive Animations. Buttons Symbols are primary used for making, well, buttons. Buttons can do many things, like change the color of a square when you click it, going to a new level when you click it, playing a sound when you hover your mouse over it etc.
Graphic Symbols are reusable static images that are used mainly to create animations, but you probably won't be using those until your more confident with flash.

11. Name the Symbol whatever you like ( I named mine "Drawing" ) And press OK.

PART FOUR: Coding

12. Now things get hard, Coding the game. Learning code is hard so you might want to copy/paste the code If you find it boring, too hard, or your just lazy. Actually analyzing the code will help you to get better at coding, and you won't have to rely on somebody else to have made the code for you.

13. Select your drawing and you'll see it's " Properties ".

14. You'll see some changeable text called " <Instance Name> " change that text to " Drawing " or whatever you named the Symbol.

15. Now select your drawing and press F9 to open it's actions, this is where the code is inputed

16. Enter the following code:

*************************************
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
_x--;
}
if (Key.isDown(Key.RIGHT)) {
_x++;
}
if (Key.isDown(Key.UP)) {
_y--;
}
if (Key.isDown(Key.DOWN)) {
_y++;
}
}
*************************************

ANALYZING THE CODE:


onClipEvent (enterFrame) { = OnclipEvent is a way to enter the wonderful world of the movieclips job. It basically means it will execute the orders when it is on the current Frame ( which is where we use ' (enterFrame) '. The " { " is a way to signal that line of code is complete, and to move onto the next piece of code.



if (Key.isDown(Key.LEFT)) {
_x--;
}
So IF the ' Key ' is down Which is the LEFT key, the we will move the movieclip against where the X Axis is.

_x--; = LEFT
_x++; = RIGHT
_y--; = UP
_y++; = DOWN

if (Key.isDown(Key.DOWN)) {
_y++;
}
} <--- The last " } " indicated that is the end of the code, and that the code is good and ready for work.

---

17. Great! Now get out of the code box, and press Ctrl + Enter to start the game!

18. Now you can move your drawing around using the arrow keys!

PART FIVE: SPEED ( OPTIONAL )

19. This is just an optional part for anyone who wants to learn a bit more helpful code....

20. Your Drawing is going too slow isn't it? Select your drawing, press F9 and enter in this code:

******************************
onClipEvent (load) {
power = 3;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
_x -= power;
}
if (Key.isDown(Key.RIGHT)) {
_x += power;
}
if (Key.isDown(Key.UP)) {
_y -= power;
}
if (Key.isDown(Key.DOWN)) {
_y += power;
}
}
******************************

21. Now press Ctrl + Enter and you'll see that your drawing is moving faster!! But how? At the top of the code i just gave you, you'll see i added a variable to input the speed of which the instance moves.

22. Now Change the power to 5, by replacing the 3 in the code i just gave you 2 steps ago. You can edit the power ( speed ) to whatever you want.

23. Congratz you have now learnt how to mod the speed of your drawing. Try '20' for extreme speed

____________________________________________________________

Congratulations! You have passed this tutorial if you managed to complete all the steps! This was a tutorial made by an newbie flash game developer so don't think your a sucky at flash if you get confused or lost, it's my fault not yours!!

By finishing this tutorial you have learnt the raw basics which include:

* Making A New File
* Changing The Game Size Of Your Game
* Drawing Objects
* Converting Drawings into Symbols
* How To Name Objects
* How To Make Basic Movement Code
* How To Change The Speed In The Basic Movement Code ( if you did part 5 )

I hope this could help even 1 person who needed it. NOW GIVE ME FEEDBACK!!! :P

____________________________________________________________