Bouncing BallWhat you will learn 

In this lesson we will learn how to create a simple bouncing ball animation in blend.

What we will do

We will create a project in expression Blend in which we will create a simple bouncing ball animation using basic shapes tool in Expression Blend.

Before moving on, please read and understand this article first. Introduction to Story Boarding in Expression Blend.

To create a simple bouncing ball animation as shown follow these steps with me:

  1. Go to File > New Project and choose Ssilverlight  >Silverlight Application. Name your project BouncingBall and click Ok as shown below :
    new project in expression blend
  2. 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:
    adding circles
  3. 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 :
    resizing and reshaping circle
  4. 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.
  5. Under Objects and Timeline, click the New Cc295300.86937695-03dd-44ea-aa30-28d4029b3ad0(en-us,Expression.10).png button.

Cc295300.e2e87d8d-17b7-443b-a608-8c5ae681fce8(en-us,Expression.10).png

The Create Storyboard Resource dialog box appears.

Cc295300.ee0efe60-655f-44cf-bea6-30830185b4c0(en-us,Expression.10).png

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 :

create a new keyframe

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.
motion

7. translationSelect 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.

8. Now just resize the blue ball also to give bounce effect as shown below:
bounce effect

 

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:

Taking back the circle

10. Now play the animation by clicking on play button as shown in the picture.

play

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:

addingstoryboarding

 

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