Here are my picks for the best interactive music videos to-date.

Arcade Fire’s Neon Bible http://www.beonlineb.com/ You’re left looking into a face and two hands and must explore the countless interactions possible all in-sync with the song.
Cold War Kids http://coldwarkids.toolprototype.com/ The beat-mixing rhythm machine has certainly been done before… but not like this. A single song runs throughout, but you control each individual member of the band, dictating when it’s time for one person to switch to marimba, and when a jazz groove would complete your remix.
The Johnny Cash Project http://www.thejohnnycashproject.com Tens of thousands of frames were individually sketched, painted, and submitted by fans to create a truly unique collaborative experience. As you watch the music video, you can choose from what types/themes of art you would like to compose your individualized Johnny Cash video.
Arcade Fire’s The Wilderness Downtown http://www.thewildernessdowntown.com This revolutionary Chrome-only website begins by allowing you to wander down the streets of your youth via Google Street View, and eventually claims your entire screen as its canvas.
Broken Bells’ October http://www.brokenbells.com/october/ The Windows Media Player Visualizer has come full circle. Admittedly slow to start, the video brings you through a user-unique laser light show complete with astronauts, mountains, and arithmetic.
Au Revoir Simone’s Knight of Wands http://www.theknightofwands.com/ Part music video, part coloring book.  This fairy tale style treatment is less interactive than some of the aforementioned pieces, but it’s enthralling nonetheless.

To learn more about the different categories of enriched online advertising, check out a Quick Start overview to online ad formats here: http://www.sundog.net/our_knowledge/whitepaper/rich-media-strong-roi/

So now you should probably make sure they make it through your preloader, see your sexy content, and not already be annoyed when you get there.  The name of the game is giving the user the feeling that they’re still moving towards that goal.  Don’t leave them thinking nothing is happening, or worse yet that there’s a problem.  Try these methods to make that wait feel shorter, when you can’t optimize your site any further without sacrificing your soul. 

Please note that you need to go through steps to optimize your site, in all instances.  Don’t use these method instead of real load-time optimization.  Do both.

When you build your site, you know exactly where the heft of it is, or at least you should.  You likely have a set-up similar to this
1. HTML page (Tiny)
2. Javascript libraries(Tiny)
3. CSS libraries(Tiny)
4. Preloader SWF(Tiny)
5. Main SWF (Legit , ~60k)
6. Graphics for HTML (Legit , ~60k)
7. External files for Flash (Images/FLV) (Usually, the heft of the site)

Staged Initial Preloaders

Changing Labels
Just tell them what’s happening.  Let them know you’re downloading system data, and icons graphics, and now you’re downloading the host video.  It can help build the excitement and mystery, rather than disuade.

Distraction
Have them fill in a questionnaire (or opt out), play a mini-game, or even play a small movie to supply them an activity while they’re waiting. 

Weighted Percents (In Flash Preloader)
You’re really only loading to 60%, the last 40% is added incrementally after a certain period of time. This basically allows the user to see perpetual movement, even if you’re stalled on a large file request.  See a sample implementation below:

It’s been nearly two months, and no major social media site has announced any changes.  Gmail, MSN/Hotmail and YahooMail all have been going by this standard for years.  Why would social media outlets feel that it’s not an issue worth addressing?

“If Facebook was using encryption[...] this would not be a problem,” says Eric Butler, the developer of Firesheep.  He was interview about his free software, “The people who really need to watch [the below] video is Facebook, they’re the ones making this possible”

So, what’s the solution?  Mainly, don’t connect to non-secured networks.  If you don’t have that option use a browser extension like Force TLS(Firefox), HTTPS Everywhere(Firefox), or KB SSL Enforcer(Chrome)  Go forth and protect yourself!

Obviously, there are many ways to distribute fonts for internal use (For instance, the font Meta came installed on any new computer at several corporations I’ve worked at, as it was the preferred font for that brands’s correspondance)  But for a no-nonsense quick and easy solution, you should target the fonts you expect to already be installed on the user’s side.  Remember that not all internal memos stay internal, so you’ll need to think about font popularity outside your company as well as in.  When looking to modernize your stationary, be sure that font issues won’t cause problems with layout or other discrepancies between what you think is being seen and what’s actually showing at your client’s door. 

WIth that in mind, I present a quick list of the installed fonts you can expect, given the current OS usage and the fonts associated with each.  Below are the top 10 fonts (the 11th & 12th, Arial Narrow and Century Gothic, were noticeably behind in usage)

Font - Percentage of computers with fonts installed*

