CODE GUIDE: How to create Animation in Silverlight

Sample Animation with Silverlight
Silverlight is the one the latest technologies being used in the web application. It is an web plug-in with cross browser ability, makes it penetration in to the market very high. Using Silverlight, we can create a rich UI (not only) web application with Audio, Video enabled, Vector graphical images (crystal clear), and lot more…….
One of the features is Animation. Animation is an illusion by quickly cycling through a series of images, each slightly different from previous one , which makes appearance of continuous movement.
Microsoft Expression blend is a visual tool for designing web applications. It also helps us to create the animation. I will demonstrate how to create an sample animation step by step. Here animations are based on the Keyframes.
Open the Microsoft Expression Blend (I used Blend 4).
1. Go to the file and select ‘New Project’ menu. The available template list will be displayed. Select the Silverlight Application + Website. And enter the project name and change the Location (if you wish) and click ok.

2. In the Left more corner (at the bottom), you can find a tab called ‘Asset’, which lists all the controls available for our web development. Click on it and select the ‘Control’ (or search ‘control’) and location the ‘Text Box’ control and drag it in to the main page Designer (the area appears in white).

3. You can change the properties of the controls and font by using the Properties tab.

4. Select the ‘Textbox’ object and go to the Object menu and select the path option and click ‘Convert to path’. It makes the text objects converted to a continuous path

5. Find the ‘Objects and Timeline’ tab, and right click (or click +) to create a new story board, it is an container in which the key frames are defined.

6. Select the ‘Direct Selection top’ and select the Text box object, The points of your path object are identified on the artboard by small squares

7. Click on the ‘Record Keyframes’ (0+) , creates an key frame (0) appears on the timeline.

8. Move the ‘timeline playhead’ to the time (location) where you want the animation to by end. Do the movement in the textbox object (in this case, i increased the size of the text box object). A another keyframe symbol will appear on the timeline.

9. Now again click ‘Record Keyframe’ (0+) button, which stops the recording. Now your animation is created. Click the ‘Play’ button to text your animation.

10. By default the animation what we created now is appears or plays only once. To keep it running, Select the storyboard, and go to the properties tab, in the ‘Common Properties’, Select ‘Forever’ option for Repeat Behaviour.
IF you want to do the auto reversing, check the ‘AutoReverse’ check box.

11. As of now we just created an animation control, now we need to make it run during an event. We can write it in the code behind to begin the animation or we can user the behaviour control.
12. Go to the Asset tab and find the ‘Controlstoryboardaction’ control under the behaviour category.