Blend Candy – Windows Media Player


Sub Heading 4

need silverlight 1.1

Update: Fixed display issue with Firefox and IE6 

Update : Re-written sample in Silverlight 2.0 beta

In a previous post, “Blue glowing glass button“, I confessed my adoration for the user interface of windows media player 10 11(thanks AvatarX for the correction). I talked about how I loved the dark coloured theme, the glowing effect of the buttons and the glass effect overall. I went on and demoed the power of Blend and SilverLight by creating a blue glowing glass button that could be programmatically changed to any coloured glow.

image

The UI is just stunning, I love everything about it. I’ve never grown tired of it’s UI since first using it years ago, it’s a timeless design.

SilverLight and it’s accompanying tools (expression Blend in particular) have single handedly changed the face of web development such that UI designs like WMP’s can now be easily incorporated into web sites and web applications.

What I really want to say is that “there is no reason why web sites/applications of the future can’t look like WMP”. What ever an artist dreams up should now be possible to translate to the web even to the finest detail.

Imagine all the future RIA’s with the polished finish of the WMP UI.

This posting is about taking the WMP UI and making it into a SilverLight application. Bringing the beautiful UI in all it’s glory to the world of the web. Showing that any future web application can be more than just a mashup of static images.

The blend created xaml asset or WMP is pictured below (click on it to go to see the SilverLight RIA in action). It took around 2 days to create. The reason it took 2 days is because

1) attention to detail of the buttons and glows,

2) I wanted to optimise the shapes and placements of the layers – removing unwanted shapes, moving the layers around so that they could be animated in an optimal way etc.

3) Getting the resizing working so that elements resize proportional to the browser and each other.

[click on picture below to go to the SilverLight sample]

image

As you can see the likeness to the desktop WMP is very very similar. I’ve said it before and I’ll say it again, SilverLight and Expression Studio have really hit the nail on the head for RIA and future web development. The MS team behind this magic definitely need a huge bonus payout because in my opinion they have single handedly changed the face of web development.

I’m trying not to be such an MS fan-boy but I really can’t help it. When I do small projects like this it just amazes me the potential that SilverLight and Expression Blend has to changing the face of web sites/applications.

Flash/Flex and SilverLight/Expression(+other MS technologies still in beta) are going to usher in a new world of web sites and web applications.

Just like Ajax and the glass button defined web 2.0 (from  a UI perspective), Flash/Flex and SilverLight/Expression(+others) will usher in what will possibly be called web 3.0 (or rather the time of the RIA). I really do hate the web 2.0 terminology but alas it is now engrained within our technology collective so I must use it :(

From a web development perspective, the importance of getting the UI perfect is going to be paramount to succeeding against your competition. If we start to see beautiful sites/applications with WMP UI’s (which I guarantee will happen in the next 2-3 years) then we as designers/developers better get our skills polished for the next phase of web wars about to begin.

Have you started on the path of learning SilverLight / Expression yet? Have you started looking at other beta products of Microsoft’s such as Astoria or MS Sync Framework, or Live Streaming Services? If not you better start now because these technologies will be the bread and butter of web development in years to come. :)

Microsoft thanks again for the innovation that is SilverLight and Expression. I look forward to my next project, I’m always motivated to do more with these technologies!

This project can also be found under BlendCandy, don’t forget to check out other freely available assets in my library!

The demo site is here: Demo Web Page of Windows Media Player

The source code can be found here in my skydrive account: WindowsMediaPlayer.zip

And please feel free to leave comments and remember we are all still learning SilverLight so please share what you learn!

13 responses to “Blend Candy – Windows Media Player

  1. You never cease to amaze me with what you come up with. Makes me want to quite my day job of just coding and concentrate on UI design.

    Please keep posting stuff like this!

  2. Im a designer by trade, mainly flash/flex but i do dabble in microsoft asp.net and ajax.

    You have really won me over with your work in blend and silverlight.

    I must say that you do have a unique gift of being able to code the backend of an application as well as the UI. A rare and valuable gift indeed.

  3. Hi Jose;

    Strange! I’ve tried to run it on two machines, and I don’t get anything displayed.
    All I get is “Created by LiquidBoy”!

    At first I see a lot of disk actions but then nothing!

  4. Ah, tried it with IE7 and it runs, but not in FF 2.x!

  5. Damn boy, it looks awesome; I love the lower part for the player buttons. I think I’m getting jealous ;-)

    Nice work, no I’ll take it back. Great work!
    ..Ben

  6. thanks guys for the comments..

    Ben thanks for picking that up.. ive just resolved the issue, nothing to do with SilverLight, it was my dodgy javascript code that manages resizing. Once again it comes down to developer error, and javascript causing the problems :)

  7. as always, i really could not love more what you do, there is only a very evident flaw here Jose, that this is WMP11 not 10 (thank god). everything else is awesome as always.

  8. Your attention to detail AvatarX is amazing. Thanks for the pickup and correction. Keep those pownce links coming, im loving them!

  9. Awesome!

    Thank you for sharing Jose!

    David

  10. Pingback: Silverlight Cream for January 6, 2008 -- #165

  11. Pingback: Showing off the power of Silverlight 2.0 - Windows Media Player redone « Online Advertising, Web Development & General Rantings

  12. Nice, and if anyone asks…

    I have a guide in installing Windows Media Player 11 without having to go through that annoying Genuine Windows Validation (WGA) check.

    You can check it out here:

    http://tech4idiots.freehostia.com/?p=194

    peace out! =)

  13. I am curious to find out what blog platform you are using?

    I’m experiencing some small security issues with my latest site and I’d like to
    find something more safe. Do you have any suggestions?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s