Custom Play/Pause button - version CP2019

Intro

Several years ago I have already created a blog about this topic.

Meanwhile Captivate has added a lot more features: multistate objects, changes in system variables, easier commands etc. Since that question often appears on social media and the old post is also still visited daily, time to offer an easier way. It is also a use case illustraing use of a system variable, following to my recent posts about system variables.  Here you'll discover how you can use an Interactive Video to as training asset for a workflow. It is up to you: video or step-by-ste textual instructions with screenshots.

Why do I prefer a Shape Button?

Buttons have InBuilt states and can have supplementary custom statesI. You can find more info in this  article: States and State Commands

Captivate has 4 types of buttons, which  have 4 InBuilt states: ‘Normal’, ‘Rollover’, ‘Down’, and ‘Visited’. They can all have extra custom states, which allows to create nice toggle buttons showing the situation at that moment. Examples: TOC open/closed, Audio playing/muted, CC visible/invisible etc (have a look at: 1 action = 5 toggle buttons).  The three first states are included in the object style of the button or the shape, the Visited state is not included. Custom states are neither included in the button style.

Text buttons, Transparent buttons (which are not necessarily transparent), Image buttons can NOT be used on master slides, can NOT be timed for the rest of the project.  A shape button can be used on master slides, can be timed for the rest of the project. For a toggle button Play/oause this is a big advantage: you need only one shape button for your project. If you prefer one of the older button types, you would need a button on each slide.

Workflow - Interactive Video

The movie is based on a Video Demo. The CPVC-file was captured at 1280x720. It is embedded as interactive video in a cptx-rpoject with a resolution of 1024x627. The ratio widht/height is not the same because the synchronized interactive video has a top control bar. I extended the functionality of Interactive video, you'll find some tips in my next post.

I will not embed the video in this post, it would be too small. I offer you two links: the first is to the unscaled published movie, where you'll have the best quality which is important to watch the sometimes very tiny features of the Captivate UI. If you want to see it oscaled to your browser resolution, you can use the second link, which is to a rescalable version. It may look more blurry on a very big screen, but you need to use this version if you want to watch on mobile devices:

Fixed resolution: Custom Play/Pause

Rescalable: Custom Play/Pause


Workflow Step-by-Step

Step 1: Creation of the Shape button

You have to know the  situation at the start of the  course. By default (after having launched the course) this will be 'Play’ situation. Consequence: the start look of the Shape button has to be ‘Pause’.  It is not possible n Captivate to create states for a shape button on a master slide . You have to create that button on a normal slide,.
  • Create a shape and check off the option ‘Use as Button’.
  • Open the State panel, using the button ‘State View’ in the Properties panel.
  • In the Normal state, fill the shape with an image and/or text you want to show when the course is playing, to pause the course.
  • Delete the InBuilt states ‘Rollover’ and ‘Down’, using the right-click menu on those states (you cannot use a simple Delete key).
  • Add a Custom State, and name that state  (I use 'Play' as label)
  • In this custom state fill the shape with an image and/or text you want to show when the course is paused, to resume Playing.

Here is a screenshot of the states I created in the video:

Step 2: Location Shape button

Once the button is ready, you have to decide where to put it, and take out the Pausing point. Reason: you want this button to be available all the time, but not a pausing point like you need for a Submit or a Next button. There are two possibilities for its location;

1. On Master slides

If you want to use the Play/pause button on all slides, and you are creating a non-responsive project or a responsive project with breakpoint views, the easiest way is to copy/paste the button to the Main master slide. The daughter master slides can inherit the button. Careful: in some themes the Title master slides is not using the main master slide objects, you’ll need the button also on that master slide in that case.

There is a problem with this possible workflow due to the fact that shape buttons on master slides do not have an ID, and that means they cannot be used with the Chang State command. You can not show a custom state for shape buttons on master slides. As a workaround (not explained here in detail), you can combine the functionality of that button, with a two-state image which is on the first slide, timed for the rest of the project. That image will have an ID and you change the state of that image. The shape button on the master slide needs to be transparent (you can keep a stroke if you want) so that the images will be visible.

For a fluid boxes responsive project, you cannot use the main master slide (cannot have fluid boxes). You will need to insert the button on each used master slides where you want that functionality.

To turn off the pausing point: open the Actions tab of the button, and uncheck the option ‘Pause project until user clicks’.

2. Timed for the rest of the project

The alternative for the master slides, is to have the Play/pause button on the first slide, and time it for the rest of the project, always on top. That has to be done in the Timing Properties of the button. At that same place you can also turn off Pausing:

For a Fluid Boxes project: object timed for the rest of the project is normally not possible. I explored and found it iw possible but with the requirement that you use the same master slide for all content slides.

Step 3: Create Advanced Action

The success event of the button has to trigger a rather simple advanced action. Check the ‘Conditional Tab’ and create this action:

