Nate Berkus Associates

I recently picked up Nate Berkus Associates and Entertainment as a great client and am proud to announce the release of our first project together, nateberkusdesign.com. This is a new site presenting the work of the interior design firm based here in Chicago.

I used the Gaia Flash Framework for the first time with this site, and it won’t be the last. It knocks a couple days off of development time because of its navigation flow, baked in SWFAddress, and asset loading. With it’s event hijacking, you aren’t limited to a strict event flow and can still get your site to do what you want.

This project may have ruined “The Summer of Patrick,” but it was worth it. Keep an eye out for Nate’s new show premiering next month!

Tweening to a Relative Position using a Variable in TweenMax

This isn’t too complicated, but it’s something I hadn’t come across until a few days ago. If you want to tween an object relatively, but the new value changes and needs to be a variable, just cast it as a string.

// Your everyday absolute tween that moves movieclip_mc
// to 100 on the x axis, taking one second to do so
TweenMax.to(movieclip_mc, 1, {x:100});

// A relative tween that moves movieclip_mc to a
// position on the x axis 100 units/pixels greater
// than movieclip_mc's current position
TweenMax.to(movieclip_mc, 1, {x:"100"});

// An absolute tween like the first, but passing in
// the new value with a variable
TweenMax.to(movieclip_mc, 1, {x:newX});

// A tween that casts the variable as a string,
// thus making it a relative tween
TweenMax.to(movieclip_mc, 1, {x:String(newX)});

If you’re not using TweenMax/TweenLite, do yourself a favor and give it a try.

Flash Preloading Errors? Turn Off gzip.

While finishing up a project a couple months ago, I ran into a problem trying to preload a SWF. Everything worked fine in my development environment. I was throttling my bandwidth using Charles to test things, and the preloader was working as expected. But when I posted it to staging my Flash preloader was broken. My loading bar was animating backwards and my percentage was coming back as infinity.

So what gives? Well, the staging environment was serving SWFs with gzip compression and this was messing up the bytesLoaded and bytesTotal properties that my preloader SWF was trying to read from the main SWF. Different browsers reacted differently too. Some saw bytesTotal as 0 (IE), which is what gave me the infinity percentage (dividing bytesLoaded / 0 will give you Infinity), while others reported bytesTotal as the same as bytesLoaded (Firefox). Hard coding a fake bytesTotal was my temporary fix.

To check to see how your server is sending your files, you can use Charles to inspect your web traffic. Here’s the one that was breaking because of gzip compression:

A SWF served with gzip compression will cause preloading errors.
A SWF served with gzip compression will cause preloading errors.

And here’s what it should look like:

A SWF correctly served without gzip compression.
A SWF correctly served without gzip compression.

I originally thought the issue was with the SWF being served with the wrong MIME type of “text/plain” but changing that didn’t fix my problems. The moral of the story is to check these server settings before wasting a Saturday (Gasp? Working on a weekend?) trying different versions of a Flash preloader and waiting for staging to build the site after each try.

Easily Test & View Alternative Content while Using SWFObject

SWFObject is great. I’ve been using it to embed Flash content in my pages since the IE / Eolas “click to activate” thing when it was still called FlashObject.

But SWFObject is missing a feature. It’s not easy enough to test your non-Flash alternative content. You can bump up the required version number to one that doesn’t exist yet, which is a good way to make sure your expressInstall.swf is working. Or you can follow the directions in their FAQ and disable JavaScript or the Flash Player (17. How to disable Flash Player or JavaScript, e.g. to test alternative content?).

Those solutions take a bit more effort than should be required. What if you want to show a client at another location the alternative content? I’d rather send them a link than walk them through disabling/enabling their JavaScript. And what if you want to take it beyond just testing, and give your users in a live environment the option to view the non-Flash content?

Here’s what I do. The SWFObject API includes a useful method to get query string parameters, ingeniously called getQueryParamValue(), which can be used to grab query string information and then pass it into the SWF via the flashvars array. In this example, I use the method to determine whether or not to embed the SWF in the first place.

Your standard SWFObject embed code will look something like this:

<script type="text/javascript">
	var flashvars = {};
	var params = {};
	var attributes = {};
	attributes.id = "flashContent";
	swfobject.embedSWF("flashContent.swf", "alternativeContent", "100%", "100%", "9.0.28", "expressInstall.swf", flashvars, params, attributes);
