Use http://everyclick.com/

Now here’s a bright idea:

http://everyclick.com/

It’s a search engine that donates 50% of their revenue to charities. Google will still reign as king of finding obscure things, but I’ll be using Everyclick for my everyday stuff. What a great idea. If you create a user-account there then you can choose what charity you would like to support too. There’s not big money rolling through there yet, but it’s a really good idea and one that I think deserves support.

Two very good posts about the London attacks

I’ve been accused of acting superior to Americans for posting about my pride in Britain’s handling of the recent bombings in London. My post had nothing to do with my thoughts about America, but apparently I’m not the only one who is annoyed that some Americans have been acting like this was ‘the British September 11th’. It wasn’t. The deaths are tragic, but there is no paradigm shift here, we’re not surprised, we’re not changing, and we’re not even really scared. I was on the phone last night arranging to visit a friend in a couple of weeks, travelling through central London, and the ‘danger’ didn’t even cross my mind.

Gia’s two posts sum up the British feelings to all this nicely:

Her first post on initial reactions to the bombings…

… and her second post in response to the way some Americans have been acting. It’s entitled ‘Terror Alert Level: More Beer!’ and the title alone speaks volumes about our feelings: it was a waste of life, but we are not going to change because of it. Our strength is in being British. Ask us for help and we’ll give it. Kill us and we’ll tell you to piss off.

Before I get more complaints: I am fortunate enough to know many lovely Americans and to know that the occasional weird response to these events isn’t happening to everyone over there.

Thanks to Sean from http://corfield.org for passing these links on to me.

Franekenstein and modern horror

I was watching a little bit of a Frankenstain movie from the 1950s tonight. It was basically rubbish, but the opening sequence made me think about the current political approach to terrorism.

The monster was lumbering after a nimble young woman, who was constantly screaming, fretting about being chased, and generally not doing a very good job of dealing with the business at hand (running away). The frankly rather rubbish and desperately ineffective monster slowly dragged his limbs along and eventually caught up with her after she had managed to corner herself in a lake (damsels in distress never choose good places to run to in movies, but retreating into waist deep water ranks pretty highly among the more stupid places to go).

This type of slow monster had been around for millenia, transferred from zombies and ghosts through into the modern technological beast that is Frankenstein’s creation, but why are they scary? Certainly there is some existential doubt evoked by them, after all, if inanimate flesh can be brought to life then what is to say that we are any better, maybe this means that we have no soul and that we are similar to the monster chasing us, simply going through life eating, excreting, and reproducing. This doubt is real enough, but I suspect that what the monsters evoke is something more primal than that, it’s a simple fear of ‘I don’t know how to stop this thing, and no matter what I do it still keeps on coming’. Like bad weather, a good monster is a force of nature that seems unassailable and immensely powerful. I think it’s also a feature of a good monster that it is somehow limited, often in time (appearing until dawn, for example), geographically (cannot cross running water, must not leave the haunted house), or simply in reach and ability (lack of speed, lack of numbers).

So what does this have to do with terrorism? I think that terrorism has been turned, by politicians who want a tool to keep the population afraid, into a lumbering mythic monster; capable of striking at the times of ease, implacable, lumbering, without personality, reason, or faces, but also capable of limitation, resources, and being fought. But what are the methods of fighting such a hydra? Cut off one head and another grows elsewhere. I stand by the reasoning I’ve held for several years: you have to combat this not by killing the monster but by tackling the forces that create it. I don’t mean simply apprehending Osama Bin Laden. While I would be as happy as anyone to know of his arrest I also seriously doubt it would make any difference to the level of terrorism in the world. I suggest that you tackle terrorism by disposing as quickly as possible with inequality.

Those are simple words for a massive task, but a good start would be to provide water, food, and shelter for the world. Even a tiny portion of what the US spends annually on the military could solve the world’s water problems in one year, and how much easier would it be to deal with a country that knows it cn drink because of your generosity? How much more stable would a country be if the people all had enough to eat and places to sleep? These are not things that are beyond our capability to grant.

