Category Archives: Animation

I’m running a web-comic!

For those who aren’t on my mailing list, I’ve started running a web-comic, Trouble Down Pit.

The reason for this is simple: I just haven’t got enough time at the moment to produce animations on anything like the regular basis that I would like, so this way I can do a few panels in an hour or three and put something online that relieves the pressure of ideas-build-up in my head. Seriously, it can get quite painful if I don’t do anything about it. The doctor says I might explode. There’d be bits of Mata spread over a radius of precisely 1.4 miles, and you wouldn’t want that would you?

The comic will be updated every Monday and Friday, including a little bit of bloggy stuff beneath it. I’ll be keeping this blog running for ‘general cool stuff’ and the comic blog will often be more related to the comics or media.

The Simpsons Will Eat Your Life

I noticed while writing this blog a few days ago that the title sequence to The Simpsons takes about a minute to run. That got me thinking: I’ve watched a lot of The Simpsons, so exactly how much of my life have I spent humming along with that tune?

… So I built a script to work it out. And then to work it out for everyone else too. And then add up the cumulative loss of time throughout our lives (based on an average age of 20). And then I decided to figure out how many years of human life have been spent watching the title sequence to The Simpsons globally. And then I stopped, because any more would have been a bit silly.

http://www.matazone.co.uk/animpages/thesimpsonstimer.php

As always, if you like this then please pass it on 🙂

A quick reminder, if you’re buying anything from Amazon, please use the links on the bottom of my site pages because I really could do with the money! When you start a shopping trip to Amazon .com/.co.uk using one of my search boxes then I get 5% of whatever you buy on that journey. Thanks!

I’m still busily working away on the new game site that I’m building and it’s coming along well. I hope that a beta version will be available for trial runs inside the next couple of weeks, until then it’s still a secret what I’m up to!

An animation idea that would never work

Presenting a whole new form of aerobics: Thesercise!

Do you want to get fit and study at the same time?

Do you ever feel the need to get away from your work but you just can’t spare the time on activites that don’t stimulate your brain?

Then you need Thesercise!

Thesercise is aerobics to the sound of audio-book philosophy all placed over a house beat, so you can get fit and educated at the same time.

Our first DVD called Post-feminist toning is out now:

“Your body is fine the way it is, and you should have pride in it! Now twist at the waist to look the back of your legs, Andrea Dworkin tells to you appreciate the novelty of your body, so twist and look, twist and look, twist and look!

“Understand that your body is fine, but you can be empowered through using classical sexuality. By embracing stereotypical feminine values you can control them, now stretch! Stretch! Stretch like you are making an assumption based on a Westernised patriarchal ideology!”

Includes a ten minute warm-down appreciation of late-stage capitalism’s use of the body as a metanarrative:

“Begin by keeping your neck long and stretching your arms and legs across the floor as wide as you can. Feel the texture of the floor with your skin and debate whether the material is authentic is a post-Rousseau discourse of the natural. As you elongate your limbs feel the length of them and ponder whether they are part of you, or whether they are simply a biomechanical device that permits you to interact with the space around you.

“And…. Relax… Into existential contemplation of Baudrillard’s celebration of the rejection of the body-as-authentic as a purely simulated narrative construction based on outmoded cultural tropes.”

****

Sometimes I get ideas that linger in my head but I know that they would never work. Perhaps there would be a selection of post-graduates out there who would think this was great, but it’s just a one-line joke that doesn’t really go anywhere. You never know, maybe I’ll work out how to use this properly in the end, but it’s been knocking around for months now and nothing better has come from it yet!

The Giraffe-Milking Game

Okay, once again, this wasn’t what I’ve been working on making for ages. This is also not the other thing that I’ve had in the planning stages for about six months. This is instead the best giraffe-milking game that you’ll play all year:

http://www.matazone.co.uk/animpages/gm/giraffe-milking.php

As usual, please pass the link on to friends if you like it!