1. Verdana - 99.55%*
2. Times/New Roman - 99.33%*
3. Arial - 99.18%*
4. Trebuchet - 98.95%*
5. Lucida - 98.87%*
6. Georgia - 98.75%*
7. Impact - 98.29%*
8. Arial Black - 98.11%*
9. Tahoma - 98.00%*
10. Palatino - 96.95%*

*Percentages of Mac vs PC usage were determined using statistics from AT Internet Institute,
Clicky Web Analytic, Net Market Share, Global Stats, StatOwl, W3Counter, Webmasterpro &l; Wikimedia, against percentages of use per OS listed extensively below. 

Full stats for Mac and PC below

notes above taken from here, additional statistics from Mircosoft, Microsoft 2.

1. Create computer performance personas
First of all, just like with any web-project you need to define who you’re designing for.  Make 3 to 5 personas of likely or desired users and what they’re technology limitations are. 
? Examples of Personas
? Work Surfer - T1 connect - Dell Laptop less than 2 years old
? Affluent Hardwired -  Cable - High-End, Mac Laptop
? Coffee Shop - Wireless Access - Avg PC Laptop
? College Kid - DSL Shared Network Access - New PC Laptop
? Farmer - Dial-up - 5 yr old desktop
? From your targeted personas, do a bit of research as whether or not you’re fully, partially, or supporting elements such as monitor dimensions, connection speeds, and graphic processor speed.  Use that info for elements 2-6, they’re at the top for a reason.

2. Processor load
By far the biggest issue with Flash-based microsites looking to push the limits is thinking not of the load time, but the GPU speed of the end user. Not estimating the work you’ve left for Flash to figure out client-side can easily lad you down the path of some of the MOST OBNOXIOUS Flash experiences still online.  There may be plenty of scientific or technical ways to test the amount of strain, but the most important facts is this:
? For any persona you are targeting no website should ever claim more than 40% of the processor capacity. 
? Consider GPU processor optimization
? Avoid animating gradients or gradient overlays, and transparent PNG/GIF (which are converted to BMP)  Flash video display gets processor heavy the same way Video files increase in file size the more pixels that need to be recalculated the larger the strain.
? Rasterize Vector graphics and import as BMP.  While you might think of raster graphics as a filesize hog, you can actually see a significant performance savings when you flatten particularly complex vectors.
? Ensure you are Caching Movieclips as Bitmaps, or blitting, where appropriate

3. Download size/bandwidth
Question the payload.  It undoubtedly loads great when it downloads from your T3 ad agency connection, or even your cable connection at home, otherwise you would have already thrown up a red flag.
? More than 25 seconds for any persona and you’re definitely pushing your consumer’s patience. 
? Be sure that Reduce unnecessary image quality, consolidate fonts to as few as possible.
? Identify if you really need to load everything you’re loading before the website reveals.  Otherwise download those in the background, or load specific sections based on user interaction after the initial page has been displayed
? Part of webpage loading is psychological Preloader Psychology
? Stage the initial preload.  Have the HTML load some external resources, with a simple loading animated GIF, then, have the Flash preloader start-up.  Make each group of elements that are loaded,
? Psychologically people want to see the download go faster and faster.  So do what you need to feed them that perceived progress.  ;)  Play with the math in the displayed progress,

4. Please telling me that you’re QA’ing in a server environment that you’re deploying in.  Please? 
Flash microsites can be easily running off of 5 or more server groups.  Your html may be hosted on the main website’s Content Management System, while your primrary graphics and SWF’s on a mirrored content delivery system, your css library may come from Google Code, video streaming from YouTubeThere, etc, etc. 
? There are cross-domain, security, and just miscellaneous anger that will arise if you think that you can transition from what works well on your computer or your one-server remote testing, than with 2-3 servers that may be
? DO NOT TEST LOCALLY EVER
? Set it up in a legitimate equivalent to the final publish environment

5. The Reveal
Perhaps the greatest advantage of Flash how easy it is to make a smooth and sexy frist impression.  Don’t miss out. 
? Load components before displaying
? Video Components are among the most likeliest of offenders.  And uncontrolled changing of streaming video can go nuclear, show frames of old videos or give quick flashes of unprofessionalism. 

6. Abrupt transitions
Most things should fade or transition, if it just flips on or off, please question it
? Once again, this is Flash.  And hopefully, we chose a more elegant front-end solution to make a more elegant app.  Transitions don’t have to complex,  but a quick alpha fade never hurt a soul.  So designers and devs, make it happen, QA guys scream murder when it doesn’t. 

7. Click between two/more states quickly
Often times you can seriously confuse a poorly written Flash app just by clicking fast, seriously. 
? For new developers, the simplest mistake to make is to begin parallel processes in code, while not setting up an appropriate set of event listeners to catch every element that is affected by a change.  So the quickest way to break that code is to just click fast, hard and everywhere.  A bunch.  If you notice the menu indicator is incorrect at times, that the video audio is still playing in the background, or that there are multiples of objects overlaid upon one another, now you know why. 

8. Font embedding/Text appearance (Min font size/ anit-aliasing, new TLF style text)
Font embedding is the most unnecessarily complex element of making nearly every flash piece.  At times, every text field, needs to be individually connected in the Flash GUI (twice actually), and again in the ActionScript code.  This is extremely easy to miss when making client revisions, or repeated iterations on the same project file. 
? The designer or developer could have skirted the subject by using a system font, but seriously I’m an Online eArt Director and I’d have to hope that you didn’t settle on Verdana
? Have the designer supply the rasterized design files for comparison
? Different computers have different font sets, and every if the font is not embedded correctly it could reconnect to the font if it’s on the end-user’s computer.  So be sure to try it on Mac/PC and on computers that do not have Adobe Creative Suite products installed on them. 

9. Yellow Rectangular Border is visible
Accessibility focus - Click outside the flash if possible, and click back inside, does anything have a yellow border appear around it?
? This is the tab-focus.  You’re used to it in operating systems, and probably noticed it most if you tab your way through online forms.  Flash Player 10.1 added an accessibility feature, to help with…uh… people requiring yellow boxes, This has been fixed with 10.2, and the market share is for 10.1 is tiny and getting smaller so this won’t be anything to worry about past 2011.

10. Right click menu
Don’t leave menu options that just confuse the consumer
? By Default there are a lot of options that get listed in the right clinet menu wehn you right-click on flash.  You can eliminate the unnecessary ones and make that menu seem a little less scary. 
? The equivalent of “This website was developed by” is still alive and well, and it has gotten classier.  Go ahead and take advantage of it.  (With your client’s blessing of course)

11. Scaling, what happens?
Resize that browser, look for anything confusing or unexpected.
? (In most case the website should look good in an available height/width of 1000x750 to 1900x1000, maybe just 1200x100) 

12. Debugging left on, password protected for AS3 decompiling
Make sure that you can’t download that SWF and decompile your client’s new baby. 
? It’s as simple as a password that no one ever needs to remember.  I’m all for open sharing of code,  we all learned our CSS and HTML abilities from a little code looky-loo.  But if I want to disclose how a Flash site was done, I’ll do the same thing I would if it was done in .NET.  I’ll blog the code, and strip the client-specific info. 

Any questions?  Ask away in the comments section, or contact me directly on twitter: @bluish_yellow

• Microsoft has treated its Internet Explorer line similar to its Office line of products, creating entirely new platforms every couple years.  Microsoft’s insistence on recreating the browser without making noticeable forward progress has caused frustrations with corporate IT teams and web developers.  Customers weren’t presented with compelling reasons to update, and the frequent new products meant that new security threat and bugs became prevalent.  If Microsoft can settle down, create a browser that’s fashionable instead of styled after the most recent fad, (and perhaps even innovate) they could easily bring IE to the ~80-90% of PCs that come with it pre-installed. 
• Firefox has done a great job not only in maintaining its position at the top of the heap, despite Microsoft often legally challenged (versus AOL , versus United States)
• Chrome‘s doubled their usage from this same time last year, nearly 20% of the global audience.  Mainly because of simplicity, with the multi-processing tab system allows for lesser computers to epic fail (freeze) more elegantly.  Like a beautiful digitized swan.  All this means that as those older computers still hanging on to IE6, may be best served as Chrome converts when web content they’re surfing for runs the potential of being a bit too much or their PCs.  There’s still some bugs here, so it’s definitely not ready to take on the king of the open-source, Firefox.  But it’s the up-and-comer to look out for.
• Opera and Safari Our next Netscape Navigators.  Although Webkit, the technology they’re based on, will almost certainly live on through mobile in Android.

Quick visualization assuming 20 computers representing the world’s usage:

Firefox 3	Firefox 3	Firefox 3	Firefox 3	Firefox 3
Firefox 3	Firefox 3	Firefox 3	Firefox 3	Internet Explorer 8
Internet Explorer 8	Internet Explorer 8	Internet Explorer 7	Internet Explorer 7	Internet Explorer 6
Chrome 7	Chrome 6	Chrome 6	Chrome 6	Opera/Safari Combined

*Based on data from W3Schools.com

Note: There’s generally a bit of variance in every set of numbers, that’s part of the reason for the rounding in the above visualization.  w3schools has been the definitive source, and most-often referenced site for browser statistics. Below is the disclaimer on their site:

Global averages may not always be relevant to your web site. Different sites attract different audiences. Some web sites attract professional developers using professional hardware, while other sites attract hobbyists using old low spec computers.
Also be aware that many statistics may have an incomplete or faulty browser detection. It is quite common by many web-stats report programs, not to detect the newest browsers.
(The statistics above are extracted from W3Schools’ log-files, but we are also monitoring other sources around the Internet to assure the quality of these figures).

It seems that if you were to survey a group of computer users, you wouldn’t get a situation like you’d expect after a decade of the “I’m a Mac” ads.

More likely, outside the creative field you’d hard-pressed to find a mac-user.  Out of a group with 20 people their computers would likely be closer to the group below.

After three Windows releases, six Apple OSX releases, it seems the first is still the most popular.  The 2001 Windows XP still holds nearly half of computer users’ loyalty while Apple manages to hold on to a paltry 10% of the marketplace. 

Windows XP	Windows XP	Windows XP	Windows XP	Windows XP
Windows XP	Windows XP	Windows XP	Windows XP	Windows XP
Windows 7	Windows 7	Windows 7	Windows 7	Windows 7
Windows Vista	Windows Vista	Mac OSX	Mac OSX	Linux

*Based on data from W3Schools.com

Note: There’s generally a bit of variance in every set of numbers, that’s part of the reason for the rounding in the above visualization.  w3schools has been the definitive source, and most-often referenced site for browser statistics. Below is the disclaimer on their site:

Global averages may not always be relevant to your web site. Different sites attract different audiences. Some web sites attract professional developers using professional hardware, while other sites attract hobbyists using old low spec computers.
Also be aware that many statistics may have an incomplete or faulty browser detection. It is quite common by many web-stats report programs, not to detect the newest browsers.
(The statistics above are extracted from W3Schools’ log-files, but we are also monitoring other sources around the Internet to assure the quality of these figures).

No longer is the computer modeled after the concept of trying to be even higher-definition than the last model.  For five years now, it’s garnered shinier and shinier icons and logos.  2005 gloss clearly pushed the values of bright and new.  Today’s gloss is more concerned with comfort.  The gloss here is subdued, with every line curved and friendly. 

Frog Design, the designers of the new identity, commented to Fast Company that the shapes are the result of keeping the old but combining it with concept of inter-connectivity through the use of a ribbon.  I think it results in a strong and bold yet soft and playful set of images.  It successfully incorporates the home with the professional sensibilities.  These will likely fit alongside the other icons in the Mac OSX dock for a while to come.

As I noted here there’s basically two kinds of video delivery,  progressive download and streaming.  Now there’s a second method of streaming, called Adaptive Streaming.  Apple has its own proprietary method and requires it for the iPhone and iPad (of course).  And Flash has a method that won’t make you wait for HTML5 to get popular before getting your hands on it. 

The traditional method of streaming used the RTMP (Real Time M Protocol) and it represented a big step forward to “Wait-less” video streaming.  There’s no need to buffer, streaming allows you to modulate the quality of the video that’s being served and send you the video just a few seconds of video at a time, just before you needed it.  The only real issue with RTMP is that it could be expensive depending on the server you chose, and if you didn’t have your firewall settings just right, you could see some reduced performance due to having to tunnel it through the HTTP port 80. 

HTTP solves the tunneling headache, and even better it works on that fickle line of Apple mobile devices.  Because it naturally goes through that port, it doesn’t have any lost performance in the transition from one port to another.  The Apple Live Streaming service allows it work with HTML5 on the iPad and iPod. 

The big complicator in HTTP is that the video you would have used to do your RTMP streaming, has to be processed into a bunch of tiny pieces, and connected with manifest files.  There’s plenty of support to automate that process, so not a huge deal.  But then you have to build a video player capable, of working with the server to read those files, and continually request the right file based on video timeline position and available bandwidth.  If somehow, that doesn’t sound like a lot of work, trust me it is. 

Enter the OSMF (Open Source Media Framework) and their hyper-simplified, “we’ve already done it for you, your welcome” StrobeMediaPlayback video player.  There is some inflexibility in the player (a.k.a. you can’t skin it, or change anything but the background color of the UI) but at least a hundred or so lines of code have been taken off your shoulders.  Nice.  If you’re interested in a half-step, that’s more customizable there is a source library that can lend you more freedom without leaving you in the cold. 

So, at this point it’s not certain which framework is going to be the prevailing method, or if it will become purely dependent on whether someone wants to play the video on an iProduct. 

Stay tuned… very nerdy updates to come. 
N

@bluish_yellow