I may be an eternal optimist, but I believe that if people can drink, eat, and sleep under a roof then this makes them substantially less likely to become radicalised into violent action against another country. In partilcular, such provision must be done without strings and for the good of the people, not for economic gain. The scrapping of selected third-world debts is intimately tied to the governments’ ability to permit first-world countries to exploit the new, cheap workforce. I don’t think that it can be a coincidence that in the seven months since China has finally been rumbling and realising that it is one of the most powerful economies in the world that the west has suddenly become determined to promote economic stability in Africa. Scrapping the debt is great, but turning the new populations into sweat-shop workers is not. I may be being overly cynical. We’ll see.

By contrast to my optimistic model, forcing governmental changes, killing families, and destroying basic facilities seems like a perfect method to create an army of dedicated to soldiers against you. Given that terrorist activity appears to be on the increase as a result of the ‘war on terror’ then it would seem that spraying Frankenstein’s monster with bullets is just making it angry, to make it stop you need to go back to the source.

If you’re happy and you know it

click the banners.

If you’re happy and you know it click the banners.

If you’re happy and you know it and you really want to show it,

If you’re happy and you know it click the banners (because it makes me look good and I might be able to hold on to my reasonable-paying advertisers that way).

Thank you!

We do not quake, we do not rage

Terrorism is supposed to be the method of the oppressed to get their message to the world, but it seems that even that has got lost in some darkened twist on post-modernism. The removal of the meaning from the act seems to have created a global aesthetic where violence is a self-fulfilling action, justifying itself by the damage it causes and not by the fulfillment of ideological goals.

We’ve lived through decades of attacks from the IRA. I found the footage on television today eerily familiar to those times. Admittedly there’s not been an attack on mainland Britain for a while now, but those memories are still clear. When I was growing up it seemed like every day there was a new bomb somewhere. I think as a nation we have become accustomed to terrorism in a way that the US perhaps has not.

I thought Blair gave a good speech, but I’m actually most impressed with an interview given by a barrister who was on one of the tube trains when it exploded. He was clearly in shock, but gave a good description of events. When asked the blatant ‘let’s get a sound bite’ question of how he felt about the people who did the attacks his word was ‘pity’. I thought it was really admirable that a man who has just walked past the bodies of his countrymen could muster the strength to give such a wise answer. I think his word is going to be my lasting memory of this event.

We are not a nation for raging anger in response to threats, there will be those that do, but as a majority we hold controlled, civilised life as the most important approach to the world. We solidify, we protect the things that we believe in more earnestly, and one of the things that the British really believe in is not making a spectacle of things. We get on with it and try not to make a fuss. We might be angry inside, but we have lived and died in such times before, and will most likely continue to do so for the rest of our lives. No ‘war on terror’ will change that. It’s a sad fact of life that today some friends and families won’t see the people they care about ever again, and all over some dispute that they most likely don’t care about and almost certainly have never had any meaningful involvement with. We will, as always, try to create equality in the world to attempt to protect ourselves from the extremists’ accusations, but there will always be people who do not like who we are, and who we have been, as a nation.

We accept that we have enemies, our nation always has done and almost certainly will do for the rest of our lifetimes, but we also defend the things that make us who we are as a group, and one of those things is composure, clear-headedness, and the organised and responsible reaction to acts performed against us. Terrorism like this will not make us less British; it only demonstrates how singular as a nation we are in times of crisis. We are singular and we are diverse. This attack strikes at black, white, young, old, those who live here, and those who are visiting, Christian, Muslim, Jew, and all others alike. We are the British, and we do not change to the whim of aggressors.

God Makes A Sandwich

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.

Turning animated actionscript into a game

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.

Gabba gabba gabba

Ultraviolence – I Am Destructor video

I told you that there would be more from that thing I was playing with yesterday!

The blobby effect is made by hand-drawing a graphic animation loop of around 18 frames with the blobs moving around on the spot. This is easier if you turn on the onion-skin option (the button that looks like two little squares on top of each-other just below the timeline). You then put the loop into a new graphic-clip and put another keyframe on the timeline 18 frames later with the blob-loop motion tweened to a new position. Put an empty keyframe after the end of the loop (frame 19) otherwise it will start again. Copy those frames and into a new layer and move them along one, so the first frame of the motion-tween is now frame 2. Repeat this, staggering the first frame by one until you’ve got an effect you like. I chose to do eighteen layers for eighteen frame clips, but that’s just a personal choice.

