Flashcomguru.com: Tiling background image in Flex2

Posted At : December 6, 2006 4:56 PM | Posted By : Stefan Richter | Related Categories: Flex

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.

Comments ( 11 ) |

Email This |

del.icio.us | 9715 Views

Flex seems a bit broken (December 4, 2006)

Comments

[Add Comment]

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

You can see it here:
http://renaun.com/blog/flex-components/repeatingim...

# Posted By Renaun Erickson | 12/6/06 6:55 PM

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

http://labs.flexcoders.nl/?p=16

# Posted By Maikel Sibbald | 12/7/06 7:19 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

# Posted By Stefan | 12/7/06 10:08 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.

# Posted By Renaun Erickson | 12/9/06 5:28 AM

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

# Posted By Maikel Sibbald | 12/9/06 3:27 PM

It's funny you mentioned that. One of my coworkers was having the exact same problem.

# Posted By Brad | 12/11/06 8:43 PM

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.

# Posted By Sharon | 1/5/07 9:59 AM

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!

# Posted By Mike | 6/21/07 12:03 PM

nice results... collaboration rawks..

btw. ne of u guys tried using a 1 pixel line and stretching it as a background?

# Posted By Varun Shetty | 2/25/08 1:40 AM

oops.. didnt notice there was
backgroundSize*
backgroundImage*

properties in the containers..

# Posted By Varun Shetty | 2/25/08 1:44 AM

Degrafa supports repeating background images very nicely through CSS in Flex. Check out the Advanced CSS example on http://samples.degrafa.com

# Posted By Renaun Erickson | 3/3/08 4:13 PM

[Add Comment]