Basic silverlight animation


Published on

Presentation of basic animation. This is useful for beginners to study on animation

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Basic silverlight animation

  1. 1. A quick tutorial<br />July 8, 2011<br />Silverlight Animation <br />NickoSatriaUtama, MCTS<br />Email :<br />
  2. 2. What is silverlight?<br />According to MSDN, silverlight is a cross-browser, cross-platform implementation of the .NET Framework for building and delivering the next generation of media experiences and rich interactive applications (RIA) for the Web<br />It is a subset of Windows Presentation Foundation. <br />
  3. 3. What is Silverlight?<br />It can be built declarative using XAML and imperative using C#, VB or Javascript<br />Cross browser and cross platform; runs on its own sandbox<br />It support audio and video. <br />It support networking using HTTP<br />
  4. 4. Animation<br />It is an illusion that is created by quickly cycling through a series of images, each slightly different from the last. The brain perceives the group of images as a single changing scene<br />It animate objects by applying animation to their individual properties.<br />
  5. 5. Minimum Developer Requirement<br />Pentium 4 1Ghz<br />1 GB RAM<br />30 GB HD<br />Operating System: Windows 7,Windows Vista; Windows XP Service Pack 2<br />Visual Studio 2010 <br />Silverlight 4.0 tools<br />SQL Server 2008 Express<br />
  6. 6. Recommended Developer Requirement <br />Pentium Core 2 <br />2 GB RAM<br />100 GB HD<br />Operating System: Windows 7,Windows Vista; Windows XP Service Pack 2<br />Visual Studio 2010 + SP1<br />Silverlight 4.0 tools <br />SQL Server 2008 R2 Express <br />
  7. 7. Create project of silverlight<br />
  8. 8. Create silverlight project on VS 2010<br />Choose Silverlight Application<br />
  9. 9. Create silverlight project on VS 2010<br />Choose ASP.NET Web Application Project and version of Silverlight to version 4. Leave WCF Ria Services for now<br />
  10. 10. XAML<br />Show in Designer<br />I use ellipse as an sample<br />It shows ellipse filled with red<br />Create an object to animate<br />
  11. 11. Create a storyboard<br />
  12. 12. Add code to its .cs file<br />Add methods that is inside red circle<br />
  13. 13. Run from Visual Studio<br />It will launch an IE or others browser based on your settings. Please click anywhere on the red<br />
  14. 14. More storyboard sample<br />
  15. 15. Key frame animation<br />It is a drawing that defines the starting and ending points of any smooth transition. They are called "frames" because their position in time is measured in frames on a strip of film<br />
  16. 16. Modify the code in XAML<br />
  17. 17. Run from Visual Studio<br />The ellipse will animate color changing when your click.<br />
  18. 18. Conclusion<br />Silverlight make it easy to design an eye-catching web <br />Designer, animator and software developer can work together on silverlight project.<br />
  19. 19. Further discussion on FORUM MUGI<br />Thank you<br />