Using repeated tile image as flex background – a solution
A reader brought this question to me the other day, saying: "Could we use a 1px image as the background, and let it repeat to fill the whole area ?"
This making thinking is it really possible ?
Normally, if we use something like
-
<mx :Controlbar background="a.gif" />
The result would be like this:
the tile we used (the tiny green image) will be centered in the control bar
and if we use the following syntax:
-
<mx :Controlbar background="a.gif" backgroundSize="100%" />
the result would be even worse, the tile will be stretched to fill the background, like this
After digging into this issue for an hour or two, finally I found a possible way to let the tile image repeat just like those in the html world.
As seen in the image above, the same green tile image is repeated to fill the control bar, so does the yellow tile image in the applicaiton background.
Here's another one showing when the panel is resized, the tile will be automatically resized to fill the background again (in real-time)
When I first tap into this problem, I thought I might have to override a lot of thing (like box, container which are controlbar's parent class) and do the repeat logic by code.
But after a while I found all those background are programmatically drawn in real-time, so end up I just had to set a new skin to the panel and modify one place or two (plus using beginBitmapFill() with the bg image) to make the tile repeat.
What I learned in doing this is that flex 2 framework is really a very well thought-out structure, making it easy to add user features and simply hack the code to achieve great stuff.
Now I'm working on a better version to honor repeat-x, repeat-y argument, so it would be more like what people used to do in html world, after I get this done and made sure it works with every kind of background (as in Panel, ApplicationControllBar, Application background...etc), it will be released.
28 Comments Add your own
1. casey&hellip | October 17th, 2006 at 4:19 am
Could you send me your work in progress code for this? Me and some guys here had figured out how to get the background of Panels and other objects to tile/repeat the background but can't get the Application background to work...
Thanks
2. jeremy&hellip | October 17th, 2006 at 1:33 pm
sent today.
3. LeToya&hellip | October 17th, 2006 at 2:27 pm
Could you please E-Mail me the codes?I am very puzzled about how to repeat the background image in Flex.
Than you very much!
4. LeToya&hellip | October 17th, 2006 at 2:34 pm
Thank you very much!
5. ZenBee&hellip | October 20th, 2006 at 3:43 pm
Great!
Can you post the code or mail it please ?
Thanks in advance.
6. John&hellip | October 23rd, 2006 at 10:44 pm
Could you please send me the code for this? This is exactly what I'm trying to do.
Thanks,
John
7. RJ&hellip | October 24th, 2006 at 6:46 am
me too! Could you please either post how you did this, or email me a copy of the code also? Thanks!
8. maurice&hellip | October 24th, 2006 at 11:13 am
I too would like to see the code please.
regards,
maurice
9. jeremy&hellip | October 24th, 2006 at 2:13 pm
hey guys, I'm currently at Vegas for Max 2006, will post the finished code on the blog (same post) after I'm came back.
10. maikel&hellip | November 8th, 2006 at 3:41 am
I too would like to see the code please.
Thanx in advance!
11. john&hellip | November 15th, 2006 at 5:38 am
Hello,
Could you please email your test code it would really be helpfull.
Thanks,
John
12. kaneda&hellip | November 15th, 2006 at 12:27 pm
Hello nice to meet you.
If it is good, could you show me the code?
13. shell&hellip | November 21st, 2006 at 10:55 pm
Hello,
Could you please mail me your code for me?
Thanks )
14. tile or repeat an image i&hellip | November 22nd, 2006 at 1:07 am
[...] I tried a number of approaches which I now look back on as naive. I haven’t at this point managed to find a documented solution by googling. Though as responses to this post show, there seems to be interest in finding a solution. [...]
15. jeremy&hellip | November 22nd, 2006 at 4:31 pm
source is at the end of the post
16. Stefan Richter&hellip | December 5th, 2006 at 5:34 am
Hi Jeremy,
your source does not contain CompTest.mxml so it won't compile.
If I comment everything CompTest related out then the app compiles but the app background image simply scales up and doesn't tile.
Could you check your files or post some more info on how the background tile is best achieved.
thanks.
17. jeremy&hellip | December 5th, 2006 at 8:37 am
Stefan,
Thanks for the heads up, it's updated now
18. Stefan Richter&hellip | December 6th, 2006 at 3:52 am
thanks, I played with it last night and came up with this, it may simplify things a little (I only needed app background tiling, no panel etc):
Stefan
19. m.sibbald&hellip | December 9th, 2006 at 5:42 pm
Cool.....
check my version.
http://labs.flexcoders.nl/?p=16
20. JabbyPanda&hellip | April 6th, 2007 at 5:33 pm
Have you thought of any way in to change tiled background image at the runtime?
Does not look viable unless tiled background image is embedded into SWF before compilation...
21. Renaun Erickson » F&hellip | May 17th, 2008 at 6:19 am
[...] The basic code to repeat a bitmap over an graphic area requires BitmapFill. Stefan Richter modified Jemery Lu’s code to apply a bitmap image to the Application component through AS code in the Script block. This [...]
22. jouer casino en ligne dbm&hellip | May 13th, 2010 at 4:04 am
jouer casino en ligne...
jouer casino en ligne...
23. ames Allen Diamonds Revie&hellip | May 24th, 2010 at 6:37 am
diamonds Reviews...
diamonds Reviews...
24. ×פס 13 mdwb&hellip | May 24th, 2010 at 8:18 am
טופס 135...
טופס 135...
25. europa casino cafc&hellip | May 24th, 2010 at 11:44 pm
europa casino...
europa casino...
26. book of ra download gsei&hellip | May 25th, 2010 at 1:16 am
book of ra download...
book of ra download...
27. code bonus titan poker up&hellip | May 25th, 2010 at 1:20 am
code bonus titan poker...
code bonus titan poker...
28. utomaty za darm edqj&hellip | May 26th, 2010 at 12:48 am
automaty za darmo...
automaty za darmo...
Trackback this post | Subscribe to the comments via RSS Feed