The thing that I find really annoying about making games is all the fiddly presentation stuff. I programmed this game in about three hours. It has then taken me most of my (admittedly rather slim) freetime over the past two weeks to add in all the graphics and sound effects. Maybe I’m just really inefficient at that aspect of things, but I suspect that it’s simply that it’s easier to get a prototype game working than it is to polish the prototype. You’d think that it should be the other way around really, but apparently not.

In other news, I’ve added Google Adwords onto my main site pages now, and my revenue from that is in relation to the number of clicks I get, so if there’s something that you’re interested in then please click them. Bear in mind that other businesses do pay money for those clicks, so if you’re going to click for the sake of it then please do it to a company that can afford it. Thanks!

That’s it from me. I’m getting stuck into PHP now to build a whole new game site… WoooOOOoooo! Mysterious, isn’t it? Well, it should be great when it’s done. Stay on this list for a possible beta trial when the site is beginning to function. As with most things though, don’t hold your breath; I’ve not even started coding it yet so there’s a huge amount of work to come yet.

War On Error – new animation

I really should have been doing something else with the last eleven hours, but instead I made this:

http://www.matazone.co.uk/animpages/em/woe.html

Hurrah!

I decided that I’d have a go at classic animation for a change, i.e. animation where you draw many of the frames by hand. Last time I did this it took me ages, but with the stripped down character design here I got it done in under a day. I think I should probably go and eat now though…

Circlefish – a new game

Circlefish Flash game

It’s simple to play, just use the arrow keys to guide your dot and collect the numbers in the right order. If you hit the wrong number you have to start again. It’s as easy as that… In theory!

As always, if you like it, please pass the link on to friends or forums you’re on.

Have fun!

It seems that there might have been some problems with a password protection system interfering with my shop but that should be fixed now, so if you tried buying something before please pop back and give it another go.

http://www.matazone.co.uk/shop

Additionally, if you dislike Paypal, I’m in the process of getting full credit card facilities set up so people don’t have to use Paypal anymore. That’s a few weeks away yet, but I thought I’d keep you posted.

While I’m here, don’t forget to start shopping trips to Amazon .com and .co.uk from the search boxes on my site! Thank you!

.co.uk:

.com:

Right, I’m off to work on the introduction to my thesis for a while. It’s the last chapter I’ve got left to write. It’s very exciting to at last be so close to finishing!

Time to update Flash

If you’ve not already updated your version of Flash player then now’s a good time to do it. After years of getting away with being a very secure system, Flash Player 7 has had a vulnerability revealed ‘that could allow the execution of arbitrary code’, in other words it could allow a website to install nasty stuff on your machine.

It works by creating a specifically broken form of a .swf file that permits code to be run that wouldn’t normally be permitted by the Flash Player. Flash Player 7 has been around for a few years now, so it’s a good sign for its security that it’s taken this long to come to light, but now is a good time to upgrade to Flash Player 8.

It’s free and easy to do, just follow the instructions here.

You can find out more about the vulnerability here.

Upgrading also means that you can play the latest Flash content, which has some very cool graphical effects, and other cool stuff that animators love.

Halloween animation time – Something In Throats

It’s all gone a bit creepy at Matazone Towers:

Something In Throats

Don’t forget, if you fancy donating then use the links on the top right of the animation pages, or you can buy something from my shop (there should be Little Goth Girl things arriving very soon and the corsets still have some great offers), or alternatively just start a shopping trip on Amazone.co.uk or .com using the search boxes on the pages and my site will get 5% of what you spend. It’s all good.

Well, it’s 7am here. I’ve worked on this animation solidly for a silly amount of hours, so now I think I really should try and get some sleep.

‘Night all!

Programming, animation, and the observation of nature

A reader of this blog, Nieh, has commented that s/he first learnt about inertia by playing Asteroids when s/he was young. I think this is a great example of how games can serve to some educational purpose. It is possible when playing games to get an intuitive feeling for the way things work. Bizarrely, they can teach you about the physical world around you in ways that are enjoyable and intriguing. It seems strange that virtual spaces should teach us things that we take for granted every day, but I think that it is precisely the lack of physicality in the medium that gives players perspective on the astonishing range of things that they take for granted every moment of their waking lives.

Sometimes it’s not always the times that the games are working perfectly that are the most educational either. I’m sure most experienced gamers have managed to get something stuck, suspended in mid-air at one time or another. I managed this very recently in the superb PS2 game God Of War (UK link US link) when I dropped a huge stone onto a statue then pushed the statue out from underneath it, leaving the stone hanging in the air. Rather than countering knowledge of the world, this kind of event encourages us to think about the reality that we live in and the way that things work.

Games are built on their own systems of logic. My Monkeys In Space game is built entirely of statements saying ‘if *this* is true then do *this*’, and all the action is defined by the complexity of the conditions by which the programmer describes those ‘if *this* is true’ statements. When you interact with a sufficiently complex game you often wonder ‘I know this would work in the real world, but will it work in the game?’ and it you are right you feel a burst of respect for the programmer, but you also have applied and tested your knowledge real-world physics.

Things jump up to a new level when it comes to creating games. Suddenly the world around you turns into a huge Newtonian arrangement of levers, gravity, and interia. You begin to work out how to use a sine curve to describe the motions of a knee joint, or analyse the distribution of branches along the trunks of different species of tree, noting the height they begin from the ground and the angles they take from the trunk. I’ve still not worked out fully how to simulate something dangling on a solid rod from another object in motion, but it’s something that’s ticking away inside my head and I’m sure I’ll work it out if I ever really sit down and think about the maths of it all.

The creation of games forces you to think about the maths of nature. Back in school I often would wonder when I would ever need to know about trigonometry, but now I find myself using it regularly for the calculation of distances between objects on a two dimensional grid. I’ve not tried three dimensional spaces yet; I have been tempted, but I’ve never been altogether happy with the different control systems…

Anyway, programming games really makes you examine the world around you and the processes that make one thing relate to another. Animation does this too, because you’re always trying to simulate a natural relationship between objects. This does not mean that the objcts themselves have to be natural, only that the connections between them appear logical. There is nothing that spoils immersion in an animation more than objects acting in ways that appear illogical. I’ve always tried to simulate natural movement in things to the best degree that I can in my animations. Of course, being able to do this for all objects all the time is a task that Flash is not suitable for; I couldn’t make the cloth dangle convincingly on every character, but I might be able to make a few things billow in the wind, or sway when coming to a halt. These elements are things that are recognisable from the real world and putting them into an animation conveys a level of realism that is beyond the normal limits of cartoon figures. As with anything, you can use these rules to make a joke, using a mouse to pick up an elephant is so unnatural that it becomes amusing, but, for the majority of the time, animators and programmers need to use the world around them to inspire them to work in ways that are instantly recognisable to users. By reflecting reality we can create scenes that are immersive beyond their media.

Monkeys In Space!

Everyone loves monkeys, right? And everyone loves spaceships, right? So monkeys in space should be universally popular and I will unite the online world in love and harmony.

Or something.

Monkeys In Space!

I’m dead chuffed with this game, give it a try. As usual, if you like it then please email it to your friends!

Have fun!

The fastest way to learn Flash

Sorry… But there is no ‘fast’ way to learn Flash, only the ‘fastest’. This is just my opinion, but I think that the Foundation Flash series published by Friends of ED is second-to-none when it comes to clear, practical, and easy to remember instruction on how to use the software. I just wish someone had been writing about them when I started!

US link UK link

Sham Bhangal, one of the main authors, has written loads of books for Friends of ED, and I really love his work. It makes learning much easier when the text isn’t as dry as the desert sands, and he hits the right balance between fun metaphors and information.

Yes, I know this sounds like a big advert, but I get people asking fairly often about how they can learn and so I thought I’d put my best suggestion online. I know it’s not as much fun to be told to read a book as having a personal tutor, but these really aren’t nearly as dull as most computer books, so it’s actually very easy to get useful information from them. I really do think that if I person goes through that book from the beginning to end then they will probably know more about the software than many people who’ve been working with Flash for years. If that’s not the fastest way to learn then I don’t know what is.

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.

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!