Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Creating Skins for Windows Media Player 7 Josh Cain Software Developer Engineer, Digital Media Division Microsoft 7-306."— Presentation transcript:

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

2

3 Agenda Intro to Windows Media Player 7 Intro to Windows Media Player 7 Adding Personality via Skins Adding Personality via Skins Creating a Skin Creating 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 Branding Content Branding Advanced Hints and Tips Advanced Hints and Tips Intro to Visualizations Intro to Visualizations Q&A 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 Make it Integrated Create one place to find, manage, and play media Create one place to find, manage, and play media Make it Simple Make it Simple Make it simple for everyone to use Make it simple for everyone to use Offer Best Audio & Video Experience Offer Best Audio & Video Experience Create the best overall experience for audio and video playback Create the best overall experience for audio and video playback Provide Great Personalization Provide Great Personalization Create opportunities for customization & new features 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 Find, manage and play Windows- Media compatible files with familiar Explorer hierarchy Metadata accessed from All Music Guide (AMG) Clearly defined buttons and one- click access for easy navigation

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

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

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

13 What Is a Skin? A personal user experience A personal user experience Allow users to change the player to suit their taste, preference and mood 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 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 Audio and Video are not part of the Skin Provides an opportunity for content developers to customize the player and brand it Provides an opportunity for content developers to customize the player and brand it

14 Branding Opportunities Its YOUR brand – do what you want… Its YOUR brand – do what you want… branding goes beyond promotion to offer user cool functionality and experience branding goes beyond promotion to offer user cool functionality and experience Persistent branding goes beyond the website and the content Persistent branding goes beyond the website and the content Easier to implement than an embedded player (still can do this) Easier to implement than an embedded player (still can do this) Not dependent on the users default browser Not dependent on the users default browser Leverage skins development to create content branding specifically for the Windows Media Player Leverage skins development to create content branding specifically for the Windows Media Player

15 Skins

16 Skins Architecture Composed of three different types of files: Composed of three different types of files: 1. Graphic files define what the user sees Can be.BMP,.GIF,.JPG,.PNG Can be.BMP,.GIF,.JPG,.PNG 2. XML-based Skin Definition file defines the UI elements (.WMS) 3. Jscript 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 file Packaged into a zipped.WMZ file Skins are stored in c:\Program Files\Windows Media Player\Skins Skins are stored in c:\Program Files\Windows Media Player\Skins

17 Skin Definition Files: Defines the Interface Elements (objects) and attributes (properties) Elements (objects) and attributes (properties) No contained text No contained text Rich set of UI controls: buttons, sliders, text, video windows, visualization windows etc. 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 and end with Skins are started with and end with Every skin must have at least one or more … Every skin must have at least one or more … Internal Player settings (path to content, volume, balance) can be initialized using tag Internal Player settings (path to content, volume, balance) can be initialized using tag

20 Sample Skin Structure

21 Buttons Most popular part of a Skin Most popular part of a Skin Trigger actions like play, stop, quit, minimize, and switch to different view Trigger actions like play, stop, quit, minimize, and switch to different view Buttons are defined by or tags Buttons are defined by or tags requires a separate image and specific location requires a separate image and specific location images can be changed dynamically images can be changed dynamically s use mapping art s use mapping art Some buttons have pre-defined behavior for ease of use Some buttons have pre-defined behavior for ease of use

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

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

24 Sliders, Progress Bars Sliders Sliders Useful for working with information that changes over time such as volume or time remaining 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. Can be horizontal, vertical, linear, circular, or any shape you can think of. Used for volume control or for seeking within media Used for volume control or for seeking within media Custom sliders Custom sliders Used to create custom controls such as knobs Used to create custom controls such as knobs Create gradient image to define the locations of the values on the slider: Create gradient image to define the locations of the values on the slider: Progress bars Progress bars Similar to sliders, but for displaying read-only information such as buffering progress 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, artists name etc. Text elements are used to display text,such as song title, artists name etc. defines the region where video will be displayed defines the region where video will be displayed changes the video including hue, brightness, contrast and saturation changes the video including hue, brightness, contrast and saturation changes the audio, such as boosting the bass or tweaking the treble changes the audio, such as boosting the bass or tweaking the treble defines the layout of the animations that change with the audio defines the layout of the animations that change with the audio defines the layout of a playlist control for changing whats playing next defines the layout of a playlist control for changing whats playing next

26 Decomposing Classic skin

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

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

29 Classic Graphics (Cont) Player Controls Player Controls

30 Scripting Enables advanced skin functions by tying skin UI elements with player function Enables advanced skin functions by tying skin UI elements with player function Uses industry standard Jscript Uses industry standard Jscript Script can be in external file or inline Script can be in external file or inline


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

Similar presentations


Ads by Google