14 Jan
Posted by
Michael

Category

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

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.

The Flash plugin is required to view this object.

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/Bookmark

8

Comments


  1. Jay Fresno
    18/01/2010

    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. Karen Cg
    19/01/2010

    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. admin
    19/01/2010

    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. admin
    19/01/2010

    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. Todd Haynes
    19/01/2010

    Cool stuff Michael. I’m going to try this out.


  6. Tiggaa
    26/01/2010

    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


  7. Steve W.
    29/01/2010

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

 

Leave a Reply