Flash skills for silverlight design and development (30 Abr 2010)

1.191 visualizações

Publicada em

Slides from my presentation from Microsoft TechDays2010 Portugal

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.191
No SlideShare
0
A partir de incorporações
0
Número de incorporações
34
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Flash Platform and Silverlight are both “Single Framework” for Graphics
  • Flash Platform and Silverlight are both “Single Framework” for Media
  • Flash Platform and Silverlight are both “Single Framework” for ApplicationsHowever, FlashPlatform also has the Flex Framework ... Not a real “Single Framework”.
  • Both plugins work inside the browser sandbox
  • Both plugins must be instantiated in the HTML
  • - Silverlight is also Out-Of-Browser with support for COM InterOp and possibility to be a full-trust app. In a FullTrustApp, we even may include a WebBrowser control and therefore include any HTML webpage inside Silverlight and even a SWF
  • Silverlight for Linux is being ported by Novell in a project called “Moonlight”.
  • Nowadays, Google is working with Microsoft for a “perfect” experience with Silverlight in Google Chrome browser
  • Blend is somewhat similar to FlashProfessional IDE
  • And VisualStudio is to Silverlight as FlashBuilder is to FlashPlatform
  • From all the available languages for Silverlight development, C# is more easy to “port” from a ActionScript3 background
  • XAML is the declarative language for Silverlight, WPF, Surface and WindowsPhone7. It may be compared with MXML from Flex Framework
  • C# is “more” Strong-typed then ActionScript3 and there are more DataTypes then in ActionScript3 as wellBoth languages are OOP focused, therefore you dont have to change your mindsetIn ActionScript3 we have Packages and NameSpaces, in C# we have Assemblies, diferent name for the same thingAn Event Handler works the same way as a ActionScript3 Event Listener. If you are developing for Silverlight it will do “Bubbling”, if you are developing for WPF it will do “Bubbling” and “Tunneling”.Silverlight has full XML Integration.
  • Silverlight has Multiple Threads: UI (storyboards, renderings,...) / BackgroundWorker / ThreadSilverlight also has Generics - Concept of type parameters, which make it possible to design classes and methods that defer the specification of one or more types until the class or method is declared and instantiated by client codeThese 2 doesnt exists in FlashPlatform or FlexFramework, so it may be strange at the first “runs” for a “Flasher” or “Flexer”.Reflection lets you know more information at runtime about your objects.Dependency Properties are properties to “own” you may do DataBinding and also animate theirs values. They are similar to Flex.LINQ – in ActionScript3 we have E4X and it is similar to LinqToXML with the diference that LinqToXML works with SQL sintaxe. However we may also use LINQ to query Objects and JSON
  • For Silverlight to works as in Flash, we need to use a Canvas Control. Take note that in Silverlight the positioning doesn’t starts in the Child but in the Parent. Therefore we will have a Canvas.SetTop and Canvas.SetLeft.Also take note that in Silverlight we have more Layout Controls so, you should use the right control for the right job !! Don’t stick with Canvas all the time, remember it is the less effective Layout Control of all.
  • If you think of UserControls the same way you think on MovieClips, you are in the right track !!!Check the Project Rosetta website for more info about the UserControls properties mapped to MovieClips properties
  • Think of Controls as FlashPlatform or FlexFramework Components. Remember that Styles only applies to properties and Skins are Templates, reusable in multiple controls
  • “Declarative animation” is XAML code for animations, known as Storyboards. Storyboards have properties like Name, AutoReverse, RepeatBehavior and they are TimeBased.If you use Blend for generating the XAML code, you will be working in an environment similar to Flash Timelines.The animated property type will declare the type of the animation, so you will have DoubleAnimation, ColorAnimation, DoubleAnimationUsingKeyFrame, ...
  • Demo1: A simple Storyboard animationDemo2: Using a Storyboard inside a UserControl. In the CodeBehind will add that UserControl to LayoutRoot with the MouseMove trigger. Show how to add and remove UserControls; add and remove EventHandlers
  • In CodeBehind we also have the possibility to create Storyboards, but they are too much “preset”. If you want to do some code animations as you may be doing in ActionScript3, you will need to know the equivalent for ENTER_FRAME event, and the name is CompositionTarget.Rendering
  • ProceduralDemoApp1: Particle SystemProceduralDemoApp2: Springs
  • Please provide feedback !!! That’s the only way to know what you would like to see on a future session about Blend and to improve myself as a speaker.Thank you.
  • Flash skills for silverlight design and development (30 Abr 2010)

    1. 1. Ricardo Castelhano<br />Flash Skills Applied to Silverlight Design and Development<br />WUX221<br />ITech4All<br />ricardo.castelhano@itech4all.com<br />@RicCastelhano<br />http://www.ricardocastelhano.com<br />
    2. 2. >10 Years Working for a Web with Plugins<br />Adobe Flash Beta-Tester since CS3<br />“Silverlight’ing” since the Beginning<br />Blogger & Tweeterian <br />(XAMLPT / RIAPT / AUG / PontoNetPT)<br />Partner & Consultant @ ITech4All<br />Ricardo Castelhano<br />
    3. 3. Framework<br />Design and Development Tools<br />Programming Languages<br />Mapping Silverlight and Flash<br />Declarative Animation<br />Procedural Animation<br />Flash Skills Applied to Silverlight Design and Development<br />
    4. 4. Framework<br />Design and Development Tools<br />Programming Languages<br />Mapping Silverlight and Flash<br />Declarative Animation<br />Procedural Animation<br />Flash Skills Applied to Silverlight Design and Development<br />
    5. 5. Framework <br />Single Framework<br />Graphics<br />AIR Jordan 23 Mosaic<br />
    6. 6. Framework <br />Single Framework<br />Graphics<br />Media<br />NBC Olympics<br />
    7. 7. Framework <br />Single Framework<br />Graphics<br />Media<br />Applications<br />Microsoft Silverlight4 Facebook Client<br />
    8. 8. Framework <br />In the Browser<br />
    9. 9. Framework <br />Instantiated in HTML<br />
    10. 10. Framework <br />Out-Of-Browser<br />
    11. 11. Framework <br />Cross Platform<br />
    12. 12. Framework <br />Cross Browser<br />
    13. 13. Framework<br />Design and Development Tools<br />Programming Languages<br />Mapping Silverlight and Flash<br />Declarative Animation<br />Procedural Animation<br />Flash Skills Applied to Silverlight Design and Development<br />
    14. 14. Design and Development Tools<br />Microsoft Expression Blend 4 RC<br />
    15. 15. Design and Development Tools<br />Microsoft Visual Studio 2010<br />
    16. 16. Framework<br />Design and Development Tools<br />Programming Languages<br />Mapping Silverlight and Flash<br />Declarative Animation<br />Procedural Animation<br />Flash Skills Applied to Silverlight Design and Development<br />
    17. 17. Programming Languages<br />Common Language Runtime (CLR)<br />C#<br />Visual Basic<br />Dynamic Language Runtime (DLR)<br />Ruby<br />Python<br />Jscript<br />
    18. 18. Programming Languages<br />Common Language Runtime (CLR)<br />C#<br />Visual Basic<br />Dynamic Language Runtime (DLR)<br />Ruby<br />Python<br />Jscript<br />XAML<br />
    19. 19. Programming Languages<br />C#<br />DataTypes<br />Classes and Objects<br />Assemblies<br />Handler<br />XML Integration<br />
    20. 20. Programming Languages<br />C#<br />DataTypes<br />Classes and Objects<br />Assemblies<br />Handler<br />XML Integration<br />Multiple Threads<br />Generics<br />Reflection<br />Dependency Properties<br />LINQ – XML, Objects, JSON<br />
    21. 21. Framework<br />Design and Development Tools<br />Programming Languages<br />Mapping Silverlight and Flash<br />Declarative Animation<br />Procedural Animation<br />Flash Skills Applied to Silverlight Design and Development<br />
    22. 22. Mapping Silverlight and Flash<br />Code Snippets<br />ActionScript3.0<br />C#4.0<br />
    23. 23. Mapping Silverlight and Flash<br />UserControls<br />Group children objects<br />Encapsulate functionality<br />Contain Storyboards<br />Transformable<br />Reusable<br />Project Rosettahttp://www.projectrosetta.com<br />
    24. 24. Mapping Silverlight and Flash<br />Controls<br />Styleable<br />Skinnable<br />Databindable<br />Inheritable<br />Project Rosettahttp://www.projectrosetta.com<br />
    25. 25. Framework<br />Design and Development Tools<br />Programming Languages<br />Mapping Silverlight and Flash<br />Declarative Animation<br />Procedural Animation<br />Flash Skills Applied to Silverlight Design and Development<br />
    26. 26. Declarative Animation<br />XAML<br />Storyboards<br />
    27. 27. Declarative Animation<br />
    28. 28. Framework<br />Design and Development Tools<br />Programming Languages<br />Mapping Silverlight and Flash<br />Declarative Animation<br />Procedural Animation<br />Flash Skills Applied to Silverlight Design and Development<br />
    29. 29. Procedural Animation<br />C#<br />Storyboards<br />Events<br />
    30. 30. Procedural Animation<br />
    31. 31. Conclusion<br />Design: Blend<br />Code: Visual Studio<br />UserControls: “MovieClips” <br />Contros: “Components”<br />XAML: “MXML”<br />C#: “AcrionScript3”<br />Storyboards: “Timeline”<br />CompositionTarget.Rendering: “ENTER_FRAME”<br />
    32. 32.
    33. 33. Other “Blend” Sessions<br />Introdução ao Silverlight 4<br />Dia 20 – Sala3.2 – 12:45<br />Developing Silverlight 4 Solutions with Blend 4<br />Dia 20 – Sala2.5 – 12:45<br />SketchFlow: Do protótipo à Produção<br />Dia 20 - Sala2.5 - 14:15<br />SketchFlow no Desenho de Interfaces Web<br />Dia 20 – Sala20/10 - 15:15<br />Utilizando SketchFlow na Construcção de sites em Silverlight<br />Dia 20 – Sala20/10 - 15:15<br />Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />Dia 20 - Sala2.5 - 17:00 <br />Silverlight: Extensibility Framework + Behaviors<br />Dia 22 - Sala2.3 - 16:40<br />
    34. 34.
    35. 35.
    36. 36. Ricardo Castelhano<br />Flash Skills Applied to Silverlight Design and Development<br />WUX221<br />ITech4All<br />ricardo.castelhano@itech4all.com<br />@RicCastelhano<br />http://www.ricardocastelhano.com<br />

    ×