How to build an AppUp app from existing flash code using AppUp encapsulator

In this post I describe a way to take your existing flash code (SWF files) and build AppUpsm center apps using AppUptm encapsulator.

My hope is that developers who have already built flash games (and other cool flash apps) can expand their customer base by bring those apps over to the AppUpsm center.

Note: my blog post about building AppUp apps from existing web pages may also be worth looking at. The concepts and code are similar in many respects.

If you've only just heard about AppUp encapsulator and want to learn a little more before diving in - check out the FAQ.

In order to build an app with encapsulator you need to package up at least some web code into a zip file (here's a video).
To create apps that embed flash files you need an 'index.html', an 'icon.png' and of course, the SWF file(s) that you want to be a part of your app.

The code below is some starter code that can be used as your 'index.html' file. The resulting app has the SWF file taking up the whole application window. Neat eh?

When you have your code (and .zip file) ready to go, head on over to encapsulator and start building and testing your app!
Note: When you build your app using encapsulator, there is a 'Window size' configuration field in the 'Make your app' tab. You should fiddle with the window size ensure your app looks right.

<!DOCTYPE HTML>

<html>
  <head>
    <!-- TODO: OPTIONAL : PUT OTHER JS, CSS HERE -->
  </head>
  
  <body>

    <script type="text/javascript">
  
      function appSetup() {
        //turn this on to help debug if flash is detected..
        //dumpPluginsOnSystem();
        setupSWF();
      }
      
      function setupSWF() {
        /* this is a very simple flash check function...*/
        if(isFlashInstalled()) {
          /* remove the need flash text */
          var swfAreaEl = document.getElementById("swfArea");
          swfAreaEl.removeChild(document.getElementById("needFlash"));

          /* TODO: be sure to put correct path to swf in your zip or web URL */
          var swfFileUrl     = "yourswf.swf";
          
          var swfID          = "appSwfEmbed";
          var embEl          = document.createElement("embed");
          embEl.setAttribute("id",swfID);
          embEl.setAttribute("src",swfFileUrl);
          embEl.setAttribute("type","application/x-shockwave-flash");
          embEl.setAttribute("style","width:100%;height:100%");
          embEl.setAttribute("pluginspage","http://get.adobe.com/flashplayer/");

          /*
             UPDATE 7/29/2011:
             You might need to use a wmode attribute if your flash appears 
             to be hidden/blank when you run your app.
   
             I stumbled upon comments about this wmode attribute here: 
             http://www.qtcentre.org/threads/29835-Opening-local-flash(.swf)-file-in-QtWebKit
             
             This is the Adobe site with docs on all the flash attribtues: 
             http://kb2.adobe.com/cps/127/tn_12701.html
          */
          //embEl.setAttribute("wmode", "opaque");
          //embEl.setAttribute("wmode", "transparent");

          document.getElementById("swfArea").appendChild(embEl);
        }        
      }

      /* for debugging plugin installation on a given system */
      function dumpPluginsOnSystem() {
        var pListLen = navigator.plugins.length;
        for(var pCurr=0; pCurr < pListLen; pCurr++) {
          var currPName = navigator.plugins[pCurr].name;
          //for debugging which plugins are installed on system
          console.debug("found:" + currPName);
        }
      }      


      function isFlashInstalled() {
        var pListLen = navigator.plugins.length;
        for(var pCurr=0; pCurr < pListLen; pCurr++) {
          var currPName = navigator.plugins[pCurr].name;
          if(currPName.indexOf("Shockwave Flash") == 0) {
           return true;
          }
        }
        return false;
      }      
      
      /* chains addfunc to window load handler.. */
      function add_onload_handler(addfunc,altwindow) {
        var targwindow = window;
        if(typeof(altwindow) != 'undefined'){
          targwindow = altwindow;
        }
        
        /* chain the onload functions together */
        var prevf = targwindow.onload;
        var newf  = addfunc;
        targwindow.onload = function(){
            newf();
            if(typeof(prevf) == 'function'){
              prevf();
            }
          };
      }
      
      add_onload_handler(appSetup);

    </script>
  
    <div id="swfArea" name="swfArea">
      <div id="needFlash">
        <!-- this text for the unlikely situation that flash not installed
             on a windows box -->
        <p>
          It appears the Adobe Flash player is not installed.
        </p>
        <p>
          Please go to Adobe and download + install the Adobe flash player.
        </p>
        <p>
          You can cut/paste this link into your web browser (firefox, 
          google chrome, internet explorer, safari etc):<br/>
http://get.adobe.com/flashplayer/

        </p>
      </div>  
      <!-- the code in setupSWF() adds an embed element here --> 
    </div>
  
  </body>
  
</html>
For more complete information about compiler optimizations, see our Optimization Notice.