How to Create a Pattern Background in Flash

Hi, I decide to extend my tutorial Building a Fullscreen Background Image with AS3 into How to Create a Pattern Background in Flash. In this tutorial you will learn to build a fullscreen background with your own pattern, that will be multiplied according with your screen dimensions.


Preview the final result


Setting files

Create a new ActionScript File called “Main.as” in a empty folder src (src.MainClass) that extend the Sprite class, since our Timeline will not contain any ActionScript code. Also create a new AS3 Flash file(550×400px) and open it, so that we have both files opened, and download my pattern used in this tutorial (you can use yours later).


Main.as

In ActionScript file Main.as first thing to do is to create a loader that will preload the pattern multiplied on whole screen. Let’s add variables for loader and pattern:

private var loader:Loader;
private static const IMAGE_PATH:String = "pattern.jpg";

Then in the constructor function declare properties for Stage:

public function Main():void
{
	stage.align = StageAlign.TOP_LEFT;
	stage.scaleMode = StageScaleMode.NO_SCALE;
	if (stage) init();
	else addEventListener(Event.ADDED_TO_STAGE, init);
}

Load the pattern in the init function:

private function init(e:Event = null):void
	{
		removeEventListener(Event.ADDED_TO_STAGE, init);

		loader = new Loader();
		loader.load(new URLRequest(IMAGE_PATH));
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
	}

Now, when the pattern was fully loaded, Stage will be filled on resize with this image as BitmapData:

private function onComplete(e:Event):void
	{
		bitmapData = e.target.loader.contentLoaderInfo.content.bitmapData as BitmapData;
		onStageResized();
	}

Before to see how onStageResized looks, we need to add a listener on Stage in order to trigger this function. To do this, in the init function add this line:

stage.addEventListener(Event.RESIZE, onStageResized);

onStageResized

Since this function is twice used, one for listener and one when the pattern was loaded, set the Even to be null. Then, we will fill a rectangle representing the whole stage with the pattern, setting smoothing and repeat to true.

private function onStageResized(e:Event=null):void
		{
			graphics.clear();
			graphics.beginBitmapFill(bitmapData, null, true, true);
			graphics.moveTo(0, 0);
			graphics.lineTo(stage.stageWidth, 0);
			graphics.lineTo(stage.stageWidth, stage.stageHeight);
			graphics.lineTo(0, stage.stageHeight);
			graphics.lineTo(0, 0);
			graphics.endFill();
		}

If you test this, you’ll see the hole area filled with this nice pattern. But we want to be fully filled when Stage resized or maybe on FullScreen also, not in a small area. So how to do this? The answer is simple, when the pattern was fully loaded, add a listener on resize calling again onStageResized

stage.addEventListener(Event.RESIZE, onStageResized);

onFullscreen function

If you compile now, you will see the hole screen filled with this loaded pattern, even when Stage resizes. What about creating a button, that on pressed will make the screen fully filled with pattern?
On Stage draw a simple Rectangle, convert this to Button and give him an instance name btn. In Main.as don’t forget to declare public variable with this new button created. In the init function add these 2 lines that will trigger the fullscreen function:

stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreen);
btn.addEventListener(MouseEvent.CLICK, goFullscreen);
private function goFullscreen(e:MouseEvent):void
{
	 if( stage.displayState == StageDisplayState.NORMAL ){
             stage.displayState = StageDisplayState.FULL_SCREEN;
          } else {
                stage.displayState = StageDisplayState.NORMAL;
          }
}

In order to be this possible, in your HTML code where you embed the .SWF file, be sure you have next parameters:

<param name="allowFullScreen" value="true" />
<param name="wmode" value="window" />

If you want on full screen to hide the button, in onFullscreen function add:

btn.visible = e.fullScreen?false:true;

That’s it, check if everything is ok then replace your pattern with yours. Until next time, have a nice day.


Twitter Digg Delicious Stumbleupon Technorati Facebook

8 Responses to “How to Create a Pattern Background in Flash”

  1. Thanks Robert. Fast response & great tutorials.

  2. I have tried this tutorial. Results have been appropriate as desired. Now, the problem is; how to make a movie in the center position of the page? Because public function: Main():void {stage.align = StageAlign.TOP_LEFT; } make all positions, including the MovieClip, on top left of the page.

    Could I have a suggestion?

  3. On onStageResized function, let’s say your MovieClip is called “mc”, add this line:

    mc.x = stage.stageWidth * 0.5 – mc.width;
    mc.y = stage.stageHeight * 0.5 – mc.height;

    And recompile

  4. why don’t use “graphics.drawRect(0,0,stage.stageWidth, stage.stageHeight);”
    ?

  5. Hi Erik, you can do this in many ways, but let me thank you for your suggestion.

  6. Hi Robert, great tutorial!!!
    Can you help me with this??
    How can I use the fullscreen without the button??
    Thank you :D

  7. Hi, you need to trigger something, not just to open the website directly in full screen