Resumé

Custom ASP.Net WebControl for Flash Rendering

Cristian Merighi () 0.00

How to centralize and reuse Adobe® Flash rendering procedures exploiting a custom ASP.Net 2.0 C# custom WebControl. Relevant logic added to handle fsCommand communication between Flash and HTML markup.
This article is obsolete. Some functionalities might not work anymore. Comments are disabled.

...Once for all! I can't stand doing the same thing for more than a couple of times... and one of most tedious things it happens to me to do is cutting 'n' pasting javascript files to write down Adobe® Flash objects in my web pages.
There's no - so far - intellisense in javascript so I must read and read again the portions of code needed to call the correct routines.

It is time to "hire" a custom ASP.NET 2.0 WebControl that does that for me!
How about a <pacem:Flash runat="server" /> with all the needed logic incapsulated?

With "all" the needed logic I mean ALL the needed logic:

  • every property mapped (evetually with relevant enumerations);
  • player version logic (with ease in readability and setting);
  • relevant fscommand logic (very important in order to send data and to exchange actions between the flash object and the html page).

Let's take a look at the WebControl class structure:

class diagram

So, the components of our custom WebControl are:

  1. a Flash.cs class file where the declared Pacem.Web.UI.WebControls.Flash class inherits from System.Web.UI.Control
    (in the same file various enum object are set, see image above);
  2. an embedded Flash.js javascript files with the core logic needed to handle the client-side rendering.

Just a piece of the C# code:

// registration of the resource url of the embedded javascript file
[assembly: WebResource("Pacem.Web.UI.WebControls.ClientScripts.Flash.js", "application/x-javascript")]
namespace Pacem.Web.UI.WebControls
{
    [DefaultProperty("MovieUrl")]
    [ToolboxData("<{0}:Flash runat=server></{0}:Flash>")]
    public class Flash : System.Web.UI.Control
    {
        // FIELDS
        // ...
        
        // PROPERTIES
        // ...
        
        // METHODS        
        protected override void CreateChildControls()
        {
            // if JavaScript is enabled then write down relevant javascript code 
            otherwise put html markup <object ...></object>
        
        }
    }
}

JavaScript embedded code:

function FlashObject(url){
    this.movie = url;
    this.id = "";
    this.FlashVars = "";
    this.quality = "best";
    this.bgcolor = "";
    this.salign = "t";
    this.scale = "noscale";
    this.menu = false;
    this.loop = true;
    this.play = true;
    this.wmode = "opaque";
    this.swLiveConnect = false;
    this.allowScriptAccess = "always";
    this.width = "100%";
    this.height = "100%";
    this.align = "center";
    this.codeBase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0";
    this.FSCommand = null;
}

/*
    ...
*/

function getFlashObjectHTML(flashObj){
	var html = "";	
	html += "<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\""+flashObj.codeBase+"\" width=\""+flashObj.width+"\" height=\""+flashObj.height+"\" align=\""+flashObj.align+"\" id=\""+flashObj.id+"\">";
    html += "<param name=\"movie\" value=\""+flashObj.movie+"\" />";
	html += "<param name=\"FlashVars\" value=\""+flashObj.FlashVars+"\">";
    html += "<param name=\"quality\" value=\""+flashObj.quality+"\" />";
    html += "<param name=\"menu\" value=\""+flashObj.menu.toString()+"\" />";
    html += "<param name=\"loop\" value=\""+flashObj.loop.toString()+"\" />";
    html += "<param name=\"play\" value=\""+flashObj.play.toString()+"\" />";
    html += "<param name=\"bgcolor\" value=\""+flashObj.bgcolor+"\" />";
	html += "<param name=\"salign\" value=\""+flashObj.salign+"\" />";
	html += "<param name=\"scale\" value=\""+flashObj.scale+"\" />";
	html += "<param name=\"wmode\" value=\""+flashObj.wmode+"\" />";
	html += "<param name=\"swLiveConnect\" value=\""+flashObj.swLiveConnect.toString()+"\" />";
	html += "<param name=\"allowScriptAccess\" value=\""+flashObj.allowScriptAccess+"\" />";
	html += "<embed src=\""+flashObj.movie+"\" menu=\""+flashObj.menu.toString()+"\" swLiveConnect=\""+flashObj.swLiveConnect.toString()+"\" allowScriptAccess=\""+flashObj.allowScriptAccess+"\" FlashVars=\""+flashObj.FlashVars+"\" width=\""+flashObj.width+"\" height=\""+flashObj.height+"\" wmode=\""+flashObj.wmode+"\" loop=\""+flashObj.loop.toString()+"\" play=\""+flashObj.play.toString()+"\" quality=\""+flashObj.quality+"\" bgcolor=\""+flashObj.bgcolor+"\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" name=\""+flashObj.id+"\" scale=\""+flashObj.scale+"\" salign=\""+flashObj.salign+"\" align=\""+flashObj.align+"\"/>";
	html += "</object>";
	return html;
}

The complete code can be downloaded from the link at the bottom of the article so I won't go any further.
It is just important to set the focus on the CreateChildControls method of the class: the decisions are taken there...

Now, let's see how to use the Flash WebControl:

<!-- Test Page Sample Code -->
<pacem:Flash runat="server" ID="flPacem" 
    WMode="Transparent" 
    FSCommand="Flash_Command"
    Height="295px" 
    Width="720px" 
    MovieUrl="~/flash/initializer.swf"
></pacem:Flash>

See how the WebControl gets rendered on a IE7 browser (with javascript enabled):

<script type="text/javascript">
//<![CDATA[
var xc_ctl00_flPacem_fobj = new FlashObject("/www.pacem.it/flash/initializer.swf");
with (xc_ctl00_flPacem_fobj){
    id = "ctl00_flPacem";
    width = "720";
    height = "295";
    wmode = "transparent";
    FSCommand = Flash_Command;
    flush();
}
function ctl00_flPacem_DoFSCommand(command, args) {
    Flash_Command(command,args);
}
// handling FSCommand for Internet Explorer
document.write('<SCRIPT LANGUAGE="VBScript"\> \n');
document.write('On Error Resume Next \n');
document.write('Sub ctl00_flPacem_FSCommand(ByVal command, ByVal args)\n');
document.write('\tCall ctl00_flPacem_DoFSCommand(command, args)\n');
document.write('End Sub\n');
document.write('</SCRIPT\> \n');
//]]></script>

Lastly, a really trivial live demo about using the WebControl in relation with the FSCommand feature:

zip file « download code

Take care. Bye.

feedback
 

Syndicate

Author

Cristian Merighi facebook twitter google+ youtube

Latest articles

Top rated

Archive

Where am I?

Author

Cristian Merighi facebook twitter google+ youtube

I'm now reading

Feeds