Giovanni beat me to the punch getting some screenshots of the Mix06 build of Q. One thing I want to clarify (which Giovanni did in his original post and a later follow up): Q is not a shipping feature of Windows Vista -- it is a sample application for which source code will ship with the Windows Media Center Software Development Kit for Windows Vista.

Update: News is traveling fast, and it's the wrong news. I'm pretty amazed at how much the story gets subtly changed with each retelling. I'm linking to some here so they will hopefully clarify their posts before the hype machine gets going: Microsoft Podcast Client - or Mix06 Myth?, Les clients podcasts chez Microsoft, Microsoft Podcasting Client, Microsoft Demontstates New Podcast Client At MIX06.

Several folks (internal and external) have asked for screenshots, so here they are along with a description of the experience...

Intro Animation

A really cool launch animation occurs when you first start Q. Approximately 15 images of various types of electrical circuit schematics rush at you (transparent, so you see multiple layers at once) which pivot on the center midway through. This is followed by the Schematic logotype flying from behind you. The electrical schematics are framed in the square of the Schematic logotype as it comes into view. All of this happens in about 6 seconds. This animation is 100% Media Center Markup Language (MCML) and PNG files. Proving the Model + View separation which is a pillar of developing in the Windows Media Center Presentation Layer, Schematic created this animation independently of the development work on the Q:Helix and other application elements following. We checked their MCML into the source tree as is -- zero changes.

Channels Page

The Schematic logo at the end of the intro animation 'falls back' after about a second to reveal the background and Channels page, followed by the Q:Helix rotating down into place, locking on the first item in the list. The helix is center locking so all items rotate into the center of the application. We think this makes the app pretty usable because the user only has to look at one location for focus -- it doesn't bounce around like a series of stacked buttons (Windows Media Center uses a similar paradigm, but it's not exclusively locked to a single position).

As you move up and down in the list, the current Title and Description zooms back away from you into infinity while the next Title text flies in from the right and Description text flies in from the bottom. Meanwhile, the background is animated with the RSS logo randomly 'melting' down the screen (kind of Matrix-y like). There are a couple of alpha blended layers here -- the small animated RSS logos are alpha blended in front of the Channel text on the left side as well as the background.

Items Page

Selecting a Channel, in this case the American Experience podcast, will navigate you to the items for that channel with an elegant crossfade into a different background and a slightly different Q:Helix animation (faster, zooms toward you a bit, and has an extra spin or two which happens really fast).

Selecting an Item will result in the audio or video playing. If audio, we animate with an alpha blend between the image provided with the item and a blue RSS logo. If video, we start playback in place of the image provided with the item. The video element will move just like an image in the Q:Helix. Selecting the currently playing video will take it full screen.

A big THANKS to the following folks who helped us pull this together from scratch in a very short time (about 3 weeks to implement once we had the conceptual designs, all the while keeping focus on our day jobs).

Peng Lee, Kevin Hosmann and Robert Perrine from Schematic who designed the Q:Helix navigational concept and opening animation, as well as coding of the opening animation. They also provided the background images which seem to be animated, but are in fact static images -- brilliant!

I approached Stephen Toub about this project and asked if he could provide the code-behind for the RSS feeds in about a week. The next morning we had solid, working code ready to wire up to MCML. 'Nuff said.

And finally, Mark Finocchio (you get to meet Mark face:face in an upcoming Channel9 video, btw). Originally I was going to do the UI implementation (MCML) for this project with his help as needed. My time then became consumed helping get portions of the JoeB keynote ready, leaving me with zero time to give to Q. I asked Mark if he wouldn't mind stepping in and helping us out by creating the balance of the MCML. As with Stephen, the bulk of the MCML was complete the next day, and Mark continued to introduce elegant touches up until the Friday before Mix06. Really, 'nuff said.

We hope to release the Q app with Beta 2 so you can us the app (rather than relying on screenshots and low res video caps) and tell us what features and improvements you would like to see.

Categories: Media Center SDK Code Sample | Q | Comments [3] | # | Posted on Friday, March 24, 2006 4:01:34 AM (GMT Standard Time, UTC+00:00)   
RSS 2.0
Sign In | All Content © 2014 Charlie Owen

This is a personal weblog. The opinions expressed here represent my own and not those of my employer.

Powered by newtelligence dasBlog 2.3.9074.18820