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


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

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


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