<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated on Fri, 25 May 2012 09:12:15 -0700 -->
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <atom:link href="http://software.intel.com/en-us/articles/isn/type/tutorials/feed/" rel="self" type="application/rss+xml" />
    <title>Intel Software Network articles Feed</title>
    <link>http://software.intel.com/en-us/articles/isn/type/tutorials/</link>
    <description></description>
    <language>en-us</language>
    <item>
      <title>Introduction to Software Development on MeeGo™</title>
      <description><![CDATA[ <p><img src="http://software.intel.com/file/38352" title="Banner+Rounded.jpg" alt="Banner+Rounded.jpg" height="172" width="709" /></p>
<p>All modules of the course <a target="_blank" href="http://software.intel.com/en-us/courseware/course/view.php?id=619"><b>Introduction to Software Development on MeeGo<sup>TM</sup></b> </a>are available on the Intel Academic Community <a target="_blank" href="http://software.intel.com/en-us/courseware/">Educational Exchange</a>. These modules have instruction slides, hands-on labs, and projects. This course was partially developed by the prestigious Beijing University and Qinghua University in China.</p>
<p>As part of our ongoing goal to improve and refine the course content, please feel free to provide your <a href="http://software.intel.commailto:academic.community@intel.com">feedback</a> or comments below.</p>
<p><span ><span ><b>Course Goal</b></span> </span></p>
<p>The goal of this course is to introduce students to a real-world open source development environment, teach them how to create mobile applications, find documentation online, debug their applications, and interact with the online development community. They can also submit their new, free or for-pay applications to online application stores, such as the Intel <a href="http://www.appup.com/">AppUp℠ Center</a>.</p>
<p><span ><span ><b>Prerequisites</b></span></span></p>
<p>Students in this course are expected to have basic programming experience and an interest in mobile application development.</p>
<p><span ><b><span >Recommended Textbook<br /></span></b></span><br />For MeeGo development no textbook should be needed.  All documentation, tools, APIs, and tutorials should be available online at <a href="http://www.meego.com/">MeeGo.com</a>. Open source community support and help is available at the <a href="http://www.meego.com/">MeeGo forums</a>.</p>
<p>The composite courseware provides a reference for classroom teaching in modularized format. The modules consist of lectures (labeled with L) and hands-on lab/projects (labeled with P). Each module is intended to be relatively independent and self-contained.</p>
<p> </p>
<p><span ><span ><b>Hardware and Software Requirements</b></span></span></p>
<p>•         A development system with the <a target="_blank" href="https://meego.com/downloads/releases/1.2/meego-v1.2-sdk">MeeGo SDK </a>installed  <br /><br /><b>OR</b></p>
<p>•         An Intel® Atom<sup>TM</sup> based MeeGo tablet</p>
<p>•         An Intel® Atom<sup>TM</sup> based MeeGo netbook</p>
<p><i>Note</i>: In order to download the course modules from the links below, you will need to be logged in  to the Intel® Academic Community. If you do not have an account, you can <a href="https://ssl.software.intel.com/en-us/register/academic/">register here</a>. You can also access the course modules below from the <a href="http://software.intel.com/en-us/courseware/">Educational Exchange</a> by logging in at the top right, and then searching for "MeeGo" in the "Find Course Materials for your Classes" text box.</p>
<p><br /><b><br /><span ><span >Class Schedule</span></span></b></p>
<p>* Please note: The duration of a "class" is one lecture period. <a target="_blank" href="http://software.intel.com/en-us/courseware/course/view.php?id=619">The full set of class materials can also be downloaded at once</a>.</p>
<p> </p>
<p><a href="http://software.intel.com/en-us/courseware/course/view.php?id=599"><b>Class 1: MeeGo Overview (L1)</b></a></p>
<p>Introduction to MeeGo (background and vision of MeeGo); MeeGo architecture, and the major development environment, i.e., the SDK, showing some sample applications, and MeeGo devices. Overview of software development cycles (concept/requirement analysis, design with proper APIs, debug with suitable tools, validation, and release). Provides introduction to principles of software engineering.</p>
<p>In-class demonstration of the working environment recommended. A simple, static non-GUI app is described in the slideset and can be used to demonstrate the MeeGo working environment.</p>
<p> </p>
<p><a href="http://software.intel.com/en-us/courseware/course/view.php?id=600"><b>Class 2: Programming with SDK (L2)</b></a></p>
<p>Tutorial for installing the MeeGo SDK and Qt. Assumes prior MeeGo OS and infrastructure setup on student platform.</p>
<p> </p>
<p><a href="http://software.intel.com/en-us/courseware/course/view.php?id=601"><b>Class 3: Programming with QML (L3)</b></a></p>
<p>MeeGo application development with QML (Qt Quick) for scripting language developers. This module illustrates QML programming with examples.</p>
<p> </p>
<p><a href="http://software.intel.com/en-us/courseware/course/view.php?id=602"><b>Class 4: UI Design Principles (L4)</b></a></p>
<p>This class provides common design principles of user interface in mobile application development. Some best known practices are shown as examples. {project 1}</p>
<p> </p>
<p><a href="http://software.intel.com/en-us/courseware/course/view.php?id=608"><b>Class 5: MeeGo Device and Information Management Apps Development (L5)</b></a></p>
<p>This class introduces MeeGo devices, personal information management, and the MeeGo system module. Material includes device state, resource policy management, and sensors.  Students will learn personal info management (calendar, contacts, backup and sync) and how to design apps associated with those resources. {project 2}</p>
<p> </p>
<p><a href="http://software.intel.com/en-us/courseware/course/view.php?id=610"><b>Class 6: MeeGo User Experience Design and Development (L6)</b></a></p>
<p>This class introduces the MeeGo user experience (UX) principles. Material includes MeeGo UX concepts, design principles, UX customization and touch UI.  {project 3}</p>
<p> </p>
<p><a href="http://software.intel.com/en-us/courseware/course/view.php?id=603"><b>Class 7: Publishing a  Developed Application (L7</b></a></p>
<p>This class introduces developer networks and new social media development models.</p>
<p><br /><b></b></p>
<p><a href="http://software.intel.com/en-us/courseware/course/view.php?id=604"><b>Class 8: Tuning and Optimizing the Developed Application (L8)</b></a></p>
<p>This class introduces performance analysis and optimization of MeeGo applications using the <a href="http://software.intel.com../../../../en-us/articles/intel-embedded-tool-suite-documentation/">Intel® Embedded SW Development Tool Suite</a>.  Material also includes power analysis and optimization.  The <a href="http://software.intel.com../../../../en-us/articles/intel-embedded-tool-suite-documentation/">Intel® Embedded SW Development Tool Suite</a> provides a complete tools solution with a sophisticated JTAG debug solution for embedded system and application software design.</p>
<p><br /><a href="http://software.intel.com/en-us/courseware/course/view.php?id=605"><b><br />Class Hands-on Projects (P1): I18n &amp; L10n</b></a></p>
<p>This class provides a brief illustration of how to write applications that take advantage of  the Internationalization (I18n) and Localization (L10n) capabilities of MeeGo.</p>
<p> </p>
<p><a href="http://software.intel.com/en-us/courseware/course/view.php?id=606"><b>Class Hands-on Projects (P2): Location &amp; Sensor</b></a></p>
<p>This class provides a brief introduction to the location service provided by MeeGo<sup>TM</sup>.</p>
<p> </p>
<p><a href="http://software.intel.com/en-us/courseware/course/view.php?id=607"><b>Class Hands-on Projects (P3): Media Framework</b></a></p>
<p>This class provides a brief introduction  to MeeGo's Media capability for mobile applications with an overview of Gstreamer, the framework used by MeeGo<sup>TM</sup>.</p>
<br /><br /> 
<hr align="left" size="1" width="33%" /> ]]></description>
      <link>http://software.intel.com/en-us/articles/introduction-to-software-development-on-meego/</link>
      <pubDate>Wed, 31 Aug 2011 00:00:00 -0700</pubDate>
      <comments>http://software.intel.com/en-us/articles/introduction-to-software-development-on-meego/#comments</comments>
      <guid isPermaLink="true">http://software.intel.com/en-us/articles/introduction-to-software-development-on-meego/</guid>
      <category>ISN General</category>
    </item>
    <item>
      <title>Creating Faux 3D Parallaxing Effects in Adobe* Flash*</title>
      <description><![CDATA[ <h2>By Patrick Fram</h2>
<p>This article covers several methods for creating and manipulating backgrounds that portray a sense of depth in Adobe* Flash*. Backgrounds are an essential part of many Flash* games and can be important in other types of interactive Web projects, as well. But backgrounds are essentially set decorations, and it’s easy to overlook them during the design process—or, conversely, to spend more time and processor power on them than necessary. Here, learn how to create simple but effective background effects.</p>
<p> </p>
<h2><span >Defining Terms</span></h2>
<p>The main effect that this article focuses on is called parallax background, or parallaxing for short. Essentially, in game terms, parallaxing is creating the illusion of depth by moving background elements at different degrees of offset. Think about looking out the window of a moving train. From your vantage point, bushes and fence posts near the train whiz by so fast you hardly see them, while the clouds in the distance seem to stand still. And everything in between moves at in-between rates. The human eye immediately understands the depths of everything, even if you were to cover one eye to take stereoscopic depth perception out of the equation.</p>
<p>A few other perspective effects are used in these examples, one of which is call <i>atmospheric perspective</i>. <i>Atmospheric perspective</i> refers to the color shift that objects appear to undergo as they get farther away and more and more of Earth’s atmosphere gets in the way. For example, a far-off mountain may appear bluer than it would be up close. A more extreme example would be a ship sailing out into the fog: It would soon fade into the color of the fog and disappear.</p>
<p>The third effect I touch on is <i>focus</i>—the process of adjusting the blurriness of objects to mimic the way the human eye focuses on depths in real life. The easiest example would be to hold a finger close to your face and focus your eyes on it; everything else in the room will get blurry. (When you do this using two eyes, there is also a double-vision effect, but that effect is not present in with camera focus and would be jarring to replicate.)</p>
<p>Don’t confuse the perspective effects covered here with true 3D. Although it is possible to create 3D polygons using the techniques in this article, there are much more efficient libraries for that. The techniques described here focus more on adding a lot of “wow factor” with minimal code.</p>
<p> </p>
<h2><span >The Multiplane Parallaxing Technique</span></h2>
<p>The easiest and simplest perspective technique to implement is what I call <i>multiplane parallaxing</i>. This technique is similar to what early animators used to fake depth. The concept was that they would draw the backgrounds on different planes so that each part could be moved at different rates to create the sense of depth.</p>
<p>To show this technique, I've created three simple planes of clouds (Figure 1). Each one is a separate Adobe* <code>MovieClip</code> placed on the timeline and given an instance name: <i>fg</i>, <i>mg</i>, and <i>bg</i> for <i>foreground</i>, <i>mid-ground</i>, and <i>background</i>, respectively.</p>
<p ><a href="http://software.intel.com/file/38113"><img src="http://software.intel.com/file/38113" title="Figure 1" alt="Figure 1" /></a><br /><b>Figure 1.</b><i> Three planes of illustration: foreground, mid-ground, background</i></p>
<p>As you may be able to tell from Figure 1, I have already employed a few perspective techniques. First, the clouds in each plane are scaled to represent being at different distances from the viewer. Second, the farther-away clouds have been tinted more blue than the closer clouds; this is atmospheric perspective at work. (I cover atmospheric perspective in more depth in the second technique). Finally, when I place them on the stage, I’m stacking them in the correct order.</p>
<p>The Adobe* ActionScript* code to make the effect complete is simple. Listing 1 shows a block of code that causes the layers to pan as if the user were moving a camera around with the mouse.</p>
<pre name="code" class="cpp">//add an event listener to trigger every frame
addEventListener(Event.ENTER_FRAME, onFrame);

//set a constant that marks the centre of the stage
//the stage is 600 x 400, so we halve that
const stageCentre:Point=new Point(300,200);

//set an easing constant
const ease:Number=0.2;

function onFrame(e:Event) {
	//create a point to store the distances the mouse is from the centre
	var mouseOffset:Vector3D=new Vector3D(stageCentre.x-mouseX,stageCentre.y-mouseY, 0);
	
	//move each background layer by a different percentage of offset
	//the easing constant is used here to create smoother results
	
	//foreground moves the most; 75% of the mouse offset
	fg.x+=(stageCentre.x+mouseOffset.x*0.75 - fg.x)*ease;
	fg.y+=(stageCentre.y+mouseOffset.y*0.75 - fg.y)*ease;
	
//mid-ground moves a medium amount; 50% of the mouse offset
	mg.x+=(stageCentre.x+mouseOffset.x*0.5 - mg.x)*ease;
	mg.y+=(stageCentre.y+mouseOffset.y*0.5 - mg.y)*ease;
	
	//background moves the least; 25% of mouse offset
	bg.x+=(stageCentre.x+mouseOffset.x*0.25 - bg.x)*ease;
	bg.y+=(stageCentre.y+mouseOffset.y*0.25 - bg.y)*ease;
}
</pre>
<p ><b>Listing 1.</b> <i>ActionScript* code for creating the multiplane parallaxing effect</i></p>
<p>The comments in the code explain most of what’s going on, but let’s delve into the math behind it a bit more. Think back to the train example; as you look out the window, objects farther away pass by more slowly than closer objects. If you extend that logic to the extremes, you would find that an object directly in front of the viewer's eye would seem to move past at the exact speed of the viewer, and an object an infinite distance away would never seem to move at all. What the math in this script is doing is moving the positions of each plane a percentage of the camera’s offset. A layer at the same depth as the camera would move 100% of the offset, while one at an infinite distance away would move at 0%; but because the layers here lie between those extremes, they have been given percentages between 25% and 75%.</p>
<p>On every frame, the <code>mouseOffset</code> is calculated based on the distance the user’s mouse is from the stageCentre point. It is a <code>Vector3D</code> class, but it doesn’t need to be: All it needs to do is hold an <code>X</code> and <code>Y</code> value. The math for panning a layer is simple:</p>
<p><i>layer position = stage center position + mouse offset vector * panning percentage</i></p>
<p>In Listing 1, however, the math is bit more complicated to implement easing, which causes the resulting animation to look smoother, but the core concept is the same (Figure 2).</p>
<p >
<object height="400" width="550" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" id="ExampleA" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="id" value="ExampleA" />
<param name="align" value="middle" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#99ccfe" />
<param name="src" value="http://software.intel.com/file/38114" /><embed height="400" width="550" src="http://software.intel.com/file/38114" bgcolor="#99ccfe" quality="high" allowfullscreen="false" allowscriptaccess="sameDomain" align="middle" id="ExampleA" type="application/x-shockwave-flash"></embed>
</object>
</p>
<p ><b>Figure 2.</b> <i>The multiplane parallaxing technique at work</i></p>
<h2>Advantages of the Multiplane Parallaxing Technique</h2>
<p>This technique benefits artists over coders, because the art handles most of the perspective. This makes the code relatively light, but an eye for perspective is needed. It is also the most intuitive approach to perspective, because you can already see what it looks like on the stage before any code is added.</p>
<h2>Disadvantages of the Multiplane Parallaxing Technique</h2>
<p>Because this technique uses background planes, the depth effect is limited. It would not be difficult for the user to realize that there are only three layers here. Another downside to this method is that it pans from a center point and does not tile. If you wanted to use it to make the background for a long, 2D platformer level, it would require large art to ensure that the user didn’t pan past the edge of a layer.</p>
<p> </p>
<h2><span >The 3D Billboarding Technique</span></h2>
<p>The parallaxing technique is great if you can represent your background by a few planes, but what do you do if you want to display complex backgrounds with many planes?</p>
<p><i>Billboarding</i> is a 3D animation term for flat objects that always face the camera. The most obvious example of this would be old first-person shooter games, like id Software's*<i>Wolfenstein*</i>, where almost everything in the game was a 2D sprite placed in a 3D environment. The sprites always faced the camera, so you never saw them from an angle that made them look flat. This technique is still used for certain elements in video games today, although it is much less obvious. You can use this same technique in Flash* easily with the built-in Z depth. Every <code>MovieClip</code> obviously has an X and Y position, but it also has a Z position. Using this position, you can create background elements out of individual <code>MovieClips</code> and adjust their X, Y, and Z positions to create parallaxing on any number of planes.</p>
<p>If you adjust the Z position of a <code>MovieClip</code> in Flash*, it will automatically adjust its size and position, but it won’t adjust its display list depth. This means that it’s possible for objects to look weird when they overlap, but you can write some simple code to compensate.</p>
<p>Let’s make a similar Flash* project to the first technique, but this time the elements will be placed, scaled, and tinted by code. In addition, you allow the camera to zoom in and out.</p>
<p>Create a new Flash* project, and make a new <code>MovieClip</code> with the export linkage name of <i>Bubble</i>. To add some variety, make the bubble have six frames on its timeline—each frame a different color. Then, add the code in Listing 2 to the timeline.</p>
<pre name="code" class="cpp">const stageCentre:Point=new Point(300,200);

//create an array to hold references to all the bubbles
var bubbleArray:Array = new Array();

//generate 40 bubbles
for(var i:int = 0; i&lt;40; i++){
	//create a new Bubble MovieClip
	var bubble:Bubble = new Bubble();
	//add it to the stage
	addChild(bubble);
	//create a vector with randomized coordinates
	//within a 600 x 400 x 1500 rectangular prism
	var positionVector:Vector3D = new Vector3D(Math.random()*600, 
		Math.random()*400, Math.random()*1500);
	//set the bubble's positionVector to this new vector.
	//this vector represents the original position of the bubble before panning happens.
	bubble.positionVector = positionVector;
	//add the bubble to the array
	bubbleArray.push(bubble);
	//set the bubble's position to its positionVector
	bubble.x = positionVector.x;
	bubble.y = positionVector.y;
	bubble.z = positionVector.z;
	//set the bubble at a random of its 6 frames
	//each frame has a different color graphic
	bubble.gotoAndStop(Math.floor(Math.random()*6) + 1);
}

addEventListener(Event.ENTER_FRAME, onFrame);

const ease:Number=0.2;

function onFrame(e:Event) {
	var mouseOffset:Point=new Point(stageCentre.x-mouseX,stageCentre.y-mouseY);
	
	//iterate through the bubbleArray and adjust the position of each bubble
	for (i=0; i&lt; bubbleArray.length; i++){
		bubble = bubbleArray[i] as Bubble;
		//set the x (or y) value to the difference between its 
		//original position and the offset value.
		//no need to use percentages this time.
		bubble.x += ((bubble.positionVector.x - mouseOffset.x) - bubble.x)*ease;
		//when setting the z value, the offset is multiplied by 10
		//to allow deeper zooming.
		bubble.z += ((bubble.positionVector.z - mouseOffset.y * 10) - bubble.z)*ease;
		//adjust the dynamic property "zDepth";
		//this simply hold the z position so we can sort on it easier.
		bubble.zDepth = bubble.z;
	}
	
	//after all the positions have been updated, apply depth effects.
	applyDepthEffects();
}

function applyDepthEffects():void{
	//sort the bubbleArray based on the zDepth of each bubble.
	//it will sort in ascending order.
	bubbleArray.sortOn ("zDepth", [ Array.NUMERIC]);
	
	//iterate through the bubbleArray and apply effects to each bubble
	for (i=0; i&lt; bubbleArray.length; i++){
		bubble = bubbleArray[i] as Bubble;
		
		//set the display order of the bubble.
		setChildIndex(bubble, bubbleArray.length - i - 1);
		
		//setting a distance multiplier variable that will be used in the calculations
		var distMult:Number = Math.atan(bubble.z / 1000) * 2/Math.PI;
		
		//tint the bubble based on its distance multiplier
		var colorTrans:ColorTransform = new ColorTransform(1-distMult, 1-distMult,
			1-distMult, 1, distMult * 0x99, distMult* 0xCC, distMult*0xFF);
		bubble.transform.colorTransform = colorTrans;
	}
}
</pre>
<p ><b>Listing 2.</b><i> Flash* project to place, scale, and tint elements programmatically</i></p>
<p>Much of this code is commented, but some parts are a bit complex.</p>
<p>One of the first things that happens is that 40 bubbles are created. Much of this code is fairly straightforward, but one thing to note is the <code>positionVector</code> property—a dynamic property that each bubble is given to represent its original position. You use this property, because as the “camera” moves, all the bubbles will be moving in 3D space, and they need to remember where they came from. (You can’t actually move the camera, so instead, you move everything else.)</p>
<p>In the <code>onFrame</code> function, just as with the first technique, the position of all the parts are adjusted based on the user's mouse position. However, there are a few key differences. Unlike the first example, where you panned each plane with a different panning percentage, this time you just pan the full offset amount. You do this because you’re using the built-in Flash* Z depth, and it automatically applies perspective to all the <code>MovieClips</code>. Another difference here is that the user’s mouse is controlling the pan of the X and Z instead of X and Y. This automation allows the user to zoom in and out when the mouse is moved up and down.</p>
<p>The <code>applyDepthEffects</code> function is where things become most complicated. This function sets the Z stacking and applies a dynamic atmospheric perspective tint.</p>
<p>The Z stacking is determined by the display index of a <code>MovieClip</code> in its parent. When a child is added to a parent with <code>addChild()</code>, it is automatically given a display index. Flash* draws lower indices before higher ones, so higher indices will appear in front of lower indices. However, because you created your bubbles in a random order, the automatically assigned display indices won’t match the way they should overlap. To fix this, you simply sort the array based on each bubble's zDepth and, as you iterate through them, set them at the display index that matches their position. You may notice that in this example, you don’t really need to be re-calculating that value every frame: The bubbles would always stack the same way, because they are sitting still in space. It is shown this way to make it compatible with systems in which the objects would be moving.</p>
<p>The other effect that this function applies is the tinting of each bubble. Atmospheric perspective can look like the alpha is being tweaked, but that’s not actually correct. Things don’t become invisible as they get farther away; in this case, they become closer and closer in color to the sky. The sky color here is #CC99FF. But before that effect happens, you must create a distance multiplier. The <code>distMult</code> simply turns the bubble's Z value into a percentage value that is more useful. The equation for the <code>distMult</code> here creates a percentage between 0 and 1 that increases indefinitely as the bubble gets farther away.</p>
<p>Tinting an object is a bit tricky. Here, you are creating a new <code>ColorTransform</code> object and setting it as the object’s <code>transform.colorTransform</code> value. The first four values of the <code>ColorTransform</code> constructor function are color multipliers: <code>red</code>, <code>green</code>, <code>blue</code>, and <code>alpha</code>. These multipliers affect the original color of the object, so you set them to 1 – <code>distMult</code>, meaning that the object will retain less and less of its original color the farther away it is. (The fourth parameter is the alpha multiplier: Leave that at 1.) The next three parameters are color offsets: red, green, and blue again. Split the sky color (#CC99FF) into its three color parts (#CC, #99, and #FF), and multiply them by <code>distMult</code>. In this way, the bubbles’ color is offset more by the sky color the farther away it is. These techniques have the combined effect of fading the bubbles into the sky color based on Z distance (Figure 3).</p>
<p >
<object height="400" width="550" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" id="ExampleB" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="id" value="ExampleB" />
<param name="align" value="middle" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#99ccff" />
<param name="src" value="http://software.intel.com/file/38115" /><embed height="400" width="550" src="http://software.intel.com/file/38115" bgcolor="#99ccff" quality="high" allowfullscreen="false" allowscriptaccess="sameDomain" align="middle" id="ExampleB" type="application/x-shockwave-flash"></embed>
</object>
<br /> <b>Figure 3.</b> <i>The 3D billboard technique</i></p>
<p ><i><br /></i></p>
<h2>Advantages of the 3D Billboard Technique</h2>
<p>The major advantage to using the Flash* 3D space is obvious: three-dimensional panning. Although you could fake 3D panning with the first method, it would require you to write a lot of optics math. But here, Flash* handles all of that itself and does so much more efficiently.</p>
<p>Another advantage is the ease with which you can adjust perspective. Every <code>DisplayObject</code> has a <code>transform.perspectiveProjection</code> property, which controls things like focal length, field of view, and the vanishing point. You could easily alter the <code>perspectiveProjection</code> of the stage to change the way all the bubbles are rendered, much like you would do with a camera.</p>
<h2>Disadvantages of the 3D Billboard Technique</h2>
<p>You may notice that when you zoom in, the <code>MovieClips</code> are not smooth vector art. They were drawn as vector, but as soon as the Z value is modified, Flash* automatically begins rendering them as bitmaps instead.</p>
<p>This technique has the potential to become CPU-intensive as more objects are added.</p>
<p> </p>
<h2><span >The Scrolling Bitmap Technique</span></h2>
<p>The previous two examples cover situations where the background content only needs to be panned a bit. But what if you wanted to scroll a repeating pattern indefinitely? This effect can be extremely useful for video games like arcade shooters, where the background simply needs to keep scrolling multiplane images. For this example, create a background that would work for a top-down airplane shooter that consists of the ground and a few cloud layers. The idea is to create tiling bitmaps that you can scroll by any amount of offset.</p>
<p>The first step is to create tiling bitmaps. Figure 4 shows the planes mine will be using.</p>
<p ><a href="http://software.intel.com/file/38117"><img src="http://software.intel.com/file/38117" title="Figure 4" alt="Figure 4" /></a></p>
<p ><b>Figure 4.</b> <i>Three tiling bitmaps: the ground, the mist, and the clouds. The mist and clouds are shown here over a black background, but the black areas are actually transparent.</i></p>
<p>You can create tiling bitmaps in a number of ways, but I created all of mine from Render Clouds in Adobe* Photoshop*. Render Clouds creates noise pattern that can be used as a basis for the art. When you use Render Clouds on a canvas with edges that are a power of 2 (1024, in this case), the noise pattern wraps around the edges, creating a perfectly tiling image.</p>
<p>Add these images to a new Flash* project, and give them the linkage names <code>MapGround</code>, <code>MapMist</code>, and <code>MapClouds</code>. Then, add the code in Listing 3 to the stage.</p>
<pre name="code" class="cpp">const stageCentre:Point=new Point(300,200);

//create the 3 layers of bitmaps and add them to the stage
var bgGround:Bitmap = new Bitmap(new MapGround(600, 400));
addChild(bgGround);
var bgMist:Bitmap = new Bitmap(new MapMist(600, 400));
addChild(bgMist);
var bgClouds:Bitmap = new Bitmap(new MapClouds(600, 400));
addChild(bgClouds);

addEventListener(Event.ENTER_FRAME, onFrame);

function onFrame(e:Event) {
	var mouseOffset:Point=new Point(stageCentre.x-mouseX,stageCentre.y-mouseY);
	
	//call the scrollBitmap function for each bitmap, adjusting the offset by a percentage
	scrollBitmap(bgClouds.bitmapData, mouseOffset.x* 0.5, mouseOffset.y * 0.5);
	scrollBitmap(bgMist.bitmapData, mouseOffset.x * 0.3, mouseOffset.y * 0.3);
	scrollBitmap(bgGround.bitmapData, mouseOffset.x * 0.2, mouseOffset.y * 0.2);
}

function scrollBitmap(bitmapData:BitmapData,scrollX:int,scrollY:int):void{
 	//normalize the scroll values
	while(scrollX &gt; bitmapData.width){
		scrollX -= bitmapData.width;
	}
	while(scrollX &lt; -bitmapData.width){
		scrollX += bitmapData.width;
	}
	while(scrollY &gt; bitmapData.height){
		scrollY -= bitmapData.height;
	}
	while(scrollY &lt; -bitmapData.height){
		scrollY += bitmapData.height;
	}
    
	//determine the size of the copy rectangles
	var xPixels:int = Math.abs(scrollX);
	var yPixels:int = Math.abs(scrollY);
	var rectRight:Rectangle = new Rectangle(bitmapData.width - xPixels, 0, xPixels,
		bitmapData.height);
	var rectLeft:Rectangle = new Rectangle(0, 0, xPixels, bitmapData.height);
	var rectTop:Rectangle = new Rectangle(0, 0, bitmapData.width, yPixels);
	var rectBottom:Rectangle = new Rectangle(0, bitmapData.height-yPixels,
		bitmapData.width, yPixels);
	
	//determine the copy points
	var pointLeft:Point = new Point(0, 0);
	var pointRight:Point = new Point(bitmapData.width - xPixels, 0);
	var pointTop:Point = new Point(0, 0);
	var pointBottom:Point = new Point(0, bitmapData.height - yPixels);
    
	//create a temporary bitmapData to act as a clipboard
	var clipboard:BitmapData = new BitmapData(bitmapData.width, bitmapData.height,
		bitmapData.transparent, 0x000000);
    
 	//copy a column
	if(scrollX &gt; 0){
		clipboard.copyPixels(bitmapData, rectRight, pointLeft); 
	}else{
		clipboard.copyPixels(bitmapData, rectLeft, pointRight);
	}
	
	//scroll horizontally
	bitmapData.scroll(scrollX, 0);
	
	//paste column
	if(scrollX &gt; 0){
		bitmapData.copyPixels(clipboard, rectLeft, pointLeft);
	}else{
		bitmapData.copyPixels(clipboard, rectRight, pointRight);
	}
    
	// copy row
	if(scrollY &gt; 0){
		clipboard.copyPixels(bitmapData, rectBottom, pointTop);
	}else{
		clipboard.copyPixels(bitmapData, rectTop, pointBottom);
	}
	
	//scroll vertically
	bitmapData.scroll(0, scrollY);
    
	//paste row
	if(scrollY &gt; 0){
		bitmapData.copyPixels(clipboard, rectTop, pointTop);
	}else{
		bitmapData.copyPixels(clipboard, rectBottom, pointBottom);
	}
    
	//remove the clipboard from memory
	clipboard.dispose();
}
</pre>
<p ><b>Listing 3.</b> <i>Creating tiling bitmaps in Flash*</i></p>
<p>Many parts of this code should be familiar by now. It follows a similar method to the first example in that in every frame, the three layers are moved at different percentages of offset.</p>
<p>The majority of this code is the <code>scrollBitmap</code> function. This massive function simply scrolls the BitmapData of a bitmap and wraps it around the edges. Thus, these bitmaps can be scrolled forever in any direction.</p>
<p>The first part of this function simple normalizes the scroll values so that they are within +/- the <code>bitmapData</code>'s width and height.</p>
<p>The next section creates rectangles that define the areas to copy to and paste from. Basically, these are the sections that would fall off the edge when the <code>bitmapData</code> is scrolled.</p>
<p>You need to copy some of these areas and paste them back around on the other side. The copy points are for this same purpose: They are essentially the top left corners of each of the copy rectangles. You need these, because the <code>copyPixels</code> function expects <code>Rectangles</code> and <code>Points</code> as arguments.</p>
<p>Next, a clipboard bitmap is created. All this bitmap does is act as a place in which to store the pixels that you copy until they are pasted.</p>
<p>Then, depending on which way the bitmap is scrolling, the part that would fall off the edge is copied, the bitmap is scrolled, and then the copied section is pasted back in on the opposite side (Figure 5). This operation occurs once for the horizontal and again for the vertical.</p>
<p >
<object height="400" width="550" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" id="ExampleC" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="id" value="ExampleC" />
<param name="align" value="middle" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#99ccff" />
<param name="src" value="http://software.intel.com/file/38116" /><embed height="400" width="550" src="http://software.intel.com/file/38116" bgcolor="#99ccff" quality="high" allowfullscreen="false" allowscriptaccess="sameDomain" align="middle" id="ExampleC" type="application/x-shockwave-flash"></embed>
</object>
</p>
<p ><b>Figure 5.</b><i> The scrolling billboard technique</i></p>
<h2>Advantages of the Scrolling Billboard Technique</h2>
<p>The fact that this background can tile indefinitely is its biggest strength. This technique is probably most useful for video game application. In addition, this technique is efficient and less likely to bog down frame rates. Adjusting BitmapData is also invariably more efficient than moving DisplayObjects around.</p>
<h2>Disadvantages of the Scrolling Billboard Technique</h2>
<p>Because large raster textures are required for this technique, the overall file size of the .swf file will be larger than those using vector art. In addition, this technique hinges on the artist’s ability to create tiling art. When the art doesn’t line up seamlessly, it is obvious to the user.</p>
<p> </p>
<h2><span >Taking It Farther</span></h2>
<p>The techniques shown here are only a starting point: There are many other ways to accomplish perspective backgrounds. One obvious direction would be to create actual 3D geometry with a library like Away3D. Another possibility is to create sky boxes textured with spherical images. An example of this would be the street view in Google* Maps.</p>
<p>Earlier, I mentioned focus as a perspective principle, but I didn’t use it in any examples. Focus can be faked in Flash* by applying a <code>BlurFilter</code> to a <code>DisplayObject</code>. You could set a focal length, and then adjust the blurriness of every object based on its Z distance from the focal length. However, applying <code>BlurFilters</code> in Flash* is processor-intensive and so is not recommended, but I note it as a possibility. It is more efficient to fake focus by incorporating the blur into the art ahead of time, even though doing so limits its flexibility.</p>
<p>Generally, when I need to develop a perspective background for a Flash* project, I need to create a new system each time, because each project has its own unique needs. However, the three techniques here cover just about all the methods I have ever needed to use. Sometimes, you will have to mix a little of each to create the effect you’re looking for. Learning to manipulate dynamic perspective for Flash* applications can turn the often-overlooked background into a great eye-catching feature.</p>
<p> </p>
<h2><span >About the Author</span></h2>
<p>Patrick Fram is a professional Flash* game developer who specializes in technical artistry. He is a graduate of the Savannah College of Art &amp; Design and holds degrees in animation and sequential art. Patrick has worked professionally in the television, Web, and gaming industries, and he often serves as a concept artist and game designer as well.  Patrick’s specialty is creating dynamic animated effects through a combination of illustration and scripting.</p> ]]></description>
      <link>http://software.intel.com/en-us/articles/faux-3d-parallaxing-effects-in-adobe-flash/</link>
      <pubDate>Wed, 17 Aug 2011 00:00:00 -0700</pubDate>
      <comments>http://software.intel.com/en-us/articles/faux-3d-parallaxing-effects-in-adobe-flash/#comments</comments>
      <guid isPermaLink="true">http://software.intel.com/en-us/articles/faux-3d-parallaxing-effects-in-adobe-flash/</guid>
      <category>ISN General</category>
      <category>Visual Computing</category>
      <category>Art, Music, &amp; Animation</category>
    </item>
  </channel></rss>
