TheRealTimeWeb.com: Tiling background image in Flex2

Tiling background image in Flex2

Posted by Stefan Richter in Flex | 12 Comments

I needed to add a background graphic to my Flex app and this turned out to be a lot harder than anticipated. While Flex supports CSS it does not support all the attributes that you are used to from HTML nor does it act in the same way.
Specifying a backgroundImage: Embed(source="/assets/bg.png"); will stretch the image, sclae it or do other weird things with it. I don't understand how this is a usable option for a scalable interface.

I am not the only person with this problem so I Googled and found some approaches (this one being quite tricky), of which one seemed to work, at least a little bit :-).
So I tweaked Jeremy's example a bit and came up with this. It uses Jeremy's approach of creating a BitmapData object and Shape and 'painting' into it with a linked image tile.

You can get my sources here and see the demo here (click the button to show the background graphic). I am open to suggestions and comments regarding this approach, it may be resource intensive (maybe not) although my tests showed only a 200KB increase in memory after the graphic was loaded.

Tweet Follow @stefanrichter
Posted on December 6, 2006 at 6:56 PM. 22403 views. 12 comments. Print

TweetBacks

Comments

[Add Comment] [Subscribe to Comments]

#1 by Renaun Erickson on 12/6/06 - 6:55 PM

I also ran into this issue and wrote a component for it.

You can see it here:
http://renaun.com/blog/flex-components/repeatingim...
#2 by Maikel Sibbald on 12/7/06 - 7:19 AM

Look at my version. No additional code in your flex-app. Background can be set through stylesheet.

http://labs.flexcoders.nl/?p=16
#3 by Stefan on 12/7/06 - 10:08 AM

thanks Maikel, I guess that's essentially the same approach but with the code in a class instead of MXML.
It would be nice to be able to set the image via MXML, maybe via the backgroundImage="" attribute rather than coding it into the class. Just an idea.
cheers
#4 by Renaun Erickson on 12/9/06 - 5:28 AM

Maikel and Stefan,

I took the code from Maikel and made it so all you have to do is set the borderSkin and backgroundImage styles of the Application component and it works. Check it out here:

http://renaun.com/blog/2006/12/08/165/

Maikel thanks for the code and idea.
#5 by Maikel Sibbald on 12/9/06 - 3:27 PM

Thanks for the ideas/improvements Renaun and Stefan.
I've updated the code. Now you can use it not only the Application, but also Canvas, VBox, HBox, etc...
http://labs.flexcoders.nl/?p=21
#6 by Brad on 12/11/06 - 8:43 PM

It's funny you mentioned that. One of my coworkers was having the exact same problem.
#7 by Sharon on 1/5/07 - 9:59 AM

Would anyone be interested in earning some $$ setting up a flv "stream" using php programming? It must be a smooth feed of very high calibre and I need it done within less than 24 hours.
#8 by Mike on 6/21/07 - 12:03 PM

Thanks for the sample. It helps a lots. I would like to know some more things in depth. I would like to know the users' resolution so that I can optimize the image on the screen when they see them. Is any function built in the FLEX?

Thanks!
#9 by Varun Shetty on 2/25/08 - 1:40 AM

nice results... collaboration rawks..

btw. ne of u guys tried using a 1 pixel line and stretching it as a background?
#10 by Varun Shetty on 2/25/08 - 1:44 AM

oops.. didnt notice there was
backgroundSize*
backgroundImage*

properties in the containers..
#11 by Renaun Erickson on 3/3/08 - 4:13 PM

Degrafa supports repeating background images very nicely through CSS in Flex. Check out the Advanced CSS example on http://samples.degrafa.com
#12 by Hassan on 1/15/09 - 4:50 AM

Hello Stefan,
I was trying to do a background tiling but Flex did not behave as expected. A small problem like this took me a whole day, and then I run into you program solution. Thank you very much.
Hassan