1. Syncing Audio, Video and Animations in Silverlight Dan Wahlin

2. Session's Twitter Hash Tag #MIX10Sync

3. Agenda What Problem Are We Solving? Sync Options Using Media Markers Using Attached Properties Creating Media Behaviors

4. What Problem Are We Solving?

5. Animation 1 Begins Animation 2 Begins Animation 3 Begins …. Animation 1 Begins Animation 2 Begins Animation 3 Begins …. Video 1 Plays Video 1 Stops Audio 1 Plays Video 1 Plays Video 1 Stops Audio 1 Plays The End Goal

6. Sync Options Empty Storyboard Media Markers Attached Properties Media Behaviors

7. Sync Options Empty Storyboard Media Markers Attached Properties Media Behaviors

8. Media Markers Markers provide a way to raise events at specific times as audio or video plays Supported by Expression Encoder MediaElement supports markers: – Markers property – MarkerReached event Useful for media-driven syncing of audio, video and animations

9. Creating Media Markers 1 3 4 2

10. Exporting Media Markers 5

11. Media Marker XML Marker XML file created by Expression Encoder: <Marker Time="00:00:02" Value="Media1" GenerateKeyFrame="True" GenerateThumbnail="False" /> <Marker Time="00:00:04" Value="Media2" GenerateKeyFrame="True" GenerateThumbnail="False" />

12. Using Media Markers Adding to the Markers collection: void MainPage_Loaded(object sender, RoutedEventArgs e) { XDocument doc = XDocument.Load("Markers.xml"); var markers = from marker in doc.Descendants("Marker") select new TimelineMarker { Text = marker.Attribute("Value").Value, Time = TimeSpan.Parse( marker.Attribute("Time").Value) }; foreach (var marker in markers) { this.MyMedia.Markers.Add(marker); } this.MyMedia.MarkerReached += MyMedia_MarkerReached; this.MyMedia.Play(); }

13. Demo: Using Media Markers

14. Sync Options Empty Storyboard Media Markers Attached Properties Media Behaviors

15. Attached Properties Animations can target Attached Properties: Custom Attached Properties can be used to sync animations with audio/video As an Attached Property value changes (due to animation) an event can be raised

16. Creating an Attached Property Using DependencyProperty.RegisterAttached() public class StoryboardTimer { public static readonly DependencyProperty MillisecondsProperty = DependencyProperty.RegisterAttached( "Milliseconds", typeof(double), typeof(StoryboardTimer), new PropertyMetadata(0.0, new PropertyChangedCallback(OnMillisecondsChanged)) ); }

17. Animating an Attached Property Storyboard.SetTargetProperty(MillisecondsAnimation, new PropertyPath(StoryboardTimer.MillisecondsProperty)); StoryboardTimer.MediaKeyFrameTriggered += MediaTimeline_MediaKeyFrameTriggered; void MediaTimeline_MediaKeyFrameTriggered(...) { SyncMedia(e.Milliseconds); //Play or stop media }

18. Demo: Using Attached Properties

19. Sync Options Empty Storyboard Media Markers Attached Properties Media Behaviors

20. Behaviors provide a flexible way to sync media with animations and perform special effects Supported in Visual Studio and Expression Blend Add new "behavior" to an existing element to extend its functionality Can be attached directly to a Storyboard when media needs to be synced with animations

21. The MediaTimelineBehavior MediaTimelineBehavior simplifies syncing media and animations: – Attach to Storyboard – Define media keyframes declaratively, in external file or in code – Monitors Storyboard's current time – Automatically starts, stops or pauses media at appropriate times based upon media keyframes

22. Creating the Behavior Creating the MediaTimelineBehavior: public class MediaTimelineBehavior : Behavior { protected override void OnAttached() { base.OnAttached(); _Storyboard = this.AssociatedObject; //Create DispatcherTimer object } public void Begin() { //Start Storyboard and DispatcherTimer } protected override void OnDetaching() { base.OnDetaching(); //Unhook events and stop DispatcherTimer } }

23. Using the MediaTimelineBehavior

24. The SlowMotionVideoBehavior SlowMotionVideoBehavior allows a video to be played in slow motion for a specific duration: <sync:SlowMotionVideoBehavior x:Name="slowmotionBehavior" SlowMoStartTime="00:00:01" Duration ="00:00:30" />

25. Demo: Using Media Behaviors

26. Questions?

27. Contact Info Blog and Code http://weblogs.asp.net/dwahlin Twitter @DanWahlin Email: dwahlin@theWahlinGroup.com