</script>

Here’s my version with a simple if statement to determine if the non-Flash content should be shown.

<script type="text/javascript">
	var flashvars = {};
	var params = {};
	var attributes = {};
	attributes.id = "flashContent";
	if (swfobject.getQueryParamValue("viewAlt") == "true") {
		// This lets us test the alternative content. If "viewAlt" is true in the query string, we don't allow SWFObject to replace the alternativeContent div with the Flash content.
	}else{
		swfobject.embedSWF("flashContent.swf", "alternativeContent", "100%", "100%", "9.0.28", "expressInstall.swf", flashvars, params, attributes);
	}
</script>

So all it takes to view and test the alternative content is to throw ?viewAlt=true at the end of your URL. This will stop SWFObject from ever trying to embed your SWF.

Here is an example of this process in action.

And here is the source.

Forcing Vertical Scrollbar Gutter to Show to Prevent Page Shift while Using swffit

Update: This fix is no longer necessary. When explaining it to a coworker, we discovered a new version of swffit with a new method called showScrollV() that does the same thing.

A common problem with centered web site layouts is what’s been dubbed “page shift.” This happens as users move among pages that are too short for a vertical scrollbar and those that are long enough to require them, or when a page has expanding and collapsing content which forces the scrollbar to appear and disappear as the content is manipulated. When the scrollbar’s state changes, the page recenters itself so the content jumps back and forth horizontally.

Page shift is especially distracting on a page where the content resizes without refreshing the page (like in Flash) because you can see everything move. When you’re clicking through different pages, it’s not as big a deal because a new page wipes out items for a split second before the shift occurs. Nonetheless, it can be distracting and there is a CSS fix for it.

html {
overflow-y: scroll;
}

This tells the browser that we’ll be scrolling things vertically, so keep the y scrollbar ready (IE always keeps the scrollbar gutter there, but it’s an issue on other browsers).

When it comes to Flash sites, using the browser’s built in scrollbars is a great technique. Some people like to create their own scrollbars in Flash, but that takes time and things get a bit more complicated when you want to get the scroll wheel working. Why not use the built in version, whose usability is already established, instead of reinventing the (scroll – heh) wheel?

Luckily we have a great script, swffit, that can help us use our browsers’ scrollbars by allowing us to change our SWF’s height on demand. Unfortunately, swffit overwrites the CSS that fixes the page shift problem, so I had to adjust the script a touch. In swffit.js, search for

html.style.overflow="auto";

and change it to

html.style.overflowX="auto";
html.style.overflowY="scroll";

and you’ll be able to use swffit without seeing any page shift.

Caterpillar Progress Site Recognized in Step Inside Design Magazine’s 2008 Best of Web

Our Caterpillar Progress site made Step Inside Design Magazine’s 2008 Best of Web list. Read about it here or below.

2008 Best of Web: The Winners (cont’d)

Caterpillar Progress Site
VSA PARTNERS
Caterpillar’s signature-yellow construction and mining machines are icons of American industry: For more than 80 years, that equipment has been building the world’s infrastructure. In 2005 VSA Partners helped create the company’s first global reputation campaign in a decade. Specifically, the campaign targets audiences worldwide who are not aware of Caterpillar’s status as a global, environmentally conscious, technologically sophisticated company, or of its contributions to economic and social progress. The campaign, “The World: In Progress,” consisted of print, out-of-home and radio advertising. Launch of the campaign’s website in March 2008 marked the beginning of a bold online presence designed to further strengthen Caterpillar’s reputation.

The VSA/Caterpillar partnership encompassed the development of Caterpillar’s strategic intent as a company, internal and external research, development of communication strategies and creative execution across employee, dealer and public audiences. The World: In Progress reflects corporate strategy and values. It recognizes that progress can mean different things to different people. For a small African village, it could be a road that connects the town to a larger economy. For a developing nation, it could mean finding alternative means to meet growing energy needs. The campaign emphasizes that no matter what form progress takes, Caterpillar makes it possible. It’s this potential of what the world can be that is the idea behind the campaign. “The campaign focuses on expanding Caterpillar’s strong reputation beyond what it makes, to what it makes possible,” says VSA creative director Patrick Heick.

The design of the website reflects the Caterpillar brand: simple, bold, aspirational. “We were charged with telling compelling stories of the progress Caterpillar makes possible throughout the world,” says VSA creative director Dave Ritter. The VSA team traveled from China and Africa to South America to document the ways in which Cat equipment impacts the quality of life and standard of living for millions of people … and the site brings these stories to life. Large-scale videos coupled with minimal text make this site an engaging experience, rather than a text-heavy report. In addition to the videos, the site is enhanced with fun, interactive maps, 3D diagrams and stunning photo galleries. “What was the best part of doing this job?” asks VSA creative director Jonathan Turitz. “Creating a site that lived up to the engaging stories we were telling.” Terry Lee Stone

VSA PARTNERS | CREATIVE DIRECTORS: PATRICK HEICK, DAVE RITTER, JONATHAN TURITZ | STRATEGIST: KRISTEN GROH | DESIGNERS: BRANDT BRINKERHOFF, ERIC FLEGEL, PETER TY, JONATHAN SLUYS | PRODUCER: HARVEY LEWIS | DEVELOPERS: MATTIE LANGENBERG, PATRICK MCDONALD | PROJECT MANAGERS: CHRISTA PETTIS, CHRISTINA BRINKERHOFF | WRITERS: JONATHAN TURITZ, HEATHER WILSON, DANIEL HARMON | CLIENT: CATERPILLAR | WWW.VSAPARTNERS.COM

Caterpillar Progress Launches

I’ve been working on this one for the last few months. This is my first use of SWFAddress which is pretty slick, though we’re having some issues with URL redirects and frames that we have to use in the live environment. It works great in my testing environment though!

This as a deep and complicated site. Here’s what’s in there along with some of what I learned.

  • I created a custom photo gallery/image viewer (in the Great Rivers and Madagascar sections) which loads images, and when they are viewed, compares the dimension ratio of the pic to the viewport to determine how the photo should be resized and animated.
  • The video player is a re-skin of the FLVPlayback components. The designers put an empty spot on either side of the seek bar handle which was a trick to figure out. The solution was to use blend modes to erase the necessary area.
  • The text is loading via XML because we will be updating the site later with other languages.
  • I learned a lot about encoding videos for Flash using Quicktime Pro and On2 Flix Pro to get things done.

Update: Added a few languages

Update 2: Added a few stories and changed the menu navigation. The menu is no longer a global piece that drops from the top. Now you have to return to the menu page.

Technologies used:

  • Flash CS3 / AS2
  • SWFAddress
  • SWFForceSize
  • On2 Flix Pro for FLV Encoding
  • XML

The Peshtigo Home and Banners

Working with Design Kitchen I did the Flash portion of the Peshtigo’s site (a new building in Chicago). The building pop outs are defined in an external XML file. Fuse was used for animations as well as an external drawing class for other effects.

I also did a series of banner ads of different sizes matching the one below for the building.

Technologies Used:

  • Flash CS3 / AS2
  • Fuse Kit

Brookfield Zoo Explorer

Here is a nice piece I’ve been working on at DK for the next version of the Brookfield Zoo’s site.

The cool part is the scrolling zoo explorer. Click the “Zoo Explorer” tab at the top left and then play with the scrolling functionality at the bottom left. I had to use a combination of enter frame events, setInterval, and tweening to get the right feel. Notice the elastic bounce when you hit the end of the slider. And notice that the momentum / inertia increases as you hold down the buttons. The animal scroll bar is built dynamically, with paths to each animal’s SWF file, its name, and its link defined in the XML. As each animal loads, the slider is dynamically resized, and animation variables adjusted.

The rotating images under “What’s New” and their respective links are defined in an XML file. Under the “Zoo Explorer” the text and links in the drop down (or up) are defined in another XML file. As the file is parsed, the menu is built dynamically to the correct size.

Technologies Used:

  • Flash / AS2
  • Fuse Kit
  • XML

Update: The new Brookfield Zoo site is up. Here is the live zoo explorer with a Noah’s Arc-boatload of animals. One improvement I could have made would be to have used 9-slice scaling for the roll over background rectangles behind each animal. Oh well.