Project Progress bar Captivate 2017

[toddb7256892]

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]

[Lilybiri]

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

[Lilybiri]

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]

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 "

[Lilybiri]

Todd answered:

Feel free to move to more appropriate thread. See image below. Just under USMC sits a progress bar, visible through image. As

the user navigates from slide to slide, the progress is visible through the letters. What I need is to create this bar, literally just a colored rectangle, that I can get to change in response to user progress. They're not concerned with actions like if user hits Back key...just a rough approximation of how much work remains. These no. of slides is not overwhelming but can get upwards of 40-50 at times. The progress bar will need to be a fixed size as the image overlaying it is fixed.  I see your idea of a multi-state approach but I'd have to have upwards of 50 states, correct? I suppose we could set up in blocks of say 10% progress, where user jumps state from 10% image to 20% image when the calculation says user has visited the # of slides corresponding to 20% for that module. Am I barking up the right tree here? I've seen a few such examples in this and other blogs...could cobble it together if you all think it's the way to go. Would love it if anyone has tackled this progress bar in similar fashion....Thanks!

[Lilybiri]

Indeed, that would mean 50 states for the blue bar, which can be behind the image which has transparent parts (needs to be a PNG). That is the tough part. The action, to be triggered On Enter for each slide would be easy, since you are lucky to be on 2017, where it is possible to use the command 'Go to Next state' in an advanced action (was not the case in CP9):

    Go to Next State  bar

    Continue

Another possiblity would be to apply an motion effect to a blue bar that has the total length, but is masked outside of the image.  I don't know what the background of the slides is? Effects are always relative, for many slides it will be a very short motion path. I have such an example in the game described in:

Playing a dice game, using While loop - Captivate blog

You don't need a while loop, I just mention it for the motion path, like the one simulating getting up one step.

[toddb7256892]

I liked the idea of using states, as per your rec, so I created 20 images with bars of varying lengths (ea. 5% from the next). What I want to do is to, using system variables, have Cap calculate what % slide it's on (say slide 5/20 total or 25%) and match that % with the correct image (say "logo25pct"). So I'd have to set up 20 conditions, one for each img such that If "slidepct" (where slidepct = cpInfoCurrentSlide/cpInfoSlideCount * 100) is greater than zero but less than 5%, show "logo5.img"; if slidepct is 5% up to less than 10%, show "logo10.img", etc.  I'm not as smart with using adv actions as I thought I was nor am I understanding how to use states (don't know how many videos I've watched...sigh). Anything dumbed-down works for me. Thanks to all for your help.

[Lilybiri]

To use a state in an advanced action, you need to use the command "Change State...." not the Show command.

[toddb7256892]

Any way someone might give me a jump start on this? I have the 2 sys var, cpInfoCurrentSlide and Slide Count. I have another user var, slidepct, which takes CurrentSlide/SlideCount * 100.  I have 20 progress images (states), say img5pct, img10pct, etc., that I would like to call out (change state) depending on the slide # (or slidepct). I think I have all the pieces but after 5 hrs yesterday, and as many the day before, I simply have no idea what I'm doing. I'll give this another few days at most before resorting to just putting an image on every slide sans advanced actions. How can one grow when giving up? Thanks in advance.

[Lilybiri]

Did you put the images in 20 states?  Label the states in a disciplined way, maybe: Less_05, Less_10, Less_15.......  I will label the multistate object Im_Progress

Create a user variable v_percent, no need for a default value.

The percentage calculation has to be done always, which means it fits in a first decision without checking the Condition box, it will be a standard action:

    Expression v_percent = cpInfoCurrentSlide/cpInfoSlideCount*100

Then you'll have to create 19 similar decisions with Condition box checked, you can duplicate decisions, have a look at:

   Advanced Actions Dialog box in Captivate 2017 - Captivate blog

First decision will look like this:

    IF v_percent is less than 5

             Change state of Im_Progress to Less_05
              Continue

Second decision

   IF v_percent is less than 10   AND

       v_percent is greater or equal to 5

           Change state of Im_Progress to Less_05
            Continue

The other decisions are similar to the second, use the Duplicate functionality and change the numbers in IF, and the state in the THEN part

Last decision

  IF   v_percent is greater or equal to 95

           Change state of Im_Progress to Less_100
           Continue

You can never have a 100% progress bar.

[toddb7256892]

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]

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.

[TLCMediaDesign]

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;
}
}

[toddb7256892]

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]

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.

[toddb7256892]

I appreciate your patience, and I would love for this to work. Here is

what I did, step by step:

1. Created smartshape of width (say 400) on slide, named image "bar".

2. Created user variable totalWidth and set size to 400.

3. Added 5 slides and copied "bar" onto each.

4. Added navigation button to each slide (next).

5. For each slide, OnEnter, copied in your JS verbatim into the

Script_Window and saved. Selected dropdown radio button Current for each.

6. Left checkbox for Continue Playing the Project checked.

7. Each slide now has a "bar" image (named bar_1, bar_2, etc.) and the

OnEnter JS.

8. Reviewed project in browser window: Bar appeared on each slide and

advancing slide had no effect on size of "bar".

Questions:

1. Some of the JS commands had "extra" spaces (e.g., var interval =

setInterval( checkExists, 100, false );

Do spaces such as the one before checkExists and after false make a

difference?

2. I assume I need to place an image ("bar") onto each slide? We're

not using states here? It's not drawing "bar" onto an empty slide?

3. Something else I'm missing? You're correct: This is (should be) a

simple action.....

Very appreciative of your efforts and follow-up. Thanks!

Thank You,

Todd Bennethum

Project Engineering Coordinator II

ISR Software Division

Sierra Nevada Corporation

303-795-0604 | sncorp.com

todd.bennethum@sncorp.com

[TLCMediaDesign]

You display the smartshape "bar" on the first slide and display for the rest of project. It won't work the other way since it has a different name on each slide.

[toddb7256892]

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]

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]

Sorry, I did do my example in CP 2017.

You can contact me, david dot crawford @ tlcmediadesign dot com and I can share the file I created.

[sdwarwick]

David - The setInterval / clearInterval concept to deal with the timeline rendering problem is great! 

In this particular case,  given that the designer wants to have the progress bar on every page,  it might be interesting to simply create a completely separate DOM element not managed by captivate at all,  and load it at an absolute location pulled from one of the captivate elements.   z-order can be set to make sure it's on top.   Ever tried this approach?

[TLCMediaDesign]

I have not tried that method, but I'm sure it would work.

I have progress bars that work per slide or per project and they toggle based on a variable. Since I already have everything coded, I just reuse the same code in every project and haven't found a need to try anything else. It's basically the same code, but in an external file and uses the slide enter and variable value change listener based on the cpnfoCurrentFrame to size the bar.

There was another post a while back where someone was actually scaling the object with jQuery instead of changinging the width property.

[BP72]

Would you mind sharing the solution of how to create a project progress bar please?

[TLCMediaDesign]

Did you try any of the solutions posted above?

[BP72]

yes, figured it out about adding the script per slide...

thank you again..