Explanation: I am checking the value of the Boolean variable cpCmndPause (see article). If that value = 0, the course is playing.

In that situation I will use the command ‘Pause’ (‘Pause’ is exactly the same as ‘Assign cpCmndPause with 1) and change the state of the button SB_PausePlay to the Play state.

If the course is paused however, that variable would not have the value = 0 (but = 1) and the ELSE commands are done: the state of the button is reset to Normal, and the playhead is released by the command ‘Continue’ (which is the same as Assign cpCmndResume with 1, which is also setting cpCmndPause back to 0).

Warning: not everything is ‘paused’!

As I explained more in detail in my sequence of blogs about the timeline, even an absolute pause (‘Pause’) will not pause everything.  Here in short the most important:

  • Animations of all type (animated GIF, SWF, OAM….).
  • Event video if it is playing
  • Audio which was started with the command ‘Play Audio’

For more information:

Pausing Captivate's Timeline

Pausing Timeline and Audio

You would have the same  situation  with the Pause button on default Captivate playbars. It is not due to the fact that this is a custom button.


8 responses
Thank you for this tutorial on how to create a custom play/pause button. Because my navigation is based on SVG buttons, I tried to create such a button based on SVG (on a content slide). But as soon as I copy it to the master slide, Adobe Captivate crashes immediately with the message "Fatal system error". I noticed that the selectable properties for SVG graphics in the master slide are very limited. The object states "Normal", "RollOver" and "Down" exist, but the button "object view" is missing. Furthermore, no further graphics can be added. I think that is the reason why Adobe Captivate crashes. Do you have an idea or do you know a work-around to create a custom play-pause button based on SVG? I work with Adobe Captivate Vrs. 11.5.0.476
Hi Lieve, two quick questions on this. 1. How do you enable the state change of a Play/Pause button after creating the button and copying it to the Master Slide? Once putting it on a Master Slide, I lose the 'play' state of the Pause button. This is mentioned at the beginning of the post and then it says copying and pasting it to the Master Slide is an option for where to place the button - which is what I tried to do. (I'm sure I can create a toggling effect by adding a separate image of the Play button on the Filmstrip level, but this post makes it seem like we can use states of smart shapes on Master Slides, so I want to confirm whether that is possible.) 2. The next thing I'd like to solve is, do you know how to enable the state change (or visual change) of the Pause to Play button when the timeline hits a "Pause Point" (either caused by an interactive object or end of a slide)? Ideally, I'd like my Play/Pause button to toggle once clicked but also any time the movie timeline is stopped/paused. Any info on this is very helpful. Thank you!
Sorry, but that is a misunderstanding. A shape button on a master slide has no ID, you cannot control state changes for such a button. The other limitation is that you cannot create InBuilt states for a shape on a master slide. This seems to be a confusion between both. If you want to change the state of the Play/Pause button you need to put it on the first slide and time for the rest of the project. For SWF output it was possible to have an image timed for the rest of the porject on the slides that you could hide/showµ. For HTML5 output it is bit tricky, may work or not. Anyway you would lose the Rollover and Down states when that image covers the button. Second question is a tough one. There are some slight differences between the result of a Pause command (which is used with the button) and a pausing point which many users ignore completely. If you have a pausing point, slide audio is not stopping automatically, whereas the Pause command will stop it. I don't see a foolproof solution although you could make the Play state visible using the Delay next command. However that would also mean toggling the pause variable which is not the same as what a pausing point is doing.
Thanks, Lieve. That is how I thought the Smart Shapes worked. :) I'll figure out an alternative for now and keep searching for ways to improve. I'm sure JavaScript is a route - finding/writing the code is the challenge. Thanks again!
Hi Lieve, I’m currently using a shape button for ‘Pause/Play’ and it is working very well. However, the client I’m working with now wants the button to be Pause/Play/Replay for each slide; upon entry the slide plays normally, if selected during the slide, the button would pause the slide, and once the slide is completed, the button would replay the slide from the beginning, rather that move on to the next slide. In your experience, do you think this functionality can be achieved with one button? I am using Captivate 2019 and the button is currently set as a ‘rest of project’. We publish the courses as HTML5. Looking forward to hearing your thoughts on the matter. Tim
There is an article on my blog about Replay button. Feel free to use any information on my blog, but you cannot expect me to propose a solution for free when you are paid by a client.... seems very unlogical and even unethical.
Hi Lilybiri, I have referred your above blog and i did same as you suggested in Step 3. But once slide reach at the end of the slide and then again press play/pause button that time slide move on the next slide.
I have answered your question in the Adobe forums. You seem to suppose that Captivate is a presentation tool like Powerpoint which has a completely different goal. You need to learn more basics about the Timeline, I offered you links in the forum about Pausing the Timeline. One example: http://blog.lilybiri.com/pausing-captivates-tim...