ActionScript 3 Full Browser Tiled Background
ActionScript 3 Tiled Background class.
Simple class for creating a tiled background for your projects. Takes 3 arguments,
the first is either a bitmapData object or URL to an image, a Boolean indicating if you want to multiply blend your image. Which is useful if you
want to overlay the tile over other display objects. And finally, a string representing the repeat mode of your tile. Class also supports repeat modes, in the same vein as what CSS allows for.
Class Features
- External Images or internal bitmap for tile
- Get/set tile blend mode (Multiply)
- CSS background repeat modes, ‘repeat’, ‘repeaty’, repeatx’, ‘norepeat’
- TileFast Mode – a performance tile setting
Class is an extension of this class; http://blog.efnx.com/?p=25
View Example
Here is an example; http://www.noponies.com/dev/as3_tiled_bg/
Source Files Here are the examples source files; Tiled Background Source Files (1236) – 121.47 KB
By downloading, you agree to the terms of use, outlined here: http://www.blog.noponies.com/terms-and-conditions
Dependencies None
Updates 05 July, 2008: Performance tuning.
Images courtesy http://www.lydiabradbury.com/
April 27th, 2008 at 8:22 am
Hello and thanks again for this great script.
I have a question : when I use this script and resize several times my window in Flash or FF, it becomes to react slowly, I haven’t noticed this on your example, but I already encountered the same issues with other scripts like this, is it something known and normal ?
Thank you.
April 27th, 2008 at 1:08 pm
Matt,
Does the performance return to normal after the resize operation, or does it degrade for good? There may be some lag, as Flash has to do a bit of work to tile the background, but it should return to normal after the resize. If it is not, there may be some bug. So let me know, and I’ll see if I can track it down.
I’ve updated this class to behave the same way CSS backgrounds behave with repeat params. I’ll upload the changed example in a day or so.
April 29th, 2008 at 2:05 pm
Thanks for the link back! Looks great!
May 13th, 2008 at 4:59 am
Hi, I’m trying to implement this code to create frames arround pictures, works great!
graphics.clear(); is needed at begin of resize().
But I’m having trouble on smoothing=true :s, because picture can be rotated.. how do I solve this issue?
thanks,
Rui
May 13th, 2008 at 5:25 am
graphics.beginBitmapFill(bitmap.bitmapData,null,true,true);
solved xD
thanks!
June 10th, 2008 at 5:47 am
hi Dale,
just to drop you a problem that i found when using your class. Seams that if I use blend mode set to true (Multiply), over a movieclip whith alpha (a image with 50% alpha) something very wrong happens… really can’t guess what goes wrong in there… but if you get some free time give it a try.
see you,
am
June 10th, 2008 at 1:28 pm
Pensamente,
That sounds pretty odd. I’ll have to try it out.
June 11th, 2008 at 12:02 am
hi dale,
I’m using a png for pattern, 200px200px, over a jpg image. Thought this could be useful for testing propose.
thanks
June 12th, 2008 at 1:03 pm
This is very great stuff, i have looked for this solution for some time on the web and this is awesome. My only question is their any way to ensure that the pic fills the whole browser so that the background color isnt showed. Im a beginner in flash and looking at this i would never have come up with this way too complicated. So where can i pay you
Thanks michael from denmark
June 12th, 2008 at 3:34 pm
Michael,
Make sure you set your publishing settings in Flash to 100% width and height. And, then you will also have to write a little bit of CSS to take out the browsers default padding. All that should be in the demo files.
June 15th, 2008 at 8:51 pm
Hi Dale, thanks for the script.
Have you figured out Matt’s problem regarding the slowness when the window is resized in FF? I’ve encountered the same problem. thanks.
June 24th, 2008 at 7:23 pm
Will,
I’ve added in some new methods to the class, one is a “performance” setting, which really means, draw a large tiled background, but don’t resize it.
July 3rd, 2008 at 12:23 pm
Rui Cruz already nailed the main issue causing performance problems – you really need to throw ‘graphics.clear()’ in at the beginning of the resize function. This is especially true if you’re dealing with transparency in the image.
July 3rd, 2008 at 6:30 pm
Jake,
Right you are. Class has been updated with a graphics.clear() and another slight change to improve the graphics drawing performance.
September 17th, 2008 at 8:42 am
[...] ActionScript 3 Full Browser Tiled Background at noponies – [...]
October 6th, 2008 at 4:53 am
Hey Dale,
Awesome script. Easy to use. I have one question though. What if I wanted to tile a movieclip what has one set dimension? Let me illustrate. Say I have a rectangle that I want to have a height of x pixels but I would like it to stretch from one side of the browser window to the other? Is there a way I can tile this in a movieclip?
October 6th, 2008 at 5:25 am
look in the documentation..at the bgRepeat property..
November 3rd, 2008 at 2:23 pm
hi, Dale i got a stuppid question, but im trying this for so long…
i got a swf animation named: movie.swf.
now i want a pattern overlay Over my swf,
like u have done with the fullscreen movie background.
i need that digital look.
is there a way to fix this?
thnx for your blog, im learning allot!
gr. monkey
November 4th, 2008 at 5:30 am
Monkey,
Use this class, set to a layer higher than your background swf.
November 5th, 2008 at 2:30 pm
Hi,
If I set the blend mode to false I only see my content for the duration of 1 frame, then I only see the background.
If I set it to true the content stays, but it is multiplied, and I don’t want that.
Thanks a lot!
November 17th, 2008 at 6:22 am
[...] and I’ve noticed that there aren’t really too many resources regarding this. I came across noponie’s tiling class which was nice and easy to implement, but I needed something with more [...]
November 26th, 2008 at 5:11 pm
hi dale, im a newbie in AS3 so im learning allot from ur source files.
but i cant get this 1 right.
is there a posible way to use this class
and make a website over the background
i was trying to load a external swf over it, but it keeps getting behind the background tile :S
thnx for all
December 18th, 2008 at 4:16 pm
hi dale- this is really quite awesome!
i would like to use this repeating feature and ONLY apply it to a specific movie clip instead of overlaying everything placed on the stage.
i am new to as3 and not very experienced in as in general.
any help would be appreciated.
thanks
December 23rd, 2008 at 9:16 pm
Andrew,
It currently does not support that feature. Its something I’ve been meaning to add for some time. When I next use this class on a commercial project,I’ll update it then to add that support.
February 15th, 2009 at 7:48 pm
Hi, this is really nice, but I always get this error:
TypeError: Error #2007: Parameter bitmap must be non-null.
at flash.display::Graphics/beginBitmapFill()
at noponies.display::NpTileBg/resize()
Any ideas?
Thank you!
February 16th, 2009 at 8:09 pm
Hi Ruben,
Are you passing the class a valid bitmapData object?
February 17th, 2009 at 4:07 pm
Yes, I’m pretty sure, I’ve implemented the class in my own project, but I also get the error when I open your source files and publish them. Very strange, can you take a look at your source files and see if you get the same error? Maybe a publish setting?
In the published movie the bitmap shows on stage, but I always get this error in the output window.
Thanks! Very nice classes, by the way…
February 17th, 2009 at 8:00 pm
@Ruben
I checked it yesterday, with both an external jpg and a bitmap from the library, both have worked fine. I could not get that error to show. This is using Flash CS4, Flash Player 9. What version of the Flash Player have you got?
February 19th, 2009 at 12:03 pm
Hi Dale,
Thanks for your time, I’m working with CS3 and Flash player9, could this be the problem? Maybe just a bug in Flash…
February 19th, 2009 at 8:36 pm
How are you passing in the bitmap to the class.
For instance, if its in your library, it needs to be passed to the class like this;
NpTileBgInstance.newBgTileImage = new Header(0, 0);
Header is the export for ActionScript class name of the bitmap in the library.
If you check the online demo, I’ve changed it to use a library bitmap for the second tile.
February 28th, 2009 at 4:28 pm
Hi Dale,
My computer crashed this week and I had to reinstall Flash and rewrite my project, but it seems to be ok now! Still don’t know why I got this error… Sometimes computers lead a life on its own
Sorry to have bothered you with this, anyway thanks for your help!
May 6th, 2009 at 7:25 pm
wow, great script, thanks so much, especially the error comments in the output window, VERY HELPFUL. thanks again
May 28th, 2009 at 9:56 pm
hello… thanks for creating this! saved me a lot of time. i did, however, run into the same problem that RUBEN was getting:
TypeError: Error #2007: Parameter bitmap must be non-null.
at flash.display::Graphics/beginBitmapFill()
at noponies.display::NpTileBg/resize()
Luckily, I figured it out. I solved it by wrapping the 2 addEventListener statements inside the addedToStageHandler function in an: if(obj is BitmapData){ } block. Then I added the same 2 addEventListener functions to the loaderComplete function so that if you’re loading an external image they’re only added once the bitmap is finished loading. Seems that the Event.RESIZE was calling the resize() function the moment it was added for some reason, well before the HTTP bitmap had a chance to load, therefore screwing up in the resize() function.
Hope that helps. Thanks again!