Can I get any sillier? Who knows, but I think I’ll probably try.

God Makes A Sandwich.

This is my first real shot at using movie-footage with Flash. I started out using 8Ball, the next version of the Flash software, but then discovered that its lovely compression rates aren’t compatible with Flash Player 7. Bah humbug. So I had to go and re-import everything in Flash 7 to get it working for everyone else.

I downloaded the Titanic trailer, editted it into sections using Quicktime Pro. I converted the sections into a .avi file so I could rip the soundtrack off of them and mix it with the voiceover sections (I use Cool Edit Pro for sound editting, and it can’t rip the soundtrack from Quicktime files, only .avi files). Going back to the Quicktime versions, I then published then exported them as an image sequence. This publishes one image per-frame of film. I then opened those images in Photoshop and individually added the lettuce by hand to the frames that I wanted it in. I then used Quicktime to open the editted images as single movie, compiled them into a new film and saved them ready to be imported into Flash. Phew!

If anyone’s interested, it’s running at 12 frames per second and the total file size is around 960k. By dropping the frame rate it meant I could keep the movie effect but still have a reasonable size after publishing it.

Here’s what I plan to be a quick bit of information about how to turn the code that makes things move around the screen (which can be found in my beginner’s actionscript animation tutorial) into a game like Chase The Cheese.

Before we get started, if you haven’t already had a look at the game then go do that now, it’ll make the rest of this more easy to understand.

In the previous tutorial I showed you how to make things move around the screen using actionscript to make them shift along each time a frame loop happened. If you look at the game, there are three blocks bumping up and down, just like we set up in the tutorial, except that they are going vertically not horizontally.

This is very easily done, but first we set a few variables. Do this before you get into the game loop; I set-up my movies with the opening/loader page on frame one, my variables on frame two, then the game loop on frames three and four. If you put the variables in the loop frame then they will be reset everytime that frame is played. For example, you might have a speed variable that starts at 5 pixels per frame and you wanted to increase this in relation to the score, if everytime the loop plays the code sees ‘speed = 5;’ then it will never change. Put your variables before your loop and you avoid this problem and it also makes it easier to find them to adjust them. Believe me, finding things can be quite tricky in later stages of programming because things can quickly accumulate!

So, set some variables:

// init game variables
LEFT = 40;
RIGHT = 720;
TOP = 0;
BOTTOM = 315;

ch2.gotoAndPlay(“start”);
playerhit._x = 20;
player._x = 20;
score = 0;

//init block directions
b1move = 1;
b2move = -1;
b3move = 1;

//block speeds
b1speed = 5;
b2speed = 5;
b3speed = 5;

What have we got here?

Firstly there are the limits of the screen that I want to use measured in pixels, that’s simple enough to understand.

The next block is more complicated:

ch2.gotoAndPlay(“start”);

‘ch2’ is the name of my cheese movieclip on the right of the screen (in case you’ve forgotten, you give things names by clicking on them then typing it into the name box on the Properties panel). It has a label on its own timeline called ‘start’ which triggers the animation of the cheese moving onto the screen. This gives our mousey something to chase when the game starts. Without this command the cheese would remain at frame one of its own timeline where there is a simple actionscript command telling it to ‘stop();’.

playerhit._x = 20;
player._x = 20;

Rather than have the mouse graphic as the thing that hits the blocks I go for a rectangle graphic called ‘playerhit’. This is a simple movieclip the size of the mouse-body that is drawn in a colour with an alpha level of 0%. This makes it invisible. By doing this I make sure that the player survives if only their tail hits the block. This gives the player a bit of leeway and improves the feeling of accuracy in the game. I’ve put the mousey (‘player’) and the thing that hits the blocks (‘playerhit’) on the stage at the same height, so I just need to make sure they are both beginning in the same place on the x-axis, so I set both the _x values to 20.

score = 0;

