• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Animating Text using Web-Object Embedded Code

Explorer ,
Jul 22, 2020 Jul 22, 2020

Copy link to clipboard

Copied

This is a culmination of attempts to create a Text Rollout animation of a Header on a slide.

See Thread : How to create a Text Rollout?

 

This lead to a solution that involved the insert of a Web-Object html zip file, but the seemed very cumbersome having to change and re-import lots of web-objects.

 

In trying to simplify the process I wanted to be able to include the gsap animation library, and my own custom library into Captivate, that was available in HTML5 Preview as well as included in the Published project.

See Thread : How to automatically include folder of files to Captivate Project preview and zipped publish output?

 

My solution to this problem based on RodWard's information, was to add a libraries junction directory in C:\Program Files\Adobe\Adobe Captivate 2019 x64\HTML\assets, pointing to my libraries folder of .js files.

In here I put the gsap.js file downloaded from greensock.com , and my own custom library jsUtils.js, then adding these two libraries by updating the HTML\index.html file to include:

 

var lJSFiles = [ @JSFILES_ARRAY , 'assets/libraries/gsap.js' , 'assets/libraries/jsUtils.js' ];

 

This makes the gsap and jsUtils libraries visible in both the Preview and the Published output. 

 

jsUtil.js code:

 

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = global || self, factory(global.window = global.window || {}));
}(this, (function (exports) { 'use strict';

  // This is a template to begin creating a JS libray. Just replace all instances
  // of `jsUtils` with whatever variable you want to use for reference.

  // Baseline setup
  // --------------
  // Establish the root object, `window` in the browser, or `exports` on the server.
  var root = this || exports;

  // Save the previous value of the `_` variable.
  var previousLib = root.jsUtils;

  // Create a safe reference to the jsUtils object for use below.
  var jsUtils = function(obj) 
  {
    if (obj instanceof jsUtils) return obj;
    if (!(this instanceof jsUtils)) return new jsUtils(obj);
    this.libwrapped = obj;
  };

  // Export the jsUtils object for **Node.js**, with
  // backwards-compatibility for the old `require()` API. If we're in
  // the browser, add `jsUtils` as a global object.
  if (typeof exports !== 'undefined') 
  {
    if (typeof module !== 'undefined' && module.exports) 
    {
      exports = module.exports = jsUtils;
    }
    exports.jsUtils = jsUtils;
  } 
  else 
  {
    root.jsUtils = jsUtils;
  }

  // Current version.
  jsUtils.VERSION = '0.0.3';

  /**
  * ALL YOUR CODE BELONGS HERE
  **/
    // List of Styles
    var styleList=[];
    styleList["WhiteHeaderShadow28"] = '.WhiteHeaderShadow28 {color: #ffffff; font: 28px Arial, sans-serif; font-weight: bold; text-align: left; text-shadow: 3px 3px 3px #505050; }';

    // List of Animations
    var animateList = [];
    animateList["LeftRollout"] = 'window.parent.gsap.timeline().fromTo(document.querySelector("#message"), { xPercent: -100 }, {xPercent: 0, duration:3});';

    // Public function to Animate the content of the iFrame with id, using the styleType and animateType
    jsUtils.animate = function animate(id, styleType, animateType)
  		{
        // Get the iFrame - which is the firstChild in the webObject cached copy with name "id+c"
        var iframe = document.getElementById(id + 'c').firstChild;
        replaceIFrameContent(iframe,styleType, animateType);
  		};

    // Replace the iFrame Content constructed using the styleType and animateType
    function replaceIFrameContent(iframe,styleType,animateType)
      {
        // Extract the message text and construct the bodyhtml with a "div" element
        var message = iframe.contentDocument.body.firstElementChild.innerHTML;
        var bodyhtml = '<div class="' + styleType + '" id="message">' + message.slice(0,message.indexOf('<script>')) + '</div>';

        // Construct the full template
        var template = [
          '<html>',
          '<head>',
              '<style>',
              styleList[styleType],
              '</style>',
          '</head>',
          '<body>',
              bodyhtml,
          '</body>',
          '</html>'
        ].join('');
        
        //debugger;
        // Create a newDocument to replace the existing iFrame content
        var newDocument = document.implementation.createHTMLDocument(iframe.contentDocument.title);

        // Write the template into the newDocument
        newDocument.open();
        newDocument.write(template);
        newDocument.close();

        // Copy the HTML from the newDocument into the original iFrame
        var destDocument = iframe.contentDocument;
        var srcNode = newDocument.documentElement;
        var newNode = destDocument.importNode(srcNode, true);
        destDocument.replaceChild(newNode, destDocument.documentElement);

        // Append the javascript as a new Script element (otherwise code doesn't execute!)
        var scriptCode = document.createElement("script");
        scriptCode.textContent = animateList[animateType];
        destDocument.body.appendChild(scriptCode);  
      }
    


  // AMD registration happens at the end for compatibility with AMD loaders
  // that may not enforce next-turn semantics on modules. Even though general
  // practice for AMD registration is to be anonymous, jsUtils registers
  // as a named module because, like jQuery, it is a base library that is
  // popular enough to be bundled in a third party lib, but not be part of
  // an AMD load request. Those cases could generate an error when an
  // anonymous define() is called outside of a loader request.
  if (typeof define === 'function' && define.amd) 
  {
    define('jsUtils', [], function() { return jsUtils; });
  }

  if (typeof(window) === 'undefined' || window !== exports) 
    { Object.defineProperty(exports, '__esModule', { value: true }); } 
  else 
    { delete window.default; }

})));

 

 

With the implementation of the jsUtils.js code, I am now able to add a web-object (e.g. named "XYZWeb") on to a Captivate slide, set to Embed Code, with an example of content:

 

 

Roll Out Header Text<script>window.parent.jsUtils.animate("XYZWeb", "WhiteHeaderShadow28", "LeftRollout");</script>

 

 

Preview and the slide shows Roll Out Header Text, styled text roll out at the location of the inserted Web-Object.

 

It took a while to get the javascript that is compatible with Chrome and IE11, and this solution seems to work.

Hopefully this is of use to others to expand the capability of Adobe Captivate.

Views

175

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 17, 2021 Jul 17, 2021

Copy link to clipboard

Copied

LATEST

🙂 Hi phd3

Very interesting! After 3 years of dev-work with Captivate I didn't know some techniques on how to inject folders/files (like external JS libraries) into Cp's preview and published output.

I came accross here because I was sniffing out the internals of Greg Stager's game here. That made me websearch for var lJSFiles = [ @JSFILES_ARRAY ]; which is in the index.html in Cp's program folder/HTML folder and the 'template' for previewing and publishing HTML5 projects.

I will also try to study/digest your jsUtil.js code for inserting web objects. I've to admit I didn't grasp that entirely just yet, though I keep it bookmarked.
Thank you for sharing

.. Klaus

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines