http://www.ftjcfx.com/image-3250119-10887764http://www.ftjcfx.com/image-3250119-11318773

Tutorial: Simple progress indicator for Adobe Captivate projects

by on November 26, 2008 with 10 Comments in Blog , Captivate , Flash , Tutorial

Adobe Captivate 3 uses different variables to keep track of things when it runs. These variables can be read from Adobe Flash and used for many different purposes.

In this post I’ll show you how to grab two variables from Adobe Captivate and then make a simple progress indicator you can use in your courses. The progress indicator it self is made in Adobe Flash and it’s a very simple process. You can download all sourcefiles from this post.

You can see how the result look like here: http://www.cpguru.com/testFiles/captivateProgress/captivateProgress.htm

The variables:

Lets start by looking at the two variables we need to read from Adobe Captivate.

rdinfoCurrentSlide – This variable contain the current slide/page of the Captivate project. Adobe Captivate counts the slides from 0 so basically 0 = page 1, 1 = page 2 etc.

rdinfoSlideCount – This variable contain the total amount of slides/pages in your Captivate project.

The Flash component:

So now that we know which variables we need it’s relatively simply to get the data from them.  I assume that you have basic knowledge of Adobe Flash and know how to set up a dynamic text field on the stage.

Open flash and create two dynamic text fields. Give them the instance names of curSlide_txt and totSlide_txt

Copy and paste the Actionscript below into Flash and save/publish your Flash file.

var currSlide;
this.stop();

onEnterFrame = function () {

currSlide = _root.rdinfoCurrentSlide +1;

this.curSlide_txt.text = currSlide;
this.totSlide_txt.text = _root.rdinfoSlideCount;

}

Now open up a Adobe Captivate project and import the Flash file you just made as an animation. Set it to start 0.5 seconds into the page and select no transition. I added the flash animation to my first slide in Captivate and selected “Display for rest of project”.

That’s all there is to it. If you publish your Captivate project now you can see the current slide and total slide.

Now all you need to do is make some nice graphics in Photoshop/Flash and make your progress indicator match your Captivate project.

Download sourcefiles (Captivate project & FLA file below)

Download Sourcefiles for Captivate Progress Indicator Version 1

1638 days ago byin Blog , Captivate , Flash , TutorialYou can follow any responses to this entry through the | RSS feed. You can leave a response, or trackback from your own site.
  • Captiv8tor

    Thanks for this explanation. I downloaded the files and they seem to work if I just use your files in my course. If I try to make my own it doensn’t work. I don’t understand why.

    I would really like to have this feature in my courses but would like to have a graphic bar to show the progress in the course instead of just page 1 of 5.

    Would it be possible for you to make that and share it here?

    Brgds,
    Captiv8tor

  • http://www.captivate4.com admin

    Hi Captiv8tor,

    Are you sure that you have copied/paste the actionscript exactly like the one in my post? Also make sure that you have given the instancenames the correct names. If you use capital letters in an instancename then you need to use capital letters in the actionscript aswell.

    As for you other question. Well yes I have been thinking about making something like that but I haven’t really had the time.

    My plan is to make a component in Flash that grabs the settings from an XML file. The user would then be able to change colors of the bar and background and change the text directly in the XML file without having to open Flash or even know how to use Flash.

    It will be possible for the user to change between a horisontal and a vertical progress bar with this component. I would probably put it up on Adobe Exchange but charge a small fee for it.

  • Pingback: Captivate Progress Bar | Captivate 4

  • Captiv8tor

    Yeah sorry it was me that did it wrong. I named the textfields wrong in flash so that is why it didnt work.

  • http://www.captivate4.com admin

    Glad to hear your sorted it out ;o)

  • http://- RBB

    Hi

    Congratulations for the blog and for the tai soup too. Looks like delicious.

    I need some help with this command. I´ve to migrate my script from AS2 to AS3, that I use to change the frame and load another swf. Here is:
    // criando o event listener
    addEventListener(Event.ENTER_FRAME, fncOnEnterFrame);

    function fncOnEnterFrame(evt:Event):void{
    if(mc.rdinfoCurrentSlide == (mc.rdinfoSlideCount – 1))
    nextFrame();
    // removendo o listener
    removeEventListener(Event.ENTER_FRAME, fncOnEnterFrame);
    }

    The mc is the object in the stage. But it´s not working. Could you help me? Anyway, thanks.

    RB

  • Ana_S

    Have you tried to add this slide counter to the captivate skin? I am creating a project that needs that sort of tweaking and working on it for a while. I havent’ been able to get it to work just yet..

    Any ideas?

    Thanks for your posts BTW, very useful post on the captivate 4 variables

  • http://accountinglectures.com/ EOQ

    Will It work for Cap 4?

  • http://www.cpguru.com admin

    Hi EOQ,

    The basic principle for CP4 is the same, but the variable names used are a bit different.

    You can find a complete list of the variables in CP4 here and then use those instead: http://www.cpguru.com/2009/04/28/system-variables-in-captivate-4-%e2%80%93-a-complete-list/

    /Michael

  • Pingback: Captivate Progress Bar | CP Guru - Adobe Captivate E-learning Blog