January 18, 2021
How to create advanced projects in Captivate
January 18, 2021
How to create advanced projects in Captivate
Explorer 10 posts
Followers: 24 people

Over the years I have been asked to create advanced projects in Captivate. Examples of these requests have been:

  • interactive flowchart
  • form that generates graph based on selections
  • Insurance calculators

I find that no matter what project I start, I always follow the same steps and have been able to complete projects that I thought were not possible in Captivate.

Start with a plan

Nothing starts without a plan. It can be a sketch on a napkin or detailed storyboard. Once I have an idea or vision for the project, I work out the fundamentals on paper. I usually sketch the screens or buttons using simple shapes like squares and boxes. This is the same process that is used to wireframe when designing web sites. This gives me a good idea for what will be required on screen.

In this example, I was asked to create an interactive flowchart. A flow chart would be displayed and once a segment is clicked, a dialogue window would open asking a question with two buttons, “yes” and “no”. Depending on what is selected the popup window closes and travels on the branch of the flowchart to the next segment. The process is completed until the user reaches the end. This was used to train users on how to select the right insurance product based on question they ask a consumer. The flowchart view shows all options available and all available products. The dialogue windows allow you to see more information or questions you would ask when dealing with a client.

Use smart shapes for rapid development and prototyping

You can only go so far with pen and paper, but it helps to organize your thoughts and create a layout. I create a naming convention and work out variable names. The next step is to start developing in Captivate. Smart shapes can be used to quickly test concepts and create buttons. They can be used to display variables as well, which comes in handy testing and troubleshooting.

This project sounded difficult and it is easy to get overwhelmed by the details required to make this functionality work. The key is to start small and build out a small portion. For example, using smart shapes in Captivate I created buttons that opened another shape to represent the modal window. I saw early there would be a problem managing the multiple buttons that requires different dialogue boxes with information. That is when state views come into play. In this case I created a button that changes the state of another shape. This allows me to add content to different states and reuse the same modal. With a working model for the first button, I add a second button. This simple example lets me see what problems I will encounter when more buttons are added.

Leverage Captivate features

Think about how you can use State Views and Advanced Actions to your advantage to accomplish tasks. State views allow you to show different states of an object, but you can also use them to hide objects or display content. If an object needs to be on multiple slides, consider setting the properties to “Rest of project”. If you need to hide it at any time create a state view that is blank.

Once I have a working demo I can continue to add features. Usually, I find it is a matter of duplicating objects assigning unique names and modifying the script for each button. When I get stuck or reached the extent to what Captivate can do. I turn to extending the functionality using JavaScript.

With everything working and no major hurdle left, it is time to make it look pretty. At this point I have the layout created using smart shapes and use the size of these objects to assist in creating accurate graphics.

1 Comment
2021-12-12 22:09:13
2021-12-12 22:09:13

Thanks so much for the step by step!  I used Flash years ago and during the lull between Flash and getting Captivate this year I forgot how to start. This will make my planning and execution so much easier and accurate.

Add Comment