AS3 fullsize background image with pixel pattern

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.[loadprettifier]

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

Download – get the source

Demo – see an example

So thats the way to do it:

// import the class
import com.fullsizeBackgroundImage posologie viagra 100 mg.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 :)

Comments

  1. «Tom» said on :

    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.

  2. «Michel» said on :

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

    Thx

  3. «solemone» said on :

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

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

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

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

  4. «Michel» said on :

    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

  5. «Cesar» said on :

    OMG! Thanks so much! I stay looking for this for a months ago!

    Have a nice day, thanks a lot!!

    From Brazil

  6. «thomas Marti» said on :

    hi solemone,
    if i would like to load a movieclip instead of an image. What changes would I have to make in your code?
    I’m getting the Error #2000: No active security context, if I load a movieclip without any changes. Thanks in advance for your help!

  7. «solemone» said on :

    Hi Thomas,

    I think you have to change the load function. I’m using a URLRequest and I think this don’t work with movieclips.

  8. «Kevin» said on :

    Hi solemone,

    How if I want to load those butterfly image to an imagebox which has the size 450x350px?

  9. «solemone» said on :

    Hi Kevin,

    you don’t need this class to do that. Simply load an image and set the width and height attributes. Like this:

    var imageLoader:Loader = new Loader();
    var fileRequest:URLRequest = new URLRequest("images/background.jpg");
    
    imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
    
    imageLoader.load(fileRequest);
    
    function imageLoaded(e:Event) {
    	imageLoader.width = 450;
    	imageLoader.height = 350;
    	addChild(imageLoader);
    	
    }
  10. «Nick» said on :

    Hi solemone,

    How to use .swf ?

    Thanks!

  11. «solemone» said on :

    Hi Nick,

    have you tried to replace the image path with your swf like this var backgroundImage:fullsizeBackgroundImage = new fullsizeBackgroundImage(“YOUR_SWF.swf”);

    Maybe you have to set the stage size in the loaded swf to the stage width of your wrapping swf.

  12. «Nick» said on :

    Works!… but, the buttons and actions in the swf doesn’t works and the swf animation works tooo sloooowww.

    Thanks man!

  13. «Giuseppe» said on :

    hello, pixels covering everything …….. how to solve this problem?
    thanks

  14. «solemone» said on :

    Hi Giuseppe,

    i don’t know. Maybe you try to change line 65 in com/fullsizeBackgroundImage/fullsizeBackgroundImage.as from

    patternBitmapData = new BitmapData(2, 2, true, 0x000000);

    to

    patternBitmapData = new BitmapData(4, 4, true, 0x000000);

    This increases the pattern size to 4×4 pixels.

Leave a Reply

Please fill all the fields with the red star *