Tutorial: Lock the progress bar in the Adobe Captivate playbar

In some courses you don’t want the user to “scrub” back and forth by using the progress bar slider. Of course you can disable the progress bar alltogether but then you will loose the visual indication of how far the user has progress in the course.

By using a custom Flash file it is possible to manipulate this Adobe Captivate progress bar slider so that it will show the progress but the user can’t interact with it.

The progress bar slider uses an event listener to check if the user interacts with the slider. To remove the possiblity of the user to interact with the slider we can simply delete these event listeners.

The Flash plugin is required to view this object.

Here is the code (AS2):

1
2
3
4
this.stop();

delete _root.cpPbcBar_mc.pbcBar_mc.pbcSlider_mc.onMouseDown;
delete _root._level0.cpPbcBar_mc.pbcBar_mc.pbcSlider_mc.onMouseDown;

This is all the code you need in order to “lock” the Adobe Captivate Progress bar slider.

A word of caution! Once you have deleted these event listeners there is no way to reactive them again. Therefore you can’t disable the interaction on some slides and reactivate it on others.

I included the Flash source file and a published SWF in case you don’t have access to Adobe Flash.

You can download the files here: Download files to lock the progress bar slider (58)

Have fun.

/Michael

  • Share/Bookmark

Tutorial: Hide the total duration in the TOC

I thought I would continue with a couple of more tips & trics for manipulating the standard TOC in Adobe Captivate 4. I spent a day breaking open a Captivate file and peered into the mechanics of how everything works so I still have a couple of new things up my sleeve ;o)

Unfortunately these TOC manipulations are exclusive to AS2 projects. If you publish your Adobe Captivate project as AS3 then there seems to be no way of manipulating the TOC.

One thing that has always annoyed me is the TOC duration timer in the bottom of the TOC. The TOC settings allow you to deselect “Duration” so that each of your slides in the TOC won’t display the minutes / seconds it takes to complete that slide. One would think that if a developer disables the duration view for the individual slides then the total duration would also be disable but unfortunately not.

The Flash plugin is required to view this object.


There is however a very simple approach to disable this TOC total duration display. Again we will need a custom Flash file to do the trick.

The code is just two lines (three with the stop command) and it looks like this:

1
2
3
4
this.stop();

_root.TOCContainer_mc.TOCBox_mc.TOCFooter_mc.TOCFooter_Text._visible = false;
_root.TOCContainer_mc.TOCBox_mc.TOCFooter_mc.timeBack_mc._visible = false;

Basically what we are doing is setting the movieclips inside Adobe Captivate 4 that holds the duration as invisible.

Of course you can make them visible again by changing the property from “false” to “true”.

I included a zip file here with the Flash file and the published SWF in case someone without access to Flash would like to use this feature. Ignore the _root warning when you insert the animation into Adobe Captivate.

Download the files here: Hide TOC Duration component / widget (82)

Have fun ;o)

/Michael

  • Share/Bookmark

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

Tutorial: AS3 code for the custom right-click menu

The tutorial om how to create your own custom right-click menu for Adobe Captivate showed you how to do it with Actionscript 2.0.

The same can be achieved with Actionscript 3.0 so I thought I would post the code here. The AS3 code is very similar to the AS2 code so I will not explain it in detail. Take a look at the AS2 tutorial instead for a full explanation.

Full AS3 code for the custom right-click menu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Create the menu variable
var myCustomMenu:ContextMenu = new ContextMenu();

// hide the standard menu items
myCustomMenu.hideBuiltInItems();

// create your custom menu items.
var menuItem1:ContextMenuItem = new ContextMenuItem(".: Developed by www.cpguru.com :.");
var menuItem2:ContextMenuItem = new ContextMenuItem("-> Click here to visit our webpage");

// set up a listener for menuItem2
menuItem2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, openWebsite);

// push the custom menu items to the menu
myCustomMenu.customItems.push(menuItem1, menuItem2);
this.contextMenu = myCustomMenu;

// the function to open up your website
function openWebsite(e:ContextMenuEvent):void {
var url:String = "http://www.cpguru.com";
var request:URLRequest = new URLRequest(url);
navigateToURL(request, '_blank');
}
  • Share/Bookmark

Tutorial: Custom right-click menu for Adobe Captivate

Wouldn’t it be nice to add your own custom right click menu to your Adobe Captivate projects?  Actually that’s a pretty simple task using a little Flash file to “inject” a new menu and substitute the standard Captivate / Flash menu with that. You could add information about who developed the project, link to your website, contact details etc.

Here is a little tutorial on how to create such a custom right-click menu in Flash (AS2) and add it into Adobe Captivate.

