ASP.NET AJAX Custom Flash Control

An implementation of Sys.UI.Control which permits to render, handle events and transfer data between javascript (markup) and actionscript (and viceversa).

I like ASP.NET AJAX: it boosts client-side development and reusability, I also love it because it permits to write structured OOP-like JavaScript. I find it very similar to Flash ActionScript 2.0/3.0 (not in the syntax itself - obviously - but in the idea).

Mmmhh... Flash... Ajax, right! Let's implement an AJAX custom control (subclass of Sys.UI.Control) which can be helpful in rendering, managing events and communications between an SWF file and the HTML Markup.

Il be very quick in this article: I'll just show how to use this control of mine in an AJAX-Enhanced WebPage, then I'll let you download the main code and try it!

Here's page's relevant code:

<!-- 
    Script is here referenced as embedded in an assembly, 
    but it can be retrieved also using a static path 
-->
<asp:ScriptManager runat="server" ID="sm">
    <Scripts>
        <asp:ScriptReference
            Name="Pacem.Web.Extensions.FlashControl.js"
            Assembly="Pacem.Web.Extensions" />
    </Scripts>
</asp:ScriptManager>

<div id="xcFlashContainer"></div>

<script type="text/javascript">
//<[CDATA[
function createFlashObject(sender, args){
    if (flCtx == null){
        flCtx = new Pacem.UI.FlashControl("pathToSWF.swf", $get("xcFlashContainer"));
        with (flCtx){
            set_width("720");
            set_height("100");
            set_allowScriptAccess(Pacem.UI.FlashAllowScriptAccess.always);
            set_wmode(Pacem.UI.FlashWMode.transparent);
            set_FlashVars(String.format("var1={0}&var2={1}&var3={2}",
                fooGetMyVar1(),                    
                fooGetMyVar2(),
                fooGetMyVar3())
                );
            flush(); // method that writes the flash markup into the container element
        }
    }else flCtx.get_flashObject().SetVariable("_root:alreadyLoaded", true);   
}
var flCtx = null;
Sys.Application.add_load(createFlashObject);
//]]>
</script>

As you can see from the code above, I added several enum object to enforce the structure; those are:

  • Pacem.UI.FlashQuality
    • low
    • medium
    • high
    • best
  • Pacem.UI.FlashSAlign
    • l
    • r
    • t
    • b
    • tl
    • tr
    • bl
    • br
  • Pacem.UI.FlashScale
    • noScale
    • showAll
    • noBorder
    • exactFit
  • Pacem.UI.FlashAllowScriptAccess
    • always
    • never
    • sameDomain
  • Pacem.UI.FlashAlign
    • center
    • l
    • r
    • t
    • b
  • Pacem.UI.FlashWMode
    • opaque
    • transparent
    • window
 
// how to declare an Enum object in ASP.NET AJAX
Pacem.UI.FlashAllowScriptAccess = function(){};
Pacem.UI.FlashAllowScriptAccess.prototype = {
    always: 0, never: 1, sameDomain: 2
}
Pacem.UI.FlashAllowScriptAccess.registerEnum("Pacem.UI.FlashAllowScriptAccess");

The Control is optimized to use the flash.external.ExternalInterface, in order to send data between markup and actionscript.

zip file « download code

Take care. Bye.

Feedbacks

  • Re: ASP.NET AJAX Custom Flash Control

    nana (Tuesday, December 09, 2008 9:33 AM)

    “Cool website”

SL2