Obviously, this sets the score at 0. If we didn’t define this as zero now, when the game started the score would be ‘NaN’, which is Flash’s way of telling you that you’ve not given a variable a value yet. Setting the score to zero here also means that if a person chooses to play again then you can set the movie to loop to this point and they don’t get their last game’s score still stuck in the system.

What was next?

//init block directions
b1move = 1;
b2move = -1;
b3move = 1;

//block speeds
b1speed = 5;
b2speed = 5;
b3speed = 5;

Here we’re setting up a value for a block’s initial direction and its initial speed. We’ll use these in just a moment.

Okay, let’s get our blocks moving. I’m going to do this in the most simple way possible. There are more efficient ways of coding, but sometimes it saves brainpower to just do things the brute force way. The appeal of doing things simply is that if something goes wrong then there are less places to check. So, we’re onto code that we want to run every loop so let’s put this in the looping frames:

block1._y += b1speed*b1move;
if (block1._y >= BOTTOM) {
block1._y = BOTTOM;
b1move *= -1;
b1speed = Math.random()*(score/2)+5;
} else if (block1._y < = TOP) { block1._y = TOP; b1move *= -1; b1speed = Math.random()*(score/2)+5; }

Hopefully if you’ve gone through the previous tutorial you’ll be happy with ‘if’ statements. These are simply

if (this is true) {
do this;
}

So, firstly we move the movieclip called block1 along the y axis:

block1._y += b1speed*b1move;

We do this by getting it’s current position (block1._y) then adding to this (+=) the value of b1speed (which initially we set to be 5) multiplied by the value of b1move (which we set to be 1). This means that to begin with the block will move down the screen at a rate of 5 pixels per loop. Don’t forget that in Flash, and most web-design, the numbers on the y axis increase as you go down the screen.

We then have an if statement:

if (block1._y >= BOTTOM) {

Simply, if after the previous adjustment to the value of block1._y it is now a value bigger than or equal to BOTTOM then run the code in curly brackets. We set the variable BOTTOM in frame two, so this should be pretty easy to understand, it just means that if the block is at the bottom of the screen then the code is run. I put ‘BOTTOM’ in capital letters when I was defining my variables to remind me that this is a variable that isn’t changed by the code at any point.

Let’s have a look at what’s run next:

block1._y = BOTTOM;
b1move *= -1;
b1speed = Math.random()*(score/2)+5;
}

first we set bock1._y to be the same as the BOTTOM value, this makes sure it doesn’t disappear off the screen at any point. We then get the value ‘b1move’ and multiply it by -1. We could write this line as

b1move = b1move*1

but using the ‘*=’ code does this in a quicker way.

Lastly we set a new value for the speed of the block, b1speed. Let’s look at that line more carefully:

b1speed = Math.random()*(score/2)+5;

In English that says:

We’re talking about b1speed here and we want to change its value. Make the value of b1speed equal the following… Pick a random number between zero and one, multiply it by half the value of ‘score’, then add five.

‘Math.random()’ gives you a random number between zero and one. This is fine, but we want to change the speed a little more than just adding .3 of a pixel to each loop! To do this we multiply it by a number that is increasing as the player gets further into the game, ie. the score. Everytime a person gets a piece of cheese the score goes up. To begin with this won’t make much difference, if the score is ‘2’ then we get something like:

b1speed = (randomly generated .3) * (2/2) + 5

Which would mean that the new speed of the block is 5.3 . I decided to divide the score by two because otherwise the speed of the blocks increased too fast. Given that the game is perhaps a bit too difficult, maybe I should have divided it more… It’s in changing things like this that you can create difficulty levels for your games. Anyway, with a score of 2 things don’t change much, let’s have a look at a score of 8:

b1speed = (randomly generated .3) * (8/2) + 5

That gives us 6.2, which is more than 20% faster than the basic speed. With a score of eight you can get speed values between 5 and 9, making it far harder to get across safely.

These new values for b1move and b1speed are then applied each loop until the value of block1._y is less than or equal to TOP. I’m sure you get the idea of what’s going on here.

To keep things simple I then just copied this code out another two times and changed the names to block2, b2move, b2 speed, block3, etc.

