Silverlight Presentation Mar 2008 PWC

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: ), 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: ), 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

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

Silverlight Introduction: PWC

Silverlight Introduction: PWC

Silverlight Introduction: PWC x?key=blend

PWC Silverlight Work Flow:

PWC

Silverlight Work Flow: PWC

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

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

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

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

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

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

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

Install Blend IDE tool (recommend newer version) : Silverlight Installation: PWC L:\Files\Microsoft\Expression\Blend 2.5 March Preview\Blend2.5.en.msi OR : spx?key=blend2dot5 L:\Files\Microsoft\Expression\Blend 2.5 March Preview\Blend2.5.en.msi OR : spx?key=blend2dot5

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:

Blend Samples 1: Silverlight Introduction: PWC

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

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

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

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

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

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

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

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

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:

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:

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:

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:

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

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

Template Showcase:

The End