Skip to main content
Participating Frequently
November 10, 2013
Question

How to make a infinite SMOOTH scrolling background?

  • November 10, 2013
  • 2 replies
  • 4509 views

This is what I have done:

var BGround1:Background=new Background();

var BGround2:Background= Background();

stage.addChild(BGround1);

stage.addChild(BGround2);

addEventListener(Event.ENTER_FRAME, moveScroll, false, 0, true);

function moveScroll(e:Event): void

                    {

                              BGround1.x -= scrollSpeed; 

                               BGround2.x -= scrollSpeed; 

                        if(BGround1.x <= -BGround1.width)

                              {

                            BGround1.x =BGround2.x + BGround2.width;

                        }

                              else if(BGround2.x <= -BGround2.width)

                              {

                            BGround2.x = BGround1.x + BGround1.width;

                              }

                    }

However, If I set scrollSpeed too high, the movement is not smooth. Is there any way to make a smooth animation?

Thanks in advance.

PS: I dont know how to put the code into code tag.

This topic has been closed for replies.

2 replies

Amy Blankenship
Legend
November 11, 2013

You might want to try changing your approach.

kglad
Community Expert
Community Expert
November 10, 2013

you can increase the framerate or decrease the scrollSpeed.  that's it.

but you'll achieve better performance by enabling the cacheAsBitmap property of BGround1 and BGround2:

var BGround1:Background=new Background();

var BGround2:Background= Background();

BGround1.cacheAsBitmap=true;

BGround2.cacheAsBitmap=true;

stage.addChild(BGround1);

stage.addChild(BGround2);

addEventListener(Event.ENTER_FRAME, moveScroll, false, 0, true);

function moveScroll(e:Event): void

                    {

                              BGround1.x -= scrollSpeed; 

                               BGround2.x -= scrollSpeed; 

                        if(BGround1.x <= -BGround1.width)

                              {

                            BGround1.x =BGround2.x + BGround2.width;

                        }

                              else if(BGround2.x <= -BGround2.width)

                              {

                            BGround2.x = BGround1.x + BGround1.width;

                              }

                    }

chaocanhaAuthor
Participating Frequently
November 10, 2013

I didnt see any improment after enabling cacheAsBitmap. The background is still a blur.

This is my file

https://dl-web.dropbox.com/get/stickman.swf?w=AAA2UhpRDI7YLmSMfBoOR9GvLFHL57IMBrM0J5lxClvOsQ&dl=1

kglad
Community Expert
Community Expert
November 10, 2013

i don't download and correct files unless i'm hired.

that said, my message 1 is still accurate so the value of scrollSpeed and your framerate are critical. 

enabling cacheAsBitmap allows you to achieve greater framerates (especially if you have nothing else slowing down the animation).  but in no situation will you be able to achieve a framerate greater than 60.