The MossyBlog Times Archives 2007 - 2009 : Mashup

POC #1 - Project Harmony (pt1) (Silverlight & Flash)

scbarnes — Thu, 15 Nov 2007 11:18:00 GMT

I've been enjoying the overall experience of what Silverlight has to offer since I started with Microsoft back in January 07. That being said, I've often been an internal "goto" person at times for some Flash advice on behalf of Microsoft customers around the world.

In light of this, recently I also encountered a situation where a customer was looking to use both Silverlight and Flash together, something which I kind of gave a confused look at? (ie .. not because I wanted them to pick ours etc, but more to the point what was the root of the problem).

The problem was simply that they had deadline to meet, they wanted to retain the video in Windows Media format but were looking to use the GUI inside Flash as a base. Fair enough, this isn't a Zero Sum Game and we play well with others.

This isn't the first I've seen similar stories around this, but mostly its from Design shops around the world whom are keen to embrace Silverlight and Flash (fingers in both barrels) but are kind of skittish to start with (i.e. the assumption is really you have to pick a team, red vs blue).

Thus, I decided to put together this proof of concept, titled "Harmony". The project is quite extensive and I'll spend the next month dissecting it and talking about different cross-sections of how you as a designer & developer are able to produce compelling enriching experiences with Silverlight and that you can execute on your creative vision. The rest is simply semantics and bits/bolts.

In this first iteration of my Project "Harmony" I wanted to test to see how well the performance would be in the event one was to use 90% Silverlight and 10% flash. In that overlay Flash on top of Silverlight and see what happens.

The results speak for themselves, suffice to say that I really put in a lot of gratuitous animations in Silverlight to really try and break the performance overall.

You can view for yourself here:

http://www.demo.members.winisp.net/poc1/

(Note: Link Requires Silverlight 1.1 and Flash 9.x)

My Objectives for this first iteration was:

Objectives (v1.0)

Determine to see if Flash (Transparent windowless) degrades in performance in the event it sits on top of Silverlight.
Determine if PNG overlays impact the performance of the video whilst mixed with Flash.

Conclusion (v1.0)

