Make a button in Hype that triggers different page in Captivate 8


(eventuin) #1

I want to import a Hype animation in Adobe Captivate 8 and have in interact with the Captivate project.
How do I make a button in a Hype animation cause a Captivate 8 presentation to jump to another slide?


#2

Hi @eventuin - This example has JavaScript you can use, though it is for Captivate 8 which might have changed function names: http://captivatedev.com/2013/11/21/jump-specific-slide-course-using-captivate-7/

Add this function to Slide 1 of your Captivate project:

/* Do an Execute JavaScript action on entry of slide 1 with the below code 
   Function to obtain query parameters by name */
window.getQueryParamValue = function (name){
    var q=document.location.search||document.location.hash;
    if(name==null){return q;}
    if(q){var aryParams=q.substring(1).split("&");
        for(var i=0;i<aryParams.length;i++){
            if(aryParams[i].substring(0,aryParams[i].indexOf("="))==name){
                return aryParams[i].substring((aryParams[i].indexOf("=")+1));
            }
        }
    }
    return '';
}
 
/* If cpCmndGotoSlideAndResume is 1, Captivate will jump to slide 1 and execute this on slide entry JavaScript code
 * again, causing an infinite loop.  So ensure that it only runs once using the hasExecuted flag */
if(typeof window.hasExecuted === 'undefined'){
    window.hasExecuted = false;
 }
  
/* Detect SWF or HTML5 output */
if(typeof window.cp === 'undefined'){
    /* We have SWF output 
     * Get the slide number to jump to by looking at the URL parameter cpCmndGotoSlideAndResume */
    var gotoSlideNumber = getQueryParamValue('cpCmndGotoSlideAndResume');
            if(gotoSlideNumber != '') {
                if(gotoSlideNumber == '1' ){
                    if(hasExecuted == false){
                        hasExecuted = true;
                        document.getElementById('Captivate').cpEISetValue('m_VarHandle.cpCmndGotoSlideAndResume', 0);
                    }
                } else {
                    document.getElementById('Captivate').cpEISetValue('m_VarHandle.cpCmndGotoSlideAndResume', gotoSlideNumber -1);
                }
            }
}else{
    /* We have HTML5 output */
    window.gotoSlideNumber = window.getQueryParamValue('cpCmndGotoSlideAndResume');
    if(window.gotoSlideNumber != '') {
        if(window.gotoSlideNumber == '1' ){
            if(window.hasExecuted == false){
                window.hasExecuted = true;
                window.cpCmndGotoSlideAndResume = 0;
            } 
        } else {
            window.cpCmndGotoSlideAndResume = window.gotoSlideNumber -1;
        }
    }
}

Next, you can create a standard ‘mouse click’ --> Go to URL action to open a URL: http://captivatedev.com/demo/Cp7/JumpToSlide/slide.htm?cpCmndGotoSlideAndResume=9

If anyone else has experience with Captivate and has a better solution, please chime in!


(eventuin) #3

Hi Daniel - thanks for sharing. Not exactly what I was looking for but very nice to know that this also can be done with a little Javascript magic!

I am looking for a solution to have a button on a scene in a Hype document, which is embedded as an OAM webobject on a page in my Captivate project, trigger the jump to a specific slide in the same project.

Figured out that the jump to a next slide ca be done by having the button trigger the Javascript code:
window.parent.cpAPIInterface.next();

Quit simple and handy, but now I am looking for a method to jump to a specific slide.

Thanks again for reaching out!


#4

I don’t think there is a method that jumps to a specific slide but there is one that seeks to a specific time.

window.cpAPIInterface.navigateToTime(3000); /// time in milliseconds

I’m guessing in your instance it would be

window.parent.cpAPIInterface.navigateToTime(3000);

D


(eventuin) #5

Thanks for your answer DBear.
Your solution works.

Vico