Adobe Captivate 2019 vs. SharePoint: The Issue is real.

Recently there have been some discussions about the JSON files in Adobe Captivate 2019 and issues with SharePoint blocking them during the upload process.  This occurs on both intranet and extranet server side.

What is a JSON file format?

According to w3schools.com (visit w3schools.com for detailed information):

  • JSON: JavaScript Object Notation.
  • JSON is a syntax for storing and exchanging data.
  • JSON is text, written with JavaScript object notation.

The issue Adobe Captivate 2019 users seem to be experiencing is uploading the JSON files included in the project’s HTML5 output to SharePoint.  This issue is affecting users on personal and business levels.

Workarounds:

Normally the SharePoint Administrator can configure the server to allow a MIME type to support JSON format.  See Upload an Adobe Captivate published output on SharePoint for more information.

Another workaround is to go into the index.html file and replace the JSON extensions with .js.  Then do the same with the JSON files themselves.   However, sometimes neither of the before mentioned actions resolve the issue.  As a result, less tech-savvy users find themselves reaching out elsewhere for support.  This is problematic and could be costly.

Why did Adobe decide to use JSON files?  A thought is that the HTML5 publishing process generated so many loose file types to the dr folder that Adobe used the JSON format to store these files in a more efficient way.

However, it is the way in which the JSON files are now being used that is causing the issue.

The Back Story:

In the previous versions of Adobe Captivate such as 7, 8, and 9 (before updating to version 9.0.2.437) the individual loose files such as png, smartshapes, and text captions from the project’s HTML5 output were stored in the dr folder.  There could be hundreds of images in that folder.   However, SharePoint had no issue accepting these files because they were not stored in JSON.

In more recent versions of Adobe Captivate such as 2017 and 2019, the images are now stored inside of JSON files.  You may have seen the files labeled as im1, im2, im3 and so on.  Also, there is the main imgmd file that stores png files, text captions, smartshapes, and etc.  See the example image below of Adobe Captivate HTML5 Output in the dr folder.

JSON files just simply cannot be deleted and expect the project to function.  It will not. It is issues like the one above that cause user frustration.

Maybe Adobe did not intend for Adobe Captivate to be used with SharePoint.  Whatever the intention, it is happening and it is real.

If you know of any helpful fixes or useful suggestions, users experiencing the issue discussed in this article would appreciate your support.

References:

W3schools.com, (2018), “JSON – Introduction”, Retrieved on November 4, 2018, from https://www.w3schools.com/js/js_json_intro.asp

Adobe, (2018), “Upload an Adobe Captivate published output on SharePoint” Retrieved on November 4, 2018, from Adobe.com https://helpx.adobe.com/captivate/kb/upload-captivate-published-output-sharepoint.html

Image, (2018), “Adobe Captivate HTML5 Output in dr folder” by Veem.

The post Adobe Captivate 2019 vs. SharePoint: The Issue is real. appeared first on eLearning.

How to Animate Buttons (and lots of other cool Javascript stuff!)

Preamble

Something that I noticed with Captivate’s built in effects is that you cannot (or at least it is challenging) animate buttons.  In other words, a user clicks on a button, that button animates, and at the end of the animation, it fires off a function or advanced action. There might (or might not be) ways of doing this with invisible buttons, objects, and effects but this is one method.

Please note that if you are very uncomfortable using javascript, or absolutely hate any kind of programming this might not be ideal for you.  This blog is also LONG because I wanted to explain as much as I could at a beginner level.  I hope it will be useful.  In addition, I have posted some helpful links and the .cptx file at the bottom of this blog.

Step 1: Find and modify your cool animation

Head over to http://animista.net/play and find your perfect animation. Copy and then modify the code to your liking.  I modified the ‘wiggle’ animation and put it into the Web Animation API (WAAPI) format.

The animation script I used created was:

var options = {
iterationStart: 0,
endDelay: 100,
duration: 700,
fill: ‘forwards’,

}

var keyframes = [
{ transform: ‘translateY(0) rotate(0)’},
{transform: ‘translateY(-30px) rotate(-6deg)’},
{transform: ‘translateY(15px) rotate(6deg)’},
{transform: ‘translateY(-15px) rotate(-3.6deg)’},
{transform: ‘translateY(9px) rotate(2.4deg)’},
{transform: ‘translateY(-6px) rotate(-1.2deg)’}
];

All of this script goes into the slide’s on ‘enter slide execute javascript’.

A few notes about this animation script.  There are two variables: ‘options’ and ‘keyframes’.  ‘Keyframes’ basically specifies WHERE the object will move – like x and y position and rotation.  The ‘Options’ variable states HOW the object will move, like timing and repetitions.  If you copy and paste any .css animation code, just make sure it is exactly in the correct format.

 

Step 2: Create Your Buttons

For this example I created 3 buttons. Just basic smart shapes converted into buttons. I turn off ‘continue playing the project’, the clicking noise, and delete the ‘rollover’, and ‘down’ states. Each button will have it’s own function but the same applied animation.

I gave my buttons the ID ‘btn’, ‘btn1’, and ‘btn2’.

Oh – I also created a second slide with a button going back to the first slide.

Step 3: Create Your Buttons Functions

