1. Silverlight Presentation Mar 2008 PWC

2. Silverlight Introduction: Microsoft Silverlight is a cross-browser, cross- platform, and cross-device plug-in for delivering the next generation of.NET based media experiences and rich interactive applications for the Web. Now new version released (Version: 2.0.30226.2 ), you know Silverlight 2.0 bring more wonderful updates to us. And Designer can use Blend to design colorful graphics and animations they want. Microsoft Silverlight is a cross-browser, cross- platform, and cross-device plug-in for delivering the next generation of.NET based media experiences and rich interactive applications for the Web. Now new version released (Version: 2.0.30226.2 ), you know Silverlight 2.0 bring more wonderful updates to us. And Designer can use Blend to design colorful graphics and animations they want. PWC

3. Silverlight Introduction: By using Expression Studio and Visual Studio, designers and developers can collaborate more effectively using the skills they have today to light up the Web of tomorrow. PWC

4. Silverlight Introduction: PWC http://www.microsoft.com/silverlight

5. Silverlight Introduction: PWC http://silvelight.net

6. Silverlight Introduction: PWC http://www.microsoft.com/expression/products/overview.asp x?key=blend

7. PWC Silverlight Work Flow:

8. PWC

9. Silverlight Work Flow: PWC

10. Adobe CS --- Photoshop Illustrator Dreamweaver Fireworks Flash IDE (Runtime) AIR Desktop Adobe CS --- Photoshop Illustrator Dreamweaver Fireworks Flash IDE (Runtime) AIR Desktop Front-end Tools & Clients: PWC

11. Microsoft Expression Series: Design, Blend, Media, Web ; Microsoft Expression Series: Design, Blend, Media, Web ; Front-end Tools & Clients: PWC

12. Adobe :Flex, Ajax, FMS, LiveCycle (before is FDS), CF, S7 ; Back-end Tools & Clients: PWC

13. Microsoft Visual Studio 2008 Back-end Tools & Clients: PWC

14. Comparison: Microsoft RIA VS Adobe RIA: PWC Adobe & Microsoft RIA Tools Design & Dev-Flow:

15. Silverlight Installation: User Client Required : A Silverlight Runtime Plug-In : (Download about 4.5 MB) User Client Required : A Silverlight Runtime Plug-In : (Download about 4.5 MB) PWC

16. Software Required: Frontend : Expression Blend Version : 2.5 March Preview Backend : Visual Studio 2008 Version : 9.0.21022.8 RTM Software Required: Frontend : Expression Blend Version : 2.5 March Preview Backend : Visual Studio 2008 Version : 9.0.21022.8 RTM Silverlight Installation: PWC

17. Install Blend IDE tool (recommend newer version) : Silverlight Installation: PWC L:\Files\Microsoft\Expression\Blend 2.5 March Preview\Blend2.5.en.msi OR : http://www.microsoft.com/expression/products/download.a spx?key=blend2dot5 L:\Files\Microsoft\Expression\Blend 2.5 March Preview\Blend2.5.en.msi OR : http://www.microsoft.com/expression/products/download.a spx?key=blend2dot5

18. Blend Samples 1: How to use Blend to create a vector graphic and make it animate? Blend Samples 1: How to use Blend to create a vector graphic and make it animate? PWC Create Silverlight Use Blend:

19. Blend Samples 1: Silverlight Introduction: PWC

20. Use Bitmap graphic in Blend : Make sure your Bitmap save as from PS and FW is *.jpg or *.png format are Blend Bitmap support, right click your project and select Add Existing Item Use Bitmap graphic in Blend : Make sure your Bitmap save as from PS and FW is *.jpg or *.png format are Blend Bitmap support, right click your project and select Add Existing Item Blend Sample 1: PWC

21. Use Bitmap graphic in Blend : The picture you selected will add to your project list : Use Bitmap graphic in Blend : The picture you selected will add to your project list : Blend Sample 1: PWC

22. Use Bitmap graphic in Blend : Double click it and resize : Use Bitmap graphic in Blend : Double click it and resize : Blend Sample 1: PWC

23. Use Bitmap graphic in Blend : Do a copy and use Properties > Transform > Flip Y axis : Use Bitmap graphic in Blend : Do a copy and use Properties > Transform > Flip Y axis : Blend Sample 1: PWC

24. Use Bitmap graphic in Blend : Then choose shadow image and select Brush > Opacity Mask > Gradient Brush,set the black brush Alpha to 0%: Then set the Opacity in Appearance to 60% or lower then image1. Use Bitmap graphic in Blend : Then choose shadow image and select Brush > Opacity Mask > Gradient Brush,set the black brush Alpha to 0%: Then set the Opacity in Appearance to 60% or lower then image1. Blend Sample 1: PWC

25. Use Bitmap graphic in Blend : Press F5 and you will see your silverlight work : Use Bitmap graphic in Blend : Press F5 and you will see your silverlight work : Blend Sample 1: PWC

26. Use Bitmap graphic in Blend : And lets look how to make it move and add some interactive events : Use Bitmap graphic in Blend : And lets look how to make it move and add some interactive events : Blend Sample 1: PWC

27. Blend Samples : 2.How to use Bitmap image in Silverlight vector environment? Import path directly. (jpg, png,not support gif) Available property setting : Opacity, Transform, Color brush, Blend Samples : 2.How to use Bitmap image in Silverlight vector environment? Import path directly. (jpg, png,not support gif) Available property setting : Opacity, Transform, Color brush, Blend Sample 2: PWC

28. Blend Samples : 3. How to convert a Bitmap to Vector graphic ? Blend Samples : 3. How to convert a Bitmap to Vector graphic ? PWC Silverlight Introduction:

29. Blend Samples : 4. How to use Blend to create a reusable user control ? Use Blend create a style button : Blend Samples : 4. How to use Blend to create a reusable user control ? Use Blend create a style button : PWC Silverlight Introduction:

30. Blend Samples : 5. How to use Blend to create a reflection brush (WPF) ? Blend Samples : 5. How to use Blend to create a reflection brush (WPF) ? PWC Silverlight Introduction:

31. Blend with VS2008 Samples : 1.How to use Blend do interactive app with vs2008? Blend with VS2008 Samples : 1.How to use Blend do interactive app with vs2008? PWC Silverlight Introduction:

32. Adobe CS work with Microsoft Expression: Bitmap : Design a picture in Photoshop and Fireworks, save as Silverlight support image file format (*.png, *.jpg) Adobe CS work with Microsoft Expression: Bitmap : Design a picture in Photoshop and Fireworks, save as Silverlight support image file format (*.png, *.jpg) Silverlight Introduction: PWC

33. CS work with Expression: Vector : CS work with Expression: Vector : Silverlight Introduction: PWC

34. Template Showcase:

35. The End