dotUpdate()

Synchronizing media with animation in Silverlight

I am working on a project which consists of several rather long animations that I am building in Blend.  I ran into a problem in adding sound clips that should be played in specific points in the timeline.  Since storyboard only has one event (the end), there was no clear way of starting MediaElement at any specific point in a timeline.

I was directed to a couple of sites for solutions to this problem:

Solution 1

Solution 2

But I came up with a variation that fits my application a little better.

1. Add a textbox to the artboard with an opacity of zero.

2. Add a TextChanged handler for this textbox.

3. In the handler set up ‘if else’ constructs that launch media playback if a specific string is detected in the Text property.

4. In the timeline add keyframes on the textbox that change the Text property to your trigger strings at any point in the animation.

5. For the MediaElement, I set the AutoPlay to true.  Then whenever I change the media source property (in the TextChanged handler), the sound is played.

With this technique, a storyboard is started with various animations.  One of the items animated is the invisible textbox Text field.  When the animation changes the text to a specific keyword, the event handler for the textbox fires and the text field is compared with a list of keywords that trigger the loading of a corresponding media source to the MediaElement which then plays it.