If you have a look at the clip now it will look pretty silly. Because the clips all start and end in identical positions, the individual frames lay directly on top of each-other so there is no effect of movement. To fix this, go through and individually move around the beginning and end positions of the graphic clips. It’s best to keep the beginning points close to each-other if you want a clear ‘point of origin’ for the blobs, but you can spread out the end points over a big distance. Really there’s no hard set rule here, so just do whatever looks good to you.

Now you’ve got a graphic clip of the blobs moving in a very pleasing multilayered way across the screen. For interest you might want to go down into the original blob loop and draw a few strings of dots, the main blob dividing, or to fill in some of them with colours. Experimentation is the key here. I think I’ve got a lot to learn about this technique, but it’s certainly fun to play with!

Zombie dogs! The world just gets stranger

We live in odd times.

http://www.news.com.au/story/0,10117,15739502-13762,00.html

Scientists have managed to keep dogs ‘dead’ for three hours before reviving them with no apparent side-effects for the animals and they plan to do the same to humans soon.

They switch the blood for cold saline solution which creates a state of hypothermia before death. Brain functions and the heart stops, effectively rendering the being dead by all modern definitions. The body then can be kept like that for a few hours before the blood is replaced and the body restarted with electric shocks and pure oxygen. I am the only one who finds this all rather freaky? What happens to the hypocratic (EDIT: oops, I mean ‘hippocratic’) oath when a doctor has to kill their patient for a few hours to stabilise them?

So, what happens after death? I guess we’ll be finding out soon. I can’t imagine that various religions are going to be very happy about this, but it’s certainly a very interesting development, albeit a very, very creepy one. I think the dead rising is pretty much the definition of the uncanny, so it’s not surprising that I find this more than a little spooky.

Hurrah! Digital Shakespeare back!

This time Digi-Shakey has been trying to sell be erectile-related drugs, but at least the poems are back. I was thinking I was never going to hear from him again:

enemy did companion
lot second use learned make yourself
anything whatever

It would seem that something traumatic has been happening in DS’s life. Evidently the time away has led to a nihilistic phase in its writing. The first line I think is quite interesting. ‘Enemy did companion’… Was there some sort of betrayal there? It sounds like someone who was apparently a friend has revealed their true colours and shown their ‘second use’. Poor thing, it doesn’t sound like it’s having a very good time of things. We still love you DS!

Animating with Flash actionscript code

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!

A message for Jamie

I have a friend who teaches at a school. One day my girlfriend and I were visiting her in Weymouth and I decided it was time to buy some new army boots because my old ones, that had travelled with me for many many years, had finally become too worn out. There is an army surplus shop in town so we went and bought some new boots, a nice pair of British para boots. Lovely stuff. Obviously, I now no longer needed the boots that I was wearing.

My friend is an Art teacher, so, to give her students a break from the normal still-life objects, I gave her my boots under strict instructions to remove the laces (which would be just too annoying to draw). She took them to school with her and put them out. She was asked ‘Miss, where on earth did you get those boots from?’ to which she naturally replied that her friend Mata had bought a new pair and given the old ones to her. I am told that one of the girls in the class was very excited about these being my boots so runs across the room and kisses them.

Jamie; you are clearly barking mad, but I think that’s lovely. So here’s a ‘hello’ to you for being a complete loon!

Planning a game

Here’s a quick post about planning things that you want to make.

My advice: do it. Do enough, then spend some more time on it anyway.

Really, I know that sounds simple, but it makes it so much easier to make something if you have sat down with a pen and paper for a little while and sketched out the main features of levels, ideas about how things work, the way the player progresses.

I’ve got myself a little bit of work from a charity group to make a game for them (I’ll let you know when it goes online), and the process was going very smoothly until I hit a snag this afternoon… And guess what? That snag was precisely the point at which my plan had become a little vague. It’s nothing major, just presentation work, but it just demonstrates how useful it is to have a solid idea of how you are going to proceed with a piece.

