A scrolling background is a simple way to make it look like your game character is going somewhere. You can make it so your character appears to be falling from the sky, floating through space, running through meadows, etc. I am going to show you how to create a background that scrolls at a constant speed, regardless of the character’s movements. This is a different effect than scrolling when the character is moving or when the character gets to the edge of the screen.
First open a Flash AS2 document: File> New> Flash File (ActionScript 2)
Then draw the background you would like to scroll. Make it very wide if you would like it to scroll horizontally or very tall if you want it to scroll vertically. In this tutorial we are going to make the background scroll vertically. To follow this example, make its height 900px and set your stage height to 300px in the properties window.
Select your entire background image.
Go to Modify> Convert to Symbol
Name it Background (or a name of your choosing) and select Movie Clip. Under linkage select export for actionscript and put Background as the Identifier and Class.
Click okay and you are back to the stage.
Make sure that the crosshair of the selected movie clip aligns with the top left of the Background image. Change it by double clicking to edit the symbol, selecting the entire image and entering zero in the x and y boxes of the properties window.
When you position the Background movie clip on the stage make it aligned with the top of the stage. You can either do this visually or set its x and y positions to zero in the properties window.
Now create a new actionscript file: File> New> ActionScript File
Here is the code that will go in our actionscript file. Explanation follows.
1 2 3 4 5 6 7 8 9 10 11 | class Background extends MovieClip { function onEnterFrame() { _y -= 4; if(_y < -600) { _y = 0; } } } |
Line 1-2: Defines the class to which we linked our background movie clip in our .fla file.
Line 3-5: Under onEnterFrame() we set the rate at which the background will scroll and the direction. Here we specify it will move four pixels in the negative y direction. This will be processed continually at the frame rate of the movie because it is defined within the onEnterFrame() event handler.
Line 6-9: When it has scrolled down 600px, it starts from the beginning. For this example we reset it at 600 because our stage has a height 300px and the movie clip is 900px tall. We want it to restart when the last 300px are on the stage so no white space appears where the movie clip ends.
Because we are scrolling along the y axis in the negative direction, our character will appear to be falling, as the background scrolls upward. You can replace each y with an x to scroll horizontally and change the minus sign on line 5 to a plus sign to change directions. If you want the background to scroll in the other direction, remember that you will also have to position it differently on the stage, in your .fla file. And of course, if you want it to scroll horizontally you will have to make your image very wide, instead of tall.
In order for the background to scroll seamlessly you must make the first section of the background that appears on the stage identical to the last section that appears on the stage, with the exception of a few pixels to account for the slight movement that should occur. That way when it starts at zero, it won’t suddenly jump to a different image than what was just on the screen.
Here is the scrolling background: I’ve shown it with a game character that moves only left and right when you press the arrow keys, so it appears that he is falling. Click on image before attempting movement with arrow keys.
i don’t know if you can help me. i do not even know if this will be read on time.
ive been set a project and have never used flash before. all i want to do is when you click a character they drop something but i can’t find any code to help. i know processing but this is very diffrent.
can you help me?????
I can but I need a bit more information! Is the character holding something that it then drops or should the object just appear and fall to the ground? Do you want it all done in code or do you want to use animation? Let me know and I’ll come up with a tutorial for you.
hi,
i’m trying to create a scrolling effect in a platform game, so that when the character walks to the right, the background scrolls to the left. i have my background class, and my main class and player class, but i need to pull the player’s coordinates and velocity into the background class so it knows when to move. i’ve used getters in the player class, and have written “x = Player.x” etc in the background class, but it’s giving the 1119 error, “Access of a possibly undefined property…” now i’m totally lost because the book i’m using covers scrolling, but only procedurally, not oop. how can i get the background class to pull the values it needs? or do you know of a tutorial that explains this, and has explanations and examples of oop in actionscript? thanks a lot!
sorry to bother you,but i’m having a bit of trouble. i’m trying to add a player to my scrolling background and when i test the movie after i’ve edited my code, the back ground wont scroll and the player wont move.in the compilers/errors box thingy it says “as2 class scripts may only define class or interface constructs.
if it helps here’s my code:
class background extends MovieClip
{
function onEnterFrame()
{
_y -= 4;
if(_y < -600)
{
_y = 0;
}
}
}
class player extends MovieClip
{
var velocity;
function onLoad()
{
velocity = 10;
}
function onEnterFrame()
{
if (Key.isDown(Key.RIGHT) ){_x =_x + velocity;}
if( Key.isDown(Key.LEFT) ){_x = _x – velocity;}
}
}
Help!!!
Hmm..I’m not sure about that error. You have two separate .as files, right? One for the background code and one for the player?
oh…..
i didn’t realise you needed to separate files
Yep. You need one for each object that you are controlling with code. So for this you should have Player.as and Background.as.
ok its worked… but now i have another problem!
(sorry)
i’m on your tutorial about how to make your game character shoot bullets.
i’ve put in my code and checked eveything but when i test the moive it says
“the class or interface ‘bullet’ could not be loaded”
when i press the space button all that happens is that it places a bullet image at the top right-hand corner of the screen and it doesn’t move!
also how do you add the code to move the character to the same script?
i’m going to friend you on facebook as ewan mallinson is that ok?
sorry for the 2 comments…
It’s okay. I think it is a problem with the class not being properly set. Make sure your Bullet movieclip class is set to Bullet, the capitalization matches and the Bullet.as file is in the same folder all the other files.
To add player movement to the same script as the bullets open your Player.as file and just combine the code within each function. That sounds pretty confusing so here is what I mean:
class Player extends MovieClip
{
var velocity;
var shootSpacer;
function onLoad()
{
velocity = 10;
shootSpacer = 0;
}
function onEnterFrame()
{
if( Key.isDown(Key.RIGHT) ){_x = _x + velocity;}
if( Key.isDown(Key.LEFT) ){_x = _x – velocity;}
if( Key.isDown(Key.UP) ){_y = _y – velocity;}
if( Key.isDown(Key.DOWN) ){_y = _y + velocity;}
shootSpacer += 1;
if( Key.isDown(Key.SPACE) && shootSpacer> 4)
{
shootSpacer = 0;
var bullet = _root.attachMovie(“Bullet”,”Bullet” + _root.getNextHighestDepth(), _root.getNextHighestDepth());
bullet._x = _x;
bullet._y = _y;
}
}
}
If you want to like me on Facebook that’d be even better. There’s a facebook icon near the top of the page.
hmmm… still getting the “Class or interface” error. BTW i have checked my properties and stuff and i swear that they are all the same. also you were talking about a Bullet.as file? I thought you only needed a player.as file. if you need a bullet.as file could you tell me what’s in it?
also when i test the movie and press space, it adds the bullet in the right place,but it doesn’t move.
If you don’t have a Bullet.as class that is probably why you are getting the error. Look at the shooting bullets tutorial for the code for that class. It’s in the first box. =)
OK thanks.
It definetly worked.BTW i like how you share your skills with others, rather than keeping them all to yourself. Thanks alot!
Hi, I am using this: class TBackground extends MovieClip {
function onEnterFrame() {
_y = _y+5;
if (_y<296) {
_y = 0;
}
}
}
for a game that i am making. The stage is 400 by 400 and the bg is 400width and 592 height. The code isnt working, im not sure why so ive seeken your help. The crosshairs are in the top left and everything.
Sorry I didn’t respond earlier. I think the problem is that where you have ‘_y = _y+5;’ you need either a plus or minus sign in front of that = to make the background move. If you want the background to scroll down try changing that line to _y += 5;.