Flash Tutorial: Part 1 of 21
Hello everyone! I've decided to write my own tutorial on how to build flash games. For now, I will host them on this blog.
Introduction:
For now, I'll pretend I'm just writing to my friends, so the language will be less formal than if I was writing to the whole world. So anyway, this is my flash tutorial, with my own methods and all that. You can read other tutorials and maybe their methods are better, but I'm going to try to explain my methods easily and all that so hopefully you'll stick with me. After you're done with the tutorial, maybe you can expand and improve on my methods with your own unique style, or you can adapt to other people's methods and work out which way is the best.
So why am I writing this? Because Jia kinda asked me to - well, he wanted help on how to start programming in Flash, so this is it.
Requirements:
I do not require you to know any or a lot of flash. I know a lot of you don't know flash, so I'll try to make it as easy as possible. For those of you that require flash, let me know, and I can arrange it for you. I have a 60 meg zip file with Flash MX 2004, so let me know if you need it.
After you get Flash, experiment it with a bit, make a few movies, play around with drawing things and making shapes and tweening. After that, you're ready to read this tutorial.
Lesson Plan:
It says at the top "Flash Tutorial: Part 1 of 21", but I just made up that 21. At the end of this tutorial, you'll have a screen, with a player character, and you can control him by pressing the directional keys. There will be an object on the screen, and if you touch it, the object will "disappear".
In this lesson, I will try to get you to make a game as fast as possible. That said, we'll use some methods in this tutorial that are easier to understand, yet less efficient.
Anyway, enough talking. Let's start!
Step 1: Setting up the environment
For my tutorial, you can use Flash MX 2004 or Flash CS3 (or newer). Start a new project, set the actionscript to 2.0, Flash Player 7.0, height and width to 640x480, frame rate to 30fps, and background to white. Actually you can change these to whatever you want, except the actionscript and the flash player, but for now, stick with me.
You can have whatever panels or layout you want, but I generally only use the main bar with the Tools, the Properties Window, the Actionscript Window, the Timeline, the Color/Swatches, and the Library. I don’t use any of those Projects/Components/etc windows that Flash CS3 might start with.
Newbie Help: You can close as many windows/panels as you need, and then in the View menu bar you can choose which panels you want, and then you can drag them and resize them and lock them onto your flash window wherever you want.
Step 2: The Timeline
In later tutorials, you will have many layers on the timeline, as well as many frames, but for this demo, we only need one layer, and one frame. Click on this frame, and open up the actionscript window, and type in
stop();
This will tell Flash to stop at this frame, and not play anymore frames, or repeat this frame, or whatever.
Diagram: My Flash environment; which windows and panels are open, general layout, timeline. The movie clips will be added below.
Step 3: The 5 movie clips
In most of my games, there are 5 movie clips you need to make a flash game:
1. MoveTimer
2. Player
3. Ledge
4. Globalcode (optional)
5. Main (optional)
In this tutorial, we’ll skip the globalcode movie clip, and we’ll make the Main movie clip without discussing whether or not your particular game needs it. In any case, it’s good to have.
Step 3.1 – Main
Main is where I keep all my game objects – players, ledges, enemies, etc.
Newbie Help: Remember, there are 2 common ways to make a new movie clip: you can choose Insert – New Symbol, or you can draw something, select it and right click on it and Convert To Symbol.
For now, choose Insert, and make a new symbol, make sure it’s a movieclip symbol, and call it main. Flash will proceed to let you edit the new movie clip, but leave it empty and go back to the Scene. From your library, drag “main” to the stage, place it at x=0 and y=0, and give it an instance name of “main”.
Newbie Help: To change a movieclip’s properties, open up the properties window. You may need to check the advanced properties – change its instance name to “main”, and move it to x=0 and y=0.
Step 3.2 – Player
Draw a blue square, and set its dimensions to 40x40. Select it, right click on it, and click Convert to Symbol. Make sure it’s a movieclip symbol, and call it “player”. Now that you have it in your library, delete the “player” you have that’s on the stage.
Open your “main” movieclip in your library by double clicking on it. Now you are editing it; drag your “player” blue square from your library onto the main, and place it around x=10 and y=10. Name this instance “player”.
Save and run the project. If you did it correctly, your player should appear on the screen.
Step 3.3 – Ledge
Repeat what you did in Step 3.2 with player, but this time make a 20x20 red square, call it ledge (or wall, or whatever, but for this tutorial call it ledge). Do the same things with it, but place it at x=100 and y=100. If you run the project again, it should appear as expected.
OKAY! I hope you understand everything we did so far. If it’s confusing, I don’t recommend continuing. It’s basic flash so far – make a movie clip, put it on the stage, and voila, it’s there. Or put a movieclip within another movie clip, and it appears. It’s all pretty basic, so if you’re having trouble with this part, I recommend learning some more basic flash.
Now comes the real stuff.
Step 3.4 – MoveTimer
MoveTimer will be one of your most important movieclips. MoveTimer will take care of your player object, as well as most of the user input. So far, everything we’ve done is pretty basic, but after this step you’ll have the first real step to making a game. So, pay close attention.
See, Flash works with movieclips and frames, and if you put code in a frame, it will run the code each time it hits that frame. So what we need in a game is code that tells the computer when a player hits a key, and what to do when the key is pressed. So what we need is code that is run on every frame. There are many ways to achieve this effect, but in this first tutorial, I’ll teach you the one that makes the most sense, at least in English.
So how do you get Flash to read the same frame/code over and over? Simple! You make a frame with code, and on the next frame, you tell flash to play the previous frame! And that is an endless loop, which runs every frame.
So for example, you can put some code on frame 1, and on frame 2, you have
gotoAndPlay(1);
And voila! It works. So we’re going to do just that… with a small change.
So go back to Scene 1, and use the textTool to write the word “moveTimer” on the screen. Make sure in the properties window that it is static text, not input text or dynamic text. Select the word, and convert it to a movieclip symbol, called “moveTimer”. Change its instance name to “moveTimer”, and move it to x=-40 and y=-40.
Remember, this moveTimer is on the root, not in the main movie clip where the player and ledge reside.
Instead of frame 1 having the code and frame 2 redirecting back to frame 1, instead we’ll have frame 2 with the code and frame 3 redirecting to frame 2. So on frame 3, write
gotoAndPlay(2);
So it’s the same thing, but one frame later. We’ll discuss why we did this later.
Diagram: The timeline and the actionscript frame of moveTimer
Newbie Help: To create more frames in a timeline, just click on the timeline, and right click somewhere and you can see a menu of options of what you can do. Choose “insert keyframe” on frames 2 and 3.
After adding the code on frame 3, go to Frame 2 and put in this code:
trace(“this is moveTimer tracing every frame”);
Save the project, and run it. If you did it correctly, then on every frame (so 30 times per second) it would write the above line into the output window. If you did it incorrectly, check the error messages for clues, and make sure everything is spelled correctly and has the right capitalization.
Step 4 – User Input
Okay, we have our Main. We have our MoveTimer. We have our Player inside our Main. We have code that runs on everyframe. We’re ready to start.
First, go into moveTimer, and delete or comment out the trace. We don’t need it. So first think to yourself – what do you want to happen? You want to make it so that if you press a directional button on the keyboard, your player will move in that direction. So, in pseudocode:
if ( I am pressing the up key)
{
Player moves up
}
Let’s first attack the “player moves up” part. Before scrolling down, you should already have a pretty good idea on what the answer is. When you’re ready, read the next line.
if (I am pressing the up key)
{
_root.main.player._y--;
}
Got it? If not:
You want to modify the player’s y position. That’s where the _y comes from.
You want to move it upwards. In flash, that’s in the negative direction. That’s where the - - comes from, or the -= or whatever.
Which _y do you want to modify? The player’s. So that’s where we have player._y.
Where is the player? He’s in the main. That’s where the main is.
Where is the main? He’s on the root. That’s where the root comes from. Putting it all together, we have
_root.main.player._y--;
If you’re coming from other programming languages, or from Actionscript 1 or 3, I hope this is still somewhat understandable.
Now, the next part is probably pure flash syntax and code, so you can spend a while going through the help files, or I’ll just give it to you here:
if (Key.isDown(Key.UP))
{
_root.main.player._y--;
}
When you start typing the K, flash will autocode the rest for you so it’s not so bad. It’s pretty simple to understand the code. Now, fill in the rest for left, right, and down, Save the program, and run it. If it works, congratulations. If it doesn’t, check any error messages and fix them. There might be spelling errors, case sensitivity errors, maybe bracketing errors… but after a while, everything should work.
Voila! You have a working game now. Fiddle around with variables – try to get the guy to move 10 pixels at once instead of just 1, or if you want another challenge, try making a game where pressing the buttons just accelerate and decelerate your character. After you’re done, we’ll talk about the hitTest.
Step 5: hitTest
One of the more important functions in game programming is the hitTest. The hitTest is exactly that – a test whether or not two objects hit each other. So it could be a player hitting a 1up mushroom, or a bullet hitting an enemy.
So back in our game, we have the player on the main, and we also have the ledge on the main, and I assumed you called it “ledge”. For now, think of it as an item or something we can touch. Hit Detection with walls is a little more complicated.
The code for hitTest is really quite simple. So, back in moveTimer, type in this.
if (_root.main.player.hitTest(_root.main.ledge))
{ trace(“my player is touching the ledge”);
}
That’s all there is to it. You can check the helpfile for more info on this, but long story short, hitTest is a function that movieclips have, and it takes in a parameter which is the movie clip to compare it to, and it returns a boolean value, either true or false.
This means that
_root.main.player.hitTest(_root.main.ledge)
Will give the same value as
_root.main.ledge.hitTest(_root.main.player)
But since moveTimer deals with the player, it makes more sense to write it out the original way.
So, save and run the program, and as you expect, if you move your player over your ledge, it will trace that message.
Now we want to make the object disappear, and then the lesson will end. For now, we'll cheat a little. Replace the trace command with
_root.main.ledge._y = -9999;
And then, when you run the project and hit the ledge, it will "disappear" off the screen. Really, it just goes upwards all the way to -9999, but for now, it looks like it disappears.
That’s the end of lesson 1! You now have a character on the screen, and it will move in different directions based on what key you are pressing. You also have an “item” on the screen, and you can touch it. Now save your project, and copy it, so you can fiddle around with it before you move onto lesson 2. We will begin from this point in lesson 2, so you should make another copy of your project which you can fiddle around with.
Between now and the next lesson, I’ll give you a few challenges. If you’re a newbie, read the few paragraphs below to help you get started on some common flash syntaxes, or use the Flash help file.
Challenge 1 – make it so that when you press a direction, the player would move 10 pixels instead of just 1 pixel in that direction.
Challenge 2 – make it so that when you press a direction, the player accelerates or decelerates depending on what direction you pressed.
Challenge 3 – The hitTest works fine for grabbing items, but not so well for walls/ledges. Program the game so that it works with walls/ledges. Note that the answer to this will be given in the next lesson, but it’s a good idea to think about what you have to do.
Newbie help: Declaring variables
In Flash, declaring variables is easy. Sometimes you don’t even need to declare it. Just use:
var thisNumber = 2;
or
var thisText = “Hello”;
You don’t have to tell the variable it’s an int or a string or whatever. If you want to learn how to declare other things, such as arrays, check the help file.
Newbie help: Declaring and Calling Functions
Sometime in the programming of games or anything, you’ll probably need to learn how to declare and call functions. Well, you’ve already used a few functions, such as hitTest, but you’ll want to make your own, so you can re-use code and whatever else.
To declare a function, do thiu:
function FunctionName()
{
//function code
}
And whenever you need to call that function, just type it out, like
FunctionName();
Or
indexNum = FunctionName();
In flash, you don’t need to use void or to declare the return type or whatever. It’s pretty in that way. It’s kinda lousy for error checking, but otherwise it works fine. Also, if you have parameters, you don’t have to declare them or give them any restrictions or whatever.
For other flash syntax, check the helpfile. For the next lesson, if you don’t know anything about for loops, I recommend reading up about those.
In the next few lessons: walls/ledges, arrays, better organization, dynamically adding and removing movie clips, animation, “quadrants”, text, Wait, and a little bit about scrolling.
Introduction:
For now, I'll pretend I'm just writing to my friends, so the language will be less formal than if I was writing to the whole world. So anyway, this is my flash tutorial, with my own methods and all that. You can read other tutorials and maybe their methods are better, but I'm going to try to explain my methods easily and all that so hopefully you'll stick with me. After you're done with the tutorial, maybe you can expand and improve on my methods with your own unique style, or you can adapt to other people's methods and work out which way is the best.
So why am I writing this? Because Jia kinda asked me to - well, he wanted help on how to start programming in Flash, so this is it.
Requirements:
I do not require you to know any or a lot of flash. I know a lot of you don't know flash, so I'll try to make it as easy as possible. For those of you that require flash, let me know, and I can arrange it for you. I have a 60 meg zip file with Flash MX 2004, so let me know if you need it.
After you get Flash, experiment it with a bit, make a few movies, play around with drawing things and making shapes and tweening. After that, you're ready to read this tutorial.
Lesson Plan:
It says at the top "Flash Tutorial: Part 1 of 21", but I just made up that 21. At the end of this tutorial, you'll have a screen, with a player character, and you can control him by pressing the directional keys. There will be an object on the screen, and if you touch it, the object will "disappear".
In this lesson, I will try to get you to make a game as fast as possible. That said, we'll use some methods in this tutorial that are easier to understand, yet less efficient.
Anyway, enough talking. Let's start!
Step 1: Setting up the environment
For my tutorial, you can use Flash MX 2004 or Flash CS3 (or newer). Start a new project, set the actionscript to 2.0, Flash Player 7.0, height and width to 640x480, frame rate to 30fps, and background to white. Actually you can change these to whatever you want, except the actionscript and the flash player, but for now, stick with me.
You can have whatever panels or layout you want, but I generally only use the main bar with the Tools, the Properties Window, the Actionscript Window, the Timeline, the Color/Swatches, and the Library. I don’t use any of those Projects/Components/etc windows that Flash CS3 might start with.
Newbie Help: You can close as many windows/panels as you need, and then in the View menu bar you can choose which panels you want, and then you can drag them and resize them and lock them onto your flash window wherever you want.
Step 2: The Timeline
In later tutorials, you will have many layers on the timeline, as well as many frames, but for this demo, we only need one layer, and one frame. Click on this frame, and open up the actionscript window, and type in
stop();
This will tell Flash to stop at this frame, and not play anymore frames, or repeat this frame, or whatever.
Diagram: My Flash environment; which windows and panels are open, general layout, timeline. The movie clips will be added below.
Step 3: The 5 movie clips
In most of my games, there are 5 movie clips you need to make a flash game:
1. MoveTimer
2. Player
3. Ledge
4. Globalcode (optional)
5. Main (optional)
In this tutorial, we’ll skip the globalcode movie clip, and we’ll make the Main movie clip without discussing whether or not your particular game needs it. In any case, it’s good to have.
Step 3.1 – Main
Main is where I keep all my game objects – players, ledges, enemies, etc.
Newbie Help: Remember, there are 2 common ways to make a new movie clip: you can choose Insert – New Symbol, or you can draw something, select it and right click on it and Convert To Symbol.
For now, choose Insert, and make a new symbol, make sure it’s a movieclip symbol, and call it main. Flash will proceed to let you edit the new movie clip, but leave it empty and go back to the Scene. From your library, drag “main” to the stage, place it at x=0 and y=0, and give it an instance name of “main”.
Newbie Help: To change a movieclip’s properties, open up the properties window. You may need to check the advanced properties – change its instance name to “main”, and move it to x=0 and y=0.
Step 3.2 – Player
Draw a blue square, and set its dimensions to 40x40. Select it, right click on it, and click Convert to Symbol. Make sure it’s a movieclip symbol, and call it “player”. Now that you have it in your library, delete the “player” you have that’s on the stage.
Open your “main” movieclip in your library by double clicking on it. Now you are editing it; drag your “player” blue square from your library onto the main, and place it around x=10 and y=10. Name this instance “player”.
Save and run the project. If you did it correctly, your player should appear on the screen.
Step 3.3 – Ledge
Repeat what you did in Step 3.2 with player, but this time make a 20x20 red square, call it ledge (or wall, or whatever, but for this tutorial call it ledge). Do the same things with it, but place it at x=100 and y=100. If you run the project again, it should appear as expected.
OKAY! I hope you understand everything we did so far. If it’s confusing, I don’t recommend continuing. It’s basic flash so far – make a movie clip, put it on the stage, and voila, it’s there. Or put a movieclip within another movie clip, and it appears. It’s all pretty basic, so if you’re having trouble with this part, I recommend learning some more basic flash.
Now comes the real stuff.
Step 3.4 – MoveTimer
MoveTimer will be one of your most important movieclips. MoveTimer will take care of your player object, as well as most of the user input. So far, everything we’ve done is pretty basic, but after this step you’ll have the first real step to making a game. So, pay close attention.
See, Flash works with movieclips and frames, and if you put code in a frame, it will run the code each time it hits that frame. So what we need in a game is code that tells the computer when a player hits a key, and what to do when the key is pressed. So what we need is code that is run on every frame. There are many ways to achieve this effect, but in this first tutorial, I’ll teach you the one that makes the most sense, at least in English.
So how do you get Flash to read the same frame/code over and over? Simple! You make a frame with code, and on the next frame, you tell flash to play the previous frame! And that is an endless loop, which runs every frame.
So for example, you can put some code on frame 1, and on frame 2, you have
gotoAndPlay(1);
And voila! It works. So we’re going to do just that… with a small change.
So go back to Scene 1, and use the textTool to write the word “moveTimer” on the screen. Make sure in the properties window that it is static text, not input text or dynamic text. Select the word, and convert it to a movieclip symbol, called “moveTimer”. Change its instance name to “moveTimer”, and move it to x=-40 and y=-40.
Remember, this moveTimer is on the root, not in the main movie clip where the player and ledge reside.
Instead of frame 1 having the code and frame 2 redirecting back to frame 1, instead we’ll have frame 2 with the code and frame 3 redirecting to frame 2. So on frame 3, write
gotoAndPlay(2);
So it’s the same thing, but one frame later. We’ll discuss why we did this later.
Diagram: The timeline and the actionscript frame of moveTimer
Newbie Help: To create more frames in a timeline, just click on the timeline, and right click somewhere and you can see a menu of options of what you can do. Choose “insert keyframe” on frames 2 and 3.
After adding the code on frame 3, go to Frame 2 and put in this code:
trace(“this is moveTimer tracing every frame”);
Save the project, and run it. If you did it correctly, then on every frame (so 30 times per second) it would write the above line into the output window. If you did it incorrectly, check the error messages for clues, and make sure everything is spelled correctly and has the right capitalization.
Step 4 – User Input
Okay, we have our Main. We have our MoveTimer. We have our Player inside our Main. We have code that runs on everyframe. We’re ready to start.
First, go into moveTimer, and delete or comment out the trace. We don’t need it. So first think to yourself – what do you want to happen? You want to make it so that if you press a directional button on the keyboard, your player will move in that direction. So, in pseudocode:
if ( I am pressing the up key)
{
Player moves up
}
Let’s first attack the “player moves up” part. Before scrolling down, you should already have a pretty good idea on what the answer is. When you’re ready, read the next line.
if (I am pressing the up key)
{
_root.main.player._y--;
}
Got it? If not:
You want to modify the player’s y position. That’s where the _y comes from.
You want to move it upwards. In flash, that’s in the negative direction. That’s where the - - comes from, or the -= or whatever.
Which _y do you want to modify? The player’s. So that’s where we have player._y.
Where is the player? He’s in the main. That’s where the main is.
Where is the main? He’s on the root. That’s where the root comes from. Putting it all together, we have
_root.main.player._y--;
If you’re coming from other programming languages, or from Actionscript 1 or 3, I hope this is still somewhat understandable.
Now, the next part is probably pure flash syntax and code, so you can spend a while going through the help files, or I’ll just give it to you here:
if (Key.isDown(Key.UP))
{
_root.main.player._y--;
}
When you start typing the K, flash will autocode the rest for you so it’s not so bad. It’s pretty simple to understand the code. Now, fill in the rest for left, right, and down, Save the program, and run it. If it works, congratulations. If it doesn’t, check any error messages and fix them. There might be spelling errors, case sensitivity errors, maybe bracketing errors… but after a while, everything should work.
Voila! You have a working game now. Fiddle around with variables – try to get the guy to move 10 pixels at once instead of just 1, or if you want another challenge, try making a game where pressing the buttons just accelerate and decelerate your character. After you’re done, we’ll talk about the hitTest.
Step 5: hitTest
One of the more important functions in game programming is the hitTest. The hitTest is exactly that – a test whether or not two objects hit each other. So it could be a player hitting a 1up mushroom, or a bullet hitting an enemy.
So back in our game, we have the player on the main, and we also have the ledge on the main, and I assumed you called it “ledge”. For now, think of it as an item or something we can touch. Hit Detection with walls is a little more complicated.
The code for hitTest is really quite simple. So, back in moveTimer, type in this.
if (_root.main.player.hitTest(_root.main.ledge))
{ trace(“my player is touching the ledge”);
}
That’s all there is to it. You can check the helpfile for more info on this, but long story short, hitTest is a function that movieclips have, and it takes in a parameter which is the movie clip to compare it to, and it returns a boolean value, either true or false.
This means that
_root.main.player.hitTest(_root.main.ledge)
Will give the same value as
_root.main.ledge.hitTest(_root.main.player)
But since moveTimer deals with the player, it makes more sense to write it out the original way.
So, save and run the program, and as you expect, if you move your player over your ledge, it will trace that message.
Now we want to make the object disappear, and then the lesson will end. For now, we'll cheat a little. Replace the trace command with
_root.main.ledge._y = -9999;
And then, when you run the project and hit the ledge, it will "disappear" off the screen. Really, it just goes upwards all the way to -9999, but for now, it looks like it disappears.
That’s the end of lesson 1! You now have a character on the screen, and it will move in different directions based on what key you are pressing. You also have an “item” on the screen, and you can touch it. Now save your project, and copy it, so you can fiddle around with it before you move onto lesson 2. We will begin from this point in lesson 2, so you should make another copy of your project which you can fiddle around with.
Between now and the next lesson, I’ll give you a few challenges. If you’re a newbie, read the few paragraphs below to help you get started on some common flash syntaxes, or use the Flash help file.
Challenge 1 – make it so that when you press a direction, the player would move 10 pixels instead of just 1 pixel in that direction.
Challenge 2 – make it so that when you press a direction, the player accelerates or decelerates depending on what direction you pressed.
Challenge 3 – The hitTest works fine for grabbing items, but not so well for walls/ledges. Program the game so that it works with walls/ledges. Note that the answer to this will be given in the next lesson, but it’s a good idea to think about what you have to do.
Newbie help: Declaring variables
In Flash, declaring variables is easy. Sometimes you don’t even need to declare it. Just use:
var thisNumber = 2;
or
var thisText = “Hello”;
You don’t have to tell the variable it’s an int or a string or whatever. If you want to learn how to declare other things, such as arrays, check the help file.
Newbie help: Declaring and Calling Functions
Sometime in the programming of games or anything, you’ll probably need to learn how to declare and call functions. Well, you’ve already used a few functions, such as hitTest, but you’ll want to make your own, so you can re-use code and whatever else.
To declare a function, do thiu:
function FunctionName()
{
//function code
}
And whenever you need to call that function, just type it out, like
FunctionName();
Or
indexNum = FunctionName();
In flash, you don’t need to use void or to declare the return type or whatever. It’s pretty in that way. It’s kinda lousy for error checking, but otherwise it works fine. Also, if you have parameters, you don’t have to declare them or give them any restrictions or whatever.
For other flash syntax, check the helpfile. For the next lesson, if you don’t know anything about for loops, I recommend reading up about those.
In the next few lessons: walls/ledges, arrays, better organization, dynamically adding and removing movie clips, animation, “quadrants”, text, Wait, and a little bit about scrolling.
posted by Unknown at 12:29 PM
0 Comments:
Post a Comment
<< Home