Creating Skins for Creating Skins for Windows Media Player 7Windows Media Player 7

Josh CainJosh CainSoftware Developer Engineer, Software Developer Engineer, Digital Media Division Digital Media Division MicrosoftMicrosoft

7-3067-306

AgendaAgenda

Intro to Windows Media Player 7 Intro to Windows Media Player 7 Adding “Personality” via SkinsAdding “Personality” via Skins

Creating a SkinCreating a Skin Create the UI Elements (Image Editing) Create the UI Elements (Image Editing) Define, Layout the UI Elements (XML)Define, Layout the UI Elements (XML) Add Interactivity (Scripting)Add Interactivity (Scripting)

Content BrandingContent Branding Advanced Hints and TipsAdvanced Hints and Tips Intro to VisualizationsIntro to Visualizations Q&AQ&A

Players & Jukeboxes TodayPlayers & 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 7Windows Media Player 7The best place to experience digital mediaThe best place to experience digital media

Make it IntegratedMake it Integrated Create one place to find, manage, and play Create one place to find, manage, and play

mediamedia Make it SimpleMake it Simple

Make it simple for Make it simple for everyoneeveryone to use to use Offer Best Audio & Video ExperienceOffer Best Audio & Video Experience

Create the best overall experience for Create the best overall experience for audio and video playbackaudio and video playback

Provide Great PersonalizationProvide Great Personalization Create opportunities for customization & Create opportunities for customization &

new featuresnew features

Windows Media Windows Media Player 7 OverviewPlayer 7 Overview

Windows Media Windows Media Player 7 BetaPlayer 7 Beta

Windows Media Player –Windows Media Player –All-In-OneAll-In-One

Now PlayingNow Playing – shows currently – shows currently playing content with metadataplaying content with metadata

Media GuideMedia Guide – view/listen to – view/listen to WindowsMedia.com content WindowsMedia.com content

without an open browserwithout an open browser

CD AudioCD Audio – play, record in Windows – play, record in Windows Media format, and collect CD Media format, and collect CD

information using AMGinformation using AMG

Media LibraryMedia Library – organize and manage – organize and manage all local multimedia filesall local multimedia files

Radio TunerRadio Tuner – listen to over 1,600 – listen to over 1,600 Windows Media compatible Windows Media compatible

radio stationsradio stations

Portable DevicesPortable Devices – transfer files to – transfer files to and from Windows Media-and from Windows Media-

compatible devicescompatible devices

Skin ChooserSkin Chooser – customize the look of – customize the look of PlayerPlayer

Windows Media Player –Windows Media Player –Easy to UseEasy to Use

Find, manage and Find, manage and play Windows-play Windows-

Media compatible Media compatible files with familiar files with familiar

Explorer hierarchyExplorer hierarchy

Metadata accessed from Metadata accessed from All Music Guide (AMG)All Music Guide (AMG)

Clearly defined buttons and one-Clearly defined buttons and one-click access for easy navigationclick access for easy navigation

Enhanced album Enhanced album and artist and artist information from information from AMGAMG World’s most World’s most

comprehensive comprehensive entertainment entertainment database for musicdatabase for music 400,000+ albums400,000+ albums 38,000+ biographies38,000+ biographies

Integrated access to Integrated access to ratings, reviews and ratings, reviews and discographiesdiscographies

Windows Media Player –Windows Media Player –All Music GuideAll Music Guide

Visualizations: Visualizations: TwoTwo and three- and three-dimensional animations dimensional animations that change and move that change and move to your musicto your music

Windows Media Player –Windows Media Player –More Personality with VisualizationsMore Personality with Visualizations

Interactive skins customize the look, feel, Interactive skins customize the look, feel, and operation by changing the user interfaceand operation by changing the user interface

Beyond other skins technologyBeyond other skins technology Enhanced functionalityEnhanced functionality AnimationAnimation Feature extensibilityFeature extensibility

Windows Media Player –Windows Media Player –More Personality with SkinsMore Personality with Skins

