Makale Özeti

Silverlight 1.0 ile ilgili tüm yazılarda video uygulamalarındaki Silverlight gücünden bahsediliyor. Biz de bu makalemiz boyunca basit bir Silverlight video oynatısıcısı yaparak MediaElement'i inceledikten sonra MediaElement'in yönetiminden ve sonraki aşamada da VideoBrush ile MediaElementler ile beraber gelen videoların ekranda farklı konumlara yansıtılmasından bahsedeceğiz.

Makale

Expression Blend 2 September Preview yazılımını kullanacağımız bu demoda yeni bir Silverlight (JavaScript) projesi yaratarak Page1.xaml üzerinde çalışacağız. Dosyamıza bir adet MediaElement eklememiz gerekiyor, bunun için Expression Blend 2 içerisinde sol araç çubuğundan Asset Library'ye girerek "MediaElement" yazarak kontroller arasında arama yaptırmamız gerekiyor. Kontrol listesi içerisinde MediaElement'i bulduktan sonra sayfaya ekleyebilirsiniz.

Asset Library içerisinden MediaElement'imizi buluyoruz.
Asset Library içerisinden MediaElement'imizi buluyoruz.

MediaElement'i sayfaya ekledikten sonra sıra geldi bir de video dosyası eklemeye. MediaElement'e ait Source özelliğine Blend 2 içerisinden bir video bağladığımızda video dosyasının bir kopyası projemize otomatik olarak ekleniyor.

MediaElement'e ait Source özelliğine videomuzu gösteriyoruz.
MediaElement'e ait Source özelliğine videomuzu gösteriyoruz.

Bu işlemleri tamamladıktan sonra Silverlight uygulamamızı direk çalıştırabiliriz. Video dosyamız MediaElement içerisinde oynatılıyor olacaktır. Şimdi gelin videonun üzerine tıklandığında durmasını sonra da tekrar tıklandığında devam etmesini sağlayalım. Bunun için MediaElement'e ait MouseLeftButtonDown özelliğine bir JavaScript fonksiyonu atamamız gerekiyor. Maalesef bunu şimdilik direk XAML kodu içerisinde yapmamız gerekiyor, Expression Blend 2 içerisinde bu işlem için bir arayüz yok. Benim tavsiyem Video projesini Blend 2 ile beraber aynı anda Visual Studio ile de açmanız. Visual Studio içerisinde XAML Intellisense desteğini de kullanarak daha rahat bir çalışma ortamı yaratabilirsiniz. VideoTiklandi adinda bir JavaScript fonksiyonunu aktardığımız MediaElement nesnemizi içeren XAML kodumuzun tamamı aşağıdaki şekilde sonlanıyor.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="400" Height="400"

  Background="White"

  x:Name="Page"

  >

  <MediaElement Canvas.Left="8" Canvas.Top="8" Source="Bear.wmv" MouseLeftButtonDown="VideoTiklandi"/>

</Canvas>


Sıra geldi JavaScript fonksiyonumuzun kendisini yazmaya. Page.xaml.js adında Expression Blend 2 tarafından yaratılmış JavaScript dosyasında bize örnek olması amacıyla bazı kodlar yerleştirilmiş. İlk olarak bu kodları silerek Page.xaml.js'i aşağıdaki hale getirmemiz gerekiyor.

if (!window.VideoYansima)

  window.VideoYansima = {};

 

VideoYansima.Page = function()

{

}

 

VideoYansima.Page.prototype =

{

  handleLoad: function(control, userContext, rootElement)

  {

  }

}


Tüm bu kodların devamına VideoTiklandi JavaScript fonksiyonumuzu tanımlayalım. Fonksiyonumuz video eğer oynatılıyorsa durduracak, durdurulmuş durumdaysa tekrar devam ettirecek. Videonun var olan durumunu saklamak üzere Oynuyor adında bir JavaScript değişkeni kullanacağız.

var Oynuyor = true;

 

function VideoTiklandi (sender, args)

{

  if (Oynuyor)

  {

    sender.pause();

    Oynuyor = false;

  }

  else

  {

    sender.play();

    Oynuyor = true;

  };

}


Yukarıdaki kod içerisindeki standart JavaScript işlemlerinin yanı sıra Silverlight ile ilişkili olarak dikkat etmemiz gereken noktalardan biri MediaElement'imize sender JavaScript objesi üzerinden ulaşabiliyor olmamız. Hali hazırda JavaScript fonksiyonumuzu MediaElement üzerinden tetiklediğimiz için sender nesnesi de MediaElement'in ta kendisi oluyor. MediaElement'in doğrudan play(), pause() ve stop() metodlarını kullanarak videoyu durdurabilir, başlatabilir veya bulunduğu yerden devam ettirebiliriz.

Örneğimize VideoBrush ile devam edeceğiz. İlk olarak MediaElement nesnemizi biraz daha ufaltarak yansıma için ekranda yer açalım. Sonrasında da MediaElement'imize bir isim vereceğiz.

  <MediaElement x:Name="Goruntu" Source="Bear.wmv" MouseLeftButtonDown="VideoTiklandi" Width="384" Height="288" Stretch="Fill" Canvas.Left="8" Canvas.Top="8"/>


Yukarıdaki biri x:Name diyerek herhangi bir elemente isim verme şansımız var. Bu işlemi Expression Blend 2 içerisinde görsel arayüzden de yapabiliriz.

MediaElement'imize isim veriyoruz.
MediaElement'imize isim veriyoruz.

Verdiğimiz bu isim ileride bir VideoBrush tanımlarken çok işimize yarayacak. Şimdi gelin videonun yansımasını gösterecek olan, ekranda taşıyacak olan nesnemizi belirleyelim. Bunun için basit bir dikdörtgen (rectangle) kullanacağız. Rectangle nesnesini Expression Blend 2 içerisinde solda araç çubuğunda bulabilirsiniz. Dikdörtgenin bir yansımayı temsil edebilmesi için perspektifi ile oynamanın yanı sıra dikdörtgene bir de OpacityMask uygulayacağız.

Dikdörtgenimize uyguladığımız perspektif ve yansıma efektleri.
Dikdörtgenimize uyguladığımız perspektif ve yansıma efektleri.

Yukarıdaki ekran görüntülerinde de görebileceğiniz üzere ilk olarak dikdörtgenin Y ekseninde yansımasını alıyoruz sonrasında da perspektif veriyoruz. Son olarak da sıra geldi bir OpacityMask uygulamaya. Böylece yansıma görünür durumdan başlayarak şeffaflığa doğru kaybolacak.

OpacityMask ayarlarımızı yapıyoruz.
OpacityMask ayarlarımızı yapıyoruz.

Dikdörtgeni Expression Blend 2 içerisinde seçtikten sonra sağ sütundan Properties sayfasında OpacityMask'ı seçiyoruz. OpacityMask olarak uygulamak üzere bir Gradient seçerek gradient renklerinden birinin Alpha değerini sıfır yaparak şeffaftan görünürlülüğe doğru giden bir efekt yaratıyoruz. Efektin yönünü ayarlamak için Expression Blend 2'nin sol araç çubuğundan Brush Transform aracını kullanabilirsiniz.

Tüm bunları tamamladığımızda dikdörtgenimizin XAML kodu aşağıdaki şekilde sonlanıyor.

  <Rectangle Width="380.569" Height="70" Canvas.Top="297" RenderTransformOrigin="0.5,0.5" Canvas.Left="-25" Opacity="0.8">

    <Rectangle.RenderTransform>

      <TransformGroup>

        <ScaleTransform ScaleX="1" ScaleY="-1"/>

        <SkewTransform AngleX="23.963" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="51.527" Y="0"/>

      </TransformGroup>

    </Rectangle.RenderTransform>

    <Rectangle.OpacityMask>

      <LinearGradientBrush EndPoint="0.514,0.957" StartPoint="0.507,0.129">

      <GradientStop Color="#00000000" Offset="0"/>

      <GradientStop Color="#FFFFFFFF" Offset="1"/>

    </LinearGradientBrush>

    </Rectangle.OpacityMask>

  </Rectangle>


