Endless Scrolling Background

Adobe Flash Tutorials : Adobe Flash

Category: Adobe Flash Tutorials
Added: 03/29/2007
Views: 199,828

Endless Scrolling Background

Tutorial Goal

Create an endless scrolling background using Flash Actionscript and one image. There are many applications for this technique such as your forum signature, website header, advertisement banners or even game backgrounds. This tutorial will create:

Resources Needed

One seamless image. For the tutorial, right click and download the cloud image provided below:

Seamless Cloud Background

Step 1 : Document Setup

Modify the Flash Document properties to:
Modify > Document

Document Settings

Step 2 : Import and Create Background Object

Import the supplied cloud_bg.jpg onto the Stage.
File > Import > Import to Stage...

Convert the image on Stage to a MovieClip with a Linkage Identifier.
Modify > Convert to Symbol
Name: bg_mc & Check 'Export for ActionScript'

Convert to Symbol

Giving the MovieClip a Linkage Identifier allows us to reference the MovieClip with Actionscript. You will see soon.

Step 3 : Attaching MovieClips with ActionScript

Delete the MovieClip instance currently on Stage. The bg_mc MovieClip will still be in your Library.

Select Frame 1 on the Timeline and open the ActionScript Window.
Window > Actions

Enter the following code:

Code 0

Line 1: Creates an empty MovieClip to hold 2 instances of bg_mc.
Line 2 & 3: Attaches 2 instances of bg_mc MovieClip into the 'animator' MovieClip.
Line 4 & 5: Offsets the position of bg_1 & bg_2. Below is a visual of what the current code will do when complied:


Save and Test your current progress. You should see clouds.
Control > Test Movie

If you maximize the test movie, you will see that the clouds extend past the Stage on both sides.

Step 4 : Animating the Cloud MovieClips with ActionScript

Enter the following code:

Code 1

Line 6: Initializes a "speed" variable to adjust scrolling speed.
Line 7: Initializes a "cloudWidth" variable equal to width of clound image.
Line 8: Attaches the onEnterFrame function to the animator MovieClip. It will execute once every frame or in this case 30 times per second.
Line 9 & 10: Shift both bg_mc's to the left. speed = 1, so they shift 1 pixel to the left every frame.
Line 11 & 12: Check if either bg_mc has shifted completely off stage. If yes, then move it to the right side of the Stage and it will look seamless.

Concluding Statements

Now you have a endless scrolling background with variable speed. There are many ways to enhance the code, I kept it as simple as possible for the tutorial.

Tutorial Update

I received many requests on how to place content above the clouds. The problem explanation is below along with two methods to solve it:

We attached the cloud MovieClips dynamically which means they are assigned a depth. All depths take precedence over layers on stage. So content that is on layers will always be beneath a MovieClip with a depth. Here are two ways to get content above the clouds.

1. Put the Cloud ActionScript in a MovieClip
Create a new MovieClip, cut all the ActionScript from the main stage and paste it into the MovieClip. Go back to the main stage. Open the library and drag an instance of the Movieclip with the ActionScript on Stage. Now the dynamic clouds are inside a static Movieclip, which means you can now put things above it without using dynamic attachment.

2. Attach Content Dynamically
Put the content in a MovieClip and attach it dynamically with a depth higher than 1.
myStaticObject = attachMovie("staticObject","myStaticObject",2);

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Endless Scrolling Background" tutorial. View more of my tutorials here.

Like My Work?

I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.

Project Sample

Web Development : Interactive Map Tour de Baccalieu

Interactive Map
New Foundlands Business and Tourist Destinations

Print & Graphic Design : Cafe Advertisment Theater Advertisement

Cafe Advertisment
Animated Cinema Ad

Web Development : Marketing Site & 3D eBay Template Sabertron Toys Site and eBay Templates

Marketing Site & 3D eBay Template
eBay Powerseller's Website & Advanced Listing Tools


"I have worked with Max Langdon for almost five years. Max is not only a talented web designer and programmer, but he has an added quality that I find quite rare. He is able to really listen to and understand the client's vision. He asks excellent questions that help you zero in on exactly what you are trying to accomplish. This helps you clarify your goal and allows Max to think through the scope and sequence of the process before beginning to program. This saves him time and saves you money.

Working with Maxwell Langdon and his company, Pixel Hive has been a pleasure. I have always found him to be responsive and helpful. There is no "attitude" when you ask for an explanation or guidance.

I would be happy to speak with anyone who is thinking of working with Max. "

- John Burstein, Slim Goodbody Corporation, Lincolnville Center, ME
View More Testimonials

More Tutorials!