Controlling Captivate – Disable Scrubber

Welcome to another installment of Controlling Captivate. In this post we’re going to show you how to disable the scrubber in Captivates default playbar.

For those of you that want to restrict the learner from using the scrubber to advance to the end of project, we’re going to show you how. You’ll need Flash since we are going to edit the ActionScript in the default.fla file. Don’t have Flash? Don’t worry…when you sign-up for TLC Media Design Freebies, we’ll give you the modified SWF file for your own personal use. Oh, you’re publishing to HTML5? We’ve got you covered there too. Let’s get to it.

Disable Scrubber for SWF Output

First, we need to open the default.fla in Flash. You can find this file in the following locations on a Windows system:

CP6 = C:\Program Files\Adobe\Adobe Captivate 6 x64\Templates\PlaybackFLA\AS3
CP7 = C:\Program Files\Adobe\Adobe Captivate 7 x64\Templates\PlaybackFLA\AS3
CP8 = C:\Program Files\Adobe\Adobe Captivate 8 x64\Templates\PlaybackFLA\AS3

Now that we have the file open, we need to find the code for that pesky scrubber:

  1. Press F9 to open the Actions Panel.
  2. Locate the “pbcBtnSlider” MovieClip symbol in the left pane and click on the “plus” arrow.
  3. Click on the Action:frame 1 keyframe icon. Keyframe Icon You should now see the ActionScript code in the right pane.
  4. We don’t want to just delete the code as we may need it in the future, so we’ll comment out the code to add the event listeners.
  5. Highlight the two lines of code that start with “addEventListener”.
  6. Click the Apply block comment icon in the toolbar.



disable-scrubber-1

Since the thumb handle on the progress bar has a mouse over action applying the “hand” cursor, let’s get rid of that.

  1. Place your cursor on line 2 just under the line “var initialize:Boolean = false;”.
  2. The pbcBtnSlider MovieClip is made up of three MovieClips. The thumb handle has an instance name of “thumb_mc”.
  3. Add this line of code, “thumb_mc.buttonMode = false;”



Adobe Flash script window.

Now we need to export the SWF file so that Captivate can pick it up.

  1. From the Menu Bar, select File/File Export/Export Movie (Ctrl+Alt+Shift+S).
  2. Navigate to the following location for CP6, CP7 or CP8:
  3. C:\Program Files\Adobe\Adobe Captivate 6 x64\en_US\Gallery\Playbars\AS3
    C:\Program Files\Adobe\Adobe Captivate 7 x64\en_US\Gallery\Playbars\AS3
    C:\Program Files\Adobe\Adobe Captivate 8 x64\en_US\Gallery\Playbars\AS3

  4. Click the Save button and overwrite the existing file. Don’t worry, we only commented out the code so you easily revert back to the original default playbar by reversing the previous steps.
  5. Open Captivate and test it out.


Disable Scrubber for HTML5 Output

With our method for disabling the scrubber, you can NOT edit the source files Captivate uses when publishing your HTML5 projects. Because the code we need to edit is in the CPM.js file, which is created from your project with DLL helpers, we can only edit the published files. You can use any text editor with find and replace functionality, but we used Dreamweaver. We’ll show you several simple steps using Dreamweaver’s find and replace dialog with our published output set up as a site in Dreamweaver. We’ll also show you the applicable JavaScript files to edit if you are not using Dreamweaver.

Note 1: We use http://jsbeautifier.org/ to unminify our CPM.js. The find and replace may not work correctly in a minified CPM.js due to lack of spaces in the code. You also will not be able to comment the code unless using /* code */ comments.

Note 2: In Captivate 7 and 8, the CPM.js file can be extremely large (well over 15,000 lines of code for a project containing only a few slides) and may crash Dreamweaver, or at least it will stop responding. Be patient, it usually catches up with itself.

Note 3: When using the find and replace function, the quote or single quote characters need to be the same character style as what is already in the code. Do NOT use code from MS Word or this blog to populate the find and replace strings as this will break the code. Type the find and replace lines in your editor.

Tip:When copying text from a storyboard in MS Word, MS PowerPoint or some other application, paste the text into Notepad first before pasting into Captivate. This will remove all extraneous formatting and make editing much less painful.

So let’s edit the HTML5 output code.

Dreamweaver Site
    1. Execute Ctrl+F to open the Find and Replace dialog box.
    2. From the Find in: drop down dialog select “Entire Current Local Site”.
    3. In Find: field enter the following:
      • this.thumbDiv.id = “playbarSliderThumb”;
    4. In the Replace: field enter the following:
      • this.thumbDiv.id = “playbarSliderThumb”;
      • this.thumbDiv.style.visibility = “hidden”;

       

      Adobe Dreamweaver Find and Replace dialog box.

    5. In the Options: section, ensure the Ignore Whitespace checkbox is checked.
    6. Click the Replace All button.
    7. A message box appears telling you that this operation cannot be undone.

 

Message Box

    1. Click the Yes button.
    2. For CP7, Dreamweaver should find and replace one item in the project name\assets\js\CPM.js file.
    3. For CP6, Dreamweaver should find and replace one item in the project name\assets\js\CPPlaybar.js file.

Note: If you do not have a site set up in Dreamweaver these are the files you need to edit for the applicable version of Captivate.

  1. Execute Ctrl+F to open the Find and Replace dialog box again.
  2. In Find: field enter the following:
    • this.progressDiv.onclick = this.moveSlider;
  3. In the Replace: field enter the following:
    • //this.progressDiv.onclick = this.moveSlider;

    Adobe Dreamweaver Find and Replace dialog box.

  4. Click the Replace All button.
  5. A message box displays telling you that this operation cannot be undone.
  6. Click the Yes button.

So now the progress bar without the scrubber really is a progress bar! We hope you enjoyed this latest in the Controlling Captivate series and find it useful.

TLC Media Design is always available to help out with your custom learning solutions. Please sign-up for a free 30 minute consulting session below.

To obtain your SWF file and other freebies, click the Sign-Up link at the top of the page or click here.

schedule