3 Replies Latest reply on Jun 14, 2018 12:44 AM by bobbyjourdan

    'Jump to' a particular slide in adobe captivate using edge animate.

    ldonald30 Level 1

      I would like to 'jump to' a particular slide in adobe captivate using interactions created in an edge animate file. Is anyone able to help me with the javascript needed to do this?

        • 1. Re: 'Jump to' a particular slide in adobe captivate using edge animate.
          Preran Adobe Employee

          Hi Leith,

           

          From what I know, such functionality is currently not available.

           

          Found something related, but this does not answer your question, I think

           

          Using Edge Animate with Captivate

           

          Thanks,

          Preran

          • 2. Re: 'Jump to' a particular slide in adobe captivate using edge animate.
            Jordster1 Level 2

            So I dunno what was happening back in April that made this not possible but right now in Captivate 9 at least you can do the following to communicate a slide jump to Cap from Edge.

             

            I have an Edge file with a single symbol on it called edgeButton which is just a simple rectangle with some text on it. On the click event for edgeButton I've added the following script:

             

            window.parent.postMessage( "2", "*" );

             

            Where "2" is the second slide in a Captivate project. Here's a visual aid in Edge for the set up:

            gotoSlideCap.jpg

            On the Cap side of things I set up a simple blank project with two slides on it and have disabled the playback bar. On the first slide I imported the Edge OAM file from above and on the second slide is just a simple text caption to let you know you've arrived at that slide after clicking the "Click Me" button in the embedded Edge animation. Here's a visual aid for the Cap set up:

            gotoSlideCap2.jpg

            Notice there's an Execute Advanced Actions on the onEnter of the Master Slide. This is what that Action looks like:

            gotoSlideCap3.jpg

             

            First we add a Pause action so the project won't advance automatically. Then we add an Execute Javascript action on the "current" window. The script in the cruddy Javascript window is:

             

            window.addEventListener("message",slideJump);

            function slideJump(event){

                 console.log(event.data);

                 window.cpAPIInterface.gotoSlide(event.data);

            }

             

            If you're using IE, change that first line to window.attachEvent("onmessage", slideJump);

             

            So what we've done here is connect Edge (which Cap embeds into an iframe) with Cap through the postMessage function that allows document windows to communicate with each other. Since the Edge object is inside the Cap DOM, the Edge script has to post its message to its parent window which is the Cap document window. We add the listener for the message event to Cap on it's current window context and upon receiving the message we call the slideJump function and suss out the string that was sent over using event.data, which in this case is going to be "2."


            We log the value to the console

            console.log(event.data);


            just to sanity check our string, then pass the string to Cap's common JS interface API

            window.cpAPIInterface.gotoSlide( event.data );


            which advances the Cap project to slide #2.

            gotoSlideCap4.jpg

            Here's a Stack Overflow write up on postMessage if you're curious. Communication between Edge and Cap can work both ways through postMessage, btw. Here's an example where we walk through doing something similar except we're controlling an Edge animation from a Captivate asset using postMessage.

             

            I know this answer is a few months late to the party but hopefully it helps or helps someone else who might be searching for an answer to a similar problem.

             

            -Jord

            • 3. Re: 'Jump to' a particular slide in adobe captivate using edge animate.
              bobbyjourdan Level 1

              Hi there Jord,

              Is this possible with an HTML 5 Canvas project in Adobe Animate CC when I output an OAM?

              I just want to have the simplest interaction. How to click on a button in the OAM and jump to another slide in Captivate?

              What should I adjust in the script to make it work?

              Thanks in advance

              B