Creating a custom HTML Wrapper template in FDT

Recently whist using playing with Molehill, which due to the fact that no stand alone debugger exists yet, as the player is still completely in beta version, I have been forced to compile and test my swfs in the browser to take advantage of the incubator build flash player. As I use FDT for my Actionscript dev I am able to run my applications in the browser from the offset, which is great, but the HTML wrapper that comes with FDT is the crappy one provided by Adobe that runs by default in Flash Builder and comes with the Flex SDK.

So how to get your own custom one to be built into your projects templates? Its easy, all you need to do is go to your Application Data folder (‘%APPDATA%’ on a Windows PC and ‘User/Library/Application Support/’ on a Mac) and in here you will need to go to ‘FDT\projectTemplates\Web’ where you will find the three default project templates which come with FDT. In any of these except the Flash Professional one, so lets start with the AS3 one, you will find a description.xml file, an icon and a project folder. If you look through the description.xml you will see a section which is commented .

  1. <!-- If HTML Wrapper -->
  2.         <folder src="html-wrapper" dest="${outputFolder}" if="${htmlTemplate}"
  3.             process="true" recursive="true" />

This of course means, if ‘html template’ has been selected, then put the whole ‘html-wrapper’ folder into the output folder and process the text in each file whilst you do. Simple. So in the project folder you will find the html-wrapper folder which contains all the needed files. The one we are going to edit is, ‘index.html’. Now the default file comes with loads of crap, which whenever anyone looks at your source code, looks unelegant and ugly. I prefer to use swfobject for my html wrapper pages as it keeps the page clean, easy to read and only adds what that particular browser needs rather than having text for every eventuality. So I replace the whole file with this text:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>${projectName}</title>
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <style type="text/css">
  10.             html{              
  11.                 height:100%;
  12.                 overflow: hidden;
  13.             }              
  14.             body{
  15.                 height:100%;
  16.                 margin: 0;
  17.                 padding: 0;
  18.                 background-color: #FFFFFF;
  19.                 overflow-y:hidden
  20.             }
  21.  
  22. </style>
  23. <script type="text/javascript" src="js/swfobject.js"></script>
  24. <script type="text/javascript">
  25.  
  26.         var flashvars = {};
  27.         var params = {};
  28.         var attributes = {};
  29.  
  30.         params.menu = "false";
  31.         params.quality = "high";
  32.         params.scale = "default";
  33.         params.bgcolor = "#FFFFFF";
  34.         params.allowFullScreen = "true";
  35.         params.AllowScriptAccess = "always";
  36.  
  37.         attributes.id = "flash";
  38.  
  39.         swfobject.embedSWF("Main.swf", "myContent", "100%", "100%", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
  40. </script>
  41. </head>
  42. <body>
  43. <div id="myContent">
  44.     <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
  45. </div>
  46. </body>
  47. </html>

As you can see it is much cleaner, I delete the history folder as I never use it, put swfobject in a ‘js’ folder, change playerProductInstall.swf for expressInstall.swf and away I go. As you can see the only parameter needed is the ${projectName} for the title of the html page, which gets parsed and changed to the title of the project when the project is first created.

If you want you can get the template here.

This entry was posted in Actionscript 3.0, FDT, Javascript and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>