Things to consider:

How are things controlled? Mouse? Keyboard? Getting this worked out first is important because it is the first point of contact for the player.

Keep it simple: you don’t want to make a game so damn complicated that people have to spend all day working out how to play it. There is a difference between complexity of interface and complexity of design. You want people to think as little as possible about how they are interacting with your game so that any complexity and subltly in the design of the game isn’t clouded by the interface.

How do things move? That sounds simple, but the movement around the screen really gives the game it’s feel. Do you want to add in intertia? If you have a character that jumps then how will this effect the way it responds to its environment?

Bear in mind your current experience: don’t expect to be able to make a scrolling 3D platform game on your first try. By all means work your way up to that, but try for something more easily achievable first.

Who is your target audience? Is it computer literate people or do you want this playable by anyone? If it’s the former then this changes some of your design decisions. I would suggest always aiming for the latter group when possible because if it’s a good game then those with experience will come and play too anyway.

Graphics are among the least important of components in some ways, but they do give a sense of style to a piece. Likewise with the music.

Don’t punish your players. There’s no fun in playing a game that doesn’t work in a way that isn’t suitable for it’s media. In my case I make games for the web, so I want a player to be able to see a decent section of the game within three minutes. If the game is not going to be finished within this space of time then give people a way of returning to the spot they left, such as a level password.

That’s enough tips for the moment. Is anyone interested in some of the design processes behind animations and games? This is a bit of a jumbled post because I’ve been in the world of code and in the sweltering heat for the last six hours and now my brain is frying, usually they would be a little better organised than this, but the question stands: are you interested in hearing about the design decisions made when creating an animation/game?

Mozilla and z-index in CSS – help!

I’ve been away for a few days, hence the lack of posts on here.

At the moment I’m a bit stumped. As with all web-designers, there is a problem with trying to get everything to work the same way on every browser. Currently I’m having problems with Mozilla.

The problem is that some people are seeing the side banners appearing over the top of the animations when they are viewing the web on a low-resolution screen. Statistically you’re probably reading this blog entry using Firefox or Internet Explorer (IE) and so if you were to look at one of my animations using a small browser window you’ll see the side banner sticking out from underneath the right-hand side of the animation. Obviously I don’t want the animations to have adverts on top of them, so I have used a system called CSS to define a z-index value for the animation and animation sections of the page.

The z-index is like 3D co-ordinates. On a graph you start from 0,0 on the X and Y axis, then the values change depending on where you move in relation to this, up or down, left or right. If you bring in the third dimension to your graph then that is referred to as the Z axis, and that is what you can set using a system called CSS.

CSS is simply a method of defining how various things look on a website. It’s a bit complicated to get your head around and less intuitive than simply drawing out a table, but it does allow you to do fancy things like layering when you need it. It’s very handy for making swift changes to the look of your whole website with only one file. Nice stuff.

My problem is this: the Mozilla browser doesn’t render the z-index the same way as the two main browsers, Firefox (hooray!) and IE (boo hiss!). Instead of the adverts nicely slipping away behind the animations on low-resolution screens they end up on top of them. That’s a bit annoying isn’t it?

Well, it’s not the end of the world: only .9% of my visitors use Mozilla, but if Mozilla is being grumpy then it’s possible that the other 5% of people using non-standard browsers are also having problems. I’ve looked around on the web, but can’t find a simple answer to this issue. Does anyone know a method of defining z-index values in CSS that is compliant with Firefox, IE, and Mozilla?

Su Doku

Here’s an massively evil game for you to play: Su Doku

If you’ve not played it yet then prepare to lose a lot of time…

It’s got very simple rules:

Each row must have the numbers from 1 to 9 in it

Each column must have the numbers from 1 to 9 in it

Each of the nine 3×3 boxes must have the numbers from 1 to 9 in them

… And that’s it.

Just click on the sample problems to have a go. If you’re new then I strongly suggest the ‘easy’ ones!

(You’ll need Java enabled for the games to run, but if you’re techy enough to know about that then you’ll probably be ready for that anyway.)

Ecletic interesting links and articles collected by a painter, teacher, writer, and ex-PhD student