Flex 2 RepeatingImage Component

Posted on November 21, 2006 | 5 comments

The ability to repeat an image across the X or Y axis is not straight forward in Flex/Flash.is not built into the Flex Framework. This Flex component extends SWFLoader and provides two properties “repeatX” and “repeatY”, which both control which axis to repeat the image is repeated on. The underlying code uses the BitmapFill class (thx to Alex for the tip) to draw the bitmap data onto a Sprite that fills up the SWFLoader’s container’s width and height.

To view the component in action click here!

Click here for the component’s home page and a link to the source.

Share the post "Flex 2 RepeatingImage Component"

  • Alex

    That may be true, but the BitmapFill class does have a repeat property, as well as being able to be scaled or rotated.

    all you need is to grab the BitmapData off the Image control using the BitmapData::draw() method and set it as the source for a BitmapFill.

  • http://www.renaun.com Renaun Erickson

    Thank you for this tip, it took me a second to put it together. I did it a little different but it made the class cleaner.

    The class is still warranted for the case where you want to repeat just the X axis or just the Y axis. Also it encapsulates the BitmapFill code so people do not know have to implement it.

    Snippet from the code

    if( !fillArea ) {
    fillArea = new Sprite();
    }

    this.addChild( fillArea );
    var g:Graphics = fillArea.graphics;
    g.clear();
    g.moveTo( 0, 0 );

    var image:Bitmap = Bitmap( content );
    var fill:BitmapFill = new BitmapFill();
    fill.source = image.bitmapData;
    fill.begin( g, new Rectangle( 0, 0, w, h ) );
    g.lineTo(w,0);
    g.lineTo(w,h);
    g.lineTo(0,h);
    g.lineTo(0,0);
    fill.end( g );

  • http://www.mikebritton.com Mike

    Thanks for this refreshing example of pushing Flex in a creative way.

  • Brian

    This doesn’t seem to work for scrollable areas in a container. When I tile my image (repeating x and y) it fills the container, but when I start scrolling the newly visible regions don’t have the tiled images. Is this a bug?

  • http://www.renaun.com Renaun Erickson

    There are some issues with this component I found too. It has to do with resize event not firing in some scrolling situations. I haven’t had time to play with it.