Freigestellte Personen in Silverlight Video

Auf jedem guten TV Sender gibt es eine Wetter Fee. Diese meist sehr attraktive Person  choreographiert vor einer blauen oder heute meist grünen Wand. Die Clouds oder Sonnen werden Computer animiert eingespielt.

Dazu brauchen wir eine Wetterfee, eine Kamera, ein Aufnahmestudio, Expression Blend 4 und .. die Möglichkeit in einem  Video eine Farbe auf transparent zu schalten. Die Wetterfee ist meine entzückende Kollegin Lilly. Die Kamera eine Smartflip ( jetzt Cisco). Das Aufnahmestudio eines Fotografen der im gleichen Haus sitzt und eine grüne Rollwand besitzt. Diese rollt man ein Stück über den Boden so das auch keine Kanten sichtbar sind. Dann das ganze nach Expression Blend importiert und per Drag& Drop auf eine Seite ziehen.

image

Warum Lilly hier so seltsame Handbewegungen macht? Ich wollte später eine per Silverlight Animation eine Sonne durchs Bild schieben. Was man hier gut sehen kann ist, das der Hintergrund nicht homogen ist. Das ist mir bei unserem 30 Sekunden Shot nicht aufgefallen. Es liegt daran das Fotografen in der Regel einen Spot auf den Hintergrund legen um das Foto aufzulockern. Hier müsste der Spot abgeschalten werden. Dazu aber gleich mehr.

Seit Silverlight 3 gibt es Pixelshader. Diese helfen Bilder direkt in der Grafikkarte performant zu verändern( Wenn GPU Acceleration aktiviert ist). Per Standard ist Schatten und Unschärfe vorhanden. In Blend 4 noch ein wenig mehr Shader. Wir brauchen aber einen Pixelshader der aus Grün Transparent macht.

Dies nennt man fachspezfisch den ChromaKey fürs Alpha Blending. Entsprechend auch der Name ChromaKeyAlphaEffect. Der Download für die installierbare MSI findet sich hier

http://code.msdn.microsoft.com/SL3ChromaKeyEffect/Release/ProjectReleases.aspx?ReleaseId=3900

Leider ist der aktuelle Build 1.3 vom 9.Februar.2010 noch SL 3. Entsprechend ist Blend 4 und Visual Studio 2010 ein wenig mit der Aufgabe überfordert und man benötigt etwas Handarbeit. Zunächst setzt man eine Referenz im Silverlight Projekt auf Synergist.Effects.dll. Dann kann man in Expression Blend im Reiter Assets den Chroma Key Alpha Effect auf das Video ziehen.

image
Im Property Dialog sollte dann entweder direkt in den Eigenschaften des ChromaAlphaEffect (siehe Bild) oder in den Eigenschaften des Videos im Effect Reiter die Farbe ausgewählt werden können.

image

Am besten geht das mit dem Color Picker des üblichen Farbdialoges. Leider tritt hier der erste Bug zu Tage. Das zusätzliche Property Tolerance wird nicht angeboten. Damit kann man den Grünbereich etwas aufweiten. Mögliche Werte sind 0-1. Ganz gut trifft oft rund um 0,2.

Aktuell sieht dann Lilly so aus.

image

Wenn man im XAML Source dann Tolerance setzt,

<MediaElement   x:Name="lilly1_wmv" Source="lilly1.wmv" 
Stretch="Fill" AutoPlay="True"
MediaEnded="lilly1_wmv_MediaEnded" > <MediaElement.Effect> <Synergist_Effects:ChromaKeyAlphaEffect Tolerance="0.2" ColorKey="#FF9DE094"/> </MediaElement.Effect> </MediaElement

siehts in Blend so aus.

image

In Visual Studio 2010 ist es im Ergebnis das gleiche. Allerdings lauffähig ist das ganze schon. Also ab  in den Browser und staunen.

image

Noch nicht perfekt und ich habe deswegen auf die Animation verzichtet aber ich glaube wir machen noch einen zweiten Dreh mit besseren Hintergrund.

Kommentare sind geschlossen