What Is a Skin?What Is a Skin?

A personal user experienceA personal user experience Allow users to change the player to suit Allow users to change the player to suit

their taste, preference and moodtheir taste, preference and mood Skins are sets of text files,graphics and Skins are sets of text files,graphics and

scripts that can be combined to create scripts that can be combined to create a new look and feel for Windows Media a new look and feel for Windows Media PlayerPlayer Audio and Video are not part of the SkinAudio and Video are not part of the Skin

Provides an opportunity for content Provides an opportunity for content developers to customize the player and developers to customize the player and brand itbrand it

Branding OpportunitiesBranding Opportunities

It’s YOUR brand – do what you want…It’s YOUR brand – do what you want… branding goes beyond promotion to offer branding goes beyond promotion to offer

user cool functionality and experience user cool functionality and experience Persistent branding goes beyond the Persistent branding goes beyond the

website and the content website and the content Easier to implement than an embedded Easier to implement than an embedded

player (still can do this)player (still can do this) Not dependent on the user’s default Not dependent on the user’s default

browserbrowser Leverage skins development to create Leverage skins development to create

content branding specifically for the content branding specifically for the Windows Media PlayerWindows Media Player

SkinsSkins

Skins ArchitectureSkins Architecture

Composed of three different types of Composed of three different types of files:files:

1.1. Graphic files define what the user sees Graphic files define what the user sees Can be .BMP, .GIF, .JPG, .PNG Can be .BMP, .GIF, .JPG, .PNG

2.2. XML-based Skin Definition file defines the UI XML-based Skin Definition file defines the UI elements (.WMS)elements (.WMS)

3.3. Jscript defines interactivityJscript defines interactivity Could be external file or inline (in Skin Definition file)Could be external file or inline (in Skin Definition file)

Packaged into a “zipped” .WMZ filePackaged into a “zipped” .WMZ file Skins are stored in Skins are stored in

c:\Program Files\Windows Media Player\Skinsc:\Program Files\Windows Media Player\Skins

Skin Definition Files:Skin Definition Files:Defines the InterfaceDefines the Interface Elements (objects) and attributes Elements (objects) and attributes

(properties)(properties) No contained textNo contained text

Rich set of UI controls: buttons, sliders, Rich set of UI controls: buttons, sliders, text, video windows, visualization text, video windows, visualization windows etc.windows etc.

Creating a Simple Creating a Simple SkinSkin

Defining the UI Elements:Defining the UI Elements:Skin Definition FilesSkin Definition Files Skins are started with <THEME> Skins are started with <THEME>

and end with </THEME>and end with </THEME> Every skin must have at least one or more Every skin must have at least one or more

<VIEW>…</VIEW><VIEW>…</VIEW> Internal Player settings (path to content, Internal Player settings (path to content,

volume, balance) can be initialized using volume, balance) can be initialized using <PLAYER> tag<PLAYER> tag

Sample Skin StructureSample Skin Structure

<THEME><THEME> <VIEW> <VIEW>

<BUTTONGROUP> <BUTTONGROUP> <BUTTONELEMENT/> <BUTTONELEMENT/>

<BUTTONELEMENT/><BUTTONELEMENT/>

</BUTTONGROUP></BUTTONGROUP>

</VIEW></VIEW>

</THEME></THEME>

ButtonsButtons Most popular part of a SkinMost popular part of a Skin Trigger actions like play, stop, quit, minimize, Trigger actions like play, stop, quit, minimize,

and switch to different view and switch to different view Buttons are defined by <BUTTON> or Buttons are defined by <BUTTON> or

<BUTTONGROUP> tags<BUTTONGROUP> tags <BUTTON> <BUTTON>

requires a separate image and specific locationrequires a separate image and specific location images can be changed dynamicallyimages can be changed dynamically

<BUTTONGROUP>’s use mapping art<BUTTONGROUP>’s use mapping art Some buttons have pre-defined behavior for Some buttons have pre-defined behavior for

