AS3 fullsize background image with pixel pattern

5 comments // Nov 18th, 2009 // flash, free stuff

I have written a small class, which you may be interested.  With this class you can create a fullsize background image which fits to the width of the stage. The height of the image is proportional to the width. So it´s good to use an image with a ratio of 4:3 otherwise empty bars can show up.

To round it up I create a pixel pattern overlay so the image quality is acceptable by streching it. Known from other sites…

Downloadget the sourceDemosee an example

So thats the way to do it:

// import the class
import com.fullsizeBackgroundImage.fullsizeBackgroundImage;

// create a new object, give the url to the image as string
var backgroundImage:fullsizeBackgroundImage = new fullsizeBackgroundImage("images/background.jpg");

// add the object to stage
stage.addChild(backgroundImage);

If you have any question about the script feel free to leave a comment :)


5 responses so far, want to say something?

  1. Tom says:

    Hi, I’ve used your code to add the image and more importantly the pattern overlay, but it appears on top of everything (I have somethings on layers within my flash file). I’ve tried using addChildAt and setChildIndex to move it to the back but with no result. I’ve also tried assigning the child to an empty movieclip which is ordered to the bottom instead of the stage (emptyMc.addChild(backgroundImage); and that has no effect either….any thoughts? Thanks.

    Nov 18, 2009, 1:59 pm
  2. solemone says:

    Hi Tom,
    there is a bug in the code that I don´t find. But I´m planning a new class. Until then you can check out this Quick Tip from ActiveTuts+:

    Quick Tip: How to Automatically Resize an Image to Fit the Screen

    Or this AutoFitArea class from Greensock.com

    Nov 18, 2009, 5:31 pm
  3. Michel says:

    Hi, great code but how can we add more space between pixel

    Thx

    Nov 18, 2009, 6:50 pm
  4. solemone says:

    Hi Michel,
    you can change line #65 in the class:

    from this: patternBitmapData = new BitmapData(2, 2, true, 0×000000);

    maybe to this: patternBitmapData = new BitmapData(4, 4, true, 0×000000);

    To change your width of the bitmap data, which is the repetitive element and not the individual pixels.

    Nov 18, 2009, 2:12 pm
  5. Michel says:

    HI solemone,

    it works, really cool but it was easy to figure it out, so newbie i am lol ( i’ll go buy a new brain)

    have a nice day

    thx a lot

    Nov 18, 2009, 11:40 am

Leave a Reply