alekkus

Flex tutorial: Setting tile image as background

This tutorial shows you how to fill a Canvas background with repeated images. We will make use of the BitmapData.draw() function to achieve this. Note that if the image to be repeated is from another domain (i.e. a cross domain image), you have to ensure that the domain has a cross domain policy file, and you have to set checkPolicyFile=true in order to get it working. Otherwise, you will get a security sandbox error. More explanation here.

Demo:
Tile Image Background (view source enabled)

Source Codes: main application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:alekkus="com.alekkus.*"
	layout="absolute"
	backgroundColor="#F8F8F8">

<mx:Script>
  <![CDATA[
  	import mx.controls.Image;

	private function onClick() : void
	{
		// 1. for crossdomain images, we need to create a LoaderContext object and set its checkPolicyFile to true.
		var loaderContext : LoaderContext = new LoaderContext ();
		loaderContext.checkPolicyFile = true;

		// 2. assign that loaderContext object to an Image object
		var image : Image =  new Image();
		image.loaderContext =  loaderContext;

		// 3. set source and load
		image.source = "http://alekkus.com/flex3/extra/images/duck.jpg"
		image.addEventListener( Event.COMPLETE, onImageLoaded  );
		image.load();
	}

	private function onImageLoaded( event : Event ) : void
	{
		var image : Image = Image( event.currentTarget );

		// 1. set as tile image background
		cvsMain.setTileImage( image );
	}

  ]]>
</mx:Script>

	<alekkus:TileImageCanvas id="cvsMain" width="100%" height="100%" />
	<mx:Button x="10" y="10" label="Set background as tile image" click="onClick()" />

</mx:Application>

Source Codes: TileImageCanvas class

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
	import mx.controls.Image;

	private var _image : Image = null;

	public function setTileImage( image : Image ) : void
	{
		this._image = image;
		this.invalidateDisplayList();
	}

    override protected function updateDisplayList( unscaledWidth : Number, unscaledHeight : Number ) : void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight );

        if ( _image != null )
        {
	        var bitmap : Bitmap = Bitmap( _image.content );
	        var bitmapData : BitmapData = new BitmapData( bitmap.width, bitmap.height );
	        bitmapData.draw( bitmap );      

	        graphics.clear();
	        graphics.beginBitmapFill( bitmapData );
	        graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
	        graphics.endFill();
	    }
    }
]]>
</mx:Script>
</mx:Canvas>

6 Comments »

TrackBack URI

1. Andrew says:
   July 15, 2009 at 07:07 pm

   This is perfect. All other solutions that I’ve seen require embedding the image at runtime.

   I tested it out and it works like a charm.

   MUCH appreciated!!

2. Luigi says:
   August 22, 2009 at 12:08 am

   Ace post: i’m implementing it now and it works fine

3. deke says:
   September 1, 2009 at 02:09 am

   I love this, but curiously- it doesn’t appear to support alpha transparency of my tile images. I’m using transparent png-24 files for an image tile, and the transparent portions of the image appear white.

   Any suggestions that might point me to a solution for supporting transparency in my tiles?

   Thanks.

4. Alekkus says:
   September 1, 2009 at 12:09 pm

   Hey Deke,

   To set the transparency, go to line 24 in TileImageCanvas.mxml, you should see this:

   var bitmapData : BitmapData = new BitmapData( bitmap.width, bitmap.height );

   Change it to:

   var bitmapData : BitmapData = new BitmapData( bitmap.width, bitmap.height, true, 0×00000000 );

   That should work : )

5. deke says:
   September 1, 2009 at 10:09 pm

   Thanks Alex. This is exactly what I needed.

   Keep up the great work.

6. Rounded Corner Component with Tiled Bitmap Background | Flash Player roundup says:
   October 25, 2009 at 01:10 am

   [...] First snag: Flex doesn’t seem to offer a straightforward way of identifying a repeatable background for the Canvas class. Quick searching revealed that one can do this with Degrafa, but I didn’t want to go that route. (Not that Degrafa isn’t tremendous, it just seems like a lot of overhead just to tile a background image.) There is another solution for setting a tiled image as a background. [...]

Leave a comment