Creating Skins for Windows Media Player 7 Josh

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

Agenda l Intro to Windows Media Player 7 Ø l Creating a Skin Ø Ø Ø l l Adding “Personality” via Skins 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 1. 2. 3. 4. 5. 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 u Make it Integrated Ø u Make it Simple Ø u Make it simple for everyone to use Offer Best Audio & Video Experience Ø u Create one place to find, manage, and play media 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 Windows. Media. 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 Mediacompatible 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 oneclick access for easy navigation

Windows Media Player – All Music Guide l 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: Two and threedimensional animations that change and move to your music

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

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

Branding Opportunities l It’s YOUR brand – do what you want… Ø l l 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

Skins

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

Skin Definition Files: Defines the Interface l Elements (objects) and attributes (properties) Ø l 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 l l l 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/> </BUTTONGROUP> </VIEW> </THEME>

Buttons l l l 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> § § Ø l 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=“My. Play. Button” image=“play. bmp”/>

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

Controls l l 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 Sub. View windows

Sliders, Progress Bars l Sliders Ø Ø Ø l Custom sliders Ø Ø l 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 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 l l Text elements are used to display text, such as song title, artist’s name etc. <video> Ø l <video. Settings> Ø l changes the audio, such as boosting the bass or tweaking the treble <effects> Ø l changes the video including hue, brightness, contrast and saturation <equalizer. Settings> Ø l defines the region where video will be displayed 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) l Each button has 3 -4 states Ø l Up, Down, Hover, (Disabled) Menu Bar Buttons

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

“Classic” Graphics (Cont) l Player Controls

Scripting l l l 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=“Script. File. Function(); ”/> </view>

Windows Media Player 7 Object Model l Hierarchical object model is more organized, easier to use. Object model is accessed via the global “player” object in skins, and via the Active. X control in web pages. For broad compatibility, use older WMP 6. 4 GUID when embedding in web pages Ø Mac, Unix, Set Top Boxes, Web. TV, Win. CE

Building A More Advanced Skin

Hints for Creating Great Skins l l 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 l l l 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, Direct. Draw, 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 l Download the Windows Media Player SDK 7 Component Ø Ø Ø l l Player Control Skins Visualizations Create Skins Create Visualizations

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

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