So, how do we make things hit eachother?

At the very start of the actions for the frame, before the movement code, I put in this:

if (playerhit.hitTest(block1)) {
gotoAndPlay(“gameover”);
} else if (playerhit.hitTest(block2)) {
gotoAndPlay(“gameover”);
} else if(playerhit.hitTest(block3)) {
gotoAndPlay(“gameover”);
}

This is a simple bit of code that checks to see if ‘playerhit’ is overlapping ‘block1’, or ‘block2’, or ‘block3’. the ‘hitTest’ code is very useful, it also has optional parameters for greater accuracy, but if you use my method of having an invisible ‘playerhit’ box rather than using the actual visible mousey then you don’t really need to worry about those.

I think the hitTest code is pretty self-explanatory, and it triggers a movement to the timeline frame with the label ‘gameover’.

One quick point here: to begin with I had my hitTest code running after the movement code. As I said above, it’s important to put it above this. The reason for this is that when the movement code runs it sets the new values of x and y axis variables. If the player is hit and you check for that hit after the movement code has run then the person playing never actually sees the impact before getting sent to the gameover screen. If you check the hit before the code runs then the movement animation happens and the hit is detected on the next loop. You only see the changes made by actionscript on screen when the playhead goes to the next frame, so if you check the hit after the actionscript has moved the mousey then it won’t have time to be shown to the user before they are sent to the gameover point. If you check at the start of each loop then you are really checking to see if the movement from the previous loop has created a hit. ‘Hope that makes sense!

I’ve not covered here the ways to tie the movement of the mousey into the user’s mouse movements and I don’t have time at the moment, so I’ll just say this: if you have the mousey correspond precisely with the position of the user’s arrow then the user could take their arrow off the side of the movie (where Flash can’t detect it) on one side and bring it back on on the other and according to the movie the mouse will have warpped from one side to the other, missing all obstacles and rather defeating the point of the game. For this reason I put in place the acceleration scale at the bottom of the screen. It’s quite a neat idea, but I think it might be a bit too obscure for many players. Oh well, you live and you learn!

Control is a design challenge all on its own, so maybe I’ll tackle that another day. Until then, I hope this has been an interesting insight into the use of actionscript in Flash games programming.

Okay, here’s a quick bit of info about how to make something move on screen with Flash.

Now, I’m not a programmer by nature, and some people manage to get entire games to work using a single frame in Flash. That’s cool, I grant you that, but I’m not going to spend forever working out how to make my code do that, so I use a simple system of frame loops to make things work. Also, I’ve not updated my skills to Actionscript 2.0 yet. I plan to do so after I’ve got my PhD out of the way and I have more time to dedicate to learning the foibles of the new coding system. Anyway…

Open a new movie in Flash, set the movie stage to be 400 pixels wide by 300 pixels high. Before we get going, go into your publish settings and in the Flash tab set the coding language to ‘Actionscript 1.0’. I’m pretty sure everything I’ll be talking about today will work in 2.0, but this is just to be on the safe side!

Now set up a two frame timeline. Rename the first layer ‘loop’ the give the first frame the name ‘start’ using the property panel. Create frame two as a new keyframe and add an action in the second frame saying
gotoAndPlay(“start”)
You now have your simple loop. Everytime the playhead gets to the second frame it goes back to the one called ‘start’, right before it. Cool.

This is a very basic way of controlling a repeat for code execution, you can use ‘onEnterFrame’ functions, but I’ve found that sometimes they can be fiddly when you want to have timeline-driven animation but the function to not be playing. As I said before, I like keeping things as simple as possible.

Create a new layer and call it ‘object’. Draw something simple and smallish here, such as a circle, then highlight the object and press f8 to convert it to an instance. Make it a movieclip. It’s important to make it a movieclip because these, along with buttons, can be assigned names in the property panel, you can’t do this with graphic instances. You need to be able to give things names so that you can control them with actionscript.

