Adding Microsoft Silverlight to Your Company's Skill Set

1. Adding Microsoft Silverlight to Your Company's Skill Set Or How to Build a Silverlight Team Without Starting From Scratch

2. Introductions • Ken Martin – CCO, Founder • Noah Gedrich – Director, Technology

3. An accomplished interactive agency • 8 years in business • Los Angeles (HQ) / Seattle (Satellite)

5. Why We're Here • Perception, Reality & Potential • Show you how to “Use what you know” • For developers and designers • Tips on making the Transition • Show you a Proof of Concept project we built in one week

6. Perception, Reality & Potential • The Developer’s Perspective • The Designer’s Perspective • It’s Pioneer Time!

7. Anatomy of a Project • Ideation • User Experience • Design • Breakup / Integration • Development • Animation

8. Design • Tips Every Silverlight DesignerNeeds to Know • Effects • Photoshop filters = PNGs • Gradient, strokes, shapes = Vector • Fonts • Stick to TrueType fonts (get embedded) • Test them first in Blend • No kerning in Silverlight 2 • Think of Expression as Design as Photoshop meets Illustrator

10. Breakup / Integration • More Automated If Work Is Done In Expression Design • Bitmap Export • Vector Export • XAML Layout Creation • Breakup with 3rd party apps require extra steps to prepare – but ultimately worth it • Designer / Developer Workflow • Optimal situation: Collaborative plan upfront

11. Tips for Developers • XHTML / JS Devs • Server-Side Developers • Flash Developers • Loading Additional XAP files is not easy • Tim Heuer Video • http://tinyurl.com/loadxaps

12. Animation/Video • XAML files are “like MovieClips” • More than one timeline • “Flash / Aftereffects-like” timeline • Effective Use of Masks • Clipping Masks vs. Image Brushes • Video Codec: WMV • Expression Encoder • PNG Sequences • A bit of code goes a long way!

13. Use PNG Sequences for frame-by-frame animations

14. The Project Guitar Hero:GHTunes Widget Launch Demo

16. Re-Using Existing Content • SWF2XAML • http://www.mikeswanson.com/swf2xaml/ • Manual Process

17. Start with FLA

18. Open AI in Illustrator

19. Expression Design

20. Expression Blend

21. Expression Blend

22. Expression Blend

23. Preloader Code • <objectid="Xaml1"data="data:application/x-silverlight-2,"type="application/x-silverlight-2"width="100%"height="100%"> • <paramname="splashscreensource"value="ClientBin/Splash.xaml"/> • <paramname="onSourceDownloadProgressChanged"value="onSourceDownloadProgressChanged"/> • <paramname="source"value="ClientBin/GHTunesMIX.xap"/> • <paramname="onerror"value="onSilverlightError"/> • <paramname="background"value="white"/> • <paramname="minRuntimeVersion"value="2.0.31005.0"/> • <paramname="autoUpgrade"value="true"/> • <ahref="http://go.microsoft.com/fwlink/?LinkID=124807"style="text- decoration: none;"> • <imgsrc="http://go.microsoft.com/fwlink/?LinkId=108181"alt="Get Microsoft Silverlight"style="border-style: none"/> • </a> • </object>

24. Preloader Javascript • functiononSourceDownloadProgressChanged(sender, eventArgs) { • varmyHost = document.getElementById("Xaml1"); • vartxtCounter = myHost.content.findName("txtCounter"); • vargaugeNeedleAngle = myHost.content.findName("gaugeNeedleAngle"); • varcurrentProgress; • if (eventArgs.progress) { • currentProgress = eventArgs.progress; • } else { • currentProgress = eventArgs.get_progress(); • } • txtCounter.Text = Math.floor(currentProgress * 100) + "%"; • gaugeNeedleAngle.Angle = 25 + Math.floor(currentProgress * 125); • if (currentProgress > (1 / 7)) myHost.content.findName("bulb1").Visibility = "Visible"; • if (currentProgress > (2 / 7)) myHost.content.findName("bulb2").Visibility = "Visible"; • if (currentProgress > (3 / 7)) myHost.content.findName("bulb3").Visibility = "Visible"; • if (currentProgress > (4 / 7)) myHost.content.findName("bulb4").Visibility = "Visible"; • if (currentProgress > (5 / 7)) myHost.content.findName("bulb5").Visibility = "Visible"; • if (currentProgress > (6 / 7)) myHost.content.findName("bulb6").Visibility = "Visible"; • }

25. Event Handlers / Storyboards Launch Demo

26. Button Controls Launch Demo

27. Visual State Manager Launch Demo

28. PNG Sequence Launch Demo

29. Wrap Up – Q & A labs.blitzagency.com

30. Please Complete an Evaluation FormYour feedback is important! • Evaluation forms can be found on each chair • Temp Staff at the back of the room have additional evaluation form copies

31. © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.