Big Screen Blog

Media Center, Windows Phone7 + Silverlight Goodness..

Getting Started with Vista Media Center Development (Part 2)

leave a comment »

So now that you’re ready to start writing code (see part 1) – I thought it would be useful to discuss some of the additional tools you can download to help you create great User Experiences..
There’s a lot of different approaches you can take to designing and implementing your Media Center addins – however it’s no longer just a case of writing great code (or great UML diagrams) – you may also need to incorporate graphics, sound, video, animation and smart UI design to give your users a killer application. If you’ve worked on traditional "MultiMedia" experiences in the past (ie kiosks, flash based websites, cd-roms) – then you will be more familiar with whats involved.
If you are creating your addin with MCPL (Media Center Presentation Layer) code – then the bad news is that there’s currently no WYSIWG Visual Designers available that work with MCML (Media Center Markup Language). Its also highly unlikely these will ever appear – as due to the architecture of how MCML works and integrates with underlying code – the sort of UI’s you see in tools for WPF, WinForms, 3D etc don’t translate well.
If you are using XBAP (Xaml Browser Applications) with WPF (Windows Presentation Foundation in .NET v3) – then the good news is that there is a few design tools around for both 2d and 3d applications. However you may still find these cumbersome to work with – and may prefer handcoding your XAML or dynamically generating your UI with behind the scenes code.
No matter which technology you are using – Storyboarding and Prototyping of screens, UI Elements, animations and page flow plays an important role. Visualizing what your final application is going to look like – and how its going to behave, will ultimately save you writing a lot of throwaway code+markup.  During the process – you’ll may also need to generate .PNG based graphics (for both WPF and MCPL) – or Vector based graphics (for WPF) – which will be used by your final product.
So to help you get there a little faster – the following is a list of additional tools which can prove very useful during your project.
Both the MediaCenter SDK for Vista – and the .NET v3 SDK – contain some very powerful tools for testing/working with raw Markup Language. If you prefer to hand code your Markup (whether it be XAML or MCML) – then these may ultimately be your most useful tools. I won’t go into much detail on these – however the ones to check out are :
MCMLPad, MCMLPreview Tool, VS2005 MCML Editor/XSD  : Included with the MediaCenter SDK for Vista – these allow you to quickly test/run MCML code on the fly. The Visual Studio MCML XSD (Schema for MCML) also provides powerful Intellisense editing of MCML files if you are working inside Visual Studio (so you don’t have to remember all the specs)..
XAMLPad + Orcas/Cider (For VS2005) : Included with the Windows Platform SDK / .NETv3 SDK these tools are for working with XAML code. XAMLPad is sortof like a Notepad for XAML and allows instant previews of XAML code.  Orcas+Cider are made available inside Visual Studio – where Cider provides a simple/primitive Visual Designer for XAML – Orcas (and included XSD’s) give you very powerful Intellisense support when directly editing XAML files. (and is something not available in any other WPF tools at present).
Sorry – but Windows Paint is not going to cut it – as you will likely need to generate PNG based graphics (which correctly support alpha transparencies etc) – and slice/dice them up for use within your addin.
The following graphics tools can help you work with .PNG graphics – and also provide a great environment for Storyboarding your UI’s.
  An *free* (OpenSource) program written with .NETv2 – this provides a great alternative to the expensive commerical graphics tools.
Macromedia Fireworks (NB: Macromedia is now owned by Adobe)
  Possibly the best program out there for visualizing, slicing/dicing, manipulating and exporting your UI’s into usable PNG graphics. Loads of built in effects for working with text, shapes and existing clipart (such as bevels, glows, shadows, outlining, embossing and textures). This application is a little light on raw drawing ‘from scratch’ tools – but is great for logos, panels, text and lots more.
  Depending on what you are used to working with – the Adobe tools also provide a powerful set of graphics tools. Personally, I find that ImageReady is not nearly as powerful as Fireworks – and Photoshop is a little more focused for pure designers and photo editing (but has some extremely powerful functionality).
  Corel Paint is also a very useful alternative for working with graphics and Storyboarding. Corel Photo Paint was actually the first of all these packages to properly implement object based design concepts (and layers) and a scriptable UI. This comes bundled with the Corel Draw Suite – so if you have this – then Photo Paint is there already.
The following design tools are also very useful for Storyboarding/Prototyping no matter what devlopment technology you have chosen. The great thing (well at the moment) – is that as they are all in ‘beta’ status – you can download (and use) all of these for free. 
  This tool is Microsoft’s answer to Adobe Illustrator + Photoshop (with support for both rasterized and vector based graphics) – however the real power of this tool for WPF developers is that it will export vector graphics directly into XAML code (and does a great job of translating your object/layer setup into invidual/reusable Drawing Images). This tool is also useful for Storyboarding/Prototyping as the UI is very fast and responsive.
  This tool is Microsoft’s answer to Flash + Dreamweaver (providing Direct editing of Markup code + powerful Timeline based Animation editing) – however it is aimed mainly at WPF Developers (as you are working directly with XAML and .NET code).  The entire application itself is written with WPF too – so provides a great proof of concept of what you can do with this technology.  Personally I find that the designers + editors in Expression Interactive are not really up to scratch (no proper intellisense – and the Visual designer is very fiddly to work with) – so its probably more useful as a Prototyping/Storyboarding tool. This tool however is very useful for visualizing both MCPL and WPF applications. (as it allows you to also prototype Page Flow, Animations and integration with Audio/Video).
Electric Rain Zam3D (Nov CTP)
  If you’ve played around with 3D tools like 3DStudio, Blender etc – you will be immediately familiar with concepts in the application. If you are developing a WPF application which incorporates realtime 3D graphics – this allows you to work with 3D Meshes, Textures, 3d Transformations and more. (with the ability to import DxF graphics from other 3D packages). You can then directly export your 3D projects into XAML code (including support for animations etc) – allowing you to incorporate it easily into your WPF Projects. I personally used this for some basic 3D Storyboarding (for Big Screen Business) – but ended up mainly generating 3D meshes directly via .NET code. The main drawback of this program is that its based on their Swift3D Flash tool – and hence the actual 3D Rendering used is not performed via WPF (so you get very different 3D rendered results/effects to what WPF actually provides). Additionally – you can’t layer multiple 3D textures with Zam3D – which is where most of the power comes from with WPF.
Another tool which may help is also Macromedia Flash – as the actual mindset of how things work in Flash is probably closer to MCML then what the WPF tools provide (ie use of templates/symbols/animations/tweens etc). However if you aren’t already a Flash user – then this is quite a complicated tool to learn – and expensive too (so probably not advisable).
I decided to not list any tools here just yet – as most of them don’t yet work properly with Vista (ie Windows Media Encoder) – and compatibility is even worse if you are running Vista 64bit. Additionally if you are using MCPL – for sound effects – you are pretty much limited to PCM .WAV files only (although you can use other compressed formats like WMA via Media Centers Now playing functionality). WPF allows for all formats supported by Media Player to be played – however getting this to work properly on an Extender has a bunch of issues.
I’d probably suggest keeping a XP or Windows 2003 machine running for this sort of thing – however I’m sure all the various vendors for these products will sort things out soon (ie for Jan 30 consumer launch of Vista or sometime therafter).
I’ll update this post in a few months when there is some more working options around.
That concludes Part 2 of this ‘Getting Started’ guide (which is so far more of a ‘What Should I install’ guide) – and in Part 3 I will have a look at the various Tools you can use to deploy and distribute your Media Center Addins.

Written by mobilewares

November 23, 2006 at 4:16 am

Posted in Vista MediaCenter

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: