<?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/"
	xmlns:georss="http://www.georss.org/georss" >

<channel>
	<title>The Stairwell &#187; Tutorials</title>
	<atom:link href="http://stairwellblog.com/category/tutorials/feed/" rel="self" type="application/rss+xml" />
	<link>http://stairwellblog.com</link>
	<description></description>
	<lastBuildDate>Mon, 30 Apr 2012 22:00:59 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>YouTube Channels are Launching Business and Boosting Online Profiles</title>
		<link>http://stairwellblog.com/2012/04/youtube-channels-are-launching-business-and-boosting-online-profiles/</link>
		<comments>http://stairwellblog.com/2012/04/youtube-channels-are-launching-business-and-boosting-online-profiles/#comments</comments>
		<pubDate>Mon, 30 Apr 2012 22:00:59 +0000</pubDate>
		<dc:creator>joshuasinason</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Digital Advertising]]></category>
		<category><![CDATA[Findings]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Marketing]]></category>
		<category><![CDATA[Search Engine Marketing]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[browsers]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=3162</guid>
		<description><![CDATA[<p>Last week I wrote briefly about Chris Hardwick and his Nerdist Company.  In the week since I got the chance to speak briefly with the man about his YouTube Channel and how he’s preparing for the time when YouTube and Hulu become rivals to Comcast Cable and Dish Network, “Three to Four years is a good estimate,” Hardwick said when asked about a time table for that.  If his YouTube Channel is any indication he’s pretty ready. Along with a few others he’s building a huge following that could pay off big in the next few years.  Hardwick, along with&#8230;</p>]]></description>
			<content:encoded><![CDATA[<p>Last week I wrote briefly about Chris Hardwick and his Nerdist Company.  In the week since I got the chance to speak briefly with the man about his YouTube Channel and how he’s preparing for the time when YouTube and Hulu become rivals to Comcast Cable and Dish Network, “Three to Four years is a good estimate,” Hardwick said when asked about a time table for that.  If his YouTube Channel is any indication he’s pretty ready. Along with a few others he’s building a huge following that could pay off big in the next few years.  Hardwick, along with other mega YouTube Channel’s like Felicia Day’s Geek and Sundry, and a few others are starting big things using YouTube Channels and some other companies are boosting their online profiles in a big way.</p>
<p>YouTube channels are nothing new.  They’ve existed in some form for years, but it is only recently that they have become a major force for launching new brands and products.  Thanks to things like increased exposure via Playstation and Apple TV along with mobile and tablet video on the rise.  The YouTube channel has grown as a great place to launch a brand.  </p>
<p>Felicia Day’s Geek and Sundry Company launched on YouTube and Google Hangouts on April 1st and has already built up a huge following thanks to a big launch on YouTube.  Felecia started out producing short films and games but ballooned into a small viral media empire.  Geek and Sundry represents a huge leap as she launches various different products including internet publishing all funneled through her YouTube Channel.  Day was able to take a little bit of buzz she built up thanks to her own site and build it into something huge using a YouTube Channel.  And she did it all without spending much of anything on advertising.</p>
<p>One thing she did was do a large amount of cross promotion and build up her launch date in a big way.  She found other websites and channels that had similar audiences such as Hardwick’s and cross promoted with them using giveaways on Twitter.  Day used every form of social media including the brand new Google Hangouts to promote the launch of the YouTube Channel   in a big way and it paid off with some great viral buzz that she fed continuously until her much publicized launch date. </p>
<p>Speaking of the launch date, Felicia Day held a massive launch day promotion that included a 12 hour streaming marathon on the brand new Google Plus Hangouts (Aside to YouTube and Facebook; make this more accessible.  Streaming video is one thing you guys are lacking on and it’s going to make Google Plus look great in comparison.) This gave her some great buzz and even some trending topics on Twitter on her very first day of launch.  She showed off her brand and made some great content for her YouTube channel while getting some great buzz all in one day and all without spending much.  She made the launch of her new brand into an event and promoted it as such.  She did it in a way any small business with a dedicated niche market can do.  Remember, your niche audience is looking for things to talk about.  All you have to do is find a way to get the ball rolling.          </p>
<p>As I said, the new YouTube Channels are a good way to launch your brand and are great for SEO, but as just like the issues with streaming video, they still have some ways to go.  As much as YouTube Channels are a great way to get your brand across there are still some drawbacks to putting your advertising dollars and your time into them as a launch pad for your brand.  “They need to find an easier way for people to see them.”  Hardwick said, noting the leaps they’ve already made as far as digital streaming to television goes.  “YouTube needs to make your channel ‘one click away’ just like any other TV network.  When that does all come together, Day, Hardwick, and anyone else along for the ride that develops a base there could be in for a major windfall.                 </p>
<p><a href="http://www.sfgate.com/cgi-bin/article.cgi?f=/g/a/2012/04/15/prweb9402991.DTL">&#8220;How to Boost YouTube Views with Web Marketing Know-How&#8221;</a></p>
<p><a href="http://www.usatoday.com/tech/columnist/talkingtech/story/2012-04-12/hollywood-collective-agency/54233860/1">YouTube stars get Hollywood Superagents</a></p>
<p><a href="http://www.prweb.com/releases/Rush-Order-Tees/custom-t-shirts/prweb9395000.htm">Rush Order Tees Launches New YouTube Channel</a> </p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2012/04/youtube-channels-are-launching-business-and-boosting-online-profiles/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Frontend Optimization, pt. 5</title>
		<link>http://stairwellblog.com/2010/06/frontend-optimization-pt-5/</link>
		<comments>http://stairwellblog.com/2010/06/frontend-optimization-pt-5/#comments</comments>
		<pubDate>Sat, 12 Jun 2010 22:48:26 +0000</pubDate>
		<dc:creator>steve</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=2410</guid>
		<description><![CDATA[<p>In the fifth and final part of our multi-part Frontend Optimization series, I’ll cover my notes from Steve Souder’s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">“High Performance Websites”</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">“Even Faster Websites”</a> books that can help optimize your images and javascript code.</p>
<h4>Optimize Javascript Code</h4>
<ol>
<li>Minimize DOM Access. Manipulating the DOM is very resource intensive for browsers.</li>
<li>Smart Event Handlers. Use Event Delegation. You can put on event handler on a container div and then figure out which button inside that div was actually clicked in the function to be executed.</li>
<li>Reduce size of private functions (those called only within the js itself, not those called in other documents). So function foobar() would become&#8230;</li></ol>]]></description>
			<content:encoded><![CDATA[<p>In the fifth and final part of our multi-part Frontend Optimization series, I’ll cover my notes from Steve Souder’s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">“High Performance Websites”</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">“Even Faster Websites”</a> books that can help optimize your images and javascript code.</p>
<h4>Optimize Javascript Code</h4>
<ol>
<li>Minimize DOM Access. Manipulating the DOM is very resource intensive for browsers.</li>
<li>Smart Event Handlers. Use Event Delegation. You can put on event handler on a container div and then figure out which button inside that div was actually clicked in the function to be executed.</li>
<li>Reduce size of private functions (those called only within the js itself, not those called in other documents). So function foobar() would become function a() .</li>
<li>Use local variables whenever possible</li>
<li>Use the IF statement when
<ol>
<li>There are no more than two discrete values for which to test</li>
<li>There are large number of values that can be easily separated into ranges</li>
</ol>
</li>
<li>Use the SWITCH statement when
<ol>
<li>There are more than 2 but fewer than 10 values in which to test</li>
<li>There are no ranges for conditions because the values are nonlinear</li>
</ol>
</li>
<li>Use array lookup when:
<ol>
<li>There are more than 10 values to test</li>
<li>The results of the conditions are single values rather than number of actions to be taken.</li>
</ol>
</li>
<li>Avoid the FOR-IN loop</li>
<li>Use Duff’s Device for looping through arrays when you notice a bottleneck in loops that process a large number of items</li>
<li>Alias  javascript properties like foo.style or document.getElementById</li>
</ol>
<h4>Optimize Images</h4>
<ol>
<li>Use <a href="http://smushit.com" target="_blank">smushit.com</a> or <a href="http://punypng.com" target="_blank">punypng.com</a> to remove any unwanted metadata from your images.</li>
<li>Since smushit.com doesn’t strip meta from jpeg you can do it manually with <a href="http://jpegclub.org/" target="_blank">jpegtran</a></li>
<li>Be sure to always check between gif, png 8, png 24, and jpg when saving images for the web to ensure that you&#8217;re using the format that will yield the smallest file size.</li>
<li>Optimize CSS sprites to go horizontally instead of vertically, combine similar colors to keep color count low (in other words have a sprite with all green together and  another with brown, but only do so if it keeps file size lower and http requests down. Only do it if it will not yeild higher http requests and not yeild higher file sizes. the whole point is to reduce those factors.) Also don&#8217;t leave big gaps between image in the sprite.</li>
<li>Favicon &#8211; Get one. Browers will get a 404 error even if you don&#8217;t have one. 404s are slow to respond. So keep it under 1k and be careful about your expires header since you can&#8217;t rename the file if you want to change it.</li>
<li>png 8 is able to save full alpha transparency but only at 256 colors and only from fireworks or some other app than photoshop. I can greatly reduce size from png 24.</li>
</ol>
<p> Part <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-1/">1</a> <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-2/">2</a> <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-3//">3</a> <a href="http://stairwellblog.com/2010/06/frontend-optimization-pt-4/">4<a/> 5</p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2010/06/frontend-optimization-pt-5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Frontend Optimization, pt. 4</title>
		<link>http://stairwellblog.com/2010/06/frontend-optimization-pt-4/</link>
		<comments>http://stairwellblog.com/2010/06/frontend-optimization-pt-4/#comments</comments>
		<pubDate>Fri, 11 Jun 2010 15:59:00 +0000</pubDate>
		<dc:creator>steve</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Findings]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[browsers]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=2413</guid>
		<description><![CDATA[<p>In the fourth part of our multipart Frontend Optimization series I’ll cover my notes from Steve Souder’s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">“High Performance Websites”</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">“Even Faster Websites”</a> books that can help reduce your file sizes and configure your Apache settings to squeeze out more speed.</p>
<h4>Reduce File Sizes</h4>
<ol>
<li><em>See optimizing images for reducing image sizes.</em></li>
<li>Minify CSS and JS files. Use <a href="http://closure-compiler.appspot.com/home" target="_blank">Google&#8217;s Closure Compiler</a> for JS and <a href="http://iceyboard.no-ip.org/projects/css_compressor" target="_blank">ICEY</a> for CSS.</li>
<li>Minify HTML files with <a href="http://infohound.net/tidy/" target="_blank">HTML Tidy</a>.</li>
<li>Reduce file size with using relative links including //subdomain.example.com instead of <a href="http://subdomain.example.com">http://subdomain.example.com</a></li>
</ol>
<h4>Configure Apache and .htaccess</h4>
<ol>
<li>Disable ETags</li>
<li>Add future expires headers</li>
<li>Enable GZip Compression</li>
<li>Since 15% of users don’t have gzip due to proxies you can override that with gzip detection. See&#8230;</li></ol>]]></description>
			<content:encoded><![CDATA[<p>In the fourth part of our multipart Frontend Optimization series I’ll cover my notes from Steve Souder’s <a href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=ntt_at_ep_dpi_1">“High Performance Websites”</a> and <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b">“Even Faster Websites”</a> books that can help reduce your file sizes and configure your Apache settings to squeeze out more speed.</p>
<h4>Reduce File Sizes</h4>
<ol>
<li><em>See optimizing images for reducing image sizes.</em></li>
<li>Minify CSS and JS files. Use <a href="http://closure-compiler.appspot.com/home" target="_blank">Google&#8217;s Closure Compiler</a> for JS and <a href="http://iceyboard.no-ip.org/projects/css_compressor" target="_blank">ICEY</a> for CSS.</li>
<li>Minify HTML files with <a href="http://infohound.net/tidy/" target="_blank">HTML Tidy</a>.</li>
<li>Reduce file size with using relative links including //subdomain.example.com instead of <a href="http://subdomain.example.com">http://subdomain.example.com</a></li>
</ol>
<h4>Configure Apache and .htaccess</h4>
<ol>
<li>Disable ETags</li>
<li>Add future expires headers</li>
<li>Enable GZip Compression</li>
<li>Since 15% of users don’t have gzip due to proxies you can override that with gzip detection. See page 130 of <a href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_bxgy_b_img_b" target="_blank">“Even Faster Websites”</a> for detailed description on solving this problem.</li>
</ol>
<p> Part <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-1/">1</a> <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-2/">2</a> <a href="http://stairwellblog.com/2010/05/frontend-optimization-pt-3//">3</a> 4 <!--<a href="http://stairwellblog.com/2010/06/frontend-optimization-pt-5/">2</a>5</a>&#8211;></p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2010/06/frontend-optimization-pt-4/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>The art and importance of good wireframes</title>
		<link>http://stairwellblog.com/2010/01/the-art-and-importance-of-good-wireframes/</link>
		<comments>http://stairwellblog.com/2010/01/the-art-and-importance-of-good-wireframes/#comments</comments>
		<pubDate>Sat, 30 Jan 2010 23:08:25 +0000</pubDate>
		<dc:creator>tyler</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=1947</guid>
		<description><![CDATA[<p style="line-height: 28.5px;text-align: justify">In his book, <a href="http://communicatingdesign.com/">Communicating Design</a>, Dan Brown defines wireframes as:</p>
<p style="font-size: x-small;text-align: center"><em>“A simplified view of what content will appear on each screen of the final product, usually devoid of color, typographical styles, and images…” </em></p>
<p style="line-height: 28.5px;text-align: justify"><a href="http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/">Wireframes</a> can technically be generated by just about anybody. However it is painfully apparent when someone with little or no experience takes it upon themselves to do so. The classic example is when a client has some ideas they think are great and feels the need to express them. More often than not those ideas could be communicated through words via email or on the phone and it would&#8230;</p>]]></description>
			<content:encoded><![CDATA[<p style="line-height: 28.5px;text-align: justify">In his book, <a href="http://communicatingdesign.com/">Communicating Design</a>, Dan Brown defines wireframes as:</p>
<p style="font-size: x-small;text-align: center"><em>“A simplified view of what content will appear on each screen of the final product, usually devoid of color, typographical styles, and images…” </em></p>
<p style="line-height: 28.5px;text-align: justify"><a href="http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/">Wireframes</a> can technically be generated by just about anybody. However it is painfully apparent when someone with little or no experience takes it upon themselves to do so. The classic example is when a client has some ideas they think are great and feels the need to express them. More often than not those ideas could be communicated through words via email or on the phone and it would be best to avoid wireframing on their part. A person without the training and skills required for effective wireframing is liable to produce incomplete or inaccurate documents that can harm the overall process if not fixed later by someone who is more experienced. Sometimes wireframe documents can look quite simple, but that does not mean that their purpose or the information they contain should be taken lightly. The information found (or not found) within has profound implications. Inappropriate page elements documented at early steps can produce results which reverberate throughout a project all the way through to launch.</p>
<p style="line-height: 28.5px;text-align: justify">Wireframes exist, in part, to communicate the various ideas that will make up the page. But they also are tasked with communicating the intended <a href="http://mashable.com/2009/01/09/user-experience-design/">user’s experience</a> (UX). The UX is like a big collective idea made up of all the individual ideas. Whenever the individual ideas are manipulated, the collective idea is affected. While it is desirable for many individuals to contribute to the individual ideas, it takes a trained professional to shape them all into the big idea. A project is delicate early on and I think there should generally be a single <a href="http://articles.sitepoint.com/article/architecture-defined#">Information Architect</a> (IA) to produce wireframes and their subsequent iterations to preserve the integrity of the UX.  The advantage of having a single purveyor of wireframes is that good information tends to get discovered and refined, while bad information is removed more efficiently. If the project is large enough to have additional IAs or the client insists on being directly involved then some standards should be put in place to avoid miscommunication and extra work. It may be a good idea to create a framework template as well as a basic elements library for all parties to share.</p>
<p style="line-height: 28.5px;text-align: justify">Good wireframes should embody an organized aesthetic, which is visually pleasing, yet neutral in emotional expression. This will help to communicate what is truly important: the ideas. Although wireframes are basic it still takes many years for an IA to develop their style. There is a methodology to creating these documents we all develop over time and seldom do we ever do it the same way as our peers. I would be interested to hear about instances from other UX designers who are responsible for producing wireframes  and hear weather or not they prefer to work solo or collaborate with their co-workers to produce final deliverables. Additionally, I would like to hear how other UXers feel about clients being involved as co-creators of wireframes speciffically. Perhaps some organizations have a sophisticated system in place which allows for and encourages this. To date, I have yet to see an organization with such a structure. Much of this article is based on opinions I&#8217;ve gathered from my personal experiences and those of my close pewers. Every designer and organization however is going to use a slightly different approach. I hope that there are others out there that can shed light on this topic for everyone to consider as well.</p>
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px"><strong>Some examples of  good wireframes with varying styles:</strong></p>
<p style="font-size: 19.5px;line-height: 28.5px"><img class="alignleft size-full wp-image-1976" style="font-size: 19.5px;line-height: 28.5px" src="http://stairwellblog.com/wp-content/uploads/2010/01/portal-wireframe24.jpg" alt="sample wireframe 1" width="450" height="411" /></p>
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px"><a href="http://willevans.gather.com/"><img class="alignleft size-full wp-image-1977" style="font-size: 19.5px;line-height: 28.5px" src="http://stairwellblog.com/wp-content/uploads/2010/01/Will_Evans_wireframe3.jpg" alt="Sample wireframe 2" width="450" height="411" /></a></p>
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px">
<p style="font-size: 19.5px;line-height: 28.5px"><a href="http://stairwellblog.com/tyler-mohr/"><img class="alignleft size-full wp-image-1979" style="font-size: 19.5px;line-height: 28.5px" src="http://stairwellblog.com/wp-content/uploads/2010/01/wireframe-sample-32.jpg" alt=" sample wireframe 3" width="450" height="418.5" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2010/01/the-art-and-importance-of-good-wireframes/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Working with an Agency: Don&#8217;t keep a dog and bark yourself.</title>
		<link>http://stairwellblog.com/2009/12/working-with-an-agency-dont-keep-a-dog-and-bark-yourself/</link>
		<comments>http://stairwellblog.com/2009/12/working-with-an-agency-dont-keep-a-dog-and-bark-yourself/#comments</comments>
		<pubDate>Wed, 02 Dec 2009 19:57:26 +0000</pubDate>
		<dc:creator>Greg</dc:creator>
				<category><![CDATA[Business]]></category>
		<category><![CDATA[Findings]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Chicago]]></category>
		<category><![CDATA[creative agencies]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=1692</guid>
		<description><![CDATA[<p>One of the most challenging aspects of working in an advertising or interactive agency is managing sensitive agency-client relations.  Taking clients down the path to creating a successful marketing message or making a recommendation that they may not agree with can be fun and exciting or it can be an emotional, difficult and even scary process.  It seems like it should be easy.  Clients hire us for our expertise in creativity, strategic direction and user experience.  You are paying for our service, so why not use us to our full potential?</p>
<p>There is definitely something to be said for letting an&#8230;</p>]]></description>
			<content:encoded><![CDATA[<p>One of the most challenging aspects of working in an advertising or interactive agency is managing sensitive agency-client relations.  Taking clients down the path to creating a successful marketing message or making a recommendation that they may not agree with can be fun and exciting or it can be an emotional, difficult and even scary process.  It seems like it should be easy.  Clients hire us for our expertise in creativity, strategic direction and user experience.  You are paying for our service, so why not use us to our full potential?</p>
<p>There is definitely something to be said for letting an agency do its job. When was the last time you went in and mixed it up with your accountant on how she was preparing depreciating asset schedules?  If you’re like us, probably never.  We take it as a given that the accountant knows tax law, that&#8217;s why we hired her.</p>
<p>Advertising guru and founder of Ogilvy &amp; Mather, David Ogilvy once said, &#8220;Don&#8217;t keep a dog and bark yourself.&#8221;</p>
<p>There is a certain wisdom in this statement.  If you had the time or expertise to do it all on your own, we wouldn&#8217;t be having this conversation.  There needs to be a balance struck between doing it yourself and working to give an agency a vision of how you view the campaign&#8217;s direction.</p>
<p>Well, clients obviously have good ideas, which are many times well founded, in what will work best for their business, whether it is naming a new product, creating a unique selling proposition or understanding what kind of web experience their customers want.</p>
<p>Now, in rare circumstances, sometimes the ideas are not well founded.  Maybe even just plain silly.  And this is where walking the tightrope of the client-agency relationship begins.  It is our responsibility as your agency to tell you if you are going down a wrong path.  Not rudely or disrespectfully, but courageously.  In a new client relationship or a slow economy, this can be down right scary, because if we push too hard to guide the client in the right direction, things can breakdown.  We could be out of a client and you an agency if we don&#8217;t learn to stoke this relationship.</p>
<p>However, if we as an agency are not willing to pushback or tell a client the truth for fear of losing the account, then we are not serving the client in the highest sense.  To serve our client&#8217;s best interests we have to be able to provide honest and objective feedback, and take some in return.</p>
<p>So, let&#8217;s learn to respect or even revere some well-intentioned push-back.  This is the natural ebb and flow of a good agency-client relationship.  In time, we can learn to use this edge to push and pull great ideas out of one another on a regular basis.</p>
<p>There is always room for some healthy and passionate collaboration in a client-agency relationship.  Some of our best ideas have come out of differing viewpoints.  While we excel in clear and concise communication, our clients are experts in their businesses.  We both need to be heard, and out of this open collaboration can spring ideas that are greater than either of us may have arrived at on our own.</p>
<p>Of course, give us research and insights from previous campaigns.  Arm us with all you know about your audience.   Maybe we will decide to conduct research together to gain new intelligence into your customers&#8217; current mind-set.  At this point, turn us loose on the project.  Don&#8217;t micro-manage in a way that unnecessarily slows projects down or drains account team morale. Trust in the quality of your input, our ability to interpret your direction and let us ‘work our magic’ for you.</p>
<p>Let&#8217;s talk about a real life client as an example of a success story in agency-client relations.  We&#8217;ll call them &#8220;Super Client&#8221;.  Ironically, everyone thinks they can write good web copy or create great design and user experiences.  Recently, we were creating a name and a logo to brand a new process for &#8220;Super Client&#8221;.  They literally had a 7 word name for the process that was self-admittedly thoroughly confusing and impossible to remember.  We came up with 2 words that describe the process and allow for branding.</p>
<p>What was interesting was, despite being hired to do just this, the client requested to see into our creative process.  To see hundreds of word associations and combinations we came up with in landing on this one magical combination, and then something funny happened.  &#8220;Super Client&#8221; started to &#8220;bark&#8221; themselves.  They wanted to come up with new names on their own, and modify our &#8220;also rans&#8221;.  We had to respectfully stop them, explain how we had played out these variations in hypothetical marketing exercises and push this client toward the right decision.</p>
<p>The conversation was passionate but respectful.  The owner&#8217;s blood was pumping.  It was our job to guide &#8220;Super Client&#8221; to make the right call, but we listened to his rationales for why the name needed to be longer and not so focused, until it clicked.  He actually argued himself into the right decision.  &#8220;The name needs to do this, and put us in this category while being environmental&#8221; and then he stopped, laughed and said &#8220;this is the name isn&#8217;t it.&#8221;</p>
<p>And so it was.  While we could have easily lost this new client, we didn&#8217;t.  What we did was form a stronger relationship based on respecting each other&#8217;s ideas and taking the risk of engaging in a lively conversation with an unknown ending.  The beauty of this unknown ending is the excitement of pursuing the best interests of our clients.</p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2009/12/working-with-an-agency-dont-keep-a-dog-and-bark-yourself/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Being a More Efficient Web Designer</title>
		<link>http://stairwellblog.com/2009/10/being-a-more-efficient-web-designer/</link>
		<comments>http://stairwellblog.com/2009/10/being-a-more-efficient-web-designer/#comments</comments>
		<pubDate>Sun, 18 Oct 2009 12:00:59 +0000</pubDate>
		<dc:creator>steve</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Findings]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[cross browser]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[safari]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=344</guid>
		<description><![CDATA[<p><span style="font-size: medium;"><strong>1. Using Pre-made Form Elements</strong></span><br />
Often when designing a web comp we need to incorporate items that are part of the browser GUI. These elements, like it or not, are part of the overall design. So its often many designer&#8217;s habit to fire up their browser, find a checkbox, radio button, text input, etc. and grab a screen shot. However, there is a better way. The <a href="http://www.designerstoolbox.com/designresources/elements/">Designer&#8217;s Toolbox</a> has done all this for us and organized every browser&#8217;s unique elements into an easy to use layered PSD file. Just keep them nearby and whenever you need a browser GUI element you can&#8230;</p>]]></description>
			<content:encoded><![CDATA[<p><span style="font-size: medium;"><strong>1. Using Pre-made Form Elements</strong></span><br />
Often when designing a web comp we need to incorporate items that are part of the browser GUI. These elements, like it or not, are part of the overall design. So its often many designer&#8217;s habit to fire up their browser, find a checkbox, radio button, text input, etc. and grab a screen shot. However, there is a better way. The <a href="http://www.designerstoolbox.com/designresources/elements/">Designer&#8217;s Toolbox</a> has done all this for us and organized every browser&#8217;s unique elements into an easy to use layered PSD file. Just keep them nearby and whenever you need a browser GUI element you can grab it and resize is however you want very quickly.</p>
<p><span style="font-size: medium;"><strong>2. Using Vector Object&#8217;s Mattes to change colors.</strong></span><br />
<img class="alignright size-full wp-image-346" style="margin-left: 8px; margin-right: 8px;" title="fastercolorchanges" src="http://stairwellblog.com/wp-content/uploads/2009/01/fastercolorchanges.png" alt="fastercolorchanges" width="255" height="255" /> Many designers are already hip to this trick, but I suspect there are far too many still in the dark about this one. If you use vector objects for your shapes and are either making a new vector object or using the color overlay effect to change its color you&#8217;re wasting time. Simply double click the color solid in the layer palette and you&#8217;ll be able to change its color.</p>
<p style="clear:both"><span style="font-size: medium;"><strong>3. Better Layer Selection</strong></span><br />
With the later releases of Photoshop its much easier and familiar to select the layers you want in the canvas. The old way of using right click to select a layer can slow you down. You simply need to check the box called &#8220;automatically select&#8221; and choose layer from the drop down menu and finally click &#8220;show transform controls&#8221; as well. This will allow you to click a layer with the arrow tool to select it. Shift click others to select multiple, or click and drag to select multiple just like on your desktop. One hint to help this technique is to start organizing your layers and locking them down if you&#8217;re not using them. This makes it incredibly easy to grab a huge block of layers and move them and resize them to fit an adjustment.</p>
<p><span style="font-size: medium;"><strong>4. Using Color Palettes.</strong></span><br />
The Color Palettes window is often overlooked. The typical way of grabbing colors and applying them to new objects is to use the eye dropper tool, maybe copy and paste the hex code. However if you set up your color palettes window for your design you can constantly know exactly where to grab that color and always have the right one. Using sites like colourlovers.com and kuler.com are also great because you can make your palette, or find somebody else&#8217;s, and save it right to the window in photoshop or illustrator.</p>
<p><span style="font-size: medium;"><strong>5. Cicero &#8211; Lorem Ipsum Widget</strong></span><br />
<a href="http://www.apple.com/downloads/dashboard/developer/cicero.html"><img class="alignright size-full wp-image-348" title="default" src="http://stairwellblog.com/wp-content/uploads/2009/01/default.png" alt="default" width="142" height="223" /></a> Lorem Ipsum is important to almost every designer and for all the useless widgets out there in the world a lorem ipsum widget is not one of them. If you&#8217;re designing a page and need some dummy text its so fast to just use hot corners or a hotkey to pull up dashboard, click copy on the <a href="http://www.apple.com/downloads/dashboard/developer/cicero.html">cicero widget</a>, go back to photoshop, and paste in your text.  You don&#8217;t need to go to lorem ipsum websites, or have a text file you need to open, just one click copy of lorem ipsum without really leaving photoshop.</p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2009/10/being-a-more-efficient-web-designer/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Creating Fluid AS3 Flash Layouts: Extending The Basics.</title>
		<link>http://stairwellblog.com/2009/05/creating-fluid-as3-flash-layouts-extending-the-basics/</link>
		<comments>http://stairwellblog.com/2009/05/creating-fluid-as3-flash-layouts-extending-the-basics/#comments</comments>
		<pubDate>Mon, 18 May 2009 21:15:12 +0000</pubDate>
		<dc:creator>Ryan Nasipak</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Fluid Layout]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=918</guid>
		<description><![CDATA[<p>Welcome back! <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>This is part two of (how many I&#8217;m not quite sure) a tutorial series in working with AS3 fluid flash layouts. If you missed part one (<a href="http://stairwellblog.com/2009/03/creating-fluid-as3-flash-layouts-the-basics/">Creating Fluid AS3 Flash Layouts: The Basics.</a>), I&#8217;d highly recommend giving it a look <a href="http://labs.billupsdesign.com/tutorials/fluidFlash/">here</a> (especially if you have some lingering questions on how all of this is working). It goes much more in depth as to the how and why of what we&#8217;re doing to create some of these CSS like effects in actionscript.</p>
<p>Another reason I would recommend starting from that first tutorial is that we&#8217;ll be extending the original file we&#8230;</p>]]></description>
			<content:encoded><![CDATA[<p>Welcome back! <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>This is part two of (how many I&#8217;m not quite sure) a tutorial series in working with AS3 fluid flash layouts. If you missed part one (<a href="http://stairwellblog.com/2009/03/creating-fluid-as3-flash-layouts-the-basics/">Creating Fluid AS3 Flash Layouts: The Basics.</a>), I&#8217;d highly recommend giving it a look <a href="http://labs.billupsdesign.com/tutorials/fluidFlash/">here</a> (especially if you have some lingering questions on how all of this is working). It goes much more in depth as to the how and why of what we&#8217;re doing to create some of these CSS like effects in actionscript.</p>
<p>Another reason I would recommend starting from that first tutorial is that we&#8217;ll be extending the original file we built (and doing a lot less step by step coding). Hopefully you already have your own file but if you don&#8217;t, I&#8217;ve provided a commented file from the previous tutorial <a href="http://labs.billupsdesign.com/tutorials/fluidFlash/as3_fluidLayout.fla.zip">here.</a>. If you&#8217;re serious about learning (and most importantly understanding) all these concepts, don&#8217;t cheat yourself by just downloading the previous file! Go back, read / work through my first tutorial and get a firm grasp on the fundamentals. Many of these concepts are incredibly valuable and you really should learn how to do them yourself. Why? Because I cannot provide you with everything you&#8217;ll ever need. Develop your own personal skill set and then eventually share it with others as well (maybe in your own blog <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  ).</p>
<p>With all that said, lets get started.</p>
<p>First, I&#8217;ll give a brief run through of what we&#8217;ll be doing in this tutorial and also why I think it&#8217;s important .</p>
<p>So far, we have a pretty nice fluid file. I&#8217;ve left a working copy of it up on labs. So if you need a reference while I&#8217;m talking about some of the problems associated with it (Ok, nobody freak out! I&#8217;ll explain), you can check it out <a href="http://labs.billupsdesign.com/tutorials/fluidFlash/">here.</a></p>
<p>When I say &#8220;problems associated with it&#8221; I&#8217;m sure that makes a few people&#8217;s stomachs turn BUT&#8230;&#8230;don&#8217;t fret. We&#8217;re going to identify what I think they (the problems) are and go over how to eliminate them (yay!).</p>
<p>Let me illustrate what I&#8217;m talking about.</p>
<p>Right now we are giving our objects some basic directions on where to position themselves in our browser window. When you adjust / maximize / etc. you obviously notice that our objects move based on how we want them to be displayed (center, right, top, bottom, etc., etc.). So far so good right? Well, sort of. The one thing we haven&#8217;t done is establish any sort of boundaries within our browser window. Currently, our objects can (and will) overlap if the window is re sized to an extremely small size. Go ahead and drag your browser all the way to the extreme vertical end on the <a href="http://labs.billupsdesign.com/tutorials/fluidFlash/">working fluid file</a>. You&#8217;ll notice we get a pretty sloppy result (see figure below).</p>
<div id="attachment_1211" class="wp-caption alignleft" style="width: 635px"><img src="http://stairwellblog.com/wp-content/uploads/2009/05/image001.jpg" alt=" " title="image001" width="625" height="158" class="size-full wp-image-1211" /><p class="wp-caption-text"> </p></div>
<p>It&#8217;s a result you&#8217;d really never expect to get when looking at an HTML page for example and if you did, how would you not assume the page was broken? If stuff was overlapping and there were no content boundaries, the user&#8217;s overall experience would be pretty poor and the likelihood of them returning would be very low. The same can be said in flash applications. &#8220;Tricking&#8221; a user in to thinking you&#8217;re applying CSS to an HTML page, while serving them a 100% flash application that&#8217;s rich in multimedia content really helps to drive home the value of the flash platform (think <a href="http://www.kontain.com/">Kontain</a>). Flash provides a programmer with a lot of flexibility (when it comes to layout) so don&#8217;t squander an opportunity to make a positive impression.</p>
<p>Some of you might be saying, what&#8217;s the big deal? When are you ever going to be shrinking your browser to such a small size? Well, my question for you is&#8230;&#8230;.when are you ever going to be designing an entire website with only 80 x 80px blocks? <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Overlapping is going to occur MUCH quicker (and most likely with a much more adverse result) when your stage content is of &#8220;real world&#8221; size. To help you understand exactly what I&#8217;m talking about, imagine our boxRed moviclip had a height of 500px, instead of 80px. It could start overlapping the boxBlue dummy nav movieClip when the webpage first loaded (see the figure below). Needless to say that would be a pretty ugly (and careless) result.</p>
<div id="attachment_1212" class="wp-caption alignleft" style="width: 635px"><img src="http://stairwellblog.com/wp-content/uploads/2009/05/image002.jpg" alt=" " title="image002" width="625" height="355" class="size-full wp-image-1212" /><p class="wp-caption-text"> </p></div>
<p>So, how do we keep that from happening? Easy. We&#8217;ll write a few conditional statements in our onResizeStage function that set some layout boundaries for our project and mimic a lot of what CSS does for an HTML page.</p>
<p>The statement we&#8217;ll write will be an if / else statement and we&#8217;ll include it in to our onResize function that&#8217;s called when someone resizes the stage. For those unfamiliar with such a conditional we&#8217;ll basically check for one thing to be true and if it&#8217;s not, we&#8217;ll continue to move our pieces around (hence the if / else name). To put it very simply, we&#8217;ll check to see if our boxes are touching a boundary and if they are, we&#8217;ll return them to a set minimum / maximum location. Essentially we&#8217;re putting up a virtual fence that our individual pieces must play nicely in. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>To accomplish that, let&#8217;s first do the math on such a calculation. While we could just write an equation with an explicit number (like 80px), why not take it a step further and use the height property of a given object instead? After all, we want this to be as flexible as possible don&#8217;t we? That way if we were to make some executive design decisions later, the code will do all the heavy lifting for us (on the fly). With all that said, lets write the equation (finally).</p>
<div class="codecolorer-container actionscript3 mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br /></div></td><td><div class="actionscript3 codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="kw1">if</span> <span class="br0">&#40;</span>boxRed.<span class="kw7">y</span> <span class="sy0">&lt;</span>= <span class="br0">&#40;</span>boxBlue.<span class="kw7">height</span> <span class="sy0">+</span> <span class="nu0">10</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
boxRed.<span class="kw7">y</span> = <span class="br0">&#40;</span>boxBlue.<span class="kw7">height</span> <span class="sy0">+</span> <span class="nu0">10</span><span class="br0">&#41;</span>;<br />
<span class="br0">&#125;</span><br />
<br />
<span class="kw1">else</span> <span class="br0">&#123;</span><br />
<span class="co1">//do nothing or give some direction</span><br />
<span class="co1">//trace(&quot;no change&quot;);</span><br />
<span class="br0">&#125;</span></div></td></tr></tbody></table></div>
<p>Hopefully everyone sees what I&#8217;m doing here. If not, let me explain. Because our boxBlue resides at the top of our movie / stage / site we don&#8217;t want other objects &#8220;bumping&#8221; in to it. To keep that from happening we use a conditional statement like if / else. We want to maintain consistent padding between it and our other objects, just like you might do in your HTML markup. Instead of adding a CSS property like margin or padding, we&#8217;re instead adding that number (our desired amount of padding) in to our calculation (in this case 10 pixels) to the current object (boxBlue) that is occupying the space we do not want our other objects to go in to. That extra 10 pixels will bump the other elements on our stage, in this case the boxRed movieclip, away from our boxBlue movieclip. If the resizing of our window tries to move our boxRed any further then our minimum desired numerical (.y) location ((boxBlue.height + 10);) it simply returns it to that minimum point on our y axis and holds it there.  The else portion of our conditional remains blank in case you would like to add in some extra interactivity or streamline your boundary function even more.</p>
<p>For a better understanding of this layout concept, I broke it down in this quick diagram.</p>
<div id="attachment_1227" class="wp-caption alignleft" style="width: 635px"><img src="http://stairwellblog.com/wp-content/uploads/2009/05/image003.jpg" alt=" " title="image003" width="625" height="151" class="size-full wp-image-1227" /><p class="wp-caption-text"> </p></div>
<p>Pretty simple right? As it should be. It&#8217;s good to remember not to over think your programming projects. While it won&#8217;t always be the case, many of the effects you&#8217;d like to produce are often rather simple functions. </p>
<p>With that said, let&#8217;s add a boundary function for our footer (boxGreen). You should have an idea of what we want to do here. If not, keep reading. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>There are several ways to make this calculation, so keep that in mind if you came up with something that is a bit more efficient. I went with a more long winded approach for explanation purposes. Here&#8217;s my conditional and an explanation / diagram to help illustrate what&#8217;s going on.</p>
<div class="codecolorer-container actionscript3 mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /></div></td><td><div class="actionscript3 codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="kw1">if</span> <span class="br0">&#40;</span>boxGreen.<span class="kw7">y</span> <span class="sy0">&lt;</span>= <span class="br0">&#40;</span>boxBlue.<span class="kw7">height</span> <span class="sy0">+</span> boxRed.<span class="kw7">height</span> <span class="sy0">+</span> <span class="nu0">20</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; boxGreen.<span class="kw7">y</span> = <span class="br0">&#40;</span>boxBlue.<span class="kw7">height</span> <span class="sy0">+</span> boxRed.<span class="kw7">height</span> <span class="sy0">+</span> <span class="nu0">20</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw1">else</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//do nothing or give some direction</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//trace(&quot;no change&quot;);</span><br />
<br />
<span class="br0">&#125;</span></div></td></tr></tbody></table></div>
<p>As I said before, we want our flash file to behave like HTML / CSS here. Because we don&#8217;t want things to overlap, we need to set a minimum .y value for our boxGreen movieclip. To do so, we need to take in to account what object(s) separate the boxGreen movieclip from the &#8220;0&#8243; point on our y-axis (or top of our browser content area). Our dummy nav (boxBlue) and dummy content (boxRed) are those objects in this case but you could have several others as well depending on the complexity of your project. </p>
<p>So with that in mind, our equation uses those object&#8217;s height to set that invisible fence that our boxGreen or dummy footer cannot cross. We simply add boxBlue.height + boxRed.height + 20. Why 20? Well, see the diagram below. We add 20 because there is 10 pixels of padding in between the dummy nav and dummy content as well as 10 pixels of padding between the dummy content and dummy footer. As a small code note&#8230;.to make it even more efficient, you could declare a variable called &#8220;padding&#8221; and set it to 10. </p>
<div id="attachment_1236" class="wp-caption alignleft" style="width: 635px"><img src="http://stairwellblog.com/wp-content/uploads/2009/05/image004.jpg" alt=" " title="image004" width="625" height="182" class="size-full wp-image-1236" /><p class="wp-caption-text"> </p></div>
<p>Nothing too difficult right? These really are concepts, that when sketched out on paper, seem really easy (which is never a bad thing). </p>
<p>As I said before, this tutorial will be a little more abbreviated then the last. I would expect you all have a firm grasp on these concepts and are starting to critically think about how to execute such effects in your own projects (and even add on to what is already here to make it even more flexible / efficient). </p>
<p>To round out this tutorial we&#8217;ll do two things:</p>
<p>1.) Write an equation to keep objects from overlapping horizontally (so you can space your objects on both the x and y axis).</p>
<p>2.) Clean up our file in to one singular equation that we call twice (instead of setting up elements outside of our onResize event and then adjusting them inside a separate function). </p>
<p>Ok, lets wrap this up&#8230;&#8230;.</p>
<p>Writing an equation to space things horizontally. </p>
<p>I&#8217;d hope by now that you all are jumping ahead and writing equations on your own and then checking them with what I have below. If not, I would suggest trying such an approach in the future. After you have the correct instruction, try to take that instruction and apply it while you&#8217;re learning. It will really help you retain the info / concepts you&#8217;re learning. With that said, go write an equation that would keep the boxRed and box Orange objects from overlapping each other. Oh, and throw in 10 px of padding as well.</p>
<p>You&#8217;re not cheating are you? <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Ok, if you&#8217;re stumped or would like to check your work, here&#8217;s what you should have been thinking&#8230;&#8230;</p>
<div class="codecolorer-container actionscript3 mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br /></div></td><td><div class="actionscript3 codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="kw1">if</span> <span class="br0">&#40;</span>boxOrange.<span class="kw7">x</span> <span class="sy0">&lt;</span>= <span class="br0">&#40;</span>boxRed.<span class="kw7">x</span> <span class="sy0">+</span> boxRed.<span class="kw7">width</span> <span class="sy0">+</span> <span class="nu0">10</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; boxOrange.<span class="kw7">x</span> = <span class="br0">&#40;</span>boxRed.<span class="kw7">x</span> <span class="sy0">+</span> boxRed.<span class="kw7">width</span> <span class="sy0">+</span> <span class="nu0">10</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw1">else</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//do nothing or give some direction</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//trace(&quot;no change&quot;);</span><br />
<span class="br0">&#125;</span></div></td></tr></tbody></table></div>
<p>If you didn&#8217;t get it, I&#8217;m sure you&#8217;re thinking to yourself &#8220;duh!&#8221; but don&#8217;t fret. In time, you&#8217;ll look back and laugh about things like this giving you trouble. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  It&#8217;s the same basic concept as before, just using the .x property (horizontal positioning)  instead of the .y property (vertical positioning). With that equation plugged in to your onResize function, you should see a similar result as the one pictured below. I bumped my boxRed movieclip&#8217;s width to 500 px to show what our equation is accomplishing. When you collapse the web browser horizontally your box orange movieclip will never get closer then 10px to the right of the boxRed movieclip.  </p>
<div id="attachment_1247" class="wp-caption alignleft" style="width: 635px"><img src="http://stairwellblog.com/wp-content/uploads/2009/05/image005.jpg" alt=" " title="image005" width="625" height="178" class="size-full wp-image-1247" /><p class="wp-caption-text"> </p></div>
<p>I hope everyone is on the same page, if not drop a message in as a comment and I&#8217;ll try to get back to you as soon as I can.</p>
<p>Finally, lets clean up our file. </p>
<p>Like anything else, you should always strive to be as efficient as possible in your projects. It not only makes it easier for you to work on your .fla&#8217;s but others as well. Right now we initialize .x and .y locations outside of our on resize function. Obviously this is not uncommon and will be done in almost all your projects down the road&#8230;..BUT <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  in this case, we don&#8217;t need to write our layout function that way. Instead, we can write one universal function that we call when the program loads and then continue to call when a user resizes the browser window. This is especially helpful. Why? because we only need to change things or add layout boundaries in one central function instead of doing so inside and outside (as we did in our first tutorial). </p>
<p>So, we&#8217;ll move all the .x and .y equations (that initialize the starting point, on load, of all our objects) inside a single function I&#8217;m going to call setElementsXY();</p>
<div class="codecolorer-container actionscript3 mac-classic" style="overflow:auto;white-space:nowrap;width:550px;height:300px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br /></div></td><td><div class="actionscript3 codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="kw3">function</span> setElementsXY<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">:</span><span class="kw1">void</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="co1">//------------------------------------------------------------</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="coMULTI">/*Initialize the start x and y values of your fluid elements*/</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="co1">//------------------------------------------------------------</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="coMULTI">/*Align Center*/</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; boxRed.<span class="kw7">x</span> = <span class="br0">&#40;</span><span class="br0">&#40;</span><span class="kw7">stage</span>.<span class="kw7">stageWidth</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">&#41;</span> <span class="sy0">-</span> <span class="br0">&#40;</span>boxRed.<span class="kw7">width</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">&#41;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; boxRed.<span class="kw7">y</span> = <span class="br0">&#40;</span><span class="br0">&#40;</span><span class="kw7">stage</span>.<span class="kw7">stageHeight</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">&#41;</span> <span class="sy0">-</span> <span class="br0">&#40;</span>boxRed.<span class="kw7">height</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">&#41;</span><span class="br0">&#41;</span>;<br />
<br />
&nbsp; &nbsp; <span class="coMULTI">/*Scale width to browser*/</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; boxBlue.<span class="kw7">width</span> = &nbsp;<span class="kw7">stage</span>.<span class="kw7">stageWidth</span>;<br />
<br />
&nbsp; &nbsp; <span class="coMULTI">/*Align / hug to the right of the browser. Align boxOrange 10px below the bloxBlue MC*/</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; boxOrange.<span class="kw7">x</span> = <span class="kw7">stage</span>.<span class="kw7">stageWidth</span> <span class="sy0">-</span> boxOrange.<span class="kw7">width</span>;<br />
&nbsp; &nbsp; boxOrange.<span class="kw7">y</span> = boxBlue.<span class="kw7">height</span> <span class="sy0">+</span> <span class="nu0">10</span>;<br />
<br />
&nbsp; &nbsp; <span class="coMULTI">/*Align to the bottom of the browser window and scale to browser width*/</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; boxGreen.<span class="kw7">y</span> = <span class="kw7">stage</span>.<span class="kw7">stageHeight</span> <span class="sy0">-</span> boxGreen.<span class="kw7">height</span>;<br />
&nbsp; &nbsp; boxGreen.<span class="kw7">width</span> = <span class="kw7">stage</span>.<span class="kw7">stageWidth</span>;</div></td></tr></tbody></table></div>
<p>Pretty painless right? Now we just call our function after our addEventListener at the top of our program:</p>
<div class="codecolorer-container actionscript3 mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br /></div></td><td><div class="actionscript3 codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="kw7">stage</span>.<span class="kw7">addEventListener</span><span class="br0">&#40;</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Event</span></a>.<span class="kw8">RESIZE</span>, onResizeStage<span class="br0">&#41;</span>; &nbsp;<br />
<br />
setElementsXY<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div></td></tr></tbody></table></div>
<p>and finally, we just call that setElementsXY(); function when the stage is resized:</p>
<div class="codecolorer-container actionscript3 mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br /></div></td><td><div class="actionscript3 codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="kw3">function</span> onResizeStage<span class="br0">&#40;</span>evt<span class="sy0">:</span><a href="http://www.google.com/search?q=event%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:event.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Event</span></a><span class="br0">&#41;</span><span class="sy0">:</span><span class="kw1">void</span> <span class="br0">&#123;</span><br />
&nbsp; <span class="co1">//trace(&quot;Stage Height = &quot; + stage.stageHeight,&quot;Stage Width =&quot; + stage.stageWidth);</span><br />
<br />
&nbsp; &nbsp; setElementsXY<span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
&nbsp; &nbsp; <br />
<span class="br0">&#125;</span></div></td></tr></tbody></table></div>
<p>I would guess most of you understood that without much trouble but in case you got hung up, you can download the full commented file here:</p>
<p>Commented File Download: <a href="http://labs.billupsdesign.com/tutorials/fluidFlash-part-two/Fluid Layout - Part 2.zip">Extending the basics FLA</a></p>
<p>And a working version over on labs:</p>
<p><a href="http://labs.billupsdesign.com/tutorials/fluidFlash-part-two/">Creating Fluid AS3 Flash Layouts: Extending The Basics &#8211; Working File</a></p>
<p>There are a few extra layout conditionals that have been added in (that haven&#8217;t been explained) but I&#8217;m confident you all can decipher what&#8217;s going on. Just as an example, there&#8217;s a layout conditional that keeps the boxRed from touching the left edge of the browser window (i.e. 10 px of padding). Easy enough right? The comments should help you figure anything out that you might be a bit unsure about. </p>
<p>I really hope this 2 part (for now <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  ) layout series helps you in your projects. If nothing else, I hope it (this tutorial) helps you realize the value of the internet (for programmers) and encourages you to share some of your own concepts with others. It&#8217;s nice to know everything, even nicer to share it with others as well. </p>
<p>That&#8217;s all for now but check back often. I&#8217;ll try to post some other flash tutorials when I get a chance! </p>
<p>As always happy flashing! <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2009/05/creating-fluid-as3-flash-layouts-extending-the-basics/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Flash &amp; HTML Website Integration &#8211; Best Practices</title>
		<link>http://stairwellblog.com/2009/05/flash-html-website-integration-best-practices/</link>
		<comments>http://stairwellblog.com/2009/05/flash-html-website-integration-best-practices/#comments</comments>
		<pubDate>Fri, 01 May 2009 18:03:22 +0000</pubDate>
		<dc:creator>steve</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[search engine optimization]]></category>
		<category><![CDATA[seo]]></category>
		<category><![CDATA[swf object]]></category>
		<category><![CDATA[swfAddress]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=1048</guid>
		<description><![CDATA[<p>Recently at Billups Design we built a fully functional HTML replica of a client&#8217;s flash site and were puzzled as to the latest and best practices for integrating that HTML site with the existing Flash site to ensure the greatest usability and SEO results. We had a few options that came to mind first.</p>
<ol>
<li>A splash page to allow the user to choose the HTML Site or the Flash Site.</li>
<li>A separate directory for the HTML Site to live that only Google would see.</li>
<li>A flash detection that would redirect the user to the HTML site if it didn&#8217;t have Flash, Google included.</li>
</ol>
<p>None&#8230;</p>]]></description>
			<content:encoded><![CDATA[<p>Recently at Billups Design we built a fully functional HTML replica of a client&#8217;s flash site and were puzzled as to the latest and best practices for integrating that HTML site with the existing Flash site to ensure the greatest usability and SEO results. We had a few options that came to mind first.</p>
<ol>
<li>A splash page to allow the user to choose the HTML Site or the Flash Site.</li>
<li>A separate directory for the HTML Site to live that only Google would see.</li>
<li>A flash detection that would redirect the user to the HTML site if it didn&#8217;t have Flash, Google included.</li>
</ol>
<p>None of these options were ideal. A splash page is a usability nightmare and putting the HTML site in a separate directory would still hurt users coming from Google results as the search engines would most definitely just send them to the HTML site, which defeats the purpose of having a Flash site in the first place. So instead we took some inspiration from Damien Bianchi at <a href="http://www.adobe.com/devnet/seo/articles/techniques_ria.html">Adobe.com</a> and put the HTML and Flash in the same directory using tricks to serve up the appropriate Flash content that cooresponded to each HTML page.</p>
<ol>
<li><span style="text-decoration: line-through;">A splash page to allow the user to choose the HTML Site or the Flash Site.</span></li>
<li><span style="text-decoration: line-through;">A separate directory for the HTML Site to live that only Google would see.</span></li>
<li><span style="text-decoration: line-through;">A flash detection that would redirect the user to the HTML site if it didn&#8217;t have Flash, Google included.</span></li>
<li>Flash detection to serve up the SWF or the HTML in the same page.</li>
</ol>
<p><strong>Creating the HTML Site.</strong></p>
<p>There were two goals in creating the HTML site.</p>
<ol>
<li>Improve SEO Results</li>
<li>Have a Good User Experience Fallback for Users Without Flash</li>
</ol>
<p>For the first goal it was just a matter of adding an HTML page to correspond to each &#8220;page&#8221; in the Flash version of the site. The HTML uses all static content, rather than pulling the content from the XML files the Flash version uses, so search engines won&#8217;t have any trouble reading it. We also took care to use the best practices for SEO HTML markup. That is, we used the appropriate heading tags, alt tags on images, etc.</p>
<p>The second goal was a little trickier. Flash is a great platform for smooth animations and unorthodox layouts. Thus, replicating its strenghts with HTML/CSS/Javascript can be a bit tricky. We put to use jQuery, a javascript framework, to make it a bit easier and reduce the heavy lifting of coding the advanced animations and DOM manipulation ourselves. We added in some various jQuery plugins like JScrollPane, jQuery Color Animations, and some other smaller ones to allow us to really replicate some of the cool things the Flash site did. Once it was all said and done we had a pretty good replica that forces you to look twice and even caught some people around the office here off guard at determining if the site if Flash or not. Once we knew it was hard to tell we figured we had created a pretty comparable user experience in HTML.</p>
<p><strong>Adding the Flash SWF to the HTML Site.</strong></p>
<p>Once the HTML Site was completed we had to add the SWF of the Flash Site to each HTML page. We wanted the site to have the HTML be static and the flash to replace it if the user had it installed. So we used SWFobject 2.0 to detect if the appropriate Flash version was installed and SWFobject replaced the container div of the HTML with the SWF file. Voila, we have all the benefits of HTML SEO with all the benefits of Flash. Now all we had to do was get the SWF to load the appropriate &#8220;page&#8221; depending on which HTML page it was on.</p>
<p><strong>Adding FlashVars to Load the Appropriate Page and SWF Address</strong></p>
<p>Since the Flash SWF loads on the homepage by default we had to find a way to tell the SWF that it wasn&#8217;t on the index.html page, but it was, for example, on the contact.html page. We added some simple FlashVars to each page with SWFobject to communicate with the SWF what page it was on. They looked something like this,</p>
<div class="codecolorer-container javascript mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="javascript codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="kw2">var</span> flashvars <span class="sy0">=</span> <span class="br0">&#123;</span>page<span class="sy0">:</span> <span class="st0">&quot;contact&quot;</span><span class="br0">&#125;</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
<p>Hey everyone, it&#8217;s Ryan <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  &#8230;.I secretly hacked in to Steve&#8217;s account and am posting in his newest blog. I&#8217;m kidding, as was the case with our Flash / HTML website integration, we&#8217;re gonna tag team this blog post like the <a href="http://4.bp.blogspot.com/_9GUr__JVdTE/SKOtGzVX7LI/AAAAAAAAAq0/tVK5IHuEVPM/s400/tt-lod01st-1.jpg">Legion of Doom</a>. I&#8217;ll help to shed some light on how we got our flash and HTML to play nicely together.</p>
<p>As Steve mentioned, we  used flashVars to pass in a page value (or string if you want to be exact). What we were really trying to accomplish was coming up with a universal link, that could be used outisde of the website, to funnel people in (regardless of what technology they may or may not have). We simply check the users machine for flash with swfObject and then serve them the best available technology (flash or HTML).  If it was flash, we used the flashVars string to help flag the correct page to  be displayed. I&#8217;m sure you&#8217;re sitting there thinking, how? Well it&#8217;s your lucky day, I&#8217;m about to explain how we went about accomplishing that.</p>
<p>For those familiar with <a href="http://www.asual.com/swfaddress/">swfAddress</a>, this code should look familiar to you&#8230;..</p>
<div class="codecolorer-container actionscript mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br /></div></td><td><div class="actionscript codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="kw1">if</span> <span class="br0">&#40;</span><span class="kw3">_currentframe</span> == <span class="nu0">2</span> <span class="sy0">&amp;&amp;</span> value == <span class="st0">''</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
<span class="kw3">play</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;<br />
<br />
<span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span><br />
<span class="kw3">gotoAndStop</span><span class="br0">&#40;</span><span class="st0">'$'</span> + value<span class="br0">&#41;</span>;<br />
<span class="br0">&#125;</span></div></td></tr></tbody></table></div>
<p>*****just as a note, the code plug in we&#8217;re working with isn&#8217;t friends with the ampersand. &amp;amp;&amp;amp; should simply be &#8216;&amp;&amp;&#8217;. I&#8217;m sure most of you caught it but I just wanted to point it out to avoid any confusion. It should be &#8230;&#8230;. if (_currentframe == 2 &amp;&amp; value == &#8221;).</p>
<p>If the current frame = 2 and the swfAddress JS is suppying a blank value, it just forwards you on to the next frame (which is the homepage). If it&#8217;s value is defined, it skips to that page. Easy enough right? Well, the dilemma was how could we get this to flag what page we wanted with a flashVars value without disrupting how the function would work throughout the site? If you haven&#8217;t noticed already, that SWFAddress.onChange function only appears once in your flash code and the flash platform allows you to &#8220;re-use&#8221; it by simply making a basic call to it &#8230;.like:</p>
<div class="codecolorer-container text mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="text codecolorer" style="font-family:Monaco,Lucida Console,monospace">SWFAddress.setValue('about');</div></td></tr></tbody></table></div>
<p>The function on frame 2 sends the &#8216;about&#8217; value through the onChange function and spits the user out on to the about page. If we wanted to modify that main function, we could be doing (and did on several occasions <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  ) some unforeseen damage to how the swfAddress will / would be able to function (beyond the home page). Obviously, we didn&#8217;t want that to be the solution for our end product. This really became one of those situations where it was just inevitable that we would really over think it before coming to a final conclusion. After a few random trial experiments, we unscrunched our foreheads, started laughing and realized how insanely simple this actually was to accomplish. So what was the solution?</p>
<p>We added a new key frame to the timeline (inbetween the swfAddress.onChange function and the home page). Well, it wasn&#8217;t THAT simple. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  Instead of just forwarding the site on to the home page after it went through that conditional check (if it had a blank value), we just ran it through a sifter so to speak. If it had a blank value, I wrote a switch statement that would match the HTML page&#8217;s flashVars value to it&#8217;s intended page inside the flash movie. When it flagged a match, it changed the swf address value and forwarded it on to the desired page (i.e. if the flashVars value was &#8216;contact&#8217;, we forwarded it to the contact page). Here&#8217;s an example of what I&#8217;m talking about&#8230;..</p>
<div class="codecolorer-container javascript mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="javascript codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="kw1">switch</span><span class="br0">&#40;</span>pageValue<span class="br0">&#41;</span><span class="br0">&#123;</span><br />
<span class="co1">//--------------</span><br />
<span class="kw1">case</span> <span class="st0">&quot;reservations&quot;</span><span class="sy0">:</span><br />
gotoAndStop<span class="br0">&#40;</span><span class="st0">'$'</span> <span class="sy0">+</span> <span class="st0">'/'</span> <span class="sy0">+</span> pageValue <span class="sy0">+</span> <span class="st0">'/'</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
<span class="kw1">break</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
<p>The reason this works is that there&#8217;s only one occasion where the functions if / else statement forwards on to the next frame? Anyone have a guess? When the page is initially loaded (aka doesn&#8217;t have a swfAddress value). Any other time it bumps down in to the else portion of the conditional, drops it&#8217;s page value off at the coat check and gets forwarded on to that specific page inside the flash movie by swfAddress (like it would if someone pressed a button inside the movie). The only time our function will ever be triggered is when the page is loaded and that&#8217;s exactly how we wanted it to be. Any other time the frame is skipped over by the function on the previous key frame.</p>
<p>Hopefully that all made sense. Here&#8217;s the listed steps if you got lost:</p>
<p>1.) Express a flashVars value in your HTML. In our case, we used a string of letters.<br />
2.) Use swfObject to check for flash.<br />
3.) Use swfAddress to generate unique deep links.<br />
4.) Add in a new keyframe between the sfwAddress value check function keyframe and the homepage keyframe.<br />
5.) Write a switch statement on your new keyframe that takes the flashVars value and matches it to it&#8217;s existing page in the flash movie.<br />
6.) Test, test, test.</p>
<p>Aside from the listed steps / examples, one place I would guess people will get hung up on is getting the added function / switch statement to move on to the home page (if that&#8217;s the desired effect). There are several ways you can accomplish it, so don&#8217;t over think it. I chose to just make the default state in the switch statement a play(); command.</p>
<div class="codecolorer-container javascript mac-classic" style="overflow:auto;white-space:nowrap;width:550px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="javascript codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="kw2">default</span><span class="sy0">:</span><br />
play<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
<span class="kw1">break</span><span class="sy0">;</span><br />
<span class="co1">//--------------</span><br />
<span class="br0">&#125;</span></div></td></tr></tbody></table></div>
<p>Easy enough right? You could also supply the index.html page with a flashVars value of &#8220;home&#8221; or &#8220;index&#8221; and check for it specifically. Either way works, so use which ever one you prefer.</p>
<p>If you have any specific questions, post them in a comment and we&#8217;ll try to get back to you. As always happy flashing! <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><br class="spacer_" /></p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2009/05/flash-html-website-integration-best-practices/feed/</wfw:commentRss>
		<slash:comments>46</slash:comments>
		</item>
		<item>
		<title>Planning and producing web apps &#8211; don&#8217;t be your own worst enemy</title>
		<link>http://stairwellblog.com/2009/04/planning-and-producing-web-apps-dont-be-your-own-worst-enemy/</link>
		<comments>http://stairwellblog.com/2009/04/planning-and-producing-web-apps-dont-be-your-own-worst-enemy/#comments</comments>
		<pubDate>Thu, 02 Apr 2009 15:30:25 +0000</pubDate>
		<dc:creator>charles</dc:creator>
				<category><![CDATA[Business]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Add new tag]]></category>
		<category><![CDATA[launching web sites]]></category>
		<category><![CDATA[planning]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=901</guid>
		<description><![CDATA[<p>We published this as a whitepaper a while back, but feel it still has the power to benefit any organization involved with planning and producing a web development initiative.</p>
<p>Perhaps the most costly and painful experience for any company initiating a new web project are the planning and launching phases. In the case of planning, different departments within the company (too many in some cases) are invited to early conceptual and business objective meetings. Each person has a different perspective. Each person has a different level of expertise. Personal and professional agendas get in the way, too. Draft after draft, plan&#8230;</p>]]></description>
			<content:encoded><![CDATA[<p>We published this as a whitepaper a while back, but feel it still has the power to benefit any organization involved with planning and producing a web development initiative.</p>
<p>Perhaps the most costly and painful experience for any company initiating a new web project are the planning and launching phases. In the case of planning, different departments within the company (too many in some cases) are invited to early conceptual and business objective meetings. Each person has a different perspective. Each person has a different level of expertise. Personal and professional agendas get in the way, too. Draft after draft, plan after plan go by the wayside with no agreement. After several months, it is likely the company still has no consensus blueprint and no vendor. The new web application seems farther away than ever.</p>
<p>It doesn&#8217;t have to be this way. But it often is.</p>
<p>Here we&#8217;ll explore some simple ways your organization can avoid the problems in the example above. Effective planning means more than generating flowcharts, analyzing market space, and generating a budget. It means managing people &#8211; your people. Maximize the contributions of each of your internal team members by first laying some easy-to-follow ground rules.</p>
<p><strong>Identify team members and build chemistry</strong></p>
<p>Deliberately set out to name each person who will sit in your planning phase meetings. Map out which department they come from and what their level of expertise is. It is not helpful to have a team member resist an aspect of the plan and then admit two weeks later that &#8216;he didn&#8217;t really understand that part of it.&#8217;</p>
<p>Avoid changing team members midway through the project also. Just like a good basketball coach doesn&#8217;t like to change his lineup midway through a season, you should emphasize continuity and team work over individual styles or department agendas.</p>
<p><strong>Champion the cause</strong></p>
<p>One of the biggest obstacles facing most web site projects is the lack of accessibility to the person in charge. Plans that took weeks or months to bring to fruition can be tossed onto the junk heap by a decision-maker who was not part of the formation process.</p>
<p>Not long ago, a very large company based in Colorado began planning and development for its six-figure web site. A team was identified, a vendor / consultant hired (us), and work was begun. Eight weeks later, with the architecture complete, the interface design complete, and HTML production 90% finished, the entire site was displayed to the real decision-maker in the company &#8211; the CEO. After only a few moments of contemplation, he vetoed everything that his employees and subcontractors had already completed &#8211; at great cost. The site&#8217;s color scheme, he argued, had to be identical to the colors of a local football team. Eventually, the site was completed, but not without unnecessary financial and emotional strain for everyone involved.</p>
<p>The problem was that the decision maker in the company was too busy to get involved, yet he maintained final authority over the project. Inevitably communication broke down between him and his team. Each decision they made, he undid a month later.</p>
<p>A better way is for the decision maker to champion the cause of the new site. He/She should be involved in the formation process of the site&#8217;s architecture, branding and functionality. They should always articulate their vision for the site to all members of the team. They should be attentive to team members&#8217; feedback. They should know their vendor and make expectations very clear. If none of this is possible given one&#8217;s busy schedule, then it is imperative to give authority to someone else. Couple that authority with accountability and you have successfully delegated management of the project.</p>
<p>Structure the working relationship</p>
<p>Another great way to avoid internal disputes during web application planning and development is to structure the working relationship between departments and individuals. Too often in the past, departments have come to loggerheads over the direction of a project. Then, the decision maker for the group allows one department to trump the other. His/Her first thought is, &#8216;I did the right thing. We&#8217;re back on the highway.&#8217; The truth is, you may be back on the highway, but you&#8217;re leaving key people behind at the rest stop.</p>
<p>Instead, work only on consensus. This can difficult at times, but in the long run it saves money, time and frustration. Schedule regular review and needs sessions with regard to the development project. Give each department time to report on their activity within the project and ask any questions. Then identify the list of items that require a decision for that meeting. Each item should require a vote before adjournment. In other words, get quick, concrete sign-offs to every part of your project from all involved departments. This allows for a smooth work flow from one phase of the project to the next. Better, it gets every department down on the record regarding past decisions. That makes back-tracking (one of a web site&#8217;s most fatal afflictions) nearly impossible.</p>
<p>Hire an expert</p>
<p>Building a web application that serves the technological and business needs of an organization is a lot harder than people think. Many employees will volunteer to head up things, or construct things, they are not prepared for. It is always true that bringing in an experienced consultant / developer is the fastest, cheapest and best way to build a web site, it is especially so if you determine that no one in your company is very experienced at that sort of thing.</p>
<p>An outside consultant / developer can effectively listen to each department&#8217;s needs and concerns and translate them into a plan that wins consensus. He/She can serve as judge and jury when internal teams clash, reasoning with them over larger goals and proven methods for reaching them. He/She imparts good work habits and productive thought processes to the previously inexperienced team. Apart from all this, he/she frees you up to focus on other important things.</p>
<p>&#8212;</p>
<p>Perhaps you have served on the cobbled committees of a company or organization that put together a complex web project recently. We&#8217;d love to hear about your experience and your ideas about how to improve the process!</p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2009/04/planning-and-producing-web-apps-dont-be-your-own-worst-enemy/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Creating Fluid AS3 Flash Layouts: The Basics.</title>
		<link>http://stairwellblog.com/2009/03/creating-fluid-as3-flash-layouts-the-basics/</link>
		<comments>http://stairwellblog.com/2009/03/creating-fluid-as3-flash-layouts-the-basics/#comments</comments>
		<pubDate>Fri, 20 Mar 2009 15:04:34 +0000</pubDate>
		<dc:creator>Ryan Nasipak</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://stairwellblog.com/?p=511</guid>
		<description><![CDATA[<p>When I first started developing in flash, there were inevitably things that just made me want to pull my hair out. Basic physics, Actionscript vs. timeline animation and embedding assets vs. creating them at run-time were just a few of the areas I really wrestled with early on. Part of the problem stemmed from a desire to go from 0-60 in 2 seconds (and that might be on the high side). I was like Nike, just do it. *** As a side, that reaches my corny joke quota for this blog&#8230;.so please, read on.</p>
<p>When I jump in to a project&#8230;</p>]]></description>
			<content:encoded><![CDATA[<p>When I first started developing in flash, there were inevitably things that just made me want to pull my hair out. Basic physics, Actionscript vs. timeline animation and embedding assets vs. creating them at run-time were just a few of the areas I really wrestled with early on. Part of the problem stemmed from a desire to go from 0-60 in 2 seconds (and that might be on the high side). I was like Nike, just do it. *** As a side, that reaches my corny joke quota for this blog&#8230;.so please, read on.</p>
<p>When I jump in to a project I&#8217;m really excited about, my patience (as a developer) is typically at an all-time low. I have always felt like (and sometimes still do) that I&#8217;m in a race against my own ideas. The longer I leave them in my head or on a piece of paper, the less likely they are to become reality.  This type of mentality inevitably leads to the late night coding sessions that all developers, at one point or another, experience. You know, the ones that single-handedly keep your favorite late night coffee chains in business. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>While I slowly developed a basic understanding of a lot of abstract concepts, what really gave me a lot of problems early in my flashing endeavors was taking that abstract concept and applying it to something practical. I understood, in it&#8217;s simplest form, why something was being done but I really struggled with taking that basic blanket concept and then plugging it in to one of my projects.</p>
<p>For one reason or another, understanding how to create a basic fluid flash layout really was a thorn in my side. I would find tutorials here and there that kind of taught me what I would like to know but the examples and explanations really left me with one or two questions that ultimately made me scrap the idea and move on to something else. After reading through some recent message board posts, I thought this might be a worthwhile topic to write about for some of the newer flashers out there. I would also encourage experienced developers to give this a read and add anything else (via comments) that might be worthwhile for anyone out there looking for a better understanding of fluid layout concepts.</p>
<p>As always, if you&#8217;re just starting out PLEASE don&#8217;t just rip through this post and download the source files. Why? Cause they&#8217;re not there. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  Trust me, I&#8217;m just as impatient as the next guy when it comes to this kind of thing but the most important part of learning development techniques is to fight the urge to just grab a file and try to use it (without understanding exactly what&#8217;s going on). I&#8217;ll do my best to explain things as thoroughly as I can and if you have questions on this subject, feel free to post it in a comment.</p>
<p>With all that said, lets get started&#8230;&#8230;</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;</p>
<p>1.) The first thing you need to do is create a new AS3 document in Flash. I&#8217;m going to assume that if you&#8217;ve got to this point in the blog that you can do that on your own but if not, here&#8217;s a hint&#8230;&#8230; File &gt; New &gt; Flash File (Actionscript 3.0) &gt; Click OK.</p>
<p>2.) Open up the actions window (Window &gt; Actions) if you haven&#8217;t already and lets add some code. ***In the spirit of learning, I&#8217;m not going to type out this code. I will prove screen captures for you to follow but a big step early on in the development learning phase is physically learning to type out your own code (and making it a habit to do so). If you don&#8217;t cheat yourself early on, it will really payoff later down the road as you continue to build applications / websites. Copying and pasting is convenient but it won&#8217;t help you learn as quickly.</p>
<p>With all that said, lets add some code&#8230;..</p>
<p>3.) The first thing we&#8217;re going to do is add an event listener, in this case Event.RESIZE, to the stage. This will allow us to track when a user modifies the size of the stage and act accordingly to adjust the elements that live in / on it.</p>
<p>To do this we&#8217;ll assign the (Event.RESIZE) event to the stage property via an event listener (stage.addEventListener). This is going to dispatch an event whenever a user does anything that modifies the height or width of our published flash document.</p>
<p>To add an event listener we first express the instance we want the event attached to (stage), what we are going to attach (.addEventListener), the type of event listener (Event.RESIZE) and the function we are going to trigger when the stage is resized (onResizeStage). If you have done it correctly, your actions window should look something like this:</p>
<div id="attachment_799" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-799" title="step001" src="http://stairwellblog.com/wp-content/uploads/2009/03/step001.jpg" alt="Add your event listener." width="625" height="18" /><p class="wp-caption-text">Add your event listener.</p></div>
<p>Next, we need to write our (onResizeStage) function that is fired by our (Event.RESIZE) listener. Then, we can put our trace statement inside it and track when the stage is re sized and what it&#8217;s updated dimensions are. We start writing a basic function in AS3 by using the reserved word (function). We then give the function a name, in this case (onResizeStage). I&#8217;m sure you&#8217;ve noticed the function name is the same as the one we expressed in the stage.addEventListener(Event.RESIZE, onResizeStage ); event. That&#8217;s because we want that function to be fired when the (Event.RESIZE) event takes place.</p>
<p>Next, we asign a variable name (evt:) to the event object and then express the type of variable it is&#8230;in this case (Event). If this doesn&#8217;t make sense to you, I would suggest reading about some more basic AS3 practices on <a href="http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/">Adobe LiveDocs</a>. Lastly, we tack on :void, as the function is not going to return any information and open and then close it with our brackets / curly braces {}. Your function should look like this:</p>
<div id="attachment_800" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-800" title="step002" src="http://stairwellblog.com/wp-content/uploads/2009/03/step002.jpg" alt="Write your (onResizeStage) function." width="625" height="53" /><p class="wp-caption-text">Write your (onResizeStage) function.</p></div>
<p>4.) We want to take the information that the function (onResizeStage) outputs for us and use it to reposition our objects. To show you how the (Event.RESIZE) listener works, lets plug in a trace statement to get some feedback in the output window. Tracing is simply a way for you to get feedback from Flash and it really is a great tool for testing. It will return requests to the output window and help you to understand exactly how this RESIZE function works. I would expect most of you know how to type a trace statement but if not, I&#8217;ll break it down as best as I can.</p>
<p>5.) Since we&#8217;re interested in adjusting an instances position based on the height and width of the flash movie, lets trace the height and width of our flash movie and watch how our RESIZE event handles it.</p>
<p>Inside the brackets of our (onResizeStage) function we&#8217;ll type trace(stage.StageHeight, stage.stageWidth). Anything typed in &#8220;quotations&#8221; in a trace statement will display as static text. It&#8217;s good practice to label what it is that you are tracing (with a static label) inside your trace statement. Why? Well, let&#8217;s do it without a static label and you&#8217;ll see why it&#8217;s advantageous, especially in a larger project, to thoroughly comment / label all aspects of your code.</p>
<p>Inside our (onResizeStage) function, let&#8217;s type the following:</p>
<div id="attachment_801" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-801" title="step003" src="http://stairwellblog.com/wp-content/uploads/2009/03/step003.jpg" alt="Write your trace statement." width="625" height="53" /><p class="wp-caption-text">Write your trace statement.</p></div>
<p>Now, lets compile it and look at our .swf. You should just be looking at a blank white screen (as we haven&#8217;t added any objects to the stage). If you do something to affect the height or width of the .swf, by maximizing it or dragging it&#8217;s edge, you&#8217;ll notice two numbers are being displayed in the output window when you let go of the mouse. One number is the height and one is the width. Which one is which? Well, do you remember which one went in to the trace statement first?  Even if you do, you can see how this can be really confusing without a relevant label.</p>
<p>Let&#8217;s put in a label and recompile our .swf.</p>
<div id="attachment_802" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-802" title="step004" src="http://stairwellblog.com/wp-content/uploads/2009/03/step004.jpg" alt="Insert labels in to your trace statement." width="625" height="47" /><p class="wp-caption-text">Insert labels in to your trace statement.</p></div>
<p>As I mentioned earlier, quotations allow you to add text that the trace statement will simply display in the output window. The key difference (quotes vs. no quotes) being that it displays it in the output window without carrying out an actual operation (such as retrieving the height or width).</p>
<p>We simply concatenate (add a + sign) to the strings we want the label to be associated with (ie. &#8220;Stage Height = &#8221; + stage.stageHeight). We then label stage.stageWidth as well (&#8220;Stage Width =&#8221;  + stage.stageWidth). It&#8217;s good practice to separate statements that are being traced by a coma. Why? Because it helps make things consistent and a lot more readable (for you or someone else that may work on the project). It also helps formatting in the output window, as a coma will insert a space in between multiple statements.</p>
<p>You could theoretically concatenate string after string (&#8220;Stage Height = &#8221; + stage.stageHeight + &#8220;Stage Width =&#8221;  + stage.stageWidth) but your output is going to be Stage Height = 415Stage Width =572 instead of Stage Height = 415  Stage Width =572. It&#8217;s a small detail but a good note on best practices.</p>
<p>6.) Now we have a better understanding of what&#8217;s going on with the RESIZE event and our triggered function, lets do some layout basics (finally!).</p>
<p>The first step is adding a few lines of code to let flash know we want to turn off / on a few default properties of the stage. The point of a fluid layout is to use the height and width of the stage to establish new layout positions and NOT to zoom in out / skew the movie clips, buttons, etc. To ensure objects are going to slide (left / right, up / down, etc.) in position and not scale up or down in size, we need to turn scaling off. This will allow our objects to move according to the stage width / height and not scale (50%, etc) as the stage gets bigger or smaller. To do this, we&#8217;ll simply type the small code snippet below:</p>
<div id="attachment_803" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-803" title="step005" src="http://stairwellblog.com/wp-content/uploads/2009/03/step005.jpg" alt="Specify stage properties." width="625" height="19" /><p class="wp-caption-text">Specify stage properties.</p></div>
<p>Now, for our last bit of code before we start adding some elements to the stage&#8230;..</p>
<p>The final little piece of code we need to express is to let flash know that we always want our movie to align to the left of the browser window. This ensures things anchored to the far left will stay on the far left and not reposition if the .swf file contained in our HTML page were to move. To accomplish that we simply set the stage to align to the TOP_LEFT.</p>
<div id="attachment_804" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-804" title="step006" src="http://stairwellblog.com/wp-content/uploads/2009/03/step006.jpg" alt="Specify stage properties." width="625" height="17" /><p class="wp-caption-text">Specify stage alignment properties.</p></div>
<p>7.) Still with me? Now lets create objects to drop on to our stage. We&#8217;ll start by making 2 separate movie clips, both 80px by 80px.</p>
<p>They can be any shape you&#8217;d like but for this exercise, I&#8217;m just going to make some colored squares (one blue, one red). Take the Rectangle Tool (R) and draw a blue box and a red box. Convert each one to a movie clip. You can do this a number of ways (key board short cuts, etc) but for this exercise go Modify &gt; Convert To Symbol and then give them names of boxBlue and boxRed.</p>
<p>***An important note here&#8230;..make the registration point the top left corner (see image below). Why? Because it&#8217;s much more flexible (in my opinion) then just centering the registration point. It causes you to have to do a bit more math when resizing a centered object but I&#8217;ll explain why it&#8217;s worth it in the long run.</p>
<div id="attachment_772" class="wp-caption alignnone" style="width: 571px"><img class="size-full wp-image-772" title="step007" src="http://stairwellblog.com/wp-content/uploads/2009/03/step007.jpg" alt="Convert your vector squares to movieclips. " width="561" height="171" /><p class="wp-caption-text">Convert your vector squares to movieclips. </p></div>
<p>Now, click on the boxes on the stage and give them instance names of boxBlue and boxRed in the property inspector. This is so they can be referenced by the actionscript code we&#8217;ll write.</p>
<div id="attachment_773" class="wp-caption alignnone" style="width: 544px"><img class="size-full wp-image-773" title="step008" src="http://stairwellblog.com/wp-content/uploads/2009/03/step008.jpg" alt="Give your movieclips instance names. " width="534" height="145" /><p class="wp-caption-text">Give your movieclips instance names. </p></div>
<p>Just to make sure we&#8217;re all on the same page, your actions window should look like this:</p>
<div id="attachment_807" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-807" title="step009" src="http://stairwellblog.com/wp-content/uploads/2009/03/step009.jpg" alt="Double check your source code. " width="625" height="134" /><p class="wp-caption-text">Double check your source code. </p></div>
<p>8.) The first fluid alignment I&#8217;ll discuss is centering an instance. For this first example, lets use our boxRed movie clip.</p>
<p>Now is where a little basic math comes in. To find the center of anything, you simply divide the width and height by 2. In our case, we want to divide the width and height of the stage to find the middle point at which to center our boxRed movie clip. The main thing we want to accomplish is re-centering our boxRed movie clip when the stage is re-sized. To do this, lets place some code inside our (onResizeStage) function.</p>
<div id="attachment_808" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-808" title="step010" src="http://stairwellblog.com/wp-content/uploads/2009/03/step010.jpg" alt="Source code to center your boxRed mc. " width="625" height="79" /><p class="wp-caption-text">Source code to center your boxRed mc. </p></div>
<p>***You might notice the grayed out text above. If you don&#8217;t recognize why that is, it&#8217;s because I commented it out with two // so it would no longer continue to trace the height and width of the stage. You could remove it all together but it&#8217;s good practice to leave important trace statements intact, just in case you need to trouble shooot (again) later in the project.***</p>
<p>Go ahead and compile your flash movie. If you re size your .swf movie (or the web browser, depending on how you prefer to preview your flash files) you&#8217;ll notice that the boxRed movieclip will adjust as the browser adjusts and the boxBlue movieclip will simply stay put.</p>
<p>You might look at it and say, why does it not look centered? (If not, you may need to fine tune your eye for document layout. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  ) I&#8217;ll explain (and illustrate) why that is. If you remember, earlier in the tutorial we specified the registration point of our movie clip(s) as the top left of our vector shape. So dividing the stage width and height (and adjusting the x and y of our movieclip accordingly) will simply center the top left corner of our object on the stage (see the figure below).</p>
<div id="attachment_776" class="wp-caption alignnone" style="width: 528px"><img class="size-full wp-image-776" title="step011" src="http://stairwellblog.com/wp-content/uploads/2009/03/step011.jpg" alt="Centering result vs. expected outcome. " width="518" height="257" /><p class="wp-caption-text">Centering result vs. expected outcome. </p></div>
<p>The expected out come was (fig 2.) while our actual result was (fig 1.). Now, before you go rushing through your file to change the registration point (to be the center of our object) or re-align the vector object to the center of the movieclip&#8217;s stage, let me explain why doing that is not that great of an idea (in my humble opinion).</p>
<p>By making the registration point of a movieclip the top left, it allows a designer (or developer) to layout objects on a typical (x, y) axis. If you have a movieclip with several different elements embedded in it, your movieclip&#8217;s stage will function as the main flash stage would (with 0,0) being the (x,y) coordinate of the top left of the stage. Maybe this doesn&#8217;t seem like such a huge advantage but let me illustrate the point to really drive it home. The figure below shows how you would have to align a second movie clip if your registration point was in the center of your instance.</p>
<div id="attachment_777" class="wp-caption alignnone" style="width: 337px"><img class="size-full wp-image-777" title="step012" src="http://stairwellblog.com/wp-content/uploads/2009/03/step012.jpg" alt="Potential layout issues with a center registration point. " width="327" height="257" /><p class="wp-caption-text">Potential layout issues with a center registration point. </p></div>
<p>If you center your movieclip&#8217;s registration point, the (x,y) of your second element would be (-35, -35), instead of simply (5,5). I hope you can see how that could get incredibly confusing if you&#8217;re trying to attach objects at run time or trying to consistently produce precise spacing in your imbeded objects.</p>
<p>If you&#8217;d prefer to center the registration point of your objects, then please do so. There&#8217;s not really anything wrong with it but it&#8217;s just my personal preference that using a top left registration point is much more advantageous, especially once we start talking about other aspects of fluid layouts (scaling an elements width, scaling an elements height, etc, etc.). Just be prepared to potentially have to do some extra math if you&#8217;re centering your registration points. I can only make a suggestion on what I consider to be best practice&#8230;..in the end, do it whichever way you&#8217;re more comfortable with but keep in mind the rest of this tutorial (past centering objects) will not include math fixes for objects that have a centered registration point.</p>
<p>Ok, so the question is&#8230;..how do we fix it (create an offset so the object displays in the absolute middle of our window)? It&#8217;s pretty simple really.</p>
<p>As I explained earlier, you find the center of an object by dividing it&#8217;s width and height by 2. Our boxes are 80px by 80px. So we&#8217;ll divide 80 by two (in both cases) and get an X offset of 40 and a Y offset of 40. So, now on to the part some might find tricky&#8230;&#8230;applying it to our equation so we get the desired result.</p>
<p>Based on the basic principles of a top left registered (x,y) grid, if you add to the x and y numbers it will move it right on the stage and down&#8230;..if you subtract from the x and y numbers, it will shift your object left and up (which if you look at the illustrated figure above) is the desired result we are looking for. So, all we need to do is subtract 40 from the center of our stage.</p>
<p>With all that said, lets type:</p>
<div id="attachment_811" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-811" title="step013" src="http://stairwellblog.com/wp-content/uploads/2009/03/step013.jpg" alt="Add your offset." width="625" height="79" /><p class="wp-caption-text">Add your offset.</p></div>
<p>Now recompile your FLA and adjust the size of your flash movie.</p>
<p>You&#8217;ll notice we get a much more precise result and the movie clip doesn&#8217;t appear to be off-center (now that we have compensated for the x and y offset of registering the movieclip on the top left). Easy enough right?</p>
<p>The reason I recommend doing it this way is that in almost all cases, you&#8217;re going to want a movieclip registered in the top left for the other effects i&#8217;ll go over. It&#8217;s easier to compensate for it on only a centered object than to compensate for it in every other iteration / alignment. I hope that makes sense and if it doesn&#8217;t, you should see why later on (when we start adding some more alignment solutions to the project).</p>
<p>Let&#8217;s finish off centering up an object with this last tip&#8230;..</p>
<p>Some of you might be asking, why doesn&#8217;t the movieclip center when the .swf file first compiles? Well, hopefully you have already realized why (because it only assigns a new x and y value when the stage is re-sized) but if not, I&#8217;ll give a (very) brief explanation. Flash has to be told what to do. A program like flash is only as good as the directions a programmer gives it and if you don&#8217;t give it any, it&#8217;s not going to do anything. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  In this case, it&#8217;s just assigning a default (x,y) value for our boxes (i.e. where they are placed on the stage inside our FLA) because we didn&#8217;t give it any specific directions to do differently. Let&#8217;s fix that so our object not only realigns in the center of our window on re-size but starts there from the beginning.</p>
<p>All we need to do is grab the .x and .y equations we just wrote for our boxRed movieclip and paste them outside of our (onResizeStage) function, just below our stage.scaleMode amd stage.align instructions. This lets flash perform the equation when the movie first loads and also when the stage is re-sized.</p>
<div id="attachment_812" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-812" title="step014" src="http://stairwellblog.com/wp-content/uploads/2009/03/step014.jpg" alt="Make sure your code is both inside and outside of our equation." width="625" height="89" /><p class="wp-caption-text">Make sure your code is both inside and outside of our equation.</p></div>
<p>Now recompile your FLA and your boxRed starts in the middle and stays there as the browser / window re-sizes.</p>
<p>If your head hurts, I understand but try to bear with me or better yet, take a break and come back to this point. If you&#8217;re stuck or having trouble getting your code to work, here&#8217;s what your actions panel should look like:</p>
<div id="attachment_813" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-813" title="step015" src="http://stairwellblog.com/wp-content/uploads/2009/03/step015.jpg" alt="Double check your code." width="625" height="201" /><p class="wp-caption-text">Double check your code.</p></div>
<p>You&#8217;re probably thinking, 13 lines of code?! 13 lines of code!? I know, it can be somewhat frustrating that something so simple could take so long to explain but understanding the basic fundamentals of many of these concepts will apply across a multitude of other projects you are bound to take on (both willingly and unwillingly). Understanding the fundamentals of why something does (or doesn&#8217;t work) will really help you problem solve (on your own) down the road. In the end, figuring things out by yourself is one of the most rewarding aspects of programming.</p>
<p>With all that said, let the impatient crowd rejoice&#8230;..the next few examples will be much faster paced but I will be sure to hit on all side info relevant to how the concept works.</p>
<p>9.) The next fluid alignment we&#8217;ll touch on is adjusting the width on an object to the browsers / .swf files width. This is especially helpful when creating navigational elements, such as a background color that might sit just behind your nav text / buttons and scale full width to the browser.</p>
<p>This only takes 2 more lines of code (yay). In this case, we&#8217;ll grab our boxBlue and use it for this example. Position it on your stage at (0,0) and add the following code (one line for when the movie initializes and one line for when the stage / browser is resized&#8230;..just as we did with the boxRed movieclip):</p>
<div id="attachment_814" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-814" title="step016" src="http://stairwellblog.com/wp-content/uploads/2009/03/step016.jpg" alt="Adjusting an mc's width based on the stage's width." width="625" height="19" /><p class="wp-caption-text">Adjusting an mc&#39;s width based on the stage&#39;s width.</p></div>
<p>A friendly reminder. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  Make sure you double check that your line of code appears both inside and outside of your (onResizeStage) function, just as we have done for all the other steps. If it doesn&#8217;t, copy and paste it in to the appropriate place.</p>
<p>The above concept is a simple one. We want the width of our blue box (boxBlue) to be the same as our stage. We calculate the width of the stage with the stage.stageWidth property and apply it to our box (boxBlue.width =  stage.stageWidth;). When you recompile your .swf, you&#8217;ll notice that the width of our blue boxes stretches with the stage.</p>
<p>10.) Next up, right justify.</p>
<p>We&#8217;re gonna have to make a new box for this one, as we want to retain what we&#8217;ve already done. Lets make another 80px by 80px box. This time, I&#8217;m going to make it Orange. Once you have made an orange box, convert it to a movieclip, top left justify it&#8217;s registration point and give it an instance name of boxOrange. Done? Lets write another small snippet of code (again, just 2 lines).</p>
<div id="attachment_815" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-815" title="step017" src="http://stairwellblog.com/wp-content/uploads/2009/03/step017.jpg" alt="Right justify an mc based on the stage's width." width="625" height="19" /><p class="wp-caption-text">Right justify an mc based on the stage&#39;s width.</p></div>
<p>Another friendly reminder. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  And yes, again! Make sure you double check that your line of code appears both inside and outside of your (onResizeStage) function, just as we have done for all the other steps. If it doesn&#8217;t, copy and paste it in to the appropriate place.</p>
<p>Here&#8217;s where the left registration point comes in handy again. To position our moveiclip to float on the right side of our stage, we simply use the stage.stageWidth property and subtract the width of our object (80px). That 80px offset simply bumps our object 80 pixels to the left of the far right edge of the stage. I hope all this is starting to click in your head now and you&#8217;re thinking of different ways you can position / anchor things on the stage.</p>
<p>11.) The last alignment solution I&#8217;m going to go over is aligning something to the bottom of the browser (i.e. something like a footer).</p>
<p>Lets make another 80px by 80px box. This time, I&#8217;m going to make it Green. Once you have made an green box, convert it to a movieclip, top left justify it&#8217;s registration point and give it an instance name of boxGreen. Give it a x value of 0, so that it aligns to the far left of our stage.</p>
<p>As a side not, I would start getting in to the habit of doing this programmaticly by simply typing boxGreen.x = 0; I decided to skip those steps in an effort to keep this tutorial as lean and mean as possible (but just wanted to mention it somewhere). I would guess most of you are already doing such things (without instruction) but I wanted to make sure I gave it a brief plug.</p>
<p>Again, once you understand the basic principles of what we&#8217;re doing right now, you should find it fairly easy to not only understand these basic concepts but also to implement more advanced ones in your projects.</p>
<p>To align something to the bottom of the movie and stretch it to to the width of the stage, we&#8217;re only going to need 2 lines of code. 1 to adjust the width and 1to adjust it&#8217;s y position in relation to the stage&#8217;s height. Easy enough right?</p>
<p>Let&#8217;s crank out the last few lines of code (I know, it&#8217;s about time) for this!</p>
<div id="attachment_816" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-816" title="step018" src="http://stairwellblog.com/wp-content/uploads/2009/03/step018.jpg" alt="Aligning an mc to the bottom of the browser window." width="625" height="37" /><p class="wp-caption-text">Aligning an mc to the bottom of the browser window.</p></div>
<p>Psst. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' />  Make sure your code appears both inside and outside the function. Sorry, I had to. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Congratulations! Not because you&#8217;re done but because this (next short info blurb) is the last small explanation you&#8217;ll have to plod through. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>I have confidence that most of you thoroughly understand how this is now working but just in case there is someone out there looking for this last bit of instruction, I&#8217;ll explain why I&#8217;m doing what I am to get our desired result.</p>
<p>The stage.stageHeight property returns the size of our stage, as it appears in the browser. Because we want our object to hug / appear at the very bottom of the stage, we simply use that number and subtract the height of our object. Why do we subtract? Because in a traditional (x,y) grid you subtract to move up, add to move down&#8230;..because our object is justified in the top left corner, we need to subtract it&#8217;s height or it will be aligned at the bottom of the stage, out of view. If you are having trouble understanding this concept, just remove the (-80) on the equation and recompile it.  It will appear as the object disappeared but really it&#8217;s just aligning the leading top edge of the movieclip to the very bottom of the stage / browser window (fig 2.). See the figure below for a visual representation. The colored red area is off of the visible part of the stage inside the browser.</p>
<div id="attachment_862" class="wp-caption alignnone" style="width: 528px"><img class="size-full wp-image-862" title="step021" src="http://stairwellblog.com/wp-content/uploads/2009/03/step021.jpg" alt="-80 offset explained." width="518" height="257" /><p class="wp-caption-text">-80 offset explained.</p></div>
<p>12.) If you&#8217;ve got to this point and didn&#8217;t get everything to work, here&#8217;s the final code sample posted below. Hopefully you didn&#8217;t have any problem following along but if you did, compare your actions panel to the one below and see where you got tripped up.</p>
<div id="attachment_817" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-817" title="step019" src="http://stairwellblog.com/wp-content/uploads/2009/03/step019.jpg" alt="Final source code." width="625" height="338" /><p class="wp-caption-text">Final source code.</p></div>
<p>13.) The last step in all of this is changing the height and width listed in our HTML file. Flash publishes a pixel by pixel output in the HTML file it spits out that relates to the document size listed in our FLA file. Because we want the stage to be equal to the height and width of the browser we just need to make one quick change. Instead of having our height and width be in a pixel format, we simply want it to display to 100% of the browsers width and height.</p>
<p>Our specified height and width appears THREE times on the page, so don&#8217;t miss one set&#8230;..it could cause problems down the road depending on what browser the end user is viewing your project on. If you need specific directions you&#8217;ll find it once in the AC_FL_RunContent function and twice in the object id tag.</p>
<div id="attachment_872" class="wp-caption alignnone" style="width: 635px"><img class="size-full wp-image-872" title="step020" src="http://stairwellblog.com/wp-content/uploads/2009/03/step020.jpg" alt="Change the height and width settings in your HTML doc to 100%." width="625" height="265" /><p class="wp-caption-text">Change the height and width settings in your HTML doc to 100%.</p></div>
<p>One last fix&#8230;&#8230;&#8230;.</p>
<p>By default, a margin of 10 pixels is sometimes assumed. To turn those margins off, so our file hugs the endpoints of our browser, we just need a short piece of CSS. Include this just before the close of your HTML page&#8217;s head tag:</p>
<pre name="code" class="css">

&lt;style type=&quot;text/css&quot;&gt;
&lt;!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
--&gt;
&lt;/style&gt;
</pre>
<p>If you&#8217;re having trouble with this part, just view the HTML source in the working link posted below.</p>
<p>For a working example of how your file should look, <a href="http://labs.billupsdesign.com/tutorials/fluidFlash/" target="_blank">click here to view my final tutorial .swf file.</a> Resize the window and our objects are sliding / scaling as they should. hopefully your file looks exactly the same! If not check back soon (see my p.s. note) as this will most likely be an ongoing tutorial subject that I update with newer blog entries.</p>
<p>Cheers! and as always, happy flashing!</p>
<p>Ryan</p>
<p>P.S. If there&#8217;s a large request for source files, I will post them a few days after the blog has gone live. I&#8217;ll also swap out the images with source code&#8230;&#8230;..BUT until then, invest in your professional skill set and learn how and why you&#8217;re doing the things you are. <img src='http://stairwellblog.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>EDIT: Commented source file can be <a href="http://labs.billupsdesign.com/tutorials/fluidFlash/as3_fluidLayout.fla.zip" target="_blank">downloaded here.</a></p>
]]></content:encoded>
			<wfw:commentRss>http://stairwellblog.com/2009/03/creating-fluid-as3-flash-layouts-the-basics/feed/</wfw:commentRss>
		<slash:comments>33</slash:comments>
		</item>
	</channel>
</rss>

