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(“menu”, “false”);
so.addVariable(“variable1”, “value1”);
so.setAttribute(“redirectUrl”, “http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash“);
<script type=”text/javascript”>

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


    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!

  • 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“);

  • Loading
  • Categories

  • Archives

  • Authors

  • Recent Comments

    • Dev Agrawal_1987: Any solution for import 3D models into InDesign?
    • Anil Pan: I am a programmer. What tool(s) can I use to create an ebook that will allow me to embed code (Java, python...
    • zaman seo: Adobe photoshop, Is Awesome , Nice post and wonderful photoshop brushes collection with details describe...
    • Mahmud hasan: I agree with you Allen, as I actually have continually tried to bring humor into learning things I...
    • Su: I would like to change the play button position in the middle of forward and backward button. How can i do that?
  • Captivate & eLearning Videos

    Subscribe to Adobe eLearning on YouTube.

    Check out the latest eLearning Videos on AdobeTV