{"id":8747,"date":"2014-06-24T23:55:42","date_gmt":"2014-06-24T23:55:42","guid":{"rendered":"http:\/\/2slick.com\/web\/?p=8747"},"modified":"2014-06-24T23:58:03","modified_gmt":"2014-06-24T23:58:03","slug":"how-to-make-a-scrolling-background-in-as3","status":"publish","type":"post","link":"https:\/\/2slick.com\/web\/how-to-make-a-scrolling-background-in-as3\/affordablewebsitestips\/tutorials","title":{"rendered":"How to make a scrolling background in AS3"},"content":{"rendered":"

Here is some AS3 code for a continuous scrolling background. The code requires 2 background images of the same width that are continuously placed in back of the previous image to imitate a continuous scrolling background. Works best for slow moving background.<\/p>\n

 Javascript | <\/td><\/td> copy code |<\/td>?<\/td> <\/td><\/tr><\/tbody><\/table>
01<\/td>
package<\/span>  {<\/span><\/pre><\/td><\/tr>
02<\/td>
 <\/pre><\/td><\/tr>
03<\/td>
import<\/span> flash.display<\/span>.MovieClip<\/span>;<\/span><\/pre><\/td><\/tr>
04<\/td>
import<\/span> flash.events<\/span>.Event<\/span>;<\/span><\/pre><\/td><\/tr>
05<\/td>
 <\/pre><\/td><\/tr>
06<\/td>
public<\/span> class<\/span> eaterMain extends<\/span> MovieClip {<\/span><\/pre><\/td><\/tr>
07<\/td>
 <\/pre><\/td><\/tr>
08<\/td>
\/\/create vars<\/span><\/pre><\/td><\/tr>
09<\/td>
var<\/span> BGround1:<\/span>Background=<\/span>new<\/span> Background(<\/span>)<\/span>;<\/span>\/\/background 1<\/span><\/pre><\/td><\/tr>
10<\/td>
var<\/span> BGround2:<\/span>Background=<\/span>new<\/span> Background(<\/span>)<\/span>;<\/span>\/\/background 2<\/span><\/pre><\/td><\/tr>
11<\/td>
 <\/pre><\/td><\/tr>
12<\/td>
public<\/span> function<\/span> eaterMain(<\/span>)<\/span> {<\/span><\/pre><\/td><\/tr>
13<\/td>
\/\/ constructor code<\/span><\/pre><\/td><\/tr>
14<\/td>
 <\/pre><\/td><\/tr>
15<\/td>
stage.addChildAt<\/span>(<\/span>BGround1,<\/span> 0<\/span>)<\/span>;<\/span>\/\/background1 create child<\/span><\/pre><\/td><\/tr>
16<\/td>
stage.addChildAt<\/span>(<\/span>BGround2,<\/span> 0<\/span>)<\/span>;<\/span>\/\/background2 create child<\/span><\/pre><\/td><\/tr>
17<\/td>
BGround2.x<\/span> =<\/span> BGround2.width<\/span>;<\/span><\/pre><\/td><\/tr>
18<\/td>
 <\/pre><\/td><\/tr>
19<\/td>
this<\/span>.addEventListener<\/span>(<\/span>Event.ENTER_FRAME<\/span>,<\/span> enterFrameHandler)<\/span>;<\/span><\/pre><\/td><\/tr>
20<\/td>
}<\/span><\/pre><\/td><\/tr>
21<\/td>
 <\/pre><\/td><\/tr>
22<\/td>
public<\/span> function<\/span> enterFrameHandler(<\/span>e:<\/span>Event)<\/span>:<\/span>void<\/span><\/pre><\/td><\/tr>
23<\/td>
{<\/span><\/pre><\/td><\/tr>
24<\/td>
moveScroll(<\/span>1<\/span>)<\/span>;<\/span><\/pre><\/td><\/tr>
25<\/td>
}<\/span><\/pre><\/td><\/tr>
26<\/td>
 <\/pre><\/td><\/tr>
27<\/td>
public<\/span> function<\/span> moveScroll(<\/span>scrollSpeed)<\/span>:<\/span> void<\/span><\/pre><\/td><\/tr>
28<\/td>
{<\/span>\t\t\t<\/pre><\/td><\/tr>
29<\/td>
BGround1.x<\/span> -=<\/span> scrollSpeed;<\/span> <\/pre><\/td><\/tr>
30<\/td>
BGround2.x<\/span> -=<\/span> scrollSpeed;<\/span> <\/pre><\/td><\/tr>
31<\/td>
if<\/span>(<\/span>BGround1.x<\/span> <=<\/span> -<\/span>BGround1.width<\/span>)<\/span><\/pre><\/td><\/tr>
32<\/td>
{<\/span><\/pre><\/td><\/tr>
33<\/td>
BGround1.x<\/span> =<\/span>BGround2.x<\/span> +<\/span> BGround2.width<\/span>;<\/span><\/pre><\/td><\/tr>
34<\/td>
}<\/span><\/pre><\/td><\/tr>
35<\/td>
else<\/span> if<\/span>(<\/span>BGround2.x<\/span> <=<\/span> -<\/span>BGround2.width<\/span>)<\/span><\/pre><\/td><\/tr>
36<\/td>
{<\/span><\/pre><\/td><\/tr>
37<\/td>
BGround2.x<\/span> =<\/span> BGround1.x<\/span> +<\/span> BGround1.width<\/span>;<\/span><\/pre><\/td><\/tr>
38<\/td>
}<\/span><\/pre><\/td><\/tr>
39<\/td>
}<\/span><\/pre><\/td><\/tr>
40<\/td>
 <\/pre><\/td><\/tr>
41<\/td>
}<\/span><\/pre><\/td><\/tr>
42<\/td>
}<\/span><\/pre><\/td><\/tr><\/table><\/div><\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"
Here is some AS3 code for a continuous scrolling background. The code requires 2 background images of the same width that are continuously placed in back of the previous image to imitate a continuous scrolling background. Works best for slow moving background.  Javascript |  copy code |? 01package {02 03import flash.display.MovieClip;04import flash.events.Event;05 06public class eaterMain extends MovieClip {07 08\/\/create vars09var BGround1:Background=new Background();\/\/background 110var […]<\/p>\n","protected":false},"author":1,"featured_media":8748,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[734,735,736],"class_list":["post-8747","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-as3","tag-flash","tag-game-design"],"_links":{"self":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/8747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/comments?post=8747"}],"version-history":[{"count":3,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/8747\/revisions"}],"predecessor-version":[{"id":8751,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/8747\/revisions\/8751"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media\/8748"}],"wp:attachment":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media?parent=8747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/categories?post=8747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/tags?post=8747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}