Syncing Audio, Video and Animations in Silverlight - PowerPoint Presentation

Slide1

Syncing Audio, Video and Animations in Silverlight

Dan WahlinSlide2

Session's Twitter Hash Tag

#MIX10SyncSlide3

Agenda

What Problem Are We Solving?Sync OptionsUsing Media MarkersUsing Attached Properties

Creating Media BehaviorsSlide4

What

Problem Are We Solving?Slide5

Animation 1 Begins

Animation 2 BeginsAnimation 3 Begins

….

Video 1 Plays

Video 1 Stops

Audio 1 Plays

The End GoalSlide6

Sync Options

Empty Storyboard

Media Markers

Attached Properties

Media BehaviorsSlide7

Sync Options

Empty Storyboard

Media Markers

Attached Properties

Media BehaviorsSlide8

Media Markers

Markers provide a way to raise events at specific times as audio or video playsSupported by Expression EncoderMediaElement supports markers:

Markers propertyMarkerReached eventUseful for media-driven syncing of audio, video and animationsSlide9

Creating Media Markers

1

3

4

2Slide10

Exporting Media Markers

5Slide11

Media Marker XML

Marker XML file created by Expression Encoder:

<?xml version="1.0" encoding="utf-8"?><Markers>

<Marker

Time="00:00:02"

Value="Media1"

GenerateKeyFrame

="True"

GenerateThumbnail

="False" />

<Marker

Time="00:00:04"

Value="Media2"

GenerateKeyFrame

="True"

GenerateThumbnail

="False" />

</Markers>Slide12

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

();

}Slide13

Demo:

Using Media MarkersSlide14

Sync Options

Empty Storyboard

Media Markers

Attached Properties

Media BehaviorsSlide15

Attached Properties

Animations can target Attached Properties:<

DoubleAnimation

Storyboard.TargetProperty

="

(

Canvas.Top

)

" />

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 raisedSlide16

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

))

);

}Slide17

Animating an Attached Property

<

StackPanel x:Name="

LayoutRoot

"

sync:StoryboardTimer.Milliseconds="0">

<

DoubleAnimation

x:Name="

MillisecondsAnimation

"

Storyboard.TargetName

="

LayoutRoot

" Duration="00:00:15"

From="0" To="15000" By="50" />

Storyboard.SetTargetProperty

(

MillisecondsAnimation

, new

PropertyPath

(

StoryboardTimer.MillisecondsProperty

));

StoryboardTimer.MediaKeyFrameTriggered

+=

MediaTimeline_MediaKeyFrameTriggered

;

void

MediaTimeline_MediaKeyFrameTriggered

(...) {

SyncMedia

(

e.Milliseconds

); //Play or stop media

}Slide18

Demo:

Using Attached PropertiesSlide19

Sync Options

Empty Storyboard

Media Markers

Attached Properties

Media BehaviorsSlide20

Media Behaviors

Behaviors provide a flexible way to sync media with animations and perform special effectsSupported in Visual Studio and Expression BlendAdd new "behavior" to an existing element to extend its functionalityCan be attached directly to a Storyboard when media needs to be synced with animationsSlide21

The MediaTimelineBehavior

MediaTimelineBehavior simplifies syncing media and animations:Attach to Storyboard

Define media keyframes declaratively, in external file or in codeMonitors Storyboard's current time

Automatically starts, stops or pauses media at appropriate times based upon media

keyframesSlide22

Creating the Behavior

Creating the MediaTimelineBehavior:

public class

MediaTimelineBehavior

:

Behavior<Storyboard> { 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

}

}Slide23

Using the MediaTimelineBehavior

<Storyboard x:Name="

SyncStoryboard">

<i:Interaction.Behaviors>

<sync:MediaTimelineBehavior

>

<

sync:MediaTimelineBehavior.MediaKeyFrames

>

<

sync:MediaKeyFrame

TargetName

="Media1"

KeyTime

="00:00:02"

MediaAction

="Play" />

<

sync:MediaKeyFrame

TargetName

="Media1"

KeyTime

="00:00:05"

MediaAction

="Stop" />

<

sync:MediaKeyFrame

TargetName

="Media2"

KeyTime

="00:00:03"

MediaAction

="Play" />

<

sync:MediaKeyFrame

TargetName

="Media2"

KeyTime

="00:00:06"

MediaAction

="Stop" />

</

sync:MediaTimelineBehavior.MediaKeyFrames

>

</

sync:MediaTimelineBehavior

>

</i:Interaction.Behaviors>

<!-- Storyboard Animations -->

</Storyboard>Slide24

The SlowMotionVideoBehavior

SlowMotionVideoBehavior allows a video to be played in slow motion for a specific duration:

<

MediaElement

x:Name="Media1" AutoPlay="True" Volume="0" Source="Wildlife.wmv"> <

ic:Interaction.Behaviors>

<

sync:SlowMotionVideoBehavior

x:Name="

slowmotionBehavior

"

SlowMoStartTime

="00:00:01"

Duration ="00:00:30" />

</

ic:Interaction.Behaviors

>

</

MediaElement

>Slide25

Demo:

Using Media BehaviorsSlide26

Questions?Slide27

Contact Info

Blog and Code

http://weblogs.asp.net/dwahlin

Twitter

@

DanWahlin

Email:

dwahlin@theWahlinGroup.comSlide28