February 28, 2012

Publish with a Branded Template… Save time!

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>\Templates\Publish. 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!

Posted by Vish7:23 PM
  • Tim

    Vish,

    You know what might help others here as well. Putting in the elements to publish to full screen without the current need for the user to click the link to make it so.
    Perhaps as a commented out line(s) of code?

    • Vish

      That’s a good idea Tim, will add that part as well. Thanks for suggesting!

  • http://twitter.com/pipwerks Philip Hutchison

    var so = new SWFObject(“@MOVIENAME”, “Captivate”, “@MOVIEWIDTH”, “@MOVIEHEIGHT”, “@FlashPlayerVersion”, “@SKINCOLOR”);
    so.addParam(“name”, “Captivate”);
    so.addParam(“wmode”, “@WMODEVALUE”);
    so.addParam(“menu”, “false”);
    so.addAttribute(“tabIndex”, “-1″);
    so.setAttribute(“redirectUrl”, “http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash“);
    so.write(“CaptivateContent”);
    so.focus();

  • Loading
  • Categories

  • Archives

  • Authors

  • Recent Comments

    • David: I can not preview the responsive layout on my project in Captivate 8. Anyone know why?
    • Pete Flynn: Just tried to view the “Recording Link” . . . 413 Header Length too Large What???
    • Ariyo Usman Oluwafemi: I am representing a publishing company which I have already created the ebooks on an indesign...
    • Dr. Pooja Jaisingh: Thanks Rossco :)
    • Rossco: Ealier post had heaps of typo’s so reposting… Hi, yes very helpful tutorials thanks, easy to...
  • Captivate & eLearning Videos

    Subscribe to Adobe eLearning on YouTube.

    Check out the latest eLearning Videos on AdobeTV

Recently Approved