Rocketpanda

So. What a month… ok, ok and a bit, to my ever suffering Account and Project Managers.

We (Metia in partnership with Ad:Dynamo and Microsoft Advertising) have created the world’s first ad-served expandable Silverlight ad to showcase Mass Effect 2 for EA.  Showing on the Tech and Gadgets page of MSN UK from today it will be up for at least three weeks and will be on the MSN UK homepage tomorrow (Jan 30).

Still from Mass Effect 2 Silverlight expandable ad

So an ad’s an ad right? Fighting, hustling, cajoling for your sacred click traffic. Constantly getting in your face or just outright ignored?

Well here’s my ever optimistic opinion that what we’ve done showcases how smarter, more interesting and simply more content rich advertising could work. Provided advertisers are happy to expand their concept of what constitutes sane amounts of servable content

Effectively what the ad provides is a microsite’s-worth of high quality content right in the ad that gives you more than that scant sniff of content you’ve come to expect on this side of your valued click. It treats you with an experience that gives you reason to click through. And it’s that that I think provides the value. Warm leads, not cold, half interested leads.

So fun techy stuff: exactly what does it serve up?

• 4x Smooth Streamed HD quality videos up to 3 minutes in length
  • Mass Effect 2 cinematic trailer
  • Adept Class video
  • Engineer Class video
  • Mass Effect gameplay promotional trailer
• 1x Smooth Streamed Deep Zoom image with 3 layers at a 1:1 pixel size equivalent of 5600×3929
• 1x Smooth Streamed Ambient Audio track of around 3 minutes in length
• 18 zipped JPG images between 1280×720 and 1920×1200
  • Mass Effect in-game screenshots and wallpapers
• All media can be fullscreened, videos are shown with branded and linked letterboxing

Expanded view

DeepZoom to man-stubble in full effect

Video player open

How does this pass as an ad? It breaks down into the usual polite expandable ad shells like this:

• 40kb initial ad .xap download (the footprint content preloader)
• 600kb secondary ad content .xap download (the ad UI, supporting dlls and code)
• All media content is streamed in or user initiated progressive download in the case of the screenshot / wallpaper imagery

Even after looking at it load 300 times a day for the last two weeks I’m still surprised at just how quickly it loads.

Our full team at Metia consisted of (alphabetically):

• Colin / Sam – Project Manager
• Damon – Silverlight Developer (Damon’s post here)
• Dean (me) – Interactive Lead
• Mark – Silverlight Tech Lead
• Sarah – Writer
• Stephen – Visual Designer
• Stuart – Interactive Designer
• Tina – Account Director
• Toni – QA

With very welcome help from James, Rachel, Mark, Richard, Ciara, Gavin and Karen.

At Ad:Dynamo Clive did some serious heavy lifting with the help of  his team.

We’ve learned a lot in the relatively short time we’ve had with it. I’m planning a short series of posts to follow up that will look at some of the really interesting aspects we butted up against. Including Smooth Streaming Deep Zoom (really not much out there about it), our experience with Deep Zoom sub-image manipulation and CPU and frame rate optimisation.

Yep, so quite a bit in there.  How expensive is that bandwidth going to be? Well that’s entirely dependant on how much users interact with it and the more they interact with it the warmer a lead they become, in theory anyway. We’ll see just how the numerous daily users to MSN throw themselves at it. I’m keen to see exactly what the outcomes are, it is an experiment after all, but I’m confident it will prove itself.

Would love to hear everyone’s comments or experiences with it, good or bad. If you don’t get to see it I’ll be posting a link to a permanent version shortly.

Updates:

Gavin Wignall’s post about it over at Silverlightbuzz

Steve Ellis’s post at TheNewMarketing

Silverlight 3 has officially been released so I was keen to see how others in the industry feel about it and what they’ve been up to with any preview versions. No better place to be doing that than the 8th meetup of the London silverlight users group, especially if you’re at Microsoft HQ in London

Usually there would be a demonstration of an industry created silverlight app but as the meetup coincided with the official launch of Expressions 3 we were treated to a cut down presentation from Ian Ellison-Taylor. He’d presented the See the light launch that day and it was great to have a personalised presentation we could ask questions through.

I was shocked and very pleased to find out that our development head Andrew Martin was the first partner presenter at the launch! Ian had great things to say about the work Andrew presented of which one example was the SEAT magazine we’d done in Silverlight; very cool as it was my design!  <shameless plug>www.seat.co.uk/exeo/pagelife</shamelessplug>. The whole presentation was videoed and is available to view ; worth a look.

So although I’d been using Blend 3 for some time it was good to see how the whole suite was coming together. I’d not previously given Expression Web the time of day but its multi browser HTML comparison tool looks amazing; nearly inspires me to take a peak.

After the break I got a chance to catch up with Ian in person and talk about my Silverlight design experience. My key point was expounding my gratitude for the addition to Blend 3 of the marquee-select keyframe tool – a long time in coming when you have to select them all by hand

So you know that Silverlight 3 supports pixel shaders right? Great! You are filled with joy, nay even rapture. But how to actually start using them?

From a designer’s point of view you can web search what’s available and all the juicy examples but there are a few hurdles before you get your crayon-crusted mitts on them.

Things you should have baked earlier:

• Visual Studio with service pack 1
• Silverlight 3 tools for visual studio (including SL3 sdk, SL3 developer plugin)
• Blend 3 release candidate
• WPF pixel shader library
• A new Silverlight 3 application project for testing

My way to victory was starting with the WPF pixel shader effects currently published on codeplex that use a workaround to get them running in SL3.

Download and extract the WPF shader library, open up the solution and have a look at the project structure, taking note of the SLShaderEffectLibrary folder… we’re stealing that one very shortly.

Then open up Visual Studio (resist the urge to go visual in Blend just yet) and create a new Silverlight application.

Next right click on the solution and click ‘Add > Existing Project…’ and then hunt for the SLShaderEffectsLibrary folder we found earlier from inside the wpf effects toolkit.

With that in place we need to add a reference from our base project so that it knows about all those shiny effects. Right click on the references folder in the base project and in the popup window choose the projects tab.

Then choose the imported project that appears in the list.

Finally, in your mainpage.xaml file we need to add an import statement to the added project; using ShaderEffectLibrary will do it.

Now that our base project knows of the magic that will shortly be, probably gratuitously, gracing your screen. With no delay, open blend with shaky sweaty fingers and slap down something interesting like an image onto mainpage.xaml. Then click new effect and in the popup window notice that instead of the two effects available as standard the project you added now appears in the list …

…and opening the list reveals the full list of effects to play with!

As a caveat I have noticed that some of the effects simply don’t work, though happily these are in the minority.

Also take note that while some effects just like the standard blur and dropshadow have exposed properties for you to play with variations of each effect, others are as is and don’t expose any properties at all.

So!
Now you’ve got some playing to do here’s some points to muse on:

• any exposed effect property can be animated
• only one effect instance can be attached per xaml object (canvas, image, textblock for eg)…
• BUT you can stack effects by adding effects to a parent container
• keep in mind that these effects are doing some fairly serious calculations, if you can get away with one instance of an effect on a parent container rather than 10 instances of the effect on each object in that container, that’s probably the way you want to go

With this new effect playground it provides a framework for adding new effects you find (or make) into this library with only minor wrangling. I’ll cover this approach in a future post, so for now happy shading and I hope this provides some image effect joy!