I don’t want to go into too much in detail about javascript functions, but essentially I want each button to ‘do’ something different.  If you really hate javascript you could always create advanced actions on a button and call them through javascript (that’s for another blog).  I’ll run through each function here briefly:

All of these function also go into the

Function 1:

function nextSlide(){
window.cpAPIInterface.next();
}

The function is titled ‘nextSlide’. It uses the captivate API interface to jump to the next slide.

Function 2:

function message(){
alert(“You pressed the Message Button”)
}

The function is titled ‘message’. When the function is called it creates an alert message with the “You pressed the Message Button” text.

Function 3:

function unHide(){
t = !t
if(t ==true){
cp.show(‘hidden’)
}
else
{
cp.hide(‘hidden’)
}
}

Ok this one is a bit trickier but it still uses some of Captivate’s built in function.  The function is titled ‘unHide’. When called it toggles the variable ‘t’ (which I’ll mention later) from ‘true’ to ‘false’. In other words, if ‘t’ initially equals ‘true’, the “t =!t” toggles ‘t’ to equal ‘false’.  Then it checks if t == true (the double ‘==’ means ‘is it equal to’. If ‘t’ is true it will “cp.show(‘hidden’) which means it will show an object I have given the ID name  ‘hidden’.  If ‘t’ is not equal to true “else” it will hide the object with the ID ‘hidden’

Step 4: Create the Animation Function

Here is the function that will trigger the animation. This also goes into the ‘enter slide execute javascript’ window.

function playAnim(e,f,g){

pAnim = e.animate(keyframes, options);
pAnim.play()
pAnim.onfinish = function(){
cp.enable(f);
g();
}
}

This one gets really complicated if you are a beginner at functions but I believe in you .  The function is titled ‘playAnim’ and it ‘passes through’ three bits of information ‘e’, ‘f’, and ‘g’.  I declare what those bits of information are when I ‘call’ (ask to start) the function.

pAnim = e.animate(keyframes, options);  This creates a new variable titled pAnim.  It states that whatever bit of information ‘e’ is, it will create an animation (.animate) ‘e’ with the ‘keyframe’ and ‘options’ variables.

pAnim.play() starts the animation

pAnim.onfinish = function(){   This means that when pAnim finishes it’s animation it will call a new function which is titled function and does…

cp.enable(f);  The function enables whatever bit of information ‘f’ is and…

g();   Launch whatever bit of information ‘g’ is.

 

Step 5: Program your buttons

Now you need to execute javascript for each button. But because we did all the work on ‘on enter frame execute javascript’ window, the rest is easy.

For button 1, I put this code in and that’s it.

playAnim(btnc,’btn’,nextSlide)

cp.disable(‘btn’)

playAnim(btnc,’btn’,nextSlide)    This is calling the function playAnim (the one that had e,g, and f)  If you look at that code you can replace ‘e’ with ‘btnc’, f with ‘btn’ and ‘g’ with ‘nextSlide’ to see how it all works.

You might be asking what is ‘btnc’.  If you ever want to animate something in Captivate, just add a ‘c’ to the end of the ID and it should work.  That could be a discussion for next time.

So playAnim(btnc,’btn’,nextSlide)  will essentially animate ‘btnc’, will enable ‘btn’ and will call the function ‘nextSlide’ when the animation ends.

The second line of the code: cp.disable(‘btn’) tells Captivate to disable the button.  It’s annoying if a user can click a button multiple times before the animation ends and it looks bad.  That’s why it nice to disable the button, play the whole animation, and then re-enable the button.

For button 2, the code is this:

playAnim(btn1c,’btn1′,message)

cp.disable(‘btn1’)

 

And button 3, it is this:

playAnim(btn2c,’btn2′,unHide)

cp.disable(‘btn2’)

 

Step 6: Add the ‘t’ Variable

Add the top of the execute on enter frame script add:

t = true;

This will declare the variable ‘t’ as true and will alternate when the toggle function is called.

_____________________________

 

That is all.  I hope that you find some or all of this useful.  All the best,

Jeremy

 

All the Execute on Enter Frame Code (in one place)

t = false
var options = {
iterationStart: 0,
endDelay: 100,
duration: 700,
fill: ‘forwards’,

}

var keyframes = [
{ transform: ‘translateY(0) rotate(0)’},
{transform: ‘translateY(-30px) rotate(-6deg)’},
{transform: ‘translateY(15px) rotate(6deg)’},
{transform: ‘translateY(-15px) rotate(-3.6deg)’},
{transform: ‘translateY(9px) rotate(2.4deg)’},
{transform: ‘translateY(-6px) rotate(-1.2deg)’}
];

function playAnim(e,f,g){

pAnim = e.animate(keyframes, options);
pAnim.play()
pAnim.onfinish = function(){
cp.enable(f);
g();
}
}

function nextSlide(){
window.cpAPIInterface.next();
}
function message(){
alert(“You pressed the Message Button”)
}

function unHide(){
t = !t
if(t ==true){
cp.show(‘hidden’)
}
else
{
cp.hide(‘hidden’)
}
}

 

Useful WAAPI Animation Sites

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Web_Animations_API_Concepts

https://css-tricks.com/css-animations-vs-web-animations-api/

 

The .cptx file

animateBtns