Skip to main content
Participating Frequently
July 2, 2017
Question

Project Progress bar Captivate 2017

  • July 2, 2017
  • 4 replies
  • 3661 views

Hi. This is so close what I need to do.  I want to take a solid rectangle and have it fill as a function of how many slides have been clicked; this will be overlayed by client text box where letters are transparent. (So, if on slide 6 of 10, then 60% of rectangle will fill under the letters.)I have watched your blogs on using # and % calculations; is there any way to correlate your work with a physical image such as this? The progress bar would have to be a fixed size to accommodate the client text box. You're as close to what I need as I've seen in hundreds of blog pages! I didn’t realize how complex this really is! Thanks for any help.

EDIT [private information removed by moderator]

    This topic has been closed for replies.

    4 replies

    Participating Frequently
    July 11, 2017

    Good call but same results. Went back and checked my typing of JS - exactly as posted.  Published both to browser and to HTML5 in Browser options with no change. Maybe I'm not destined for Java..... Are there any conditions on the "bar" graphic? Why on the JS is it called barc and not just bar?  Maybe 1-2 more suggestions before we give up?  You've put in so much already I'd hate to waste your efforts.

    TLCMediaDesign
    Inspiring
    July 11, 2017

    It's called barc because Captivate turn it into a canvas element. It actually creates 3 different elements for each smartshape.

    I did not do my test on 2017, I'll try it later and see if it renders differently and get back to you.

    TLCMediaDesign
    Inspiring
    July 7, 2017

    I have written a JavaScript that will do what you want.

    First you need to create a variable called: totalWidth

    Set it's value to the width you want it to be when all slides have been viewed, i.e. the width of the Marine graphic: 500

    Put a Smartshape under the Marine graphic and set the outline to 0 and the width to 4px. Name the Smartshape "bar"

    On enter of each slide either execute the following JS or put the JS in an Advanced Action and execute that.

    var interval = setInterval( checkExists, 100, false );

    function checkExists()
    {
    if ( document.getElementById( 'barc' ) )
    {
      var shape = document.getElementById( 'barc');
      var w=Math.round(window.totalWidth/(window.cpInfoSlideCount/window.cpInfoCurrentSlide));
      shape.style.width=w+"px";
      clearInterval( interval );
      interval = null;
    }
    }

    Participating Frequently
    July 7, 2017

    This looks quite impressive. I wish I knew enough about programming in Cap

    to do this. As you can see by my post, I'm trying my best to be a small

    fish in a big pond.

    If you might be so kind as to walk through how to enter your script

    actually into Cap, that would be great. I'll give it a go and if I run

    into problems will post them in the hopes that you or someone might jump

    in.  I really thought this thread would generate more interest.  Thanks

    ever so much.

    Thank You,

    Todd

    Moderator: please be careful with personal data on a public forum. I took them out.

    TLCMediaDesign
    Inspiring
    July 11, 2017

    Which part of my post are you having an issue with?

    There are only 3 steps:

    1. Create the variable totalWidth and set it's value to the width of the smartshape when it is full size, all letters in USMC are blue.

    2. Create the smartshape ( named "bar" ) and put it under the USMC graphic with the dimension noted above.

    3. copy and onEnter of each slide choose execute JavaScript and paste the code above in the dialog box.

    Participating Frequently
    July 7, 2017

    Again, great comments. Trying to piece things together so bear with me.  Here is a pic of a few of my states as described before: Notice the progressive fill from left to right.

    Here are a few slide images involving the states: In this first one (skipped bar on title slide), note name given to object.

    In this next slide, note a change in the object label assigned by Captivate - this proves to be a point of confusion later when doing advanced actions. (Slide 4 assigns it Marines...._102, etc.)

    The following are different grabs of the actions - I think you can figure out what I'm trying to do (after all, it was your idea!):

    Here these non-conditional calcs are to determine the slide location as a function of relative slide number. Note the 2nd expression, used to turn value into an integer for later use.

    Here is the 1st conditional. This should just keep the 0% state (Marines_indicator_bar) in place. Am confused about the Normal label. Only other choices are 5%, 10%. .... which are not relevant here.

    And the 2nd conditional.  The next 2 images are from the same action (bad cutting). Notice when determining what state to change, there are references to all labels for the 0% state images placed on the slides. This is VERY confusing.

    This image represents the same action but with the choices I used.

    And lastly, one more example of this. Am I supposed to be using the THEN field for anything? Don't see what I could be doing but...

    So, when I run, out of 22 slides, a few of the slides SHOULD change states yet they all show the 0% state. Interestingly enough, when I remove actions and have the slides, when clicking the nav button, on Enter Change State to - when I do this, and assign a state, they do change to the proper state. So the states per se seem to be fine.

    If I can't get the actions to calculate properly, I'll just hand calculate all % values ahead and manually select the proper state. it would be quite a waste of the program's utility, and I'd prefer to figure this out, but I do have a Plan B (fingers crossed).  Thanks ever so much for your teachings...I'm a very appreciative pupil.  I thought this post would generate more interest....

    Lilybiri
    Legend
    July 7, 2017

    Sorry, but I spent already much time on this thread and have now urgently to go to my business. I am only a user like you, and you see that only few people are answering questions when they expect to have lot of teaching to do.  Only crazy people like me....

    This would be definitely a situation where JS would be a better solution than Advanced actions, but it can be done with AA.

    Lilybiri
    Legend
    July 2, 2017

    To whom is your request addressed, please? Which version are you using?

    Lilybiri
    Legend
    July 2, 2017

    Todd answered:

    My apologies. I'm using Cap 2017 and am quite new at this. I have used advanced actions, can write simple scripts, but hope I'm not in way over my head here. Working for govt contract who wants to have a text icon, say MILITARY, be transparent on top and have a colored progress indicator bar running below it, "moving" from L to R, with the % of slides visited (not much interactivity, just slide visiting) illustrated by the relative length of the bar (and thus the image above it).

    I am not real familiar with the board etiquette as I have just been reading posts and getting ideas. Sorry if I have upset the cart in any way. I see that my email inclusion was not well received so no more personal data. I'll be happy to do the work here - just trying to figure out if this is doable and if so, how.  Thanks for your terrific blog.

    Lilybiri
    Legend
    July 2, 2017

    This is a public forum, if your personal data was removed it was to protect you from possible spam. One of the moderators (not me in this case) will have taken care of that.

    Since many users answered in this thread, I was not sure to whom you were talking.

    It would be better if you had started a new thread, The title of this thread points to Captivate 9 and you are on 2017. Since I'm a moderator I could branch your question to a new thread if you want me to do so.

    I would give the same answer as I did for the original question: you'll need to use a multi-state object where each state adds another part to the progress bar. That object will have to be put on the first slide, timed for the rest of the project, always on top.

    You will need a shared or an advanced action, which is not a newbie work flow at all. My blog describes a lot of use cases for advanced and shared actions, but in 2017 the dialog box has been refurbished, which makes the work flow often easier. Have a look at:

    Advanced Actions Dialog box in Captivate 2017 - Captivate blog

    Rather important question: if a user gets back to a previous slide, what should the progress bar show?

    Maybe you could post a screenshot of what you mean by "to have a text icon, say MILITARY, be transparent on top "