Tüm ayarlarımızı tamamladığımıza göre sıra geldi bir VisualBrush tanımlayarak dikdörtgenini içini bu VisualBrush ile doldurmaya. Bu işlemleri direk XAML kodları yazarak yapacağız. Aşağıda bir VisualBrush'ın nasıl tanımlandığını inceleyelim.

      <VideoBrush SourceName="Goruntu" />


Hiç zor bir kod sayılmaz. Tek yapmamız gereken hedef video kontrolünün adını SourceName özelliğine aktarmış olmak. Tanımladığımız bu VideoBrush'ı dikdörtgenin Fill değerine atayacağız. XAML sayfamızın tamamının son hali aşağıdaki şekilde sonlanıyor.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="435" Height="382"

  Background="White"

  x:Name="Page"

  >

  <MediaElement x:Name="Goruntu" Source="Bear.wmv" MouseLeftButtonDown="VideoTiklandi" Width="384" Height="288" Stretch="Fill" Canvas.Left="8" Canvas.Top="8"/>

  <Rectangle Width="380.569" Height="70" Canvas.Top="297" RenderTransformOrigin="0.5,0.5" Canvas.Left="-25" Opacity="0.8">

    <Rectangle.Fill>

      <VideoBrush SourceName="Goruntu" />

    </Rectangle.Fill>

    <Rectangle.RenderTransform>

      <TransformGroup>

        <ScaleTransform ScaleX="1" ScaleY="-1"/>

        <SkewTransform AngleX="23.963" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="51.527" Y="0"/>

      </TransformGroup>

    </Rectangle.RenderTransform>

    <Rectangle.OpacityMask>

      <LinearGradientBrush EndPoint="0.514,0.957" StartPoint="0.507,0.129">

      <GradientStop Color="#00000000" Offset="0"/>

      <GradientStop Color="#FFFFFFFF" Offset="1"/>

    </LinearGradientBrush>

    </Rectangle.OpacityMask>

  </Rectangle>

</Canvas>


VisualBrush ile yarattığımız video yansıması.
VisualBrush ile yarattığımız video yansıması.

Bu yazımızda da VideoBrush tanımlamayı, nesnelere isim vermeyi, dikdörtgen nesnelerini ve transform işlemlerinin bir kısmını inceledik. Silverlight ile videoların yansımalarını almak bu kadar kolay. Bu yansımaların herhangi bir performans alanında dezavantajı yok.

Biz örneğimizde tanımlamış olduğumuz VisualBrush'ı bir Rectangle'a ait Fill özelliğine aktardık. İsterseniz VisualBrush'ları aşağıdaki şekilde istediğiniz yere aktarabilirsiniz.

  <TextBlock Width="244" Height="84" Canvas.Top="300" FontSize="72" FontWeight="Bold" Text="TextBlock" TextWrapping="Wrap">

    <TextBlock.Foreground>

      <VideoBrush SourceName="Goruntu" />

    </TextBlock.Foreground>

  </TextBlock>


Bu örnekte sayfaya yerleştirdiğimiz bir TextBlock nesnesinin ForeGround özelliğine VisualBrush tanımladık. Böylece TextBlock içerisinde yazan yazıların içinde videomuz oynatılacak.

Yazının içerisinde video yerleştiriyoruz.
Yazının içerisinde video yerleştiriyoruz.

Tüm bu video işlemleri çok kolaylıkla sadece birkaç satır kod ile en ufak bir performans kaybı olmaksızın yapılabilir. Gerisi tamamen sizin hayal gücünüze kalmış.

Hepinize kolay gelsin.

Daron Yöndem
MCPD, MCITP, MCTS, MCSD, MCAD
MCDBA, MCP, ACP, ICSD, IEL'03
http://daron.yondem.com