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.)

New Little Goth Girl animation

The new Little Goth Girl animation is online:

Little Goth Girl – Open Mike Night

I’m quite impressed, this took just under two weeks to make. Mixing the soundtrack actually took about six hours in the end. It’s amazing how long something like that takes! My microphone appears to have nearly given up the ghost, so I spent quite a lot of time trying to boost the volume without destroying fidelity. It’s perhaps a little quiet, but I really couldn’t amp it any more otherwise there was too much distortion. I’ve got some nice ambient effects in the background which people probably won’t notice, but I’m happy that they’re there!

Six hours on the sound… I hate to think how long these things take to make. I’ve given up keeping track!

I’m rather pleased with the look of this one. There is a nice 3D feel to it, but it was all done by hand. There is some use of standard perspective on the front of the club and a huge amount of motion-tweening plus some shape-tweening to achieve the on-stage camera pan. The results look really nice, I think, but so they should for the time that they take!

Some good news for fans of Mittens and Samurai Lapin: the chaps doing the merchandise for me have agreed to produce some things with these characters on. They’re playing it safe for the moment with the designs I was using before, but if you missed them when I was running my shop then you’ll have another chance by the end of the year.

‘Hope you like it!

LGG soon + photos

Fluffy!

Fluffy signets. Aww!

Guess where I went earlier?

Stonehenge
Click for bigger

I’ve never been to Stonehenge before, but myself and friends were nearby earlier today (well… that should be ‘yesterday’ as I’m typing this at just gone 1am) so I figured that now would be a good time. It was disappointing to not be able to go closer to the stones, but also understandable, there were hundreds of people there.

The heaviest stone weighs over 40 tonnes and had been transported over 200 miles around 5000 years ago, that’s about the same weight as seven elephants, and stone is considerably more stubborn when you’re trying to get it to move. At least elephants can be bribed when, for example, you need to get them out of your mini. Goodness knows how they moved those rocks. It’s seriously impressive stuff, but loses some of the impact for you not being able to stand among them. It’s a bit like having a cathedral and never being allowed to go inside. I feel a bit better about myself for having seen it now. It’s one of those things that is part of Britain but you just never really get around to going to see. I really should go back to the Tower of London at some point.

I think when you live in a place it’s easy to not bother appreciating the things that you have around you and Stonehenge has been on my list for a long time of ‘things that I really should see’. That’s one more thing that I’ve done now!

Myself, Sues, and a friend called Sarah recorded the voice-over for the new Little Goth Girl episode on Friday. I’ll be spending most of tomorrow working on editting that down to usable sections (we were laughing rather a lot). I think it’s going to be good! I’ve still not decided on what music to use yet. There won’t be a continual soundtrack, but a few little bits here-and-there will add to the piece I think.

‘Hope you’re all having good weekends!

GPS Tron!

How cool does this look?

GPS Tron

In other news, the animation side of the new Little Goth Girl episode is nearly done, so now it’s just the sound left to do.

I also have been allowed onto the beta test of the new Flash software, codenamed 8Ball. Sadly, I’m not really allowed to tell you anything about it, but I can confirm that it is very, very cool!

Real or not?

similar young
beautiful light beautiful
steps carefully hard shining reply sandwich

This was sent to me by a chap called Tom. He says he got it in his email, which he probably did… But can we say for certain? Is there any way to tell if the lines above were written by the real Digi-Shakespeare, or were they perhaps composed by Tom with the intention of looking like DS? DS doesn’t usually mention foodstuffs, and that seems like a very human thing to write about, or then again, perhaps it is real and DS is trying to expand its range. It’s a tricky situation when you have to ask yourself ‘how random do I expect the random poems to be?’ It’s an interesting position to be in!

So what do you think? Is this a real one?

(To quickly compare to the previous ones, just click the Digital Shakespeare catagory name.)

Short films

If you have seven or eight minutes to spare then you could do a lot worse than take in a short film:

Tribeca Screening Room

I’ve only watched ‘Street Therapy’, but I really enjoyed it. I’ve always enjoyed short films. I’ve seen a few full-length feature films that would probably have been better if they’d been cut down to this length!