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
    [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){ = url; = "";
    this.FlashVars = "";
    this.quality = "best";
    this.bgcolor = "";
    this.salign = "t";
    this.scale = "noscale"; = false;
    this.loop = true; = true;
    this.wmode = "opaque";
    this.swLiveConnect = false;
    this.allowScriptAccess = "always";
    this.width = "100%";
    this.height = "100%";
    this.align = "center";
    this.codeBase = ",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=\"""\">";
    html += "<param name=\"movie\" value=\"""\" />";
	html += "<param name=\"FlashVars\" value=\""+flashObj.FlashVars+"\">";
    html += "<param name=\"quality\" value=\""+flashObj.quality+"\" />";
    html += "<param name=\"menu\" value=\"""\" />";
    html += "<param name=\"loop\" value=\""+flashObj.loop.toString()+"\" />";
    html += "<param name=\"play\" value=\"""\" />";
    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=\"""\" menu=\"""\" swLiveConnect=\""+flashObj.swLiveConnect.toString()+"\" allowScriptAccess=\""+flashObj.allowScriptAccess+"\" FlashVars=\""+flashObj.FlashVars+"\" width=\""+flashObj.width+"\" height=\""+flashObj.height+"\" wmode=\""+flashObj.wmode+"\" loop=\""+flashObj.loop.toString()+"\" play=\"""\" quality=\""+flashObj.quality+"\" bgcolor=\""+flashObj.bgcolor+"\" type=\"application/x-shockwave-flash\" pluginspage=\"\" name=\"""\" 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" 

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

<script type="text/javascript">
var xc_ctl00_flPacem_fobj = new FlashObject("/");
with (xc_ctl00_flPacem_fobj){
    id = "ctl00_flPacem";
    width = "720";
    height = "295";
    wmode = "transparent";
    FSCommand = Flash_Command;
function ctl00_flPacem_DoFSCommand(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');

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

zip file « download code

Take care. Bye.




Cristian Merighi facebook twitter google+ youtube

Latest articles

Top rated


Where am I?


Cristian Merighi facebook twitter google+ youtube

I'm now reading