<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Alekkus » Empowering social media with Flash &#187; canvas</title>
	<atom:link href="http://alekkus.com/blog/tag/canvas/feed/" rel="self" type="application/rss+xml" />
	<link>http://alekkus.com/blog</link>
	<description>flex consultant + social media specialist</description>
	<lastBuildDate>Wed, 17 Mar 2010 07:54:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Flex tutorial: Setting tile image as background</title>
		<link>http://alekkus.com/blog/2009/02/flex-tutorial-setting-tile-image-as-background/</link>
		<comments>http://alekkus.com/blog/2009/02/flex-tutorial-setting-tile-image-as-background/#comments</comments>
		<pubDate>Sun, 08 Feb 2009 17:16:33 +0000</pubDate>
		<dc:creator>Alekkus</dc:creator>
				<category><![CDATA[Flex 3 (Moxie)]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[tile]]></category>

		<guid isPermaLink="false">http://alekkus.com/blog/?p=137</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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 <a href="http://www.abdulqabiz.com/blog/archives/flash_and_actionscript/enabling_bitmapdatad.php">here</a>. </p>
<p><strong>Demo:</strong><br />
<a href="http://alekkus.com/flex3/tile_image_background.html">Tile Image Background</a> (view source enabled)</p>
<p><strong>Source Codes: main application</strong></p>
<pre name="code" class="as3">

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;mx:Application
	xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;
	xmlns:alekkus=&quot;com.alekkus.*&quot;
	layout=&quot;absolute&quot;
	backgroundColor=&quot;#F8F8F8&quot;&gt;

&lt;mx:Script&gt;
  &lt;![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 = &quot;http://alekkus.com/flex3/extra/images/duck.jpg&quot;
		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 );
	}

  ]]&gt;
&lt;/mx:Script&gt;

	&lt;alekkus:TileImageCanvas id=&quot;cvsMain&quot; width=&quot;100%&quot; height=&quot;100%&quot; /&gt;
	&lt;mx:Button x=&quot;10&quot; y=&quot;10&quot; label=&quot;Set background as tile image&quot; click=&quot;onClick()&quot; /&gt;

&lt;/mx:Application&gt;
</pre>
<p><strong>Source Codes: TileImageCanvas class</strong></p>
<pre name="code" class="as3">

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;mx:Canvas
	xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;&gt;

&lt;mx:Script&gt;
&lt;![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();
	    }
    }
]]&gt;
&lt;/mx:Script&gt;
&lt;/mx:Canvas&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://alekkus.com/blog/2009/02/flex-tutorial-setting-tile-image-as-background/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
