Beginning Web Development, Silverlight, and ASP.NET AJAX

406
CHAPTER 16 ■ PROGRAMMING SILVERLIGHT WITH XAML AND JAVASCRIPT
Figure 16-11. Creating a new storyboard
Now that you’ve done this, the timeline editor will appear. This is a very simple tool
that allows you to generate animations quickly and easily (see Figure 16-12).
Figure 16-12. Using the timeline editor
Drag the yellow time indicator to the 0:00.500 mark (half of a second) and add a
keyframe at this point. To add a keyframe, you use the tool with the green + on it, located
immediately above the timeline window. You can see it just to the left of the 0:00.500 label
in Figure 16-12. A blob will appear on the timeline, indicating that there is a key frame
there.
Now, with the timeline still on 0:00.500, use the Property Editor to change the color of
the rectangle to full blue (0 red, 0 green, 255 blue).
Then return to the timeline editor, drag the yellow bar to the 1 second mark, add a
new key frame, and go back to the Property Editor to change the color back to 0 red, 0
green, 127 blue.
You’ve now defined an animation that will change the intensity of the blue from 127
to 255 over 0.5 seconds, before returning back to 127 over the next 0.5 seconds.
Repeat this process for three other rectangles—one red, one green, and one yellow.
For yellow, use equal values of red and green (e.g., dimmed is 127 red, 127 green, 0 blue).
Once you’ve created them all, defined their animations, and added a couple of
TextBlocks that will be used for starting the game and showing your current round, you
should have XAML that looks like Listing 16-1.