Basic silverlight animation

A QUICK TUTORIALJULY 8 , 2011

Silverlight Animation

Nicko Satria Utama, MCTSEmail : [email protected]

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.

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

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.

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

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

Create project of silverlight

Create silverlight project on VS 2010

Choose Silverlight Application

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

XAML Show in Designer

I use ellipse as an sample

It shows ellipse filled with red

Create an object to animate

Create a storyboard

Add code to its .cs file

Add methods that is inside red circle

Run from Visual Studio

It will launch an IE or others browser based on your settings. Please click anywhere on the red

More storyboard sample

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

Modify the code in XAML

Run from Visual Studio

The ellipse will animate color changing when your click.

Conclusion

Silverlight make it easy to design an eye-catching web

Designer, animator and software developer can work together on silverlight project.

FURTHER DISCUSSION ON FORUM MUGI

Thank you