Scratch

This is a response to a request for a basic flash game making tutorial.

For any of this to be useful to you you must be familiar with the flash program and know how to make basic animations.

If you don't have flash you can download trials at these locations. The trials are good for 30 days.

http://www.soft32.com/download_353.html   flash mx
http://www.click-now.net/download/Macromedia_Flash.htm flash 8

First of all I am going to tell you have to make sprites for your flash.

Make a drawing, right click the drawing and covert it to a symbol. When asked what type of symbol you want chose Movie Clip.

Ok now that you have your movie clip symbol you can put code in it. But first give the symbol an instance name of hero. This can be done by clicking the symbol, then clicking the properties tab and the bottom and then entering the name into a little text box that will have the words <Instance Name>. Once you have your movie clip named you can begin coding.

copy and paste the following code into the movie clip.

onClipEvent(enterFrame){
if(Key.isDown(Key.LEFT)){
_x-=10;}
if(Key.isDown(Key.RIGHT)){
_x+=10;}
if(Key.isDown(Key.UP)){
_y-=10;}
if(Key.isDown(Key.DOWN)){
_y+=10;}
}

This is the scratch equivalent of this script.
[blocks]
<when green flag clicked>
<forever>
<if> <key[ left arrow ]pressed?>
<change x by( -10
<end>
<if> <key[ right arrow ]pressed?>
<change x by( 10
<end>
<if> <key[ up arrow ]pressed?>
<change y by( 10
<end>
<if> <key[ down arrow ]pressed?>
<change y by( -10
<end>
<end>
[/blocks]
Now you can press ctrl+enter to compile your flash program. If you did everything correctly your movie clip symbol should be able to move with the arrow keys.

Now for the breakdown of the code.

onClipEvent(enterFrame){}

Ok this is a declaration of a clip event. Clip events are used to make code inside movieclips run. The clip event I choose was enterFrame and what that does is it executes the code inside the brackets every frame. So if you have your frame rate set to 30 then the code inside the brackets will execute 30 times a second. enterFrame is the most commonly used clip event.


if(Key.isDown(Key.LEFT)){
_x-=10;}

This is our if statement that moves the movie clip. It check to see if the condition inside the brackets is true and if it is then the executes the code in the squiggly brackets {}. This particular if statement is checking if the left arrow key is down and it is then the movie clip moves 10 units left.

This part

{
_x-=10;}

Means that the _x position of the movie clip is going to be equal to itself minus 10. The -= used to change the value and there and there are different kinds of these symbols.

Here is a small list of some of the different ones

-= the value equals itself minus another number
+= the value equals itself plus another number
*= the value equals itself times another number
/= the value equals itself divide by another number

Ok, now that we have our moving movie clip and we understand what the code in it does we are going to make a simple enemy.

So make an movie clip symbol like you did before and give it an instance name of enemy.

Now that we have our enemy we should set it up so that we lose life when the hero movie clip touches it. So what we have to do is declare a variable on the frame that your movie clips are on.

Insert the following code into the frame

var life=100;

what we just did was create a variable called life and assigned it a value, which in this case is 100.

Now go on the enemy sprite and insert the following code

onClipEvent(enterFrame){
if (this.hitTest(_root.hero)){
_root.life-=3;
}
}

This is the scratch equivalent of that script
[blocks]
<when green flag clicked>
<forever>
<if> <touching[ hero
<change{ life }by( -3
<end>
<end>
[/blocks]

Now for the breakdown of the code. I will assume you already know what the onClipEvent(enterFrame) does.

if (this.hitTest(_root.hero))

Yes, this is an if statement. Inside the if statement we are preforming a hitTest on the hero movie clip. In this hitTest the "this" refers to the sprite the code is on (the enemy sprite) and inside the brackets we are referring to the hero sprite we made. The reason we need a _root. before the sprite name is because whenever you are referring to something that is outside of the movie clip you must first put _root. before the value or symbol you are referencing.

_root.life-=3;

As I just said since this variable is not part of the movie clip (it should be in a frame in the main timeline) we need to reference it using _root.. We are taking 3 units away from the life variable.

Now for the last part, displaying the variable. This is pretty simple, just put a text box on the stage, and in the properties tab site it to dynamic, and in the var: box put in
_root.life


If you want to learn more check out these links
http://www.newgrounds.com/portal/view/366346
http://www.newgrounds.com/portal/view/344206
http://www.newgrounds.com/bbs/topic/229808/50
http://www.flashkit.com/tutorials/
http://www.actionscript.org/
http://www.kirupa.com/

Last edited by archmage (2008-08-11 15:45:52)