Synchronizing media with animation in Silverlight

November 4, 2010 at 9:22 am | Posted in Silverlight | 2 Comments

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.



RSS feed for comments on this post. TrackBack URI

  1. If the TextBox solution is working for you that’s all that matters, but what I ended up doing was:

    – added a string DependencyProperty to the control which hosts the Storyboard (i.e. “SoundFilename”)
    – added keyframes to the timeline which changed the value of that string to whatever sound filename(s) to play
    – on the PropertyChangedCallback handler, set a MediaElement’s source based on the new value.

    It’s still not perfect — when the same value is assigned to consecutive keyframes the sound won’t play twice in a row since it didn’t constitute a value change. In those cases I end up “resetting” the value with an empty string between keyframes when I wanted a repeating sound.

    Kinda hard to believe we’re coming up on SL5 and there’s still not a clean and easy way to trigger a sound from a keyframe! (that I’m aware of anyway…)

  2. […] Synchronizing media with animation in Silverlight « dotUpdate()Nov 4, 2010… still not a clean and easy way to trigger a sound from a keyframe! (that I’m aware of anyway…) Comment by Darren Mart— May 3, 2011 # … […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Blog at
Entries and comments feeds.

%d bloggers like this: