To create a simple bouncing ball animation as shown follow these steps with me:
- Go to File > New Project and choose Ssilverlight >Silverlight Application. Name your project BouncingBall and click Ok as shown below :
- Now from the Tool bar available at the left side of your application just add two circles and color the one circle blue and other with black from choosing Brush > Fill inside the properties windows of circle mostly available at the right side of your application as shown below:
- Now we need to re-shape the black circle to give it a look of shadow. Select the black ball by clicking on it and by clicking on any of its corner or border you can perform re-sizing and reshaping operations. Your black circle must look like this :
- Now it’s the time to create a story board for our animation, if you haven’t read this article ( Introduction to Story Boarding in Expression Blend ) prior to this then please read it first.
- Under Objects and Timeline, click the New button.
The Create Storyboard Resource dialog box appears.
In the Name (Key) field, type a name for the storyboard, and then click OK. The new storyboard opens in recording mode. In my case i’m giving it a name BouncingBall.
6. Now on your story board timeline create new key frame as shown below :
Now the blend knows from where your animation will begin because you have created first keyframe. Now go to 5 nanoseconds on your timeline by moving the yellow line on the keyframe to 5 and create a new keyfrane here, you will see the following line there which will tell that the motion of your animation is now being recorded.
7. Select the blue circle now and take it near to the black shadow which we have created in step 3 as shown in the figure. Now you will see a new key frame will be added automatically to the 5 nanoseconds on your timeline. Remember to move a control from one place to another means translation so we have perform translation here.
9. Now again on your storyboard time line go to 10 nanosecond by moving the yellow line to 10 on timeline. And again select the blue circle and take back it to the original position in original shape and create a new key frame here as shown below:
10. Now play the animation by clicking on play button as shown in the picture.
11. Now the most important thing is to add [ControlStoryBoardAction] to our animation which will control the animation. For this in the assets tabs as shown below type “ControlStoryBoardAction” in the search bar. And controlStoryBoardAction’s option will be appear just drag and drop it on the UserControl as shown below and perform the steps according to the picture below:
12. Now Build and Run project from Project Menu.
Now you will see a ball bouncing on your work-space. That’s all for now. If you are facing any problem then please don’t hesitate to contact me. Thanks