Demonstration:

The movie below has the regular / standard Adobe Flash and Adobe Captivate right-click menu:

The Flash plugin is required to view this object.

The movie below has a custom right-click menu:

The Flash plugin is required to view this object.


The Flash code:

The full code is available below,  but I will go through all the code line-by-line and explain them.

This line will create a variable to hold our custom menu.

1
var customMenu = new ContextMenu();

These two lines is what we will show in the custom menu. You simply insert your own text between the ” ” brackets and that is what will be shown in the menu. Now the important thing here is that you also need an “action” to occur when the user clicks that menu item. This action is usually a function and it can simply be an empty function if you don’t want anything to happen when the user clicks. The function names above are “emptyFunction” and “openWebsite”.

1
2
customMenu.customItems.push(new ContextMenuItem(".: Developed by www.cpguru.com :.", emptyFunction));
customMenu.customItems.push(new ContextMenuItem(" -> Click here to visit our website!", openWebsite));

This will hide the standard right-click menu items.

1
customMenu.hideBuiltInItems();

This will put our custom menu items into the menu.

1
_root.menu = customMenu;

Here is our function called openWebsite. This will execute if the user clicks the associated menu item.

1
2
3
function openWebsite(){
 getURL("http://www.cpguru.com", "_blank");
}

Here we have our emptyFunction, which will be executed when the user clicks the associated menu item. Since the function is empty no action will be taken.

1
function emptyFunction(){};

Below here is the full code.

Full code for the custom Adobe Captivate right-click menu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Custom right click menu that can be used with Adobe Captivate

// setup the new menu
var customMenu = new ContextMenu();

// create the menuitems

customMenu.customItems.push(new ContextMenuItem(".: Developed by www.cpguru.com :.", emptyFunction));
customMenu.customItems.push(new ContextMenuItem(" -> Click here to visit our website!", openWebsite));

// This will hide the regular menu items and substitute the default right click menu with our own menu
customMenu.hideBuiltInItems();

// Subsitute menu with our custom menu
_root.menu = customMenu;
// function to open the URL on click
function openWebsite(){
 getURL("http://www.cpguru.com", "_blank");
}

// empty function for the first line of our menu

function emptyFunction(){};

Steps to complete in Adobe Flash and Adobe Captivate:

So what you need to do is to create a new Flash file. Set the size to 100px x 100px as we don’t want to display anything - just execute some code.

Once you have your new Flash file open then click F9 to open up the actions panel and paste in your code. Now you just need to save your Flash file and publish it (CTRL+Enter).

Now you need to insert this Flash file into your Captivate project. Insert it on your first slide and just let it display for the standard 3 seconds. That’s actually all you need to do. Now when you view your published movie and right-click you will see your own custom menu.

A couple of things to keep in mind:

- Once you have injected your custom menu into your Adobe Captivate project you cannot get back the default Flash right-click menu without removing the Flash file and republishing your project.

- It shouldn’t be used in projects where you rely on catching right-clicks in Captivate simulations etc.

Hope you find this useful.

/Michael

  • Share/Bookmark

Locking content in Adobe Captivate 4

In some courses / projects it might be a good idea to lock some content so the user can’t access it before completing some required slides in your project. This is especially relevant when using the TOC as the user can navigate to any slide in the project as they please.

Normally this is handled by an LMS, but you could also do it by using Advanced Actions in Captivate 4.

This is how you would do it:

On each of the required content slides you would assign a variable with a value. Then on your locked content you create an advanced action that checks for the values of these variables. If the values are okay then you display the content. If not, then you put a highlight box over the content and display a text box stating that they need to complete some required content before accessing this page.

Click here to see an example of locking content in Adobe Captivate 4

In the example project linked above I have created 5 slides and 5 variables. On slide enter these variables are assigned the value 1. On my locked content slide I perfomr a check to see if all variables are equal to 1 and then take appropriate actions.

You can download the Adobe Captivate 4 project file here: lockedContent (106)

/Michael

  • Share/Bookmark

Using advanced actions for slidelet navigation

 I recieved an email from Shaun Barrow about a little trick he had for Rollover Slidelets. I told him that if he wrote up a small tutorial I would post it here on the site.

Below is what Shaun sent me – all credits go to him. 

­I was working on a project that required me to make a rollover slidelet that when clicked would go back to the current slide.  This in itself is not possible with the current design of Captivate 4, you are unable to link to the slide the rollover slidelet is on. 

sc1

 This was an issue for me.

I then remembered I had played around with advanced actions.  The ability to create an advanced action that will Jump to a slide.  YES!  This will work because it seems Actions are independent of the actual slide itself!

  

