Thursday, 19 August 2010

Endless scrolling background in AS3

In this tutorial you will learn how to create an endless scrolling background in Actionscript 3 where an image will continue looping. I have used an image of some building for this tutorial, but any image will work.

Endless scrolling background in AS3

Step 1

Open a new AS3 file and import your image onto the stage by selecting File > Import > Import to Stage.

Step 2

Convert your image into a movie clip (F8). Then give an appropriate name, select the top left registration point. And click the ‘Export for Actionscript’ checkbox and give the class name: ScrollBg. Once you have create the movie clip delete it from the stage.

Step 3

Add the following code in the Actions panel.

//The speed of the scroll movement.
var scrollSpeed:uint = 2;

//This adds two instances of the movie clip onto the stage.
var s1:ScrollBg = new ScrollBg();
var s2:ScrollBg = new ScrollBg();
addChild(s1); 
addChild(s2);

//This positions the second movieclip next to the first one.
s1.x = 0;
s2.x = s1.width;

//Adds an event listener to the stage.
stage.addEventListener(Event.ENTER_FRAME, moveScroll); 

//This function moves both the images to left. If the first and second 
//images goes pass the left stage boundary then it gets moved to 
//the other side of the stage. 
function moveScroll(e:Event):void{
s1.x -= scrollSpeed;  
s2.x -= scrollSpeed;  

if(s1.x < -s1.width){
s1.x = s1.width;
}else if(s2.x < -s2.width){
s2.x = s2.width;
}
}
Step 4

Test your movie clip Ctrl + Enter.

30 comments:

grafisto 29 November 2010 at 02:31  

thank you it's a nice tutorial but i just a question, i need my picture goes on the right side could you explain the script for this

iliketo 29 November 2010 at 10:50  

@grafisto

Change the minus for a plus like below.

s1.x += scrollSpeed;
s2.x += scrollSpeed;

grafisto 29 November 2010 at 12:31  

yes i've done this but the picture goes away and don't go back by the left, that's my problem. it's seems S2 don't followes anything, please ligt my darkness

Kyle 29 November 2010 at 13:48  

Hi, nice tutorial. What if I wanted to somehow make it so the user could control the image with their mouse and arrow keys? Have you experimented with this idea?

Frances 30 November 2010 at 06:05  

Thank you so much for this tutorial, it's been a big help. I'm having a problem though. I'm getting a gap after a while during scrolling. I have already checked that my image tiles correctly and I've tried it with several other tiled images. Do you know why this might be happening?

iliketo 30 November 2010 at 12:50  

@grafisto

Obviously, you need to change the conditional statements as well, like below. You may need to change the values of the offsets for the images you are using.

function moveScroll(e:Event):void{
s1.x += scrollSpeed;
s2.x += scrollSpeed;

if(s1.x > s1.width){
s1.x = -s1.width+10;
}else if(s2.x > s2.width){
s2.x = -s2.width+10;
}
}

iliketo 30 November 2010 at 12:52  

@Kyle

Yes, this is possible.

iliketo 30 November 2010 at 12:54  

@Frances

Try changing the offsets. The values in my code work for my image. Your image might be different.

potsy 13 March 2011 at 14:13  

Great tutorial..but how do I add static content over the scrolling background.

iliketo 14 March 2011 at 13:19  

@Potsy

Try adding the content inside the image movie clip.

Spinziaan 2 July 2011 at 06:46  

Like this script, but experienced a gap first tought this was because my bgpic was smaller than the stage
tried scrollSpeed 200 > big gap..
Think I found a solution:
in the moveScroll function I used:

if(s1.x - scrollSpeed < -s1.width){ // s1.x - scrollSpeed instead of s1.x
s1.x = s1.width;
}
else if(s2.x - scrollSpeed < -s2.width){ //avoiding a gap in second run
s2.x = s2.width;
}

JJ 12 July 2011 at 05:13  

Hi there nice tutorial, i seem to be having issues with the picture appearing 1/3 into the screen rather than scrolling in bit by bit and as it leaves the screen it disappears partway through the image. do you know the fix for this?

ekliphuis 22 February 2012 at 06:50  

I was wondering if there was a way to to the following...
1) Cand the speed go lower than 1?
2) can the y position be adjusted?

THX

iliketo 26 February 2012 at 01:08  

@ekliphuis

1)Yes, but you will need to change the data type to "Number". Currently you can only have positive integers (uint).
2)Please explain

deepak 21 June 2012 at 05:51  

If anyone experiencing gaps then you can solve it by using

if(s1.x <= -s1.width){
s1.x = s2.x+s2.width;
}
else
if(s2.x <= -s2.width){
s2.x = s1.x+s1.width;
}

Somehow second image moves a little bit faster than first image.

gowtham ragu varathan 10 July 2012 at 10:01  

how to control the image moving speed plzz tel me its urgent

iliketo 10 July 2012 at 13:05  

@gowtham,

Look at the first line of my code.

João Augusto 21 August 2012 at 11:03  

@Frances

The speedScroll must divide the width of the image.

For instance, if you have a image of width 850px, the scrollSpeed value must be only 1, 2, 5, 10, 17, 25, 34, 50, 85, 170, 425, 850. If you try another value different from these above, you'll always get a gap between the two images.

MisfitGuthix 7 September 2012 at 23:13  

For the people who are asking how to have static images over the top, I haven't tested it just yet, the easiest way would be to right click on the picture before you convert it to a clip, and go to arrange>send to back. Then convert it. As I said, I haven't tested this just yet.

MisfitGuthix 7 September 2012 at 23:34  

@iliketo
What he means is for pictures that don't have the same height as your stage, eg. stage is 500 and the picture is 300, can you make it so the picture is at the bottom or somewhere in the middle. I am having the same problem as I am making a simple flash game where you have to jump a few blocks or you lose and I want to have a distant city in the background with a night sky behind the game. The scrolling works fine but the picture is up the top and it needs to be close to the bottom. Also, on a slightly related matter; I am having trouble stopping the game when it reaches the end point and when you hit a block. The stop() command doesn't work.

iliketo 8 September 2012 at 01:33  

@MisitGuthix,

Why not move the movieclip onto a different layer?

Beaver 11 May 2013 at 21:06  

hi first of all great tutorial !!!

every thing works fine, except for one thing. i have a stage of 950 on 650 and my looping animation starts at the top of the left corner.

i need it to start in the middle of the stage. how to i go about this?

Derek Manns 13 May 2013 at 11:26  

Thanks for the tutorial.
2 problems:

1. I am using clouds and they are coming to a stop based on your code.

2. How do I push my clouds to the background they are currently scrolling on top of everything on my stage!

Thanks

iliketo 14 May 2013 at 12:33  

@Beaver,

Put the two ScrollBg movie clips into a container and move the container to the middle of the stage.

iliketo 14 May 2013 at 12:36  

@Derek,

Put the two ScrollBg movie clips into a container movie clip, and move the container to a different layer.

Derek Manns 16 May 2013 at 00:30  

1. solved the clouds stopping tweening existed so looping from tween was the cause

2. So by default the ENTER_FRAME pushes the movie clip to the top layer?

Thanks again.

Ashley Dennis 20 August 2013 at 11:26  

I have the scrolling background working great :) Thank you, however, even when I put the ScrollBg in a container, it still pushes the background to the top of the page and hides my falling characters. Please help! Thanks in advance

iliketo 20 August 2013 at 12:17  

@Ashley,

Put the two ScrollBg movie clips into a container movie clip, and put the movie clip underneath your characters layer.

Aaron Collie 19 March 2014 at 06:38  

Hi, I'm new to actionscript. I've got the scrolling background working and i want to move it further down, and i'm not sure how to put them into a container

iliketo 20 March 2014 at 12:57  

@Aaron,

Create a new movie clip and put the two ScrollBg movie clips inside.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP