Embedding and Communicating with the Macromedia Flash Player in WPF

Janiv Ratson — Sun, 20 Sep 2009 19:48:00 GMT

Download Source Code and Binaries (MyBlogUserControls.zip)

Embedding the Macromedia Flash Player ActiveX control is a relatively simple way to do the following:

Add functionality, graphics, or animation to your WPF application.
Extend the capabilities of your stand-alone Macromedia Flash application (such as adding file I/O capabilities to Macromedia Flash).
Use existing flash resources in your WPF application (i.e. Use Banners in your WPF application)

Before you decide to embed the Macromedia Flash Player ActiveX control within your WPF application, however, there are a number of things that you should consider:

Macromedia does not officially support embedding the Macromedia Flash Player ActiveX control within a Windows application. This means that future versions of the player may not work with your application.
It requires users to install the Macromedia Flash Player ActiveX control on their computers. This can be done by installing the player within Microsoft Internet Explorer. Although it is technically possible to distribute the player, that is restricted by the player's end-user license agreement. If you need to distribute the Macromedia Flash Player ActiveX control, contact Macromedia for permission.
Because it uses ActiveX technology, it works only on Windows OS.
Versions of the Macromedia Flash Player prior to version 6 did not support embedding within Windows applications. Users need version 6.0r79 or higher.

The easiest way to use the Macromedia Flash Player ActiveX control within your WPF applications is to create a WPF user control that will wrap the Flash Player.
As WPF currently does not support such a wrapper, we will use another wrapper of type WindowsFormsHost.
We’ll learn how to display Flash Player media within WPF application by following 4 major steps.

Step 1. Creating a WPF User Control Library

Our final goal would be having a WPF user control that would play Flash media files (swf/flv). Therefore, our first step is to create the WPF User Control Library that would wrap it all, and will be used by any WPF window or page.

1. Create a new WPF User Control Library project (mine was named MyBlogUserControls)

2. Add a new WPF User Control

3. Add a Uri property and a Loaded event to your new WPF User Control

public Uri Source { get; set; }     

private void FlashPlayer_Loaded(object sender, RoutedEventArgs e)
{

Step 2. Creating a Windows Forms User Control

As WPF does not support hosting an ActiveX control directly but Windows Forms does, we will use the Crossbow technology to host the Flash Player within our WPF application. We will add the Macromedia Flash Player ActiveX Control to our toolbox, and will wrap it within a Windows Forms User Control.

1. In your new project, add a reference to the WindowsFormsIntegration namespace (from the .NET tab)

2. Add a new Windows Forms User Control to your project

3. Open the new Windows Form User Control in design mode, and make sure the Toolbox toolbar is visible.

4. Right Click the toolbar within the All Windows Forms tab of the Toolbox toolbar and select the “Choose Items…” menu option.

5. The Choose Toolbox Items dialog is opened. Go to COM Components tab, scroll down to the Shockwave Flash Object item and check it. Press OK.
If this item is not listed, make sure that the Macromedia Flash Player ActiveX control is installed on your system.

6. Now you should have a Shockwave Flash Object within the All Windows Forms tab of the Toolbox toolbar

7. Add the flash object to your Windows Forms User Control by dragging it, set its size according to your needs (if size is static), and name it (i.e. axShockwaveFlash).

8. Go to the Windows Form User Control source code and add Flash Player methods

public partial class WFFlashPlayer : UserControl
{
        public WFFlashPlayer()
        {
            InitializeComponent();
        }

        public new int Width 
        {
            get{ return axShockwaveFlash.Width; }
            set{ axShockwaveFlash.Width = value; }
        }

        public new int Height 
        {
            get{ return axShockwaveFlash.Height; }
            set{ axShockwaveFlash.Height = value; }
        }

        public void LoadMovie(string strPath)
        {
            axShockwaveFlash.LoadMovie(0, strPath);            
        }
       
        public void Play()
        {            
            axShockwaveFlash.Play();
        }

        public void Stop()
        {
            axShockwaveFlash.Stop();
        }        
}

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Once we’ve completed this step, we have a Windows Forms User Control that wraps a Flash Player. Now we need to make it a WPF user control.

Step 3. Wrapping the Windows Forms User Control within our new WPF User Control using Crossbow

1. Open the WPF User Control XAML file.

2. Name the main Grid (or any other WPF container you’d like)

<UserControl x:Class="MyBlogUserControls.FlashPlayer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300" Loaded="FlashPlayer_Loaded">
    
    <Grid Name="FlashPlayerGrid">            
    </Grid>
</UserControl>

3. Open the WPF User Control Source Code.

4. Fill the Loaded event body with code to host the Windows Forms Flash Player, load the movie and play it

public partial class FlashPlayer : UserControl
{
        public FlashPlayer()
        {
            InitializeComponent();
        }

        public Uri Source { get; set; }     

        private void FlashPlayer_Loaded(object sender, RoutedEventArgs e)
        {
            WindowsFormsHost host = new WindowsFormsHost();
            WFFlashPlayer player = new WFFlashPlayer();
                        
            //the Windows Forms Host hosts the Flash Player
            host.Child = player;

            //the WPF Grid hosts the Windows Forms Host
            FlashPlayerGrid.Children.Add(host);

            //set size
            player.Width = (int)Width;
            player.Height = (int)Height;

            //load & play the movie
            player.LoadMovie(Source.AbsoluteUri);
            player.Play();
        }
}

Step 4. Using the new WPF Flash Player Control

Let’s use our new Flash Player within a WPF application.

1. Create a new WPF Application.

2. Add a reference to your User Controls Library (mine was MyBlogUserControls)

3. Open your Window’s XAML file.

4. Add the WPF User Control Library namespace to the Window Object

<Window x:Class="WPFLibTester.FirstPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:MyBlogUserControls;assembly=MyBlogUserControls"
    Title="FirstPage" Height="800" Width="800">

5. Add the WPF Flash Player to your window and set its source and size

<Window x:Class="WPFLibTester.FirstPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:MyBlogUserControls;assembly=MyBlogUserControls"
    Title="FirstPage" Height="800" Width="800">
    <Grid>        
        <controls:FlashPlayer Source="http://www.sothink.com/product/swfquicker/samples/specialEffect/Art_studio.swf" 
                  Width="700" Height="600" ></controls:FlashPlayer>
    </Grid>
</Window>

That’s it. I’ve covered here three methods from the Shockwave Flash Media Object. Of course you can communicate with any of the Flash Object API methods, by calling them from your Windows Forms User Control wrapper.

If you have troubles setting your Adobe Flash Player, you may find help here.

Enjoy.

Janiv Ratson's Blog : WPF, DEV, Crossbow

Embedding and Communicating with the Macromedia Flash Player in WPF