Flex 2 RepeatingImage Component
November 21st, 2006
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.
Entry Filed under: Adobe Flex, Rich Internet Applications
5 Comments Add your own
1. Alex | 2006-11-21 at 6.55 pm
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.
2. Renaun Erickson | 2006-11-21 at 8.06 pm
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 );
3. Mike | 2006-11-21 at 8.09 pm
Thanks for this refreshing example of pushing Flex in a creative way.
4. Brian | 2007-04-18 at 8.42 am
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?
5. Renaun Erickson | 2007-04-19 at 8.42 am
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.
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed