« Runtime Styles - Bloated and Slow?
Unicode / Foreign Character Entry in Flex »
11 11 2007

Center, Stretch, Tile, Zoom -able Image Background Skin

Posted by: shaun in Flex, Skins, Images

So we have the ability in Flex to select an image as the background of a container. However, the only control we get over this image is the ability to specify its size. From my background in .NET, I am accustomed to being able to specify the layout of a background image as one of four options:

  • Centered: shows up as its default size, centered in the container
  • Stretched: made to fill all area of the background (causing distortion if necessary)
  • Tiled: repeats itself to fill entire background area
  • Zoomed: image stretched as large as possible while maintaining aspect ratio & centered

So what I’m providing here (right-click for code) is my method of providing this functionality as a skin in Flex.



I call it the CuSTomiZableImageSkin (for Center, Stretch, Tile, and Zoom), but you can call it whatever you want (feel free to use and modify it to your heart’s content).

This should work for any containers in your app, and all you have to do to use it is specify the class as your borderSkin, provide a backgroundImage, and set the backgroundSize style to center, stretch, tile, or zoom.

HERE IS THE SOURCE

Possible improvements: allowing a border as well as the image. I haven’t needed a border as well as the image yet, so I haven’t done this.

~Shaun

This entry was posted on Sunday, November 11th, 2007 at 6:27 pm and is filed under Flex, Skins, Images. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Center, Stretch, Tile, Zoom -able Image Background Skin”

  1. John Boone says:
    June 4th, 2008 at 8:49 am

    Hey, I just wanted to say thanks. This totally helped me out!

    I love your code browser UI too - very slick.

  2. Nick says:
    June 4th, 2008 at 2:05 pm

    Thanks for posting this! The example only shows a black screen for me, but I was able to get your code working. I was using an example from somewhere else (http://labs.flexcoders.nl/samples/RepeatedBackground2/srcview/index.html) that mostly worked but had bugs where there would be no background if the content was larger than the viewable flash area (ie, scrollbars appeared). I modified yours to work with embedded images.. which reduces the image laoding/caching requirement and simplifies the code a lot… I believe now it contains the best of both worlds! Thanks again.

  3. Jim Jacobson says:
    June 21st, 2008 at 11:14 am

    Nick, could you post your modified (simplified) code too? I also want to do the same with an embedded image (actually an SVG rather than a bitmap).

Leave a Reply