basic silverlight animation
DESCRIPTION
Presentation of basic animation. This is useful for beginners to study on animationTRANSCRIPT
![Page 1: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/1.jpg)
A QUICK TUTORIALJULY 8 , 2011
Silverlight Animation
Nicko Satria Utama, MCTSEmail : [email protected]
![Page 2: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/2.jpg)
What is silverlight?
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
It is a subset of Windows Presentation Foundation.
![Page 3: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/3.jpg)
What is Silverlight?
It can be built declarative using XAML and imperative using C#, VB or Javascript
Cross browser and cross platform; runs on its own sandbox
It support audio and video. It support networking using HTTP
![Page 4: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/4.jpg)
Animation
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
It animate objects by applying animation to their individual properties.
![Page 5: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/5.jpg)
Minimum Developer Requirement
Pentium 4 1Ghz1 GB RAM30 GB HD
Operating System: Windows 7,Windows Vista; Windows XP Service Pack 2
Visual Studio 2010 Silverlight 4.0 toolsSQL Server 2008
Express
![Page 6: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/6.jpg)
Recommended Developer Requirement
Pentium Core 2 2 GB RAM100 GB HD
Operating System: Windows 7,Windows Vista; Windows XP Service Pack 2
Visual Studio 2010 + SP1
Silverlight 4.0 tools SQL Server 2008 R2
Express
![Page 7: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/7.jpg)
Create project of silverlight
![Page 8: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/8.jpg)
Create silverlight project on VS 2010
Choose Silverlight Application
![Page 9: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/9.jpg)
Create silverlight project on VS 2010
Choose ASP.NET Web Application Project and version of Silverlight to version 4. Leave WCF Ria Services for now
![Page 10: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/10.jpg)
XAML Show in Designer
I use ellipse as an sample
It shows ellipse filled with red
Create an object to animate
![Page 11: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/11.jpg)
Create a storyboard
![Page 12: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/12.jpg)
Add code to its .cs file
Add methods that is inside red circle
![Page 13: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/13.jpg)
Run from Visual Studio
It will launch an IE or others browser based on your settings. Please click anywhere on the red
![Page 14: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/14.jpg)
More storyboard sample
![Page 15: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/15.jpg)
Key frame animation
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
![Page 16: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/16.jpg)
Modify the code in XAML
![Page 17: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/17.jpg)
Run from Visual Studio
The ellipse will animate color changing when your click.
![Page 18: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/18.jpg)
Conclusion
Silverlight make it easy to design an eye-catching web
Designer, animator and software developer can work together on silverlight project.
![Page 19: Basic silverlight animation](https://reader033.vdocuments.site/reader033/viewer/2022061217/54b411f14a79594a128b462f/html5/thumbnails/19.jpg)
FURTHER DISCUSSION ON FORUM MUGI
Thank you