<?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>Blogizm &#187; dynamic images</title>
	<atom:link href="http://blog.aquamedia.com.au/tag/dynamic-images/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.aquamedia.com.au</link>
	<description>Thoughts and views expressed online by the staff at Aqua Media</description>
	<lastBuildDate>Tue, 08 Jun 2010 07:03:13 +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>Scaling a dynamic background image in proportion using flash</title>
		<link>http://blog.aquamedia.com.au/2009/08/scaling-a-dynamic-background-image-in-proportion-using-flash/</link>
		<comments>http://blog.aquamedia.com.au/2009/08/scaling-a-dynamic-background-image-in-proportion-using-flash/#comments</comments>
		<pubDate>Fri, 14 Aug 2009 06:48:06 +0000</pubDate>
		<dc:creator>Flashnutz</dc:creator>
				<category><![CDATA[Flash & ActionScript]]></category>
		<category><![CDATA[dynamic images]]></category>
		<category><![CDATA[flash image quality]]></category>
		<category><![CDATA[saling dynamic images in flash]]></category>
		<category><![CDATA[scale image in proprtion]]></category>

		<guid isPermaLink="false">http://blog.aquamedia.com.au/2009/08/scaling-a-dynamic-background-image-in-proportion-using-flash/</guid>
		<description><![CDATA[
			
				
			
		
Recently I was playing around with scaling background images and had issues with how the scaling behaved and image quality.  When scaling an image in proportion you want to make sure that the image container is centered to the movie clip it belongs to.
My example below is the scaling code within a stage listener which [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 15px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.aquamedia.com.au%2F2009%2F08%2Fscaling-a-dynamic-background-image-in-proportion-using-flash%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.aquamedia.com.au%2F2009%2F08%2Fscaling-a-dynamic-background-image-in-proportion-using-flash%2F&amp;source=aquamedia&amp;style=normal&amp;service=bit.ly" height="61" width="50" /><br />
			</a>
		</div>
<p>Recently I was playing around with scaling background images and had issues with how the scaling behaved and image quality.  When scaling an image in proportion you want to make sure that the image container is centered to the movie clip it belongs to.</p>
<p>My example below is the scaling code within a stage listener which will re size the background image according to the stage width &amp; height.</p>
<pre class="actionscript"><span style="color: #0066CC;">Stage</span>.<span style="color: #0066CC;">align</span> = <span style="color: #ff0000;">&quot;TL&quot;</span>;
<span style="color: #0066CC;">Stage</span>.<span style="color: #0066CC;">scaleMode</span> = <span style="color: #ff0000;">&quot;noScale&quot;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">//Get Background Image Container Movie Clip Name (instance)</span>
<span style="color: #000000; font-weight: bold;">var</span> backgroundImage:<span style="color: #0066CC;">movieClip</span> = <span style="color: #ff0000;">&quot;MovieClip Instance Name&quot;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">// Create an object for the stage listener</span>
stageListener:<span style="color: #0066CC;">Object</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// Create a function for the event you want to listen for</span>
stageListener.<span style="color: #0066CC;">onResize</span> = <span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">//Get the  stage width &amp;amp; height</span>
<span style="color: #000000; font-weight: bold;">var</span> sw:<span style="color: #0066CC;">Number</span> = <span style="color: #0066CC;">Stage</span>.<span style="color: #0066CC;">width</span>;
<span style="color: #000000; font-weight: bold;">var</span> sh:<span style="color: #0066CC;">Number</span> = <span style="color: #0066CC;">Stage</span>.<span style="color: #0066CC;">height</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">//Check to see if image width or height needs adjusting</span>
<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>sh / sw<span style="color: #66cc66;">&#41;</span> &amp;gt; <span style="color: #66cc66;">&#40;</span>backgroundImage.<span style="color: #0066CC;">_height</span> / backgroundImage.<span style="color: #0066CC;">_width</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">//get image width and adjust height to fit</span>
scale = backgroundImage.<span style="color: #0066CC;">_width</span> / backgroundImage.<span style="color: #0066CC;">_height</span>;
backgroundImage.<span style="color: #0066CC;">_height</span> = sh;
backgroundImage.<span style="color: #0066CC;">_width</span> = sh * scale;
<span style="color: #66cc66;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #66cc66;">&#123;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">//get image height and adjust width to fit</span>
scale =backgroundImage.<span style="color: #0066CC;">_height</span> / backgroundImage.<span style="color: #0066CC;">_width</span>;
backgroundImage_width = sw;
backgroundImage.<span style="color: #0066CC;">_height</span> = sw * scale;
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">//Center the background Image</span>
backgroundImage.<span style="color: #0066CC;">_x</span> = <span style="color: #66cc66;">&#40;</span>sw - backgroundImage.<span style="color: #0066CC;">_width</span><span style="color: #66cc66;">&#41;</span> / <span style="color: #cc66cc;">2</span>;
backgroundImage.<span style="color: #0066CC;">_y</span> = <span style="color: #66cc66;">&#40;</span>sh - backgroundImage.<span style="color: #0066CC;">_height</span><span style="color: #66cc66;">&#41;</span> / <span style="color: #cc66cc;">2</span>;
&nbsp;
<span style="color: #66cc66;">&#125;</span>;
<span style="color: #808080; font-style: italic;">// Add listener for the Stage object</span>
<span style="color: #0066CC;">Stage</span>.<span style="color: #0066CC;">addListener</span><span style="color: #66cc66;">&#40;</span>stageListener<span style="color: #66cc66;">&#41;</span>;</pre>
<p>Now the the simple line of code that makes this work so well is the quality preservation part. Just add this after your dynamic image has loaded.</p>
<pre class="actionscript">backgroundImage.<span style="color: #006600;">forceSmoothing</span> = <span style="color: #000000; font-weight: bold;">true</span>;</pre>
<p>An actionscript 3 version would not be much different to this and should be fairly easy to workout. If your struggling just ask me on my blog <a title="Flashnutz - Helping web developers develop" href="http://www.flashnutz.com" target="_blank">http://www.flashnutz.com</a>.</p>
<div class="zemanta-pixie"><img class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=7ff26848-a0b3-8854-8ea8-4b83a7a753a3" alt="" /></div>
]]></content:encoded>
			<wfw:commentRss>http://blog.aquamedia.com.au/2009/08/scaling-a-dynamic-background-image-in-proportion-using-flash/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
