Tutorial: Open / close the Adobe Captivate TOC from your own button

16

The Table of Contents (TOC) in Adoce Captivate is a popular feature, but unfortunately it doesn’t offer alot of customization options.

When using the TOC in overlay mode you will get a small button “>>” in the top left (or top right) corner. This button can be used to open and close the TOC. If you use one of the standard Adobe Captivate playbars you also have a “TOC” button there, which can be used to open/close the TOC.

But what if you don’t use a playbar in your projects? Well then you are actually stuck with the small “>>” button as the only mean of opening and closing the TOC. That little button isn’t very visible and if you like me use templates in your projects it will most likely be place on top of some of your existing elements.

The Captivate movie below demonstrates the various possibilities of the TOC including the custom button approach.

[swfobj src=”http://www.cpguru.com/wp-content/tocDemo2.swf” width=”453″ height=”333″ allowfullscreen=”false”]

Luckily if you have access to Adobe Flash you can create your own button to open and close the Adobe Captivate TOC. Here is how it’s done:

Step 1:

Create your button in your program of choice.

Step 2:

Open up a new Flash file with the same dimensions as your button

Step 3:

Give your button an instance name (I used but_mc)

Step 4:

Open up the Actionscript window (F9)

Step 5:

First you need to stop the Flash timeline:

1
this.stop();

The we need to hide the “>>” or “<<” button:

1
2
_parent._parent._parent.ShowHideTocLeft_mc._visible = false;
_parent._parent._parent.ShowHideTocRight_mc._visible = false;

Then we create our function that will execute when the user clicks out button. Notice that in the function we once again hide the “>>” or “<<” button since their status will reset when the TOCManager.showTOC(); function is executed:

1
2
3
4
5
this.but_mc.onRelease = function(){
_parent._parent._parent.TOCManager.showTOC();
_parent._parent._parent.ShowHideTocRight_mc._visible = false;
_parent._parent._parent.ShowHideTocLeft_mc._visible = false;
};

Step 6:

Save and publish your Flash file

Step 7:

Insert the Flash file as an animation in your Captivate project. You need to insert this on every slide – you cannot use “Display for rest of project”.

Step 8:

Publish your Captivate project and enjoy your own custom TOC button ;o)

Full AS2 actionsscript for the custom Adobe Captivate TOC button:

1
2
3
4
5
6
7
8
9
10
this.stop();

_parent._parent._parent.ShowHideTocLeft_mc._visible = false;
_parent._parent._parent.ShowHideTocRight_mc._visible = false;

this.but_mc.onRelease = function(){
_parent._parent._parent.TOCManager.showTOC();
_parent._parent._parent.ShowHideTocRight_mc._visible = false;
_parent._parent._parent.ShowHideTocLeft_mc._visible = false;
};
Share.

16 Comments

  1. I was not able to make the button work in Captivate — it did not hide the >> nor did it open and close the TOC. Please provide more detailed instructions so that noobies like me can be successful.

  2. Thanks Mike…like Jay I’m a newbie to Captivate, can this open / close button work if I’m using the Aggregator to group together many projects please? ie. can this be added to all of my many projects to make Aggregator overlay instead of fixed?

  3. Hi Jay,

    That’s strange – it should work just fine with the code and steps explained here.

    Could you try and exchange the _parent._parent._parent with _root instead and see if that works for you?

    I tried to avoid using _root since you get a warning when importing Flash animations that uses _root into Captivate, but in this case it will not case a problem with Captivate.

    /Michael

  4. Hi Karen,

    I never used the Aggregator myself, but from what I understand the Aggregator is a fixed “TOC” and cannot be used in overlay mode. Therefore this would not work with the Aggregator and I doubt that it could be adapted to work with it since the functions required to use the overlay functionality is not included.

    /Michael

  5. Step 7 – You can insert the button at the start and have it “Display for rest of Project” by changing the code slightly, instead of

    “_parent._parent._parent”

    just insert

    “_parent._parent.”

    However, if you do make these changes it will only work when used with “Display for rest of project” and not for individual screens.

    Tiggaa

  6. This is awesome, Michael! I’ve been waiting for someone to figure this out since I started using Cp4. Thanks for sharing!

  7. Pingback: uberVU - social comments

  8. I don’t get it… I must be missing something…. I have Flash CS4, and Cap4.

    I created a image to use as a button… and I imported to flash, and put in the code.

    I published and imported to CAP 4 project as an animation. It clearly is hiding the << stuff… but how do I get it to work as a button?

  9. @Steve,

    So nothing happens when you click the button? Did you set up the proper instance names to your button? You should of course customize the scripts above so they fit with your button instance name. The instance name I used is “but_mc” so if you copied my code then make sure that the button you have on your stage has the same but_mc instance name.

    /Michael

  10. Michael,

    First of all, thank you. You were right on. I had forgotten the instance name… I’m very strong in Flash.. so let me explain what I did.. and see if you can understand my next question.

    Within Captivate, File->New->Widget in Flash. Choose Widget type -> Static and ActionScript Version-> ActionScript2.0.

    In Flash go to Window->Components and from User Interface select-drag a button and drop on the stage. Select the button and then go to Window->Component Inspector->Parameters Tab and then in the “label” field change the label to “TOC”.

    I added your code seen above. Published. Within Captivate added the new widget and it works perfectly.

    I just watched your video on how to change the up, over, and down images on a widget button… (which I thought would be very easy after your video)

    I opened my unpublished file that I just described… and I cannot figure out how to change the Flash button to the different states? (I made custom png images in photoshop that work great in Cap4 as image buttons for other things)

    Where did I go wrong?
    Steve

  11. After looking into the _parent suggestion that, tigaa gave. I started looking into this a bit more. I have a goal of creating a completely custom nav widget/flash object that I can place in a project and use for all navigation. I have been struggling with the _parent levels.

    So apparently an animation on a slide that is set to “show for rest of slide” is housed one _parent deeper than an animation that is set to “for rest of project”

    _parent._parent._parent. is the path from swf on slide to access variable/functions of Captivate

    _parent._parent. is the path from swf set to display for rest of project to access variable/functions of Captivate

  12. Your tutorial on opening the TOC from a custom button describes exactly what I need to do for my project. However, we are using Captivate 5/ActionScript 3.0. Do you have a tutorial available, or an explanation of the differences in code?

  13. So for those of us who don’t know a lick of Flash programming, is there a widget somewhere that we can assign an image for our TOC and set this up that easy?

  14. Thanks for putting this together. I followed your excellent instructions and was able to put a custom TOC button on my projects. Some of my sticking points that i wanted to share… because I’m not a flash expert: I had to convert my button to a symbol in order to name the instance. Also, I had to apply the Action Script code to the “frame”, not the movie clip… I’m not even sure what that means but it made a difference! Finally, I used Tigaa’s excellent suggestion, removed a _parent. to apply the button to the entire project.

    Thanks again!