Tiled Background in Flash 8

This tutorial will teach you how to tile the background in Flash 8. In previous versions of Flash, you had to duplicate a movie clip a number of times so that it covered the entire stage. This method is outlined in Kirupa’s tutorial:

http://www.kirupa.com/developer/mx2004/duplicatebackground.htm

While this works great, Flash 8 provides a more efficient means of creating a tiled background through the BitmapData class. This class allows you to create a tiled background using the drawing API methods. Let’s get started.

Create a new document in Flash and make its dimensions 300px by 200px.

Now you’ll need your tile, for this tutorial we’ll use the same tile as used by Kirupa:

[ pattern courtesy of squidfingers ]

Save the picture to your computer and import it into your empty Flash document. Now we need to set up the linkage settings for the bitmap so that we can use it in ActionScript. To do this, right-click on the bitmap in the library and select linkage. In the window that pops up, check Export for ActionScript and give it the linkage identifier of pattern (if it isn’t already).

[ change the linkage properties of your bitmap ]

Now we need to start coding. Create a new layer and open up the actions panel for the frame. The first step is to let the compiler know that we are using the flash.display.BitmapData class. We do this with an import statement.

import flash.display.BitmapData;

Now it’s time to actually create the tile in our code by creating a BitmapData instance and assigning it to a variable. Since we want to load a bitmap from the library, we use the static method loadBitmap and pass it the linkage name of our tile in the library (pattern). This method returns a BitmapData instance, which we assign to a variable named tile for later use in our code.

var tile:BitmapData = BitmapData.loadBitmap("pattern");

All that’s left is to draw a rectangle around the stage. First we must begin the filling operation by using the beginBitmapFill method. For this tutorial, we will only focus on the first argument of the function since the rest are optional. This argument is the BitmapData instance we wish to use for the fill, so we pass it our tile instance.

this.beginBitmapFill(tile);

To draw the rectangle, we just connect lines around the stage using the lineTo method. Instead of manually typing in the size of the stage, we can use the Stage class and its static width and height properties.

this.lineTo(Stage.width, 0);

this.lineTo(Stage.width, Stage.height);

this.lineTo(0, Stage.height);

this.lineTo(0, 0);

Finally we need to end the filling operation using endFill. This way if you use the drawing API later in your code, it won’t use the tile as the fill.

this.endFill();

Test the movie and voila, it’s as easy as that. Hopefully this provides an easier approach for creating tiled backgrounds in Flash 8 with ActionScript. In case you missed a step, the completed source is available below. If you have any questions, please feel free to post them on kirupaForums.

Good luck!

Jesse Marangoni TheCanadian