On this tutorial, I’m going to teach you the very basics almost from the ground up. So I’ll start with the basic keyboard commands for your avatar to go UP, DOWN, LEFT and RIGHT. From what you can see on the first little diagram along the longer right is a example Flash display of a single sprite centred.
Also you may notice a reference marker in the corner, is to show the open space of any based program as a stage. Where every object (text or images) are mapped out in coordinates of X, Y and for 3D software Z for depth. Well the stage is made up like up up-side-down graph with the 0 point is on the left, up corner for the values of X along the horizontal lengths, and Y for verticals (just as the graph marker says). Though in later tutorials I shall demonstrate the illusions of 3D with an assortment of tricks up my sleeve…
Any invented image you create on that stage are called sprites by terminology and be prepared to here other new words as well they are programming phrases with purpose.
By now I assume that you’ve made a cool looking and you want to make it move. Before we do, I like you to click on the sprite you want to move and type (or copy & code) the following code below across within the Actionscript window. Don’t worry it’s easier that it looks:
onClipEvent (load) {
s = 4;
}
Basic Move Triggers
onClipEvent (enterFrame) { if (Key.isDown(Key.UP)) { _y -= s;
} if (Key.isDown(Key.DOWN)) { _y += s;
} if (Key.isDown(Key.LEFT)) { _x -= s;
} if (Key.isDown(Key.RIGHT)) { _x += s;
}
}
- Here is the enterFrame line and bracket that opens brand new section of actions.
- This is one of 4x main keys you'll type in with another set of action within the brackets once applied.
"Key.isDown" is to let the computer know when to work once that specified key is physically pressed.
- It works like _x to move across and _y to go upwards. It's generally simple math to add and subtract the sprite's coordinates. Plus it's the easiest expression in Flash coding instead this example,
"_x = _x -s:"
Now here comes the fun part, your player’s movement! The little code you’ve typed earlier is a for forward planning, because “s” is a variable property that stands for Speed, and tweaking the players’ pace would be a lot quicker in future when the code sometimes get a lot more complex. I kept it as a letter, the length of typing will be more efficient and responsive for the computer to figure the Math out.
You’ll notice the first line of code was “onClipEvent (load){”. Well, it’s like a foreign language, but case sensitive, and the event is a loading stage of data once the sprite is called upon for the first time. The next part is “enterFrame”, where every frame per second asks the sprite to shift with the speed variable, if its positive or negative.
This script is the same, but modified. I've added an dynamic text within the sprite and a cute emote triggered face to inform you its movement.
- Like 'PACMAN', you'll notice it's restricted to only 4 directions, depending on which key you pressed first. An "else if" statement comes in the make it one or the other, not both.
It's always good practise to pair two opposite directions together, or it'll get confused. Like pressing both up and down, whilst _y adds / substracts in the same time will get 0. They cancel eachother out!
- Now what if nothing was pressed? The last two lines show answer that question for the sprites' idle state as a bored face...
On the sample flash file (right) has a red frame around the open space and each side is 30 pixels from the edges, thats the represents the restricted area you can move your character around. Take notice of this as reference for scrolling levels largers that your stage dimensions.
Below is the the Up arrow key trigger with another condition accompanied. If statements like these are strictly conditional like "if (dying == false){" is for a single trigger, "if (dying == false || limping == true){" is an either/or statement with "||" between them. Like the script in this example like, "if (dead == false && grimReaper_angry == true){" work only if both condition are met at that moment are the same to activate the function.
These added conditions within the triggers are to check if your player is within the frame, so it would go off screen. Basically you can move UP and LEFT, as long as you're above 30 in _x & _y, and going DOWN and RIGHT when under 170. Giving 30 pixel breathing room around this example 200x200 stage. Ofcourse these numbers can be changed with the stage size and how far you want the avatar to reach.
"} else if (Key.isDown(Key.RIGHT) && _x<=170) {"
"} else if (Key.isDown(Key.LEFT) && _x>=30) {"
Over here, we have the beginnings of a basic multiplayer game. I've duplicated the sprite and tinted them in different colours to illustrate this. One is exactly the same as before, but the other slightly modified. Nearly every key on the keyboard has a specific coded number and I will in future create a user-friendly keycode finder to make it easier for you when adding more controls.
Keyboard letter W - "if (Key.isDown(87) && _y>=30) {"
Keyboard letter S - "} else if (Key.isDown(83) && _y<=170) {"
Keyboard letter A - "} else if (Key.isDown(65) && _x>=30) {"
Keyboard letter D - "} else if (Key.isDown(68) && _x<=170) {"
As you can see from the extracts above, one sprite can be maneouvred with the arrow keys and and other to W A S D. Either avatar would be assigned to player 1 or 2. Cool aye?
I'll get into more depth with similar functions in later tutorials, have fun though! ^-^
