Apr 22, 2007

Programming in OOP---OOP For n00bs.

Ok. So in this tutorial I'll start with a very short intro to what OOP is, and then the real tutorial will be using OOP to program a guy moving. This may be the first tutorial in the series.

What is OOP?

Object Oriented Programming. That's what it is. Flash basically already has this built in, you use OOP when you use an mc's properties, or a variables properties. That's what OOP is, programming with Objects and properties. I could ramble on and on about what it is. For more info go to Kirupa.com they have a very extensive collection of OOP tutorials that take forever to go through and don't get to actually programming it enough.

LETS GO!!!

Okay. So we need to make a char move. First place an mc on the stage, instance name of hero.

Now lets make the Construtor of the Player.

Player = function(graphic)
{
this.graphic = graphic; //Define our graphic
this.graphic.controller = this; //Define our graphic's controller
this.graphic.onEnterFrame = function() //Use the graphic to update Player every frame
{
this.controller.InGameFunctions(); //Call our InGameFunctions function.
}
}

Now we make our Move function()

Player.prototype.Move = function()
{
if(Key.isDown(Key.UP))
this.graphic._y -= 10;
if(Key.isDown(Key.DOWN))
this.graphic._y += 10;
if(Key.isDown(Key.LEFT))
this.graphic._x -= 10;
if(Key.isDown(Key.RIGHT))
this.graphic._x += 10;
}

Player.prototype.Move means that we want to add a function to the Player class.
We can use this.graphic because that means whatever the Player is.graphic basically.

Player.prototype.InGameFunctions = function()
{
this.Move(); //this.Move() because its a Player function not a global one.
}

Test it... WHAT?? It's not moving? Oh, that's right, we havn't made an instance of Player yet.

Hero = new Player(hero);

hero is the graphic's instance name.

Any questions? comment.

Apr 11, 2007

Make Setting up Input Easier.

Alright. Well here's a short tut about how to do keyboard input without having to remember or lookup ASCII codes. What are ASCII codes? ASCII codes are the numbers that were in Ivan's keyboard input tutorial for the Key.isDown(37) for example. 37 is an ASCII number that stands for the left arrow key. Like in this example:

onEnterFrame = function()
{
if(Key.isDown(37))
{
//left arrow has been pressed
trace("left arrow has been pressed!');
}
}

run it, when you press Left arrow key it should output that.

Lets say you're creating a game that takes keyboard input WASD. It would be so easy if we defined the ASCII codes for each key and then not use "magic" numbers.
Key.isDown(W) instead of Key.isDown(87) . Makes programming a lot easier.

So let's define some variables.
W = 87;
A = 71;
D = 74;
S = 83;
UP = Key.UP;
DOWN = Key.DOWN;
LEFT = Key.LEFT;
RIGHT = Key.RIGHT;
And use that. In fact, how about we create a .as script that defines all of these codes.
Just create a new .as file and put that code into there. Now put that as file in the same folder as your game. Then in your game put #include "INPUT.as" without a ';' . INPUT.as is the file name that holds the key codes. Now if you wanted to do some keyboard input you'd do something like Key.isDown(W) and then it has the key code.

Creating walls

Example : Walls

Ok, here we are going to creat walls, so you animation can't go through, lets get started by opening the movement with arrows file we created, ok now creat a line , hit F8 and convert it into a symbol, give it the name you want, and for instance name lets put an "l" that means it is the left wall, and now we give the animation you move with the arrows keys an instance name of "man".... let's start coding!
onEnterFrame = function (){
if(_root.l.hitTest(_root.man)){
\\this detetcts if "man" hits the wall
_root.man._x += 6;

\\Here its says that if the hitTest is true, or actually touching the wall the x coordenate of the \\position of your "man" sill increase by 6, 1 pixel higher than the speed, so it wont go trhough.
}

Now you have figured out how to make the left wall, how about we start with the top one...Creat another wall that is horizontal and place it on the top of the screen. Give it an instance name of "t"..... Lets start.

if(_root.t.hitTest(_root.man)){
_root.man._y += 6;
}
\\Here we are doing what we did earlier with the left wall, only the coordenate changes to _y
\\this says that if hitTest is true the _y value of the position of the "man" should increase by 6
\\ like before the number should always be greater than the speed, so it wont go through...

This code should go tight after the left wall code.... We got 2 walls working now I hope you can figure the other 2 out.... just by changing by positive to negative, and remember to close the onEnterFrame with "}".

Hope you find it usefull...


Ivan

Apr 10, 2007

Move with the arrow keys...

Example: Ball movement

First creat a circle, let's say 50 x50 ( instance name = ball) This tutorial will be very basic, so here it is....
After you creat a movie clip add this to the first frame of the document : ( I'll explain through)

onEnterFrame = function () {

\\this code loops over when it is over this frame...

if (Key.isDown(37)) {
ball._x= ball._x-2;
}
\\Key Number (37) means left arrow key and it says if you press it the x position will move left or \\will substract its position by 2 so it moves the objects position. "Ball" is just telling flash what is going to be moved.
if (Key.isDown(38)) {
ball._y= ball._y-2;
}
\\Key Number (38) means up
if (Key.isDown(39)) {
ball._x= ball._x+2;
}
\\Key Number (39) means right
if (Key.isDown(40)) {
ball._y= ball._y+2;
}
\\Key Number (40) means down
}

You close your script and it is done, you can move your Clip with your arrow keys, if yuo want to set it faster just change the 2 in every key command, this two sets the pizels the object will move when you press the arrow button..
And Remember that its more recommendable to set frames per second to 25, for a smoother animation....
Hope you find it Usefull


Ivan

Best Flash site on the Web

Come and visit : www.kongregate.com
Here you can have a great variety of flash games, excelent forums and you can upload your own games.
Simply Great...

Make an object follow the mouse...

Example : Mouse follower


Ok, first we start by drawing a circle 50 x 50, it's instance name should be "circle"
after you finish drawing your circle go to Scene 1 Frame 1 and add this code to the frame:

onEnterFrame = function () {
circle._x = _xmouse ;
\\here we are setting the circle position to the x position of the mouse, remember that flash \\uses coordinates for setting positions
circle._y = _ymouse ;
}
\\we close the function, what we made here is we set the circle position to the mouse position, \\and the onEnterFrame means this code will repeat every time you pass through this frame

Ok, you can use this code for many things, such as making a crosshair for a game or make an interactive animation. And remember if you want to hide the mouse you should add this to the code

Mouse.hide() ;


this code goes right before all the code.
Remember for a better animation set Frames per second to 25 or higher...
Hope you find this usefull.




Ivan

Flash Tuts and more

Hi I'm the other owner of this blog, we want to help anyone that is starting to work in Flash or someone that is looking for something in special.
I live in Mexico so if you are hispanic feel free to ask for a translation, my mail is ialvarezmalo@gmail.com so any question, suggestions and more feel free to e-mail me....

Hello! A Blog about Flash that'll actually be useful!

Hello! Me (Stubbs) and Ivan have created this blog to give you help on flash by tutorials we've made or something you've personally asked us about. We will also be giving updates and post mortems on any games we create nomatter how big or small.

That's all I've got to say. Ivan, take it away.

FlashGrounds

FlashGrounds
Kevin Stubbs, Ivan Alvarez Malo