sc2

 Now with this saved I can go back to the properties of the slidelet:

sc3

Yes, I agree it’s a hack-around but it works and saved me a lot of frustration with what I needed to do.

Hope you enjoy.

Shaun B

Shaun.barrow@gmail.com

 

 

  • Share/Bookmark

Changing the buttons in the Perpetual Button Widget for Adobe Captivate

How do I change the buttons in the Perpetual Button Widget? This is a question that has been asked a couple of times on the Adobe Captivate Forum so I thought I would make a short and simple tutorial to show you how it’s done.

If you are proficient with Adobe Flash then this is not for you, but if you are a beginner Flash user then perhaps it will be of some help.

The tutorial was created using a new screen recording tool called “Screenr”. It allows you to create small 5 minute video presentations and is super simple to use. Actually I’m amazed by the result – It’s much better than I had thought it would be.

Hope you enjoy it.

/Michael

  • Share/Bookmark

Using Advanced actions to store and show a users answers in a quiz

Sometimes you would like to present a summary slide after a quiz where you present the user with their answers to the questions and give them some extra feedback.

If you run your courses in an LMS this can be achieved (with most LMS’) by reading the data stored in the LMS database. However, if you don’t deploy through an LMS you need to take a different approach.

You can achieve this by using user defined variables and advanced actions.

Basically you need to create one variable per question. I named my userQuestion1, userQuestion2, userQuestion3 etc.

These variables will be the containers for the answer the user selects on each question in your quiz. It’s not possible to run an action (or assign a value to a variable) on a question slide in Captivate. Therefore you need to insert a blank slide after each of your questions. It just needs to be 0.2 seconds long and here we will assign our user defined variables with the relevant value.

In Captivate 4 we have a system variable called cpQuizInfoAnswerChoice. This variable contains the selected answer to the question the user just answered. Note that this variable will be overwritten when the user answers a new question.

On our 0.2 second slide we go to the slide properties – navigation area and select the “On slide exit”. Here we want to assign a value to a variable so we pick Assign from the drop down list. In the Assign field we select our user variable – userQuestion1. In the “with” field we need to select what value to assign to our variable. Here we insert the cpQuizInfoAnswerChoice variable name.

assignvariable

Basically what will happen here is that when these 0.2 seconds are done Captivate will assign the value of cpQuizInfoAnswerChoice to our user defined variable userQuestion1.

On to question 2. Again we need to make a 0.2 second slide after question 2 and then assign userQuestion2 with the value from cpQuizInfoAnswerChoice. Do this for all your questions.

Now we should have a number of variables that will be populated with the values and we need to go to the next step.

The next step is to create a slide that will show some specific information based on the values of our user defined variables.

In my example I just used some text captions, but basically you can use whatever you want.

For each question we need to create a text box for each of the answer possibilities. I just have 3 answer choices to each question so I need to create 3 text captions per question.

In the text box you can write whatever you want. As an example you could write “You selected option A: 2+2 = 4. That is correct! Good job.”. You then need to go to the options tab of the text caption and assign it with a proper name. I used question1_a, question1_b etc. Also uncheck the “Visible” tick mark.

textboxes

Now this text box is invisible until it is told otherwise by Captivate.

Once you have set up all of your text boxes it’s time to create an Advanced Action to handle the showing of the relevant text captions for each question.

Hit SHIFT + F9 to open up the Advance Actions part and create a new action. I called mine “showAnswers”.

Here we will set up a number of conditions and appropriate actions to perform when these conditions are met. For each question you need 3 conditions.

Here is the script you should use for each answer possibility on each question:

Check If ( userQuestion1 is equal to A)
begin
show question1_a
end
Or Else
being
end

actionsscreenshot

Repeat this action for all of your answer possibilities and all of your questions. (don’t you just hate the fact that you can’t copy/paste in the Advanced Actions panel!!)

Now that we have our showAnswers action set up we go to the slide properties in the navigation part and select “On slide enter:” – Execute advanced action and select our showAnswers function.

slideenter

Now when you run your quiz you should have a custom slide that shows you information based on what choices the user made.

Sample project (published and CP file) can be downloaded here: www.captivate4.com/demonstrations/quizAdvancedActions.zip

Have fun ;o)

  • Share/Bookmark

Tuturial on how to create widgets for Adobe Captivate 4

 Adobe just started up a new series of tutorials on their blog. These tutorials will explain the basics in regards to creating widgets for Adobe Captivate 4.

Here is the first post:  http://blogs.adobe.com/captivate/2009/06/captivate_widgets_tutorial_cre.html

  • Share/Bookmark
Page 1 of 212»