Creating Skins for Windows Media Player 7 Josh Cain Software Developer Engineer, Digital Media Division Microsoft 7-306

Agenda Intro to Windows Media Player 7 Creating a Skin Adding “Personality” via Skins Creating a Skin Create the UI Elements (Image Editing) Define, Layout the UI Elements (XML) Add Interactivity (Scripting) Content Branding Advanced Hints and Tips Intro to Visualizations Q&A

Players & Jukeboxes Today Players and Jukeboxes are separate entities –> makes it difficult for the user to know which to use Hard to find, manage and play digital media today Most players are not easy to use, content is not discoverable Hard to integrate portable music players Designed for hi-end user/early adopter

Windows Media Player 7 The best place to experience digital media Make it Integrated Create one place to find, manage, and play media Make it Simple Make it simple for everyone to use Offer Best Audio & Video Experience Create the best overall experience for audio and video playback Provide Great Personalization Create opportunities for customization & new features

Windows Media Player 7 Overview

Windows Media Player 7 Beta

Windows Media Player – All-In-One Now Playing – shows currently playing content with metadata Media Guide – view/listen to WindowsMedia.com content without an open browser CD Audio – play, record in Windows Media format, and collect CD information using AMG Media Library – organize and manage all local multimedia files Radio Tuner – listen to over 1,600 Windows Media compatible radio stations Portable Devices – transfer files to and from Windows Media-compatible devices Skin Chooser – customize the look of Player

Windows Media Player – Easy to Use Metadata accessed from All Music Guide (AMG) Find, manage and play Windows-Media compatible files with familiar Explorer hierarchy Clearly defined buttons and one-click access for easy navigation

Windows Media Player – All Music Guide Enhanced album and artist information from AMG World’s most comprehensive entertainment database for music 400,000+ albums 38,000+ biographies Integrated access to ratings, reviews and discographies

Windows Media Player – More Personality with Visualizations Visualizations: Two and three-dimensional animations that change and move to your music

Windows Media Player –More Personality with Skins Interactive skins customize the look, feel, and operation by changing the user interface Beyond other skins technology Enhanced functionality Animation Feature extensibility

What Is a Skin? A personal user experience Allow users to change the player to suit their taste, preference and mood Skins are sets of text files,graphics and scripts that can be combined to create a new look and feel for Windows Media Player Audio and Video are not part of the Skin Provides an opportunity for content developers to customize the player and brand it

Branding Opportunities It’s YOUR brand – do what you want… branding goes beyond promotion to offer user cool functionality and experience Persistent branding goes beyond the website and the content Easier to implement than an embedded player (still can do this) Not dependent on the user’s default browser Leverage skins development to create content branding specifically for the Windows Media Player Immersive branding means that ICPs aren’t limited to just the promotional aspects of branding like look and feel but can incorporate interactive elements that offer the user increased functionality, like how they want the skin to look, going from compact to mini mode or even interacting with meta data. Persistence means that the skin lives beyond the content providers site and content and could actually become the default player for a user. Skins don’t require the development of buttons and controls, that’s already taken care of. You can concentrate on adding the cool graphics and functionality that make your skin unique and highly desirable. And the effort you put into creating your skin can be leveraged in what we call Content Branding, which is a subset of the look and feel of a skin that appears in the Windows Media Player default mode. This content branding can include a link to download your skin in addition to other neat links and graphics. You should do both content branding and skins to make sure you’re always reaching out to your audience with rich features and branding.

Skins

Skins Architecture Composed of three different types of files: Graphic files define what the user sees Can be .BMP, .GIF, .JPG, .PNG XML-based Skin Definition file defines the UI elements (.WMS) Jscript defines interactivity Could be external file or inline (in Skin Definition file) Packaged into a “zipped” .WMZ file Skins are stored in c:\Program Files\Windows Media Player\Skins

Skin Definition Files: Defines the Interface Elements (objects) and attributes (properties) No contained text Rich set of UI controls: buttons, sliders, text, video windows, visualization windows etc.

Creating a Simple Skin

Defining the UI Elements: Skin Definition Files Skins are started with <THEME> and end with </THEME> Every skin must have at least one or more <VIEW>…</VIEW> Internal Player settings (path to content, volume, balance) can be initialized using <PLAYER> tag

Sample Skin Structure <THEME> <VIEW> <BUTTONGROUP> <BUTTONELEMENT/> <BUTTONELEMENT/> </BUTTONGROUP> </VIEW> </THEME>

Buttons Most popular part of a Skin Trigger actions like play, stop, quit, minimize, and switch to different view Buttons are defined by <BUTTON> or <BUTTONGROUP> tags <BUTTON> requires a separate image and specific location images can be changed dynamically <BUTTONGROUP>’s use mapping art Some buttons have pre-defined behavior for ease of use <PLAYBUTTON id=“MyPlayButton” image=“play.bmp”/>

Graphics Example of a Button Default Rollover Down Disabled Image Map Buttons are mapped to the colors in the image map

Controls Elements which can be seen by the user Skins have the following controls available: Buttons Sliders and Custom Sliders Progress bars Text boxes Video windows Visualization windows Playlist windows SubView windows

Sliders, Progress Bars Sliders Custom sliders Progress bars Useful for working with information that changes over time such as volume or time remaining Can be horizontal, vertical, linear, circular, or any shape you can think of. Used for volume control or for seeking within media Custom sliders Used to create custom controls such as knobs Create gradient image to define the locations of the values on the slider: Progress bars Similar to sliders, but for displaying “read-only” information such as buffering progress

Other key UI elements Text elements are used to display text,such as song title, artist’s name etc. <video> defines the region where video will be displayed <videoSettings> changes the video including hue, brightness, contrast and saturation <equalizerSettings> changes the audio, such as boosting the bass or tweaking the treble <effects> defines the layout of the animations that change with the audio <playlist> defines the layout of a playlist control for changing what’s playing next

Decomposing “Classic” skin

“Classic” Graphics (Cont) Each button has 3-4 states Up, Down, Hover, (Disabled) Menu Bar Buttons

“Classic” Graphics (Cont) Miscellaneous Bitmap Slider Bitmaps Status Bar

“Classic” Graphics (Cont) Player Controls

Scripting Enables advanced skin functions by tying skin UI elements with player function Uses industry standard Jscript Script can be in external file or “inline” <view scriptfile=“myscript.js”> <text value=“play” onclick=“player.volume=0; player.stop();”/> <button image=“button.bmp” top=“100” onclick=“ScriptFileFunction();”/> </view>

Windows Media Player 7 Object Model Hierarchical object model is more organized, easier to use. Object model is accessed via the global “player” object in skins, and via the ActiveX control in web pages. For broad compatibility, use older WMP 6.4 GUID when embedding in web pages Mac, Unix, Set Top Boxes, WebTV, WinCE

Building A More Advanced Skin

Hints for Creating Great Skins Pay attention to the size of your skin (too huge, too small) Use multiple views, drawers to save space Use preferences to remember user settings Some cool tricks…

Visualizations Visualizations are custom animations for the standalone player Visual C++ project wizard is installed with the Windows Media Player SDK 7 You can use whatever drawing code you are familiar with (GDI, DirectDraw, etc) They are COM objects which communicate back and forth with the Player via registered interfaces They are DLLs which must be installed by the user

Call to Action Download the Windows Media Player SDK 7 Component Player Control Skins Visualizations Create Skins Create Visualizations

Resources Windows Media Product Site Windows Media Developer Center http://www.microsoft.com/windowsmedia Windows Media Developer Center http://msdn.microsoft.com/windowsmedia Skins area under Content Development & Deployment section

Windows Media @TechEd Windows Media 7: Platform Overview Monday 6/5 12noon Incorporating Windows Media Into Web Sites Monday 6/5 5pm Hosting Windows Media: Best Practices Tuesday 6/6 315pm Creating Skins for the Windows Media Player 7 Wednesday 6/7 430pm Windows Media SDK: Under the Hood Thursday 6/8 315pm Digital Rights Management Thursday 6/8 430pm Windows Media Authoring: Capturing from Screen, Live & Pre-Recorded Media Thursday 6/8 615pm