Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Playing with Media in Silverlight 1.0 : Page 3

Waiting for Silverlight to deliver on its promise of delivering rich media experiences? Take your first steps with this tutorial on how to embed a Windows media file in your Silverlight application, control its playback, and create simple video effects.

Creating the Mirror Effect
One interesting thing you can do with a video is to create a mirror effect. For example, Figure 4 shows a video playing with a mirror image at the bottom of it.

Figure 4. A Mirror Image: One interesting thing you can do with a video is to create a mirror effect.

To achieve the mirror image, first modify the original Canvas object by switching it to XAML view and adding the code in bold in Listing 1.

This will transform the video into the shape shown in Figure 5.

Next, add another <MediaElement> element as shown in bold in Listing 2 to simulate the mirror effect.

You will now have two videos with the second video mirroring the first (see Figure 6).

To create the translucent effect for the mirror image, set the Opacity attribute to a value between 0 and 1:

<MediaElement x:Name="WindowsMedia_wmv1" AutoPlay="False" MouseEnter="MouseEnter" MouseLeave="MouseLeave" MouseLeftButtonDown="MouseClick" Width="319.125" Height="125.423" Source="WindowsMedia.wmv" Stretch="Fill" Canvas.Left="188.405" Canvas.Top="523.848" Opacity="0.3">

Modify the following block of code in Page.xaml.js as shown in bold in Listing 3.

Figure 5. A Mirror Image: The video with the transformation applied. Figure 6. Two Videos: The page with two videos.

Notice that instead of programmatically finding the media object (using the findName() method) in each event handler, you can also locate them in the handleLoad() function. Also, as there are two identical videos in the page, you do not need the audio playback in the mirroring video. Hence, you turn off the volume by setting the volume property to 0 (the value is from 0 to 1).

Press F5 to test the page. You will see that both videos start to play when the mouse hovers over the top video.

Scratching the Surface
This article has only touched the surface of the facilities provided by the <MediaElement> object in Silverlight. For a more in depth look at the media capabilities of Silverlight, check out the documentation here.

Wei-Meng Lee is a Microsoft MVP and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies. He is an established developer and trainer specializing in .NET and wireless technologies. Wei-Meng speaks regularly at international conferences and has authored and coauthored numerous books on .NET, XML, and wireless technologies. He writes extensively on topics ranging from .NET to Mac OS X. He is also the author of the .NET Compact Framework Pocket Guide, ASP.NET 2.0: A Developer's Notebook (both from O'Reilly Media, Inc.), and Programming Sudoku (Apress). Here is Wei-Meng's blog.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.