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.
1
Reply
AdChoices