Video di Silverlight 3 dan 3D Projection Sederhana

Microsoft Expression 3 dan Silverlight 3 yang diluncurkan 10 Juli 2009, yang di selenggarakan secara virtual di www.seethelight.com. Microsoft juga telah memperbarui Silverlight untuk para developer dengan lebih dari 60 kontrol yang dapat diubah, tampilan baru, serta deep linking untuk menandai halaman dalam Rich Internet Application (RIA). Aplikasi tersebut juga menyediakan mesin pencari yang lebih maksimal, pendukung data yang makin tinggi serta penampilan yang lebih baik.

Fitur “projection” yang bisa Anda pakai untuk membuat Aplikasi web Anda lebih interaktif dengan 3D nya. Lebih Memudahkan developer untuk menambah animasi, grafik, audio dan video ke dalam web.

Berikut ini contoh sederhana dalam embedding video dengan silverlight…
Pertama Anda buka Visual Studio 2008, saya menggunakan Visual Studio 2008 Team System SP 1, sebelumnya pastikan Anda sudah menginstall Silverlight 3 Tools, Deep Zoom Composer, Microsoft Expression 3. (Silahkan Anda cek di http://silverlight.net/GetStarted/).
GetStarted
Langkah selanjutnya, buatlah project baru, File > New > New Project > Visual C# > Silverlight> Silverlight Application. Beri nama project Anda VideoPlayer.

New Project
Kemudian pada dialog New Silverlight Application, pilih Asp.Net Web Application Project dan klik OK.
New Silverlght Application ProjectKemudian Anda tambahkan video dengan extensi  *.wmv,  klik kanan pada Folder ClientBin, add > existing item, cari video yang Anda butuhkan.
Kemudian pada MainPage.xaml anda ketikkan kode sebagai berikut :

  <grid x:Name="LayoutRoot" Width="400" Height="400" Background="Azure">
        <mediaelement x:Name="Video" Source="Transformers01.wmv"></mediaelement>
    </grid>

Kemudian tambahkan event mouse move, event yang terjadi ketika mouse Anda digerakkan dekat dengan Aplikasi Silverlight Anda.

MouseMove

  <grid x:Name="LayoutRoot" Width="400" Height="400" Background="Azure">
        <mediaelement x:Name="Video" Source="Transformers01.wmv"     MouseMove="Video_MouseMove">
        </mediaelement>
    </grid>

Kemudian pada MainPage.xaml.cs akan terdapat method yang mendefinisikan event tersebut yang nantinya akan kita isi.
Kemudian di dalam tag MediaElement tambahkan

            <mediaelement .Projection>
<planeprojection x:Name="rotateVideo"></planeprojection>
            </mediaelement>

Lengkapnya seperti ini :

<usercontrol x:Class="VideoPlayer.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <grid x:Name="LayoutRoot" Width="400" Height="400" Background="Azure">
        <mediaelement x:Name="Video" Source="Transformers01.wmv" MouseMove="Video_MouseMove">
            </mediaelement><mediaelement .Projection>
<planeprojection x:Name="rotateVideo"></planeprojection>
            </mediaelement>
    </grid>
</usercontrol>

Kemudian pada MainPage.xaml.cs (sebagai code behind nya MainPage.xaml), Anda tambahkan code sbb :

private void Video_MouseMove(object sender, MouseEventArgs e)
{
titik = e.GetPosition(LayoutRoot);

rotateVideo.RotationX = ((titik.X – (LayoutRoot.ActualWidth / 2)) /
LayoutRoot.ActualWidth) * 100;
rotateVideo.RotationY = ((titik.Y – (LayoutRoot.ActualHeight / 2)) /
LayoutRoot.ActualHeight) * 100;
}

Lengkapnya seperti ini :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace VideoPlayer
{

public partial class MainPage : UserControl
{
private Point titik;

public MainPage()
{
InitializeComponent();
Loaded += new RoutedEventHandler(MainPage_Loaded);
}

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
LayoutRoot.MouseMove += new MouseEventHandler(Video_MouseMove);
}

private void Video_MouseMove(object sender, MouseEventArgs e)
{
titik = e.GetPosition(LayoutRoot);

rotateVideo.RotationX = ((titik.X – (LayoutRoot.ActualWidth / 2)) /
LayoutRoot.ActualWidth) * 100;
rotateVideo.RotationY = ((titik.Y – (LayoutRoot.ActualHeight / 2)) /
LayoutRoot.ActualHeight) * 100;
}
}
}

Kemudian klik ctrl + F5 untuk “run without debuging”, kemudian terbuka browser seperti ini :
Run Application

Video Anda akan bergerak mengikuti pergerakan kursor mouse Anda…
Sekarang coba Anda modifikasi code Anda di MainPage.xaml dan MainPage.xaml.cs :
Untuk MainPage.xaml :

    
        <mediaelement x:Name="Video" Source="Transformers01.wmv" >
            </mediaelement><mediaelement .Projection>
                <planeprojection x:Name="rotateVideo" RotationY="45"></planeprojection>
            </mediaelement>
        

dan MainPage.xaml.cs :

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
LayoutRoot.MouseMove += new MouseEventHandler(LayoutRoot_MouseMove);
CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
}

private void CompositionTarget_Rendering(object sender, EventArgs e)
{
rotateVideo.RotationX += ((titik.X – (LayoutRoot.ActualWidth / 2)) /
LayoutRoot.ActualWidth) * 10;
rotateVideo.RotationY += ((titik.Y – (LayoutRoot.ActualHeight / 2)) /
LayoutRoot.ActualHeight) * 10;
}

private void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
{
titik = e.GetPosition(LayoutRoot);
}

Hasilnya seperti ini :
Rotation
Rotation
Ternyata efek rotasi akibat dari mouse labih terasa, video tersebut bergerak rotasi lebih aktif seiring dengan perpindahan mouse Anda.

Selamat Mencoba…..

About

Seseorang yang terus berusaha menjadi seorang programmer dan blogger sejati di jagad Raya ini.

Tagged with: , , ,
Posted in Silverlight, Silverlight 3
One comment on “Video di Silverlight 3 dan 3D Projection Sederhana
  1. dholep says:

    nice info…. thx… ^^

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Community

INDC

MUGI

WSS-ID

SQLServer-Indo

Indonesia Student Portal

Pengunjung
  • 120,657 orang
Yg lg OL di sini
site statistics
%d bloggers like this: