Thursday, February 5, 2009

Part 1 - Movement/User Input

Flash Game Tutorials

Part 1 - Movement/User Input

This tutorial will teach you how to create a character controlled by the user. It can be whatever you want it to be. I was creative and made a grey ball.





2. Select it and hit F8 to make it a symbol.

3. Select movieclip.

note: you must choose movieclip, so you can control it with actionscript code.





4. Click the middle box for its registration.

note: registration tells the computer where the ball is on screen, if you selected left, the computer would think the center of the ball was at the ball's left edge





5. Name it whatever you want, then hit OK.

note: the name you picked is what the symbol is called in the library, it doesn't affect your code.

6. You must give the ball an instance name. This is the name you will use to access the ball in your code. Instance name your symbol ball.

note: to instance name a symbol click on it and use the symbol's properties window





7. Now for the code. Click on the keyframe in the timeline, then hit F9 to bring up the actions(code) panel.

note: F9 is the default hotkey to open/close the actions panel; you may also find it by clicking Window, then, Actions in the menu at the top of the screen.





8. Type the following code in the actions panel. It isn't selectable because you should retype it to help you learn.



(line by line explanation below)

Line: Actionscript


Line 1: sets the variable “speed” equal to 8

Line 3: everything inside this function will run over and over again.

Note: this runs at the speed of the framerate, so if the framerate is 24 frames per second, this code will run 24 times per second

Line 5: this is an if statement if the key is pressed down, then the code inside the brackets will run, otherwise it does nothing

Note: 37 is the ascii code for the Left Arrow. An ascii code table can be found at http://www.asciitable.com/

Properties of MovieClips

Properties
Understanding MovieClip Properties

This tutorial is about the most important and commonly used properties of movieclips.

_x and _y
Every movieclip on screen has an x and y location that can be called or changed. These coordinates are measured in pixels from the top left corner of the screen. x is left and right, while y is up and down.

For example, on a 550 by 400 flash--
Top Left 0X , 0Y
Top Right 550X , 0Y
Bottom Left 0X , 400Y
Bottom Right 550X , 400Y



To find out what a movieclip's _x or _y location is use.

myvar = ball._x
myvar2 = ball._y
This sets the variable myvar equal to ball._x(the ball's x location), and myvar2 equal to ball._y(the ball's x location),.


To change a movieclip's location on screen.

ball._x = 200
This moves the ball to an _x position 200 pixels from the left side of the screen.

ball._x += 50
This moves the ball to an _x position 50 pixels to the right of where is was before.



_height and _width

Every movieclip also has a height and width. They are pretty self-explanatory. You can change them or find out what they are by doing this.

yourvariable = ball._width
This sets yourvariable equal to ball._width(the ball's width).

myvariable = ball._height
This sets myvariable equal to ball._height(the ball's height).



You can stretch or shrink a movieclip also.

ball._width = 38
Sets the ball’s width to 38 pixels.

ball._width += 20
Adds 20 to the ball’s current width.




_alpha

The _alpha property is how opaque or transparent a movieclip is. It has a range of 0 to 100 with 0 being invisible and 100 being opaque. Be careful when using it on moving objects because it can cause bad lag and slow frame rates on many computers.

ball._alpha = 50
Makes the ball somewhat transparent.


ball._alpha -= 5
If you put this in the onEnterFrame function so that it runs repeatedly, it will make the ball slowly fade then disappear.


Visit our site pogollama.com for free flash games and highscore tables.

Basic Math in Flash

Basic Math in Flash - From adding to generating random numbers.

Math is fun, ok maybe that’s just me, but before you code anything really cool, you need to know how to use math in flash.

Adding and Subtracting with Variables.

Let’s say you have a variable for your main character’s health. What if he gets hit by a bad guy. We want to subtract some health. To do this we can use.

health = health – 15

or

health -= 15

Both will take the value of “health” and subtract 15 from it.

Now if our main character(lets call him Bob), so if Bob uses a health potion, his health will rise. We would use this code.

health = health +30

or

health += 30

Multiplying and Dividing with Variables.

Now Bob found a new item. It makes his attack 50% stronger.

To calculate this we use.

attack = attack * 1.5

or

attack *= 1.5

A bad guy cast a spell that makes Bob’s defense less effective.

Now we use.

defense = defense/2

or

defense /= 2

Rounding and Generating Random Numbers.

Now we don’t want Bob to do the same amount of damage every time he attacks. Let’s add an element of chance by generating a random number.

damage = Math.random ( ) * 25

The random function finds a random number between 0 and 1.

(Ex: 0.342514613451) We then multiply it by 25 so that it finds a number between 0 and 25.

Now what if we don’t want bob to have decimals in his attack damage.

We use this code.

damage = Math.round(damage)

Or we can put this all in one line by doing this.

damage = Math.round(Math.random( ) * 25)

But what if we want Bob to do at least 10 damage but not more than 25? Then we use something like this.

damage = Math.round(Math.random( ) * 15) +10

This code finds a random number between 0 and 15, then adds 10 to it, creating a range of 10-25.


Be sure to check out our site pogollama.com for free flash games and highscore tables.