So, your circle is now a movieclip. Select it, and then in the properties panel give it the name ‘circle’. Cool. We now have a thing that we can control on the stage using actionscipt. This can be handy for all kinds of things. When you’re making a game it can be really useful to make objects with lots of different animations in them, such as exploding, walking animations, that kind of thing. You can then use actionscript to wait for an event (such as a keypress, on a collision) and then gotoAndPlay the right bit of animation for that event. The way you talk to an object comes next…

We have a object called circle on stage. Great. So what can we do with it? Well, we could simply animate it by hand, but if we want interaction then we’re going to have to code some stuff.

Start a new layer called actions. In the first frame of this layer type the following:

circle._x = _xmouse;

What we have there is a very simple command. In English it reads like this:

There is an object called circle on this level of the movie. We are going to do something with its position on the x axis. We want it to be changed into another value. We want that value to be the same as the x axis position of the mouse.

Publish the movie now and see what happens. As you would expect, the circle now mirrors the x axis position of the mouse. There are many different atributes of objects that you can play around with, but the most basic I think are the x and y values. When you are writing about an attribute they have an underscore before them (I guess that’s to tell the machine that you’re not talking about an object called ‘x’). So, we have circle(dot)x-axis position. You give the name of the object, the dot indicates that the object’s name is finished and you’re going on to talk about something to do with it, then you have the code for the x-axis. After this we have an equals sign, which means we’re going to be setting the value of circle’s x-axis to be something else, this is then followed by ‘_xmouse’. This a special attribute that constantly keeps track of where the mouse is on the screen, in this case the position of your pointer on the x axis; obviously _ymouse exists too.

Two quick points here, I always find myself forgetting which is the x and y axis. I remember them now by thinking of the letter Y with the upright strut in the middle of it telling me that the y is for the up/down value, leaving x for left/right. Secondly, x values start on 0 on the left and increase by pixels to the right. The y axis is different. Unlike in normal maths, the y axis in Flash (and most webdesign) starts from the top of the page and increases the lower on the page you go. A negative y value would be off the top of the page! This is simply because pages are built from the top down, so the value of y is set as being to describe how far you are from the top of the screen. It’s a bit odd, but you get used to it.

Okay, you have your circle following the x value of the mouse. If the timeline wasn’t looping then that code would only run once. Strictly speaking, because you’ve got two frames the timeline would loop without your loop code in place, but having that code there means that you can add more frames before and after the loop with things like introduction pages and end pages. Single frame movies for some reason don’t behave in the same way as a two frame movie. I find the single-frame movie behaviour unintuitive, which is why I don’t bother with it. This is an important lesson for Flash: if it makes your life harder but makes no difference to the viewer then do it the easy way. You can learn more complicated ways later, for now concentrate on getting what you want to happen going.

Add a new line of code below the previous one:

circle._y = _ymouse;

Test the movie. As you can guess, your circle now follows your mouse around. The semicolons aren’t strictly necessary to the code, they’re just a good coding habit to get into because they tell Flash when a line has finished. Flash is quite good at working this out for itself, but, like I say, it’s a good habit to get into early.

Well. We’ve got a circle following our mouse… Which isn’t very exciting really is it?

Try this: alter your lines of code to this:

circle._x = 400-_xmouse;
circle._y = 300-_ymouse;

Test it. That’s a bit more fun; the circle now moves in the opposite way to your mouse. Every time that first frame is played by the loop the code is run, it checks the x and y value of the mouse’s position (so in pixels from the left and top of the screen) then subtracts that from the values we put in earlier for the width and height of the movie, creating a clip that mirrors your movements.

Now try this:

circle._x = Stage.width-_xmouse;
circle._y = Stage.height-_ymouse;

Test it.

Yep, it does the same thing. ‘Stage.’ is a way of talking about the size of the movie and there are various attributes that you can put into your code in regard to this. This is a good way to make your scripts more adaptable for different purposes.

So let’s try something different now. How about making the circle move by itself across the screen?

circle._x = circle._x+1;
circle._y = Stage.height-_ymouse;

