The MossyBlog Times Archives 2007 - 2009 : POC

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

Writing Proof of Concept RIA's

scbarnes — Sun, 11 Nov 2007 13:35:24 GMT

When you sit down one night and decide to road-test a theory or an idea you have, then a Proof of Concept (POC) is something you should consider. That being said, when you do decide to write a POC knowing the difference between when you are writing a POC vs Application is something you can easily fool yourself into doing the later (ie I swore it started out as a POC, but here's my RIA anyway).

I say this from experience as this week I started out with a basic POC and then it slowly evolved into an full blown RIA, which don't get me wrong is fantastic to showcase once it's ready for public viewing (closing out bugs now, and about to upload). Yet, this is not what I set out to do...

It's a struggle as when you start out with a POC, you want to evolve it or you can see points where you think to yourself "..hmmm.. if I get more traffic hitting this, it could crash there, ok better go refactor that code and fix it up a bit.." - that's when you should halt and think to yourself - what are you doing here?

Knowing when to pause, reflect and push ideas like that aside is the true art of writing a successful POC (in my opinion). As the best part of stating "..It's just a POC.." is that you get out of jail free cards in terms of:

Design Patterns
Performance
Syntax / Coding styles (aka Code Reviews)
Expectations.

There are more if you consider it further, but those are the main four that rest on one's shoulders at times when writing a RIA.

"...How will this application handle under performance.."

"...How am I going to architect this so that I don't bloat the code or back myself into an OOP corner..."

"...Hmm.. I should really spend more time on the transitions as that's what visually people are expecting..."

What I normally do before I start a POC, is write up a list of Objectives. I call it my "POC Quest Log", in that what am I trying to prove? What are my goals and benchmarks associated with the projects.

I also keep a diary of the overall progress (In this case a Video Diary). I do this as it can at times be something you can go over again and get your bearings on say a year from now when you need to evolve a similar concept like the one you wrote further.

Knowing when to evolve later vs today, is a key balancing point when writing POC RIA's.

An example came tonight. I'm writing a Component (in Silverlight) that works like iTunes Slider, in that you have dots that represent "pages" and when you click next/back the slider animates between these "pages" within the Slider.

I got the basic prototype working in under 30mins. Yet I started to think about "well, what happens when there is like 100 items, what will this thing look like.." and began heading down this code "rabbit hole".

When, in the end the idea has been proven, that Masking, Using Animation Tweens and ensuring Mouse Behavior is intact. Mission successful, move on.

Further with this example I was so worried about making sure the GUI would react to the way it was skinned (in that the arrows were 20x20 pixels, but what if they were 45x45 pixels tomorrow!). Again, don't worry, lock it in and put a big comment in between "sorry, if you want this to be elastic, then code it your darn self.." not only to add to this, but don't be afraid to use "green squares" to represent where your actual bitmap is likely to go.

That is the spirit of POC's, achieve your objectives, put a line through them when you reach those milestones and learn to back away as you'll end up in a time sink.

POC's are also the most perfect way to embrace a new technology or illustrate to others how a technology actually works under the covers.

I'll release this POC shortly, and it's title is "..We Play well with others.."

The MossyBlog Times Archives 2007 - 2009 : POC

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

My Objectives for this first iteration was:

Objectives (v1.0)

Conclusion (v1.0)

Highlights (v1.0)

Writing Proof of Concept RIA's