ease of useease of use <PLAYBUTTON id=“MyPlayButton” image=“play.bmp”/> <PLAYBUTTON id=“MyPlayButton” image=“play.bmp”/>

GraphicsGraphics

Example of a Button Example of a Button DefaultDefault RolloverRollover DownDown DisabledDisabled Image MapImage Map

Buttons are mapped to the Buttons are mapped to the colors in the image mapcolors in the image map

ControlsControls

Elements which can be seen by the Elements which can be seen by the user user

Skins have the following controls Skins have the following controls available: available:

ButtonsButtons Sliders and Custom SlidersSliders and Custom Sliders Progress barsProgress bars Text boxesText boxes Video windowsVideo windows Visualization windowsVisualization windows Playlist windowsPlaylist windows SubView windows SubView windows

Sliders, Progress BarsSliders, Progress Bars SlidersSliders

Useful for working with information that changes Useful for working with information that changes over time such as volume or time remainingover time such as volume or time remaining

Can be horizontal, vertical, linear, circular, or any Can be horizontal, vertical, linear, circular, or any shape you can think of. shape you can think of.

Used for volume control or for seeking within Used for volume control or for seeking within mediamedia

Custom slidersCustom sliders Used to create custom controls such as knobsUsed to create custom controls such as knobs Create gradient image to define the locations of Create gradient image to define the locations of

the values on the slider:the values on the slider: Progress barsProgress bars

Similar to sliders, but for displaying “read-only” Similar to sliders, but for displaying “read-only” information such as buffering progressinformation such as buffering progress

Other key UI elementsOther key UI elements

Text elements are used to display text,such as song Text elements are used to display text,such as song title, artist’s name etc.title, artist’s name etc.

<video> <video> defines the region where video will be displayeddefines the region where video will be displayed

<videoSettings> <videoSettings> changes the video including hue, brightness, contrast and changes the video including hue, brightness, contrast and

saturationsaturation <equalizerSettings> <equalizerSettings>

changes the audio, such as boosting the bass or tweaking changes the audio, such as boosting the bass or tweaking the treblethe treble

<effects> <effects> defines the layout of the animations that change with the defines the layout of the animations that change with the

audioaudio <playlist> <playlist>

defines the layout of a playlist control for changing what’s defines the layout of a playlist control for changing what’s playing nextplaying next

Decomposing “Classic” skinDecomposing “Classic” skin

““Classic” Graphics (Cont)Classic” Graphics (Cont)

Each button has 3-4 statesEach button has 3-4 states Up, Down, Hover, (Disabled)Up, Down, Hover, (Disabled)

Menu Bar ButtonsMenu Bar Buttons

back_disabled.bmpback_down.bmp back_hover.bmpBack_up.bmp

forward_disabled.bmpforward_down.bmpforward_hover.bmpforward_up.bmp

““Classic” Graphics (Cont)Classic” Graphics (Cont)

Miscellaneous BitmapMiscellaneous Bitmap

Slider BitmapsSlider Bitmaps

Status BarStatus Bar

icon_wmlogo.bmp

currentpos_background.bmp currentpos_thumb.bmp

Divider.bmp

icon_stereo.bmp

intro_disabled.bmp

““Classic” Graphics (Cont)Classic” Graphics (Cont)

Player ControlsPlayer Controls

ffw_disabled.bmpFfw_down.bmp ffw_hover.bmpFfw_up.bmp

mute_down.bmp mute_down2.bmpmute_hover.bmpMute_up.bmp

next_disabled.bmpnext_down.bmp next_hover.bmpNext_up.bmp

pause_disabled.bmppause_down.bmppause_hover.bmpPause_up.bmp

play_disabled.bmpplay_down.bmp play_hover.bmp

prev_disabled.bmpprev_down.bmp prev_hover.bmpPrev_up.bmp

rw_disabled.bmpRw_down.bmp Rw_hover.bmpRw_up.bmp

stop_disabled.bmpstop_down.bmp stop_hover.bmpStop_up.bmp

ScriptingScripting

Enables advanced skin functions by Enables advanced skin functions by tying skin UI elements with player tying skin UI elements with player functionfunction

Uses industry standard JscriptUses industry standard Jscript Script can be in external file or “inline”Script can be in external file or “inline”<view scriptfile=“myscript.js”><view scriptfile=“myscript.js”>

<text value=“play” <text value=“play” onclick=“player.volume=0; onclick=“player.volume=0;

player.stop();”/>player.stop();”/><button image=“button.bmp” top=“100”<button image=“button.bmp” top=“100”

onclick=“ScriptFileFunction();”/>onclick=“ScriptFileFunction();”/></view></view>

Windows Media Player 7 Windows Media Player 7 Object ModelObject Model Hierarchical object model is more Hierarchical object model is more

organized, easier to use.organized, easier to use. Object model is accessed via the global Object model is accessed via the global

“player” object in skins, and via the “player” object in skins, and via the ActiveX control in web pages.ActiveX control in web pages.

For broad compatibility, use older WMP For broad compatibility, use older WMP 6.4 GUID when embedding in web pages6.4 GUID when embedding in web pages Mac, Unix, Set Top Boxes, WebTV, WinCEMac, Unix, Set Top Boxes, WebTV, WinCE

Building A More Building A More Advanced SkinAdvanced Skin

Hints for Creating Great Hints for Creating Great SkinsSkins Pay attention to the size of your Pay attention to the size of your

skin (too huge, too small)skin (too huge, too small) Use multiple views, drawers to save Use multiple views, drawers to save

spacespace Use preferences to remember user Use preferences to remember user

settingssettings Some cool tricks…Some cool tricks…

VisualizationsVisualizations

Visualizations are custom animations for Visualizations are custom animations for the standalone playerthe standalone player

Visual C++ project wizard is installed Visual C++ project wizard is installed with the Windows Media Player SDK 7with the Windows Media Player SDK 7

You can use whatever drawing code you You can use whatever drawing code you are familiar with (GDI, DirectDraw, etc)are familiar with (GDI, DirectDraw, etc)

They are COM objects which They are COM objects which communicate back and forth with the communicate back and forth with the Player via registered interfacesPlayer via registered interfaces

They are DLLs which must be installed They are DLLs which must be installed by the userby the user

Call to ActionCall to Action

Download the Windows Media Download the Windows Media Player SDK 7 ComponentPlayer SDK 7 Component Player ControlPlayer Control SkinsSkins VisualizationsVisualizations

Create SkinsCreate Skins Create VisualizationsCreate Visualizations

ResourcesResources

Windows Media Product SiteWindows Media Product Site http://www.microsoft.com/windowsmediahttp://www.microsoft.com/windowsmedia

Windows Media Developer CenterWindows Media Developer Center http://msdn.microsoft.com/windowsmediahttp://msdn.microsoft.com/windowsmedia Skins area under Content Development & Skins area under Content Development &

Deployment sectionDeployment section

Windows Media @TechEdWindows Media @TechEd

Windows Media 7: Platform OverviewWindows Media 7: Platform Overview Monday 6/5 12noonMonday 6/5 12noon

Incorporating Windows Media Into Web SitesIncorporating Windows Media Into Web Sites Monday 6/5 5pmMonday 6/5 5pm

Hosting Windows Media: Best PracticesHosting Windows Media: Best Practices Tuesday 6/6 315pmTuesday 6/6 315pm

Creating Skins for the Windows Media Player 7Creating Skins for the Windows Media Player 7 Wednesday 6/7 430pmWednesday 6/7 430pm

Windows Media SDK: Under the HoodWindows Media SDK: Under the Hood Thursday 6/8 315pmThursday 6/8 315pm

Digital Rights ManagementDigital Rights Management Thursday 6/8 430pmThursday 6/8 430pm

Windows Media Authoring: Capturing from Screen, Live & Windows Media Authoring: Capturing from Screen, Live & Pre-Recorded MediaPre-Recorded Media Thursday 6/8 615pmThursday 6/8 615pm