As you might expect, when you test this the circle will scroll off stage to the right. Great… But how do we get it back? Before we do that, change the code to say this:

circle._x += 1;
circle._y = Stage.height-_ymouse;

The ‘+=’ just means ‘add the following onto your current value’, it also works with the other symbols, for example ‘multiply you current value by this’ would be ‘*=’ .

We’ll have to use some code to spot if it’s gone off the side of the movie. That means we’ll need an ‘if’ statement:

circle._x += 10;
circle._y = Stage.height-_ymouse;
if (circle._x > Stage.width+20) {
circle._x = -20;
}

(I’ve speeded up my scrolling to 10 pixels each frame) Each time it goes off the right it comes back from the left. So what have we done here? We’ve got the movie to check the value of circle._x then compare it to the value of Stage.width+20. If the value of circle._x is greater than (indicated by the ‘>’ symbol, there is also less than ‘< ') the value of Stage.width+20 then the code between the squirly brackets runs. That code, when run, makes circle._x equal -20, which is off the left of the stage. Every time the playhead enters this frame it adds 10 to the value of circle._x, it then checks if that value puts the circle off the right side of the stage and if it does then it puts it back over to the left. Are you getting the hang of this? Essentially all we're doing is using some very simple code to change some values that effect where the object is on the stage. There's no mystery to it! The 'if' statement will be very useful to you in programming. It is quite simple: if (something to check) { run this code } You've got some basic evaluation tools you can use: > greater than
< less than == same as != not the same as Note: when you are putting in something to check in those first brackets, the equals sign does not check for equality, it has to be a double equals sign. It's an easy mistake to make and it will mess up your code when you do it! I might post some more about 'if' statements at another time. They really are worth learning well because they're the basic building blocks of coding. Let's try a couple more things before I finish: circle._x += movement; circle._y = Stage.height-_ymouse; if (circle._x>Stage.width || circle._x<0) {
movement *= -1;
}
if (initmovement != 1){
movement = 20;
initmovement = 1;
}

Test this: you’ll see the circle now bounces from side to side on the stage. That’s quite fun!

Taking that line-by-line: circle._x is now having added to it a value that’s called ‘movement’. This is a variable, that we’ve not yet given a value to. We’ll get there in a moment. Variable’s are great, you can save bits of information in them then manipulate that information using the name. This is useful if you want to use the same number in lots of places and you want one change of that figure to effect all the others. That might not immediately seem too useful but believe me it is! You can also put other things in variables, but I think that’s enough about them for today!

The second line is the old one setting the y position to the same as that of the mouse.

The first if statement has been changed. Instead of having one check in it there are now two and they are seperated by the ‘or’ symbol, ‘||’ . This means that if the value of circle._x is greater than Stage.width or circle._x is less than 0 (the left side of the stage) then the if-code runs.

The if-code uses the *= symbol combination to multiply that variable ‘movement’ by -1. What does this mean? Well, if ‘movement’ is 20, then multiplying it by -1 will make it -20. If ‘movement’ is -20 then it will become 20 (minus times a minus equals a plus). I bet you’re wishing you paid more attention in maths now! Just you wait ’til we’re doing trigonometry… By changing the value of ‘movement’ between postive and negative we can reverse the direction the circle moves in, ie. if the circle._x = 200 and you add -20 to that the circle._x becomes 180, meaning that the circle travels to the left.

So, we close the squirly brackets to close the first if statement.

Then we’ve got another if statement. This one’s a bit unusual, because it’s only ever going to run once, and is only needed really because we’ve got a two-frame loop. I’ll explain what it does and why it’s necessary.

This if statement checks to see if the value of initmovement isn’t the same as 1. The first time the movie plays this variable won’t exist, so if cannot possibly have the value of 1, so the code runs. If-code runs whenever the condition statement in the brackets proves to be true. In this case the first time the movie plays the frame the if statement will say ‘yes, it’s true that initmovement doesn’t equal 1, so I will run the if-code’.

The if-code sets two variables, firstly it makes movement = 20, so now when the loop plays ‘movement’ can be added to the circle._x in the first line of the code. Before this there was no value given to ‘movement’, but now there is. Great! The next line makes ‘initmovement’ equal 1. Again, there was no value for this before this line, so the next time the loop plays the if statement will look at its play-condition and say ‘it is not true that initmovement doesn’t equal 1, so I won’t run the if-code’.

Why have this second if statement, why not just write ‘movement = 20’ in the first place? That would mean that every time the loop runs then movement would be reset to 20. The first if statement reverses the direction of the ball by making ‘movement’ negative if the circle has reached the right-hand side of the stage. If there was a line right at the beginning telling it that movement is 20 then the if statement would have no impact and the ball would be stuck on the right. Try it!

movement = 20;
circle._x += movement;
circle._y = Stage.height-_ymouse;
if (circle._x>Stage.width-40 || circle._x<0) {
movement *= -1;
}

I’ve subtracted 40 from the Stage.width to make sure you can see it get stuck.

By using the second if statement I can set movement to 20, but the use of initmovement means that I can make sure that the if statement only runs once, when the movie is first played. As I said before, this is only needed because we’ve only got two frames. If you had more frames you could have defined the movement value before the loop begins, so it wouldn’t be a problem that needed to be dealt with.

Okay, one final one:

movement = _ymouse/4*movedir;
circle._x += movement;
circle._y = _ymouse;
if (circle._x>Stage.width || circle._x<0) {
movedir *= -1;
}

if (initmovement != 1){
movedir = 1;
initmovement = 1;
}

Let’s start from the end: We’ve got that same once-only if statement, but this time it defines a new variable called ‘movedir’, and makes it equal one to begin with.

Our first if statement now multiplies movedir by minus one, reversing it when the circle is on the edges of the screen. Remember that before we used this if statement to control the direction of movement to make it bounce back and forth? Well, now we’re using it to change a variable to control that direction rather than directly changing the number.

Just above that I’ve made the circle._y value the same as _ymouse again to make the effect easier to see.

The second line is the same as before,

circle._x += movement;

remember that if movement is a negative value then we get an equation that could look like this example

(180) + (-20)

so even though you are ‘adding’ movement to the value of circle._x it can result in a smaller answer if ‘movement’ has a negative value. It’s basic maths, and at first not very intuitive but again you do get used to it.

Then we’ve got the first line of code. Now, the second if statement created a variable called ‘movedir’ and gave it the value of 1, this could then be switched by the first if statement to be -1.

Let’s look at the line again:

movement = _ymouse/4*movedir;

This line of code defines the value of ‘movement’ which is then added to circle._x . What it does it takes the value of _ymouse, divides it by four then multiples it by ‘movedir’, and then that is the new value of ‘movement’.

So, for example, if movedir is 1, and the mouse is 200 pixels from the top of the movie stage then we get the following equation:

movement = 200/4*1;

which comes out at 50.

Another example, if the mouse is higher up the stage at only 10 pixels from the top, and the ‘circle’ has already bounced so movedir is -1, then the equation would look like this:

movement = 10/4*-1;

which comes out at -2.5.

Don’t forget that value is then added to the current position of your circle. The result of this is that the speed of the circle’s movement is directly related to how high on the stage the position of the mouse is, the _ymouse value. I divided it by four because I felt that the circle went too fast without that to lower the value. Experiment with it!

If you’ve never tried making things move on screen with Actionscript then I hope this has given you a basic understanding how how to get started. There’s no reason that you can’t have more than one object on screen, all controlled by different versions of the code above. Don’t forget to give your movieclips different names otherwise the code will apply to all of them!

Try making the circle speed up with every loop, then try setting a maximum value for the speed, then try making it slow down again once it’s reached that speed. The secret is in the way you use your if statements.

‘Hope you’ve understood and enjoyed this introduction to interactive Flash animation and that it’s given a few beginners some interesting ideas. As always, you get furthest when you begin to experiment with what’s above. Have fun!