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!
