Modifying SL Animations Using C# - Page 2
       by kirupa  |  7 November 2008

In the previous page, you got a brief overview of what you will be doing, and you downloaded the sample project I had created to help you follow along with my instructions. In this page, let's get a better understanding of the animation that you will be modifying.

Looking at the Animation
Before diving in and writing some code, let's look at what the animation is actually doing. The end result is easy. Your animation changes the background gradient from one pair of colors to another pair. How that is actually represented is interesting.

In Blend, select the ChangeColor storyboard by accessing it via the Storyboard picker from the Objects and Timeline panel:

[ select your ChangeColor storyboard by accessing it via the Storyboard picker ]

Once you have selected your ChangeColor storyboard, you will find yourself in the Timeline recording mode where you get to see what the animation is actually doing. From here, if you drag your playhead slider to the 1 second mark, notice what your Brushes panel in the Properties Inspector is showing:

[ your Brushes panel shows you the colors that you'll be animating to ]

You will have gone from having a gray/white gradient to the light blue/blue gradient you see in the above image. If you change the gradient colors to something else and test your application, you will see that your animation fades into the new colors that you chose when you click the Randomize Color button. In most cases, this is all you would really need to know about how to create or modify this animation.

As you can guess, though, what you are attempting to do does not fall under the "most cases" umbrella. Therefore, what I want you to focus on is the object tree:

[ in the timeline recording mode, your object tree emphasizes what is being animated ]

The red triangles in the object tree indicate the element and its main property that the animation is modifying. Keep expanding the red triangles until you hit the last node and can expand no more:

[ expand the properties until you hit both of the Color nodes ]

What you are seeing is the expanded path to the property whose value you are modifying. On the surface, all you did was change your gradient colors in the Brushes panel. Under the hood, that simple gradient color change is is actually a fairly complex path that ends at the two Color properties you see.

Make sure your playhead slider is at the 1 second mark and select the first Color property under the [0] node as shown below:

[ select the first Color node ]

Once you have selected that Color property, take a look at what you see in your Properties Inspector. You will see an entry for just the first color from the gradient you had in the Brushes panel before:

[ the first Color corresponds to the first color in your gradient ]

Isn't it pretty cool how you can micro in on the keyframe and the actual value of the property that is being modified?! Anyway, not everything in this page is just sightseeing. In the Name field, give this color the name Color0:

[ give this keyframe the name Color0 ]

Repeat what you just did for your second gradient color. In your object tree, click on the Color property under [1]:

[ select the second Color property in your Object Tree ]

In your Properties Inspector, in the Name field, give this color the name Color1:

[ give this color the name Color1 ]

What you have just done is given each of the keyframes representing your two gradient colors a name. By giving them a name, you make it easier to access them via code as you will see shortly on the next page.

Onwards to the next page!

1 | 2 | 3 | 4