Sometimes we need to embed the published Adobe Captivate SWF in an HTML page which has the branded template of our organization. This template can be a company website, home-grown LMS, or a portal. If we have the luxury of changing the default HTML template for Adobe Captivate, there is nothing like it! See the page below which was directly published from Adobe Captivate which includes the header and footer objects. In this page, only the center part is a SWF and rest all are HTML elements.

To do this, first create an html page with your company branding. Then, save that page as ‘standard.htm’. Let’s try to edit this page to make it Adobe Captivate friendly so that it picks up this page as template for creating published HTMLs.

Step1: Change the Title – This template needs to have <Title> tag set because the page title is taken from the Captivate Project name. So replace the TITLE tag of the HTML page with <title>@MOVIETITLE</title>.

Step2: Connect the JavaScript Page – There is a JavaScript file which gets published with Captivate SWF and this js file needs to be referenced in the HTML page as well. Add the code <script src=”standard.js” type=”text/javascript”></script> below the title tag.

Step3: Add the DIV tag for the SWF – Add the following code to embed the SWF. It is very important that you name the CSS ID for the DIV as ‘CaptivateContent‘.

<div id=”CaptivateContent”>
<script type=”text/javascript”>
var so = new SWFObject(“@MOVIENAME”, “Captivate”, “@MOVIEWIDTH”, “@MOVIEHEIGHT”, “@FlashPlayerVersion”, “#CCCCCC”);
so.addParam(“quality”, “high”);
so.addParam(“name”, “Captivate”);
so.addParam(“id”, “Captivate”);
so.addParam(“wmode”, “@WMODEVALUE”);
so.addParam(“bgcolor”,”@SKINCOLOR”);
so.addParam(“menu”, “false”);
so.addVariable(“variable1”, “value1”);
so.setAttribute(“redirectUrl”, “http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash“);
so.write(“CaptivateContent”);
</script>
<script type=”text/javascript”>
document.getElementById(‘Captivate’).focus();
document.Captivate.focus();
</script>
</div>

Save the page and…

Step4: Replace the existing template file – This file is located under <Captivate installed folder>TemplatesPublish. BEFORE REPLACING IT, rename the one which is shipped with the product… may be as ‘old_standard.htm’. Now, copy the one you created to this location… and you are good to go 🙂

PS: If you have used assets like images or any other media in your template, you need to manually copy them to the original template location and later to the published location.

Hope this helps!