Chinook - Flash Game Dev

Game Creation with Flash - Chinook Learning Services

Class One

How to save an object to the Library.

select it on the stage
drag it into the Library
give it a name and choose Movie Clip if you want to do something with the object with code

Select the object on the stage, look in the properties palette, it should say this is a Movie Clip and an Instance of: whatever your library item is called.

To get it to move, we selected the object on the stage, opened the Actions (F9) palette and added:

onClipEvent(enterFrame){

this._x+=5;

}

That made it move off the screen to the right.

To get it back we added a conditional statement.

if(this._x>600){ this._x=-100; }

So if the x coordinate of this object is more than 600 pixels from the left side of the stage, change the x coordinate of this object to now equal -100 pixels.

Note the curly brackets, how many of them, and where they are.

onClipEvent(enterFrame){

if(this._x>600){ this._x=-100; }

this._x+=5;

}

Class Two

In the first class we made an object move around on the stage and applied a simple conditional statement. This if() statement is basically how artificial intelligence works in games: if this happens, do this other thing. In more complex games, you just have more of these.

The next thing we wanted to do was create a "frog" and we wanted to move the frog with keys we press on the keyboard.

If you have Flash MX or higher, you can put actions for keypresses on the frog movieclip, but we saved the files back as Flash 5 so the students could use them at home, and that created some problems.

First step: draw a frog on the stage, select it and drag it to the library, save it as a MovieClip

Note: only objects that are MovieClips in the Library can have Actionscript applied to them. This is a strange Flash limitation that other game development programs don't have.

Select the Frog on the stage. If you have Flash MX, all we did in class was add some script to the Frog movieclip:

on(keyPress "<Left">){ this._x-=50; }

The problem with this was it didn't work in Flash 5, which is the trial version I have available to download off my server. It could have been replaced with:

onClipEvent(enterFrame){
if(Key.isDOwn(Key.LEFT)){ this._x-=50; }}

or we could make a button for the Frog and put the button off the stage so it can't be seen.

This is a pretty good button tutorial. Go read it, then come back here.

The button is essentially a timeline within the main timeline. Each frame of the button timeline has a unique use. But the basic thing is, when you roll over a button with the cursor, the button goes to the second frame of its timeline (called "Over"). When you roll off, it goes back to the "Up" state.

When you write Actionsript for a button, the code goes on the button when its on the stage, not in the button. So if you see the four button frame in the timeline, click on Scene 1 and get back to the main stage.

It doesn't really matter what your button looks like right now. We're going to hide it off the stage so the user can't see it anyway.

Select the button on the stage and add this:

on(keyPress "<Left>"){ frog._x-=50; }
on(keyPress "<Right>"){ frog._x+=50; }
on(keyPress "<Up>"){ frog._y-=50; }
on(keyPress "<Down>"){ frog._x+=50; }

In Flash, the 0 coordinate for the x axis is the left side of the stage. The 0 coordinate for the y axis is the TOP of the stage, so when you want to go UP you are actually minusing from the current y value. This is opposite to what you might have learned about charts and coordinates in school.

This button won't work yet.

But the frog movieClip needs an Instance Name. Yes, it has a name in the Library, but that Library name is just for reference. On the stage, each object needs an Instance Name so the Actionscript can refer to it by name. Select the frog and you should see something like this in the Properties palette:

Below the Movie Clip pull-down menu is a blank text field with small greyed text that reads <Instance Name>. This is where you type in the name of the frog on the stage.

This name should not include spaces, or most punctuation, like apostrophes and quotes. So, frog! is a bad name, as is "my frog".

Now your button should work. It is targetting a named object on the stage. If it doesn't, send me the file.

Other properties you can change.

The location of the frog on the stage is one of its properties. In the Properties palette above you can see that the x (left-right) location of the frog is 237.6. You could move it like this:

frog._x=300;
frog._y=325;

This is a pretty good demo of changing an object's properties with Actionscript. In addition to moving the object, we can affect other properties, like rotation.

