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

3. 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

4. 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

5. 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

6. Windows Media Player 7 Overview

7. Windows Media Player 7 Beta

8. 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

9. 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

10. 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

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

12. 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

13. 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

14. 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.

15. Skins

16. 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

17. 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.

18. Creating a Simple Skin

19. 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

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

21. 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”/>

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

23. 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

24. 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

25. 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

26. Decomposing “Classic” skin

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

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

29. “Classic” Graphics (Cont)
Player Controls

30. 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>

31. 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

32. Building A More Advanced Skin

33. 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…

34. 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

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

36. Resources Windows Media Product Site Windows Media Developer Center
Windows Media Developer Center
Skins area under Content Development & Deployment section

37. 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