HTML Template File

Flex applications created with Flex Builder are created with an html-template directory. Inside there is an index.template.html file, which we'll call the template file, and several JavaScript files.

The template file is used when you launch your application with Flex Builder.

HTML Template Variables

The HTML Template file and Flex Builder make use of several variables with ${variable} notation. These variables are replaced by Flex Builder when creating an HTML launch page from your index.template.html file.

Useful variables replace by Flex Builder in the HTML Template:

swf - the name of the SWF file
width - the width to display the SWF (defaults to 100%)
height - the height to display the SWF (defaults to 100%)

Common Flash/Embed Parameters

allowScriptAccess controls the ability to perform outbound scripting from a Flash SWF. Allowed values: always, never, or sameDomain (the default value).

allowFullScreen turns on/off the ability of an application to use Full Screen mode. Allows values: true (on) or false (off, the default).

flashVars is string contain name/value pairs, similar to a URL query string, and is used for passing data to the Flash/Flex application. Example value: username=JohnSmith&recordCount=25 (two values separated by an &).

Using SWFObject

The default index.template.html file created by Flex Builder contains a lot of extra code for the sake of cross-browser compatibility. So much code makes it difficult to figure out how to accomplish some tasks, such as adding a flashVar value or an embed parameter.

The below example is a potential replacment for the contents of the index.template.html file created by Flex Builder. The code utilizes the free, open-source SWFObject JavaScript code. SWFObject intends to unify all existing Flash Player embed methods and provide a new standard for embedding Adobe Flash Player content.

<!-- saved from url=(0014)about:internet -->
<html lang="en">
<head>
   <title>${title}</title>
   <style>
   body { margin: 0px; overflow: hidden; }
   </style>
   
   <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
   <script type="text/javascript">
   var flashVars = {
        testVar: "value"
     };
     var params = {
        allowFullScreen: "true",
        allowScriptAccess: "sameDomain"
     };
   
   swfobject.embedSWF( "${swf}.swf", "swf", "${width}", "${height}", "10.0.0", "playerProductInstall.swf", flashVars, params );
   </script>
</head>
<body scroll="no">
   
   <div id="swf">
      <p>Alternative content</p>
    </div>
    
</body>
</html>

The result is a simpler, more lightweight template file. Learn more about SWFObject...

Loading SWFObject

You don't even have to download SWFObject to use it. Rather you can reference it via Google's AJAX Library API, Google's AJAX Libraries API is a content distribution network for the most popular open source JavaScript libraries.

Use the following code to include the SWFObject JavaScript from Google's library:

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>

Setting Params and FlashVars

   var flashVars = {
        testVar: "value"
     };
     var params = {
        allowFullScreen: "true",
        allowScriptAccess: "sameDomain"
     };

<div> for the SWF

The below HTML creates the <div> element where the SWF will be placed.

   <div id="swf">
      <p>Alternative content</p>
    </div>

The below JavaScript dynamically loads the SWF in the designated <div>.

   swfobject.embedSWF( "${swf}.swf", "swf", "${width}", "${height}", "10.0.0", 
      "playerProductInstall.swf", flashVars, params );

Mark of the Web

The following code, at the top of the template file, forces Internet Explorer to open the page in the Internet zone:

<!-- saved from url=(0014)about:internet -->

This peculiar piece of code is called the "Mark of the Web".

Adding the Mark of the Web (MOTW) to your wrapper is optional. However, if you do not add the MOTW to your wrapper, your application might not open in the expected security zone within Internet Explorer.