Making a Scrolling Background
This has been requested by a few people so I thought I will write it. In this tutorial you will learn how to make a scrolling background. I am using Macromedia/Adobe Flash 8 but Flash MX 2004 will work as well. It would help if you knew some basic actionscript since I am not going to go as in depth with the code as I usually might since this is alot like a few of the other tutorials.
Click here to see an example of what we will be making. Arrow Keys to move.
First of all open flash and draw the ground that you want to scroll and the character that will be walking. Make them each MC’s (MovieClips). Give the ground an instance name of ‘ground’ and the character an instance name of ‘man’.
Make sure the mans registration point is in the top left corner. Now paste this code on the frame.
if (!_root.ground.hitTest(_root.man._x, _root.man._y+(man._height/2), true)) {
if (Key.isDown(Key.LEFT)) {
_root.ground._x += 3;
}
}
if (!_root.ground.hitTest(_root.man._x+man._width, _root.man._y+(man._height/2), true)) {
if (Key.isDown(Key.RIGHT)) {
_root.ground._x -= 3;
}
}
};
The first line means ‘When this frame is entered’. The second line is an if statement, checking if the left side of the square is not hitting the ground, if the statement is false flash will do nothing. If it is true, flash will make the ground move right, so it appears that the man is moving left. The 3rd line is checking if the Left arrow key is down, and the 4th is making the ground move left (like I just said) if the 3rd line is true.
Lines 7-9 are exactly the same as the previous ones except checking if the right side is hitting the ground and making the ground move left.
Now if you test your movie you should have a scrolling background when you move left or right. But if your MC hits a wall in the background it will stop scrolling.
Loading ...
kinda explains alot in the problems i had… thnx
wheres the tutorial request thingy? i cant find it… well i can but i can type anything on it theres no text box!..
i wanr to request a tutorial…
category: flash
i want a tutorial about graphics in flash or if not, teach us about filter
(like: bevel, gradient bevel, glow, gradient gloe, drop shadow and others)
thnx alot
great request! I want it too!
I have no idea what happened to the tutorial request thing.
With filters and such there is not really anything to teach. Flash gives you a few settings for each and each one is very self explanatory. If you wanted filters through actionscript however that would get a bit more advanced.
please tell me if theres a way i can do this without the registration point in the top left corner, it wont let me put it anywhere but the middle.
So when i push left or right it doesn’t do anything
http://www.awestyproductions.c.....s/request/
It doesnt work for me for some reason. i copied everything exactly as it is, and it doesnt work.
nevermind, i got it to work
realy? i cant get mine to work, how did you do iy?
How do i make it so the man can go up or down? ( i dont mean jump ). I already tried copying the code thats already there and changing it so it increases or decreases the y position, not x. This works, but it does not stop moving when i hit a block. Please help.
Well you would also need up and down hitTests.
if it hits a wall for me it would go trough i will fix that bug and do you know what you would do to jump???
Try using this tutorial:
http://www.awestyproductions.c.....m-jumping/
wow great tutorial, but i have a ? could you give me the code that lets me move the backround from a birds eye view?
You would use the same code as you did for the left and right but change the keys. Check out this tutorial:
http://www.awestyproductions.c.....-tutorial/
I’d like to request a tutorial for flash.
how do you do a scrolling background but the ‘man’ MC can jump and if ‘man’ doesn’t touch the ‘ground’ MC he falls like if he had fallen in a pit? thanks
Try this tutorial:
http://www.awestyproductions.c.....m-jumping/
i am making a tank game…and like…the walls on the left side don’t block my tank, it goes through it a ways…and then stops. i made sure all of my stuff was correct and it just doesn’t work. here is the swf: http://www.swfup.com/uploads/swf-9413.swf, too lazy to upload it to my own site i am :). see how it messes up on the left side? anyway…i need help…
Well Austin I don’t know how to fix it but I know the problem the registration point turns around like the image so the point goes from left to right so when you press the left key the point turns around so the whole thing would have to go through the wall until it stops I will try to fit code together like Awesty to make it so the point doesn’t turn around.
thanks, i might just go find a different code or make my own i guess since this code is very limited. oh well. i just don’t understand why the registration point has to be in the top left…i’m sure it is possible to modify it to work while it is in the middle
You put the registration point in the right spot, but since the tank turns around the registration point switches sides. You need to put the registration point in the middle, but then just change some of the hitTests.
thats what i was totally thinking. what would i change the hittests to? i have been reading over the tutorial and i just can’t find the logic in what you already have. could you explain it?
Buddy you just made my week! thanks a lot!
Hii frnd This is Tanzil frm Mumbai.I like making animation but also like to work in flash.now i didn’t start making game but i reading yur site getting ideas.soon i start making game.
Hi Awesty,
I am trying to make a game like this one http://www.addictinggames.com/stickrpg.html And what I need is the code on how to do the birds-eye view, also to make the man sop exactly on the wall without going through it or anythin.
Thanks and plz plz plz reply
Calum
P.S. I am most likely to forget about this post so please email the code or instructions or whatever to me. thaks alot:) Also ur tutorials ROCK! lol
Awesty??? Why havn’t you replied???
I’m pretty sure awesty is taking a break of some sort. If you look at other tutorial comments, his last post was on the 15th. Anyways, for ur question, type this code on your man:
onClipEvent(load) {
moveSpeed = 8;
}
onClipEvent(enterFrame) {
if (_root.wall.hitTest(_x+(_width/2), _y, true)) {
this._x -= moveSpeed;
}
if (_root.wall.hitTest(_x-(_width/2), _y, true)) {
this._x += moveSpeed;
}
if (_root.wall.hitTest(_x, _y+(_height/2), true)) {
this._y -= moveSpeed;
}
if (_root.wall.hitTest(_x, _y-(_height/2), true)) {
this._y += moveSpeed;
}
}
Put the instance name of your wall to ‘wall’ without the quotation marks.
I AM BACK!
And yea, that should work.
That code makes it worse
Ok here is what I have done…
I have added the code to the frame that Awesty has displayed in his tutorial.
BUT I want to make my game a birds-eye view so i need the walls to move up, down, left, right, diagonal etc.
Also when the man hits the walls I want the maze to stop instead of it still moving and pushing the man away.
Also if you need an idea of what I am trying to make go to http://www.addictinggames.com/stickrpg.html .
Thanks and please help I am dying to know what to do.
Also if you want to, you can email me instructions to calum[@]prositedesigner[.]co[.]uk just remove the brackets “[ and ]”.
Thanks
Awesty, I am making a game an your tutorial was VERY helpful to what I’m trying to do. But is there a way that you can show me to make it scroll not only left and right, but up and down?
Thanks
Also, could you explain how to keep some other items (example: enemies, coins, ect.) looking stationary rather than appearing to run away?
Awesty… where are you? on another holiday???
this is good but how to make the ground move in top view
Hi Thanks for this tutorial it was brilliant. I have been on loads of tutirals about moving the background but could never understand them your one worked the first time and i understansd it! so thanks and keep it up
hope u cn help me about dis flash thing i need to study this 4 my tesis its about network adventure gaming., cn u add me hirs my add antonette_mine03 thnx po
So I’ve got a couple weird issues… and its very possible I’m just being a noob
First(and kinda off topic) when I create a symbol I dont have he option to pick the registration point… is it just a weird verson I have or do you have to tick some sort of box?
Second… I did everything (except the registration, since I cant find it) but when I ctrl-enter I get a blank window, no errors…
Help?