In this lesson
We're going to learn a few basics in how to make a game in adobe flash
using action script 2.0
Now I want you to open your adobe flash and choose action script 2.0
Familiarize the workspace
The reason why we’re using action script 2.0 because it’s highly
recommended for beginners
And it’s easy for you to learn in a way that you would enjoy it while
making your first game in adobe flash.
First Step: How to Move Your Character
- We need to draw a character in our stage, it could be at any shape just make it as simple.
Now that we have our character, let’s give him a life.
- Right click on your character and press convert to symbol then choose type "movie clip" then name your character as GUY.
The reason why we chose "movie clip" in our character so that
we will be able to make animation of that Object.
Now my character is brought into life.
I choose this character as my GUY
Now that we converted our character into a "movie clip" let's
give him some commands so that we may be able to move him freely, by doing so
we need to write some codes in that character.
Press right click on your character then select "action"
there you can see a blank space to be written with codes, later on we’re going
to fill this up with simple codes.
What you see here below is our command codes for your character.
I want you to copy all the code below and I’ll explain how it works.
onClipEvent(enterFrame){
if(Key.isDown(Key.RIGHT)){
this._x += 5;
}
if(Key.isDown(Key.LEFT)){
this._x -= 5;//
}
if(Key.isDown(Key.UP)){
this._y -= 5;
}
if(Key.isDown(Key.DOWN)){
this._y += 5;
}
}
"onclipEvent" = it declares an event into your movie clip or
your character.
After that you can see
"()" or shall we say the closing parenthesis in between you can see
"enterFrame"
That means that wherever you put
your character in the frame, it will directly reads the frame number you are in
or the stage you’re using.
The “if” statement introduces a conditional clause that directs the
movement of your character
x- Represents the axis to the right and x+ is the axis to left.
y- Represents the axis for up and y+ for down.
Don’t forget that once you initialize an opening and a closing brace
that contains your conditions.
You can always check your character by holding CTRL+Enter to
test your progress.
Second Step: Collision Detection
In every game, when a character or object collides it will
automatically recognized the impact detection which may or may not stop you
from going depending on the code given on collision detection.
Since we can move our character, all we need to do now is to learn how
to detect its collision within the walls.
Before we start, make sure your character's instance name is "guy".
Naming your character will matter in your codes later on. To do so, click on
your character there you see on your properties tab- just above the instance
behavior, you should see <instance name>.
Just type in "guy”
In your main frame or first playhead make four lines for the walls.
It could be of any sizes or
invisible, it won't matter as long as you are aware of its whereabouts.
Select and convert each line into a movieclip. It doesn’t matter what
name you put in.
Then for the right wall I want you
to input this code.
onClipEvent (enterFrame) {
if
(this.hitTest(_root.guy))
{
_root.guy._x -= 5;
}
}
For the rest of the walls
It’s important to take notice of the x and y axis encoded. From the
_root.guy._x -= 5; "x" means side walls but if you'd replace it with
"y" means it’s for up and down walls. To detect the collision for the
up, down, left, right, the x and y, - and + may vary in each wall.
Note:
right wall = _root.guy._x -= 5;
left wall = _root.guy._x += 5;
down wall = _root.guy._y -= 5;
up wall = _root.guy._y += 5;
Don’t forget to declare
onClipEvent (enterFrame)
if
(this.hiTest (_root.guy))
{
(Here you
can put root.guy. then the axis direction of that wall)
Again hold Ctrl then press Enter to test if your character is going to
stop when it collides with the walls.
If you’re having trouble on working with the walls just simply copy the
codes below.
Right Wall Code:
onClipEvent (enterFrame) {
if
(this.hitTest(_root.guy))
{
_root.guy._x -= 5;
}
}
Left Wall Code:
onClipEvent (enterFrame) {
if (this.hitTest(_root.guy))
{
_root.guy._x += 5;
}
}
Up Wall Code:
onClipEvent (enterFrame) {
if (this.hitTest(_root.guy))
{
_root.guy._y += 5;
}
}
Down Wall Code:
onClipEvent (enterFrame) {
if (this.hitTest(_root.guy))
{
_root.guy._y -= 5;
}
}
Third Step: Win or Lose Collision Detection
Last but not the least we're going to make the after effects of our
games. I mean what’s going to happen next if we win or we lose in the game.
We will focus on what we have already made.
In our first playhead we have our character and the walls
Make two objects somewhere within the walls of your first playhead.
Again you can make your object in any shape it won’t matter as long as
you’re aware of its whereabouts
I choose star and pentagon object as an example.
The star it represents as our “win” object and for the blue pentagon
represents “lose” object.
first object will be your win object with the
instance name: "win", and
instance type: movie clip.
Then input these code in its actions:
onClipEvent (enterFrame) {
if (this.hitTest(_root.guy))
{
_root.gotoAndStop(2);
}
}
second object will be your lose object with the
instance name: "lose", and
instance type: movie clip.
Then input these codes in its actions:
onClipEvent (enterFrame) {
if (this.hitTest(_root.guy))
{
_root.gotoAndStop(3);
}
}
}
Notice that the two codes are almost exactly the same except for the
numbers encoded. Numbers 2 and 3 corresponds to the fourth and fifth playhead
in your timeline.
Don't forget to right click on each playhead, click on actions, then type
in "Stop();" else your other frames would appear all at the same
time.
On the second frame: just type or draw in "YOU LOSE!"
On the third frame: just type or draw in "YOU WIN!"
When you click your fourth frame your stage should look similarly like
this:
And
for fifth frame your stage should look similarly like this:
Fourth Step: Click Button
First we need to insert key frames in your timeline from 4 to 5
Then all you have to do is draw
any kind of button you like and don’t forget to put your button in fourth
playhead.
I choose this arrow key as my button so it’s easy to understand that
moment I press this arrow key button it will automatically change into the next
stage or the next playhead.
Select your button and press right click select convert to symbol and
change Type into "button” also don't forget to write the name as button.
Now the reason why we created two key frames earlier is for our button
to be able to work the instant you press your button it will automatically
change into the other frame from 4 to 5.
The code is simple so it shouldn't be hard to understand. In this code
we have on(press) means the moment you press the "button" it will
automatically gotoAndStop(frame number/playhead)
on(press){
gotoAndStop(3);
}
Also one important thing to remember is that we have to put Stop() in
each key frames (right click all the playheads and press action copy Stop() for us to be able
stop the moment you press the button.)
This is how it should look after you declare Stop() on each frame.
Now that you finally know how to make button works you should be able
to make another one depending on what key frame number you choose.
Try it, practice makes perfect sense.
Buttons are not the only object you can apply this code with; you can
even make a point and click games with it just be creative.
No comments:
Post a Comment