So far, the frog can move with they arrow keys on the keyboard. And in day one we made an object move across the screen and loop back. That is the car. This is the code that goes on it:

onClipEvent(enterFrame){

if(this._x>600){ this._x=-100; }

this._x+=5;

}

This is a file you can download that should be similar to what I have described above. Compare it to your own, but try doing it yourself first.

Try this. [Right click to download]

So far, the frog moves with the keyboard arrows. And the cars move independently across the screen and when they go off the screen they come back.

In class we added some variations to this to make the cars change speed randomly.

Currently, the cars have the onClipEvent shown above. What we added was the following bolded lines.

onClipEvent(enterFrame){
if(this._x>600){
speed=Math.round(Math.random()*20)+5;
this._x=-100;}
this._x+=speed;
}

What this does is create a variable called speed and assign a random number to it when the car moves off the screen. The random number is 0-20 + 5, so 5-25. Then we make the new x value of the car equal to its current location plus speed. When it gets to the end of the screen it gets a new random number and uses that number until it gets to the end again.

This code is good, but it's missing one thing. The variable 'speed' has no value initially because the car hasn't moved off the screen yet, so speed is undefined. We need to write some code that will load only once. If we did this:

onClipEvent(enterFrame){
speed=20;
if(this._x>600){
speed=Math.round(Math.random()*20)+5;
this._x=-100;}
this._x+=speed;
}

or something like it, speed would be reset to 20 every frame and would never be random. What we need to do is set the speed only once when the car movie clip loads:

onClipEvent(load){
speed=20;
}

So our car now has this:

onClipEvent(load){
speed=20;
}

onClipEvent(enterFrame){
if(this._x>600){
speed=Math.round(Math.random()*20)+5;
this._x=-100;}
this._x+=speed;
}

We also wanted some cars to move left to right, so they get this code.

onClipEvent(load){
speed=20;
}

onClipEvent(enterFrame){
if(this._x<-50){
speed=Math.round(Math.random()*20)+5;
this._x=650;}
this._x-=speed;
}

If the car's x location is less than minus 50, meaning it is off the screen to the left, get a new random number and move the car to the right 650 pixels.

Collision Detection

The last thing we did in class was create an event when the car movieclip touches the frog movieclip.

Collision detection is basically one line of code: hitTest. How it works is it runs a check to see whether the bounding box of one object is overlapping another. To do this, at least one of the objects needs an instance name (see above).

If we have four cars, we could put the hitTest on the frog, but then we would have to get the frog to check whether it has hit each car by name. So our code would be four times as long as if we put the same code on the cars, like so:

onClipEvent(enterframe){
if(this.hitTest(_root.frog)){
_root.frog.gotoAndStop(2);
}
}

The first line has the by now familiar onClipEvent() function, so the car is going to run the code inside the curly brackets every frame.

Line 2 is has the hitTest function, but it also has an if() statement to check whether the hitTest is true. The hitTest compares "this", which is the car movieClip to "_root.frog" which is the instance name of the frog. We need _root in front of frog because we are referring to it from another movieClip and we need to first target the root level, or the main timeline. So, if this car hits _root.frog then we run what is inside the second set of curly brackets. We tell _root.frog to go to its second frame and stop.

We don't have a second frame for the frog, so we need to make one.

Open the frog in the library, add a keyframe to frame 2 and draw some blood or a flattened frog or something. Go back to frame one of the frog timeline and add a stop to frame one. If you don't put a stop in frame one the frog will loop on the stage.

The finished Actionscript for the car should look like:

onClipEvent(load){
speed=20;
}

onClipEvent(enterFrame){
if(this._x<-50){
speed=Math.round(Math.random()*20)+5;
this._x=650;}
this._x-=speed;

if(this.hitTest(_root.frog)){
_root.frog.gotoAndStop(2);
}

}

Test your movie.

MOTE INTERACTIVE 2005