I did see some performance degrading on both technologies, but that is mostly due to both making use of alpha transparency (I'm yet to meet a runtime of any brand that can withstand alpha transparency)
Working inside Flash & then crossing over to Visual Studio / Expression Blend is not for the feint hearted (I kept tripping up in C# vs AS3.0 scripting syntax hooks hehe - nothing against both technologies but its more of a mind map thing).

Highlights (v1.0)

Using PNG's a designer is capable of doing some interesting things to a graphical interface. In this case used a bullet that appears to not only be embedded into the TV Screen but also shatters it.

I also added the "bullets" in the top right corner as PNG overlay to also test how 2xOverlays inside the Video would perform.
Using Video Reflection within Silverlight, one is able to really bring home a gloss finish by giving it a "glass" effect (as we all know there isn't enough glass effects online
Using an infinite loop within Silverlight, I was able to create a "ambiance" feel to the UI by making two sets of images fade in/out underneath the Flash area and the Silverlight Video. This again, was to really see how the performance would go with a Silverlight animation underneath Flash.

Using Adobe Photoshop for the bitmap artwork, I stumbled upon a technique whereby if you take a photo, duplicate its layer and then apply "gussian blur" with 50% transparency it kind of gives this glow/ambiance effect commonly seen in most games today.

Silverlight (Video aside of course) handles its progressive loading of assets in a unique way, I'm yet to put my finger on it but I must look into this more as I expected the GUI to take much longer to load (as there aren't any preloaders in this design).
The Flash Slider (ie works like iTunes) was done reasonably quickly, and the code has already been ported to Silverlight suffice to say, it looks seamlessly integrated within the GUI and unless you don't have Silverlight or Flash installed, it would argueably be forgiven as being part of one technology not 2.

It's a small experiment at first, mainly to test the waters and see what holds together initially.

The walk away message here is simple, this isn't a Zero Sum Game firstly and I want to stress that the most. The other impact is that if you're keen to try Silverlight but aren't quite ready for that big leap, it's ok you can use both without penalties implied.

The last but most important of all, is prove your concepts initially. In that if you're looking to switch from using Flash (for whatever reason) and aren't bold enough to do the lock stock and barrel or aren't allowed to, that's ok. Establish some objectives initially, build a Proof of Concept (POC) and chip away at the idea, as you will no doubt learn both technologies limitations faster than any book can really teach you.

The secret of a truly successful RIA in my opinion is knowing the technologies limitations.

The next POC (pt2) I'll talk more about the JavaScript Bridge and how I was able to make the Thumbnail Slide load up the Video Playlist etc. I'm also putting together some Video Casts on not only how I made this but also will upload the code once I get it locked into Codeplex.com (open source). All code & design is hand-made by myself only.

(NOTE: This is a crude, raw POC and progress bars etc for both technologies aren't important for this initial purpose. They are coming, and I'll talk more about that later. Again, this is a POC so don't lock this down as some end to end final production grade solution).

(NOTE: I used Teamfortress 2 Artwork, because it's my favorite game at the moment, I have personal history with it and well, the Soldier video is by far the funniest game trailer I've seen in quite some time. Valve Software are legends in my book - My Steam ID is "[te] Skittlez")

Next: The "HOW" (Code Dump / VideoCast).

Related Post: Writing Proof of Concept RIA's

I Love my Silverlight: MossyVideo Player

scbarnes — Wed, 23 May 2007 10:26:25 GMT

Since I have a lot of time on my hands at the moment, due to a foot injury (I had my big toe's toenail ripped off), I decided to go nuts with a project I'm working on, called MossyVideo Player System Thingy which is built in Silverlight.

Fig 1.0 (The Design in its early stages, it starts with the orb of power and grows outward)

This project is got a lot of goodness associated about it and here's what I expect to deliver to the big world wide interweb post it's release.

Video Diaries. Every step of the way, I decided what better way to describe to the world my process and approach to this project, then to simply create some video diaries of my journey. Starting from Day 0 you're going to see a segment on my pain that which is installing Adobe CS3 Web Premier (that was a lot of fun with Windows Vista). I'm also going to edit the video and use it as the first demo reel for the player (what better way to dog food it).
ASP.NET AJAX ToolKit. We hear all this way to often with Silverlight, in that it's been stated that it's a natural progression from HTML/AJAX world to the next evolution step. I plan on proving this by showing how Silverlight + Video + AJAX can play a role with one another.
Something New, Something Borrowed & Something Blue. I've got a nice idea of how to involve some existing Web 2.0 API's with this project, can't tell you now as it's a secret surprise. Suffice to say, it may involve PopFly.ms - it may not - who's to tell.
The Adobe Killer. I'm so tired of these rants as of late, so through-out you're going to see me refer to the "Zealots", these are folks whom believe in the theory that Silverlight vs Adobe is going to be a Zero Sum Game. I plan to illustrate to one and all it's about choice, it's about blending the pieces together to create, innovate and design as best I can (e.g. I am using Adobe CS3 for part of the artwork! as well as Expression Design - I can hear a few people hit the floor in shock)
It's new to me. Yes, I have spent many nights tinkering with Silverlight, and I'll be pushing everything I know about it to the max. I'm in constant chatter between folks internally and externally whom are helping in a number of ways with some of my questions, recently around Effects such as Blur inside Silverlight. More on that another time (heheh).
Code examples. Once this is done, I hope to put this onto Codeplex.com for one and all to pick over, steal, laugh at you name it you get it.
It's about the Journey. Lastly, it's about understanding the overall experience it took from having an idea in a shower one day (which is my best source of inspiration) through to building. It's also most important of all, showing that playing with Silverlight (even in Alpha) doesn't have to be this serious religious battle that appears to flow online, lighten up folks, it's a new toy! so play!

I went to an Internal Microsoft mashup tonight.

scbarnes — Fri, 27 Apr 2007 11:12:46 GMT

As some would know, I'm currently in Seattle, Microsoft HQ getting to know some of the various product folks and the upcoming offerings post MIX07. At any rate, tonight Michael and I went to see some Microsoftonians put together some Web 2.0 mashups. My initial reaction at first was uncertainty, in that "Do Microsoft really get Web 2.0" (It does float around in my head from time to time).

Tonight though, I have to say "Yes" to that as watching some of the mashups being put together in rapid succession was actually quite impressive. I'm looking forward to seeing others reactions at the public mashup @ MIX07 next week as there's some talent in the room that's for sure (go figure).

Anyway, Christophe Lauer fellow Microsoftee has put together a video of the night (around 1min 30sec) and I was going to do a preso on a mashup I have, but sadly I got to tired (big day).

Mashup Day on Microsoft Campus

Bungee, keeping Web 2.0 together..

scbarnes — Thu, 19 Apr 2007 09:25:48 GMT

A while back I posted my thoughts around a project called "ReadySteadyMashup.com", essentially how Microsoft + Web 2.0 can play a role together whilst showcasing the talents of Web 2.0 firstly, Our product offerings and just how agile they really are and finally putting the spotlight on the talent out there that aren't just .NET fanbois but come from all walks of life.

I'm in Seattle next Wednesday to progress this project further, that being said, BungeeConnect was announced at Web 2.0 Expo last week and I have to say, brilliant strategy!

Essentially they are putting together a Web 2.0 Pipeline together to empower developers, from all walks of life to interlace various Web 2.0 API's together under the one roof - aggregate the SAAS pieces if you will.

I love this concept as it's at times annoying or hard to figure out where all of these bits and pieces online exist, how you can use them and why they are worth it in the first place. Yet, it appears Bungee are lowing the barrier in this space to empower average Joe/Jane web coder to muck around in this space with next to no effort.

This translates to maybe some innovative ideas around this space and I think it will slot nicely into my ReadySteadyMashup.com concept going forward. I expect to play with it if given the chance but need to get my beta submission in now.

I'm beginning to warm up to the Web 2.0 concept, I initially didn't like it as it felt like it was a waste of time, yet I backtrack on that response as clearly it's proved itself at times (got to get off twitter crack).

It does however remind me of Yahoo! Pipes but hey, more of these concepts the better I say... now to prod our Live Team for our version of this goodness - or have they already embarked on this, I wonder..

The MossyBlog Times Archives 2007 - 2009 : Mashup

POC #1 - Project Harmony (pt1) (Silverlight & Flash)

My Objectives for this first iteration was:

Objectives (v1.0)

Conclusion (v1.0)

Highlights (v1.0)

I Love my Silverlight: MossyVideo Player

I went to an Internal Microsoft mashup tonight.

Bungee, keeping Web 2.0 together..