Use Edge Animate to get more out of Captivate 8

Adobe Captivate and Edge animate

The integration between Edge Animate and Captivate was one of the new features I was most excited about when I reviewed Captivate 8 a while back . It has not let me down. I now spend as much time in Edge Animate as I do in Captivate when I am building custom e-Learning interactions. Below is a demo of showing how you can use Edge Animate to control and interact with your Captivate project. It has buttons controlling Captivate, adjusting variables and more. There is a short explanation of each slide below. You can also download all the source files and have a play around yourself.

Edge Animate and Captivate in perfect harmony:

View full-screenDownload files

This is HTML5. If it doesn’t work get a better browser 😉

Controlling Captivate with Edge Animate buttons

Basic controls

The animations on these buttons are nice and basic. Mouse over plays the animation forward. Mouse out plays it backwards. The animation is just the border-radius changing from 50%, to 40% and back to 50%  with a colour change and a spin.

When the buttons are clicked they executes the following JavaScript:

Next slide:
window.parent.cpAPIInterface.next();
Previous slide:
window.parent.cpAPIInterface.previous();
Play:
window.parent.cpAPIInterface.play();
Pause:
window.parent.cpAPIInterface.pause();

Due to the restrictions on controlling parent pages within an object tag, there is a good chance the buttons will not work offline. You need to run them online.

Toggle mute button

The mute button is slightly different. Firstly I set the volume of the project to 0 (the number) on entry to the first slide using JavaScript. Then I use the following JavaScript to mute and unmute the audio:

var vol = window.parent.cpAPIInterface.getVolume();
window.parent.cpAPIInterface.setVolume(1 – vol);

This sets the volume as either 1 or 0.

The mute button also shows and hides a red X . This uses the show/hide toggle script that you can find in Edge Animate action window.

More animation control

The animation options in Edge Animate just blow away what you can do with Captivate alone. There are more animation options, but more importantly you get to control them to the exact pixel/percent. There is nothing  complicated going on in the demonstration. Each of the objects that appear are symbols and clicking the relevant button plays the symbol from the start.

A symbol is a one of more objects with an independent timeline. Which you can then control within the main animation.

A quick explanation why I have chosen these 4 when there are so many possibilities:

  • The Captivate bounce effect is not supported in HTML5.
  • The lack of curved paths has been one of the most frustrating thing about Captivate for years.
  • I don’t always want to rotate from a central point. For example if I want to rotate an arm at the elbow.
  • Sprites are fun and they give me a way of using my old Flash & After effects animations in HTML5.

Using edge animate to change Captivate variables

So for those of you who didn’t notice, yes I have ripped off Monty Python. Other than that, all that is happening is that the option you choose in the Edge Animate interaction is changing a variable within the Captivate project. The code used is:

window.parent.cpAPIInterface.setVariableValue(“answer1”, “Beer”);
window.parent.cpAPIInterface.setVariableValue(“answer1”, “Death”);
window.parent.cpAPIInterface.setVariableValue(“answer1”, “Love”);

In this interaction each button is its own symbol. They plays forward/backwards on mouse enter/mouse exit in the same way as the navigation buttons do.

Conditional animations

The animation at the end shows two ways you can interact with Captivate variables with Edge Animate. The first is displaying Captivate variables in your animation. The second is using Captivate  a variable to change what shows in your animation. I am calling this a conditional animation, if there is an actual term for this please let me know.

Displaying a Captivate variable in Edge Animate

So at the very beginning of the animation you will see the name you entered and your answer to the meaning of life. This is done with 4 lines of JavaScript:

var answer1 = window.parent.cpAPIInterface.getVariableValue(‘answer1’);
var firstname = window.parent.cpAPIInterface.getVariableValue(‘vfirstname’);
sym.$(‘name’).html(firstname);
sym.$(‘answer’).html(answer1);

The first two lines assign new JavaScript variables answer1 & firstname with their equivalent value from the Captivate project. The last two lines then insert  variables into two text boxes, name & answer.

The conditional animation

Each of the three possible animations are symbols called’_1, _2 and _3. They are all set to stop at the beginning of the animation. The following if statement checks your answer and decides which symbol to play:

if (answer1 === “Beer”){
sym.getSymbol(“_1”).play();
}
else if (answer1 === “Love”){
sym.getSymbol(“_2”).play();
}
else if (answer1 === “Death”) {
sym.getSymbol(“_3”).play();
}

This is a nested if statement, something that is very hard to replicate in Captivate. Another advantage of Edge Animate -this feature might be worthy of an entire post.

Summary

There you have it, 4 ways that you can use Edge Animate and Captivate together to build better e-Learning courses. If you want to download and play around with the source files just click the button at the top of the post.

If you find this article useful, share it around. Until next month…

George Hill (14 Posts)

George is an e-Learning developer and webmaster for Armada. His areas of expertise include HTML5, Javascript and instructional design.


12 thoughts on “Use Edge Animate to get more out of Captivate 8

  1. Thanks for this! I have to explore more controlling by JS, although I do use Animate a lot for animations in CP. Just wondered why you didn’t use the system variable (boolean) cpCmndMute to create the Mute button? It can be toggled like you toggled the Volume here.

    • Glad to help, your blog has certainly helped me enough times!

      In the common javascript interface they do not list a simple toggle mute usage. Because I have a slight preference for using volume (as I use it to lower volume to 0.5 on occasion) I used it here. You could use a similar statement to toggle the mute:
      mute = window.parent.cpAPIInterface.getVariableValue("cpCmndMute");
      window.parent.cpAPIInterface.setVariableValue("cpCmndMute", !mute);

      I haven’t checked this works, but it should do.

    • Yes, you can use localStorage.SetItem(“variablename”,”edgeVariable); This stores a variable in the learners browsers basically indefinitely, but if you do this the variable might not change every time a variable is updated in captivate, so make sure you update it manually each time it changes.

  2. This is an excellent post George! Thank you very much. I was wondering can Captivate Buttons and Smart Shapes be programmed to control Adobe Edge Animate Symbols and the Edge Animate Timeline ?

    • Oooo good question. Yes, in theory. Not tried but parent.JavaScript(); should do the trick. I’m not 100% sure about this though, I could never get a captivate button work as a play button for a youtube embed – but they where on different domains. I’ll have a play and get back to you.

  3. Very helpful. Is there a way to call the captivate exit function for the playbar from inside the animation?

    • Completely untested but parent.window.close();? I know that DoCPExit, is basically window.close() so it should work…assuming your course is opened in a new tab. Could you let me know, if that doesn’t work I’ll play 🙂

  4. Thank you!
    This helped me a lot starting with my Edge Animate & Captivate 9 Project. Maybe this is also helpful:

    I have a character displayed over several slides in Captivate. The character has some eye blinking animation and talking animation. I coordinate the speaking time of the character with a variable in Captivate depending on how much text I display. To initiate the process to get the variable vom Captivarte I use the Captivate own Slide Enter Event. So in Captivate I set the Variable on slide enter:
    window.cpAPIInterface.setVariableValue("talktime","10");
    Setting the talktime to 10 seconds. In Edge I listen to the Event to get the variable:

    window.parent.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER",startTalking);

    function startTalking(){
    clearInterval(myTalkDelay);
    mytalktime = window.parent.cpAPIInterface.getVariableValue("talktime");
    if(mytalktime > 0){
    mytalktime = mytalktime * 1000;
    sym.getSymbol("mouth").play("loop");
    myTalkDelay = setInterval(stopTalking, mytalktime);
    } else {
    sym.getSymbol("mouth").stop("stop");
    }
    }

    function stopTalking() {
    clearInterval(myTalkDelay);
    sym.getSymbol("mouth").stop("stop");
    }

    Maybe that is helpful for somebody else…

Leave a Reply

Your email address will not be published.

Website