Categories
AS3 AS3 migration Flash

Tiled background AS3

Sometimes you just need a pattern in the background that is fullscreen, of course you can use a big .PNG file but that is not always necessary.
You can use a pattern that you need to tile, I’ve written about this before: my post about tiled-background in Flash 8 AS2.
The code over there is based upon a tutorial (http://www.kirupa.com/developer/flash8/tiledbackground_flash8.htm)

And because kirupa is great they already have the answer:http://www.kirupa.com/forum/showthread.php?t=265953

But to put it next to each other:

AS2 example

For this example you need a bitmap in the library (right-click >> Linkage… >> activate ‘Export for ActionScript’) with the Linkage IndentifierStripePattern_mc‘ and this AS2 code placed in the root
[as]
import flash.display.BitmapData;
var backGroundBMP:BitmapData = BitmapData.loadBitmap(“StripePattern_mc”);
this.beginBitmapFill(backGroundBMP);
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
this.endFill();
[/as]

AS3 example

But in AS3 some things have changed. And for consistency I’m using StripePattern_mc although coding conventions will say it has to be StripePattern
[as]
var backGroundSprite:Sprite = new Sprite();
backGroundSprite.graphics.beginBitmapFill(new StripePattern_mc(0, 0));
backGroundSprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
backGroundSprite.graphics.endFill();
addChild(backGroundSprite);
[/as]

Besides the obvious changes, which I’m not going to explain (Stage.width vs stage.stageWidth, etc).

code line 2
BitmapData.loadBitmap is removed from AS3. There are no longer Linkage Identifiers and there is no longer attachMovie. Everything is created using the new operator.
And because a Bitmap(Data) needs two extra variables:
public function BitmapData(width:int, height:int, transparent:Boolean = true, fillColor:uint = 0xFFFFFFFF)

code line 3
drawRect is a new Graphic methode, but is does the same as the AS2 code part with lineTo, but shorter.

code line 5
and you need to add it to the displaylist (hmmm perhaps I need to explain this in a future post)

For this example I created a pattern with stripegenerator.com/ but any pattern will do.

Categories
Flash Flash experiments

Flash experiments: tiled background

Update #1: Recently there are some who like to have the source of this project, that’s not a problem. But the source is what it is, and there are no comment in the code….
And because this post was not up-to-date, I’ve remove some of the links to sites with patterns because they didn’t exist anymore. That’s also the reason that I had to update the Flash file.
shortcut to download

Another experiment, to use external images for background patterns.

But there was no need to start from zero, so here are some tutorials that I used:

both tutorials were used in the experiment.

[swf]http://www.matthijskamstra.nl/laboratory/swf_experiments/tiledBackground_v02.swf, 450, 450[/swf]

(I had to update this file because of broken links: this is version 2)

Get the source files here:

The .ZIP file contains:

+ tiledBackground     
     + deploy
            - AC_RunActiveContent.js
            - tiledBackground_v02.html
            - tiledBackground_v02.swf
     + source
            - tiledBackground_v02.fla

Borrowed some seamless background pattern from Squidfingers
pattern_021.gif
pattern_095.gif
pattern_111.gif
pattern_131.gif
pattern_141.gif

It’s not possible to link directly to Squidfingers!

But you can find your own patterns on the internet, examples of site with seamless background patterns:
http://www.wonderbackgrounds.com/
http://www.cameradio.tk/tiles1.htm

root2art.co.uk
http://backgroundsarchive.com/tiles/wood.php?page=2

I used http://www.neopets.com/backgrounds_tiled.phtml in the flash source.
But you can use any image from the internet!
(Need some help: find “tiled background” with google )