Creating a Tabbed Screen in Adobe Captivate 5

I’m planning to create some basic example screens used in eLearning courses and show you how I created them. The first one in the series is a tabbed screen, where you can click on each tab to go through the related text.

Take a look at this screen and play around with the tabs.

In this screen, we have six tabs and there’s some text related to it. The easiest way to create such a screen is to create seven slides, with the first one in the start state and the rest of the six slides with the text related to each tab and then linking the six screens with each of the tab. Lot of work, huh!

If you want to accommodate it all in one slide, retain the same slide number and make the project less cluttered… There’s a cool way to do so! Read on… 🙂

All right, let’s take help from our friend ‘Advanced Actions’. Don’t worry, we are not going to use any heavy codes… we will just show and hide things!

The logic here is to create buttons for tabs, text area associated with it and then use advanced actions to show the desired text and hide the rest. Ready?

Here are the steps you can use to create the tabbed screen:

Click here to download the assets.

Let me know if you found this post useful or have any questions by leaving a comment on this post. I would also love to know if there’s some specific type of screen/interaction example you are looking for.

Happy captivating! 🙂

45 Responses

    • It’s very simple! Insert the Tab_down.png image one more time, reduce the alpha to 20% and make six copies of it. Place them over the buttons, name them and uncheck Visible. Now go to advanced actions for each button and add an action to Show image. This time you don’t have to hide the other images as you want them to remain after clicking. Let me know if you face any issues while implementing it.

  1. Thanks! It worked. How about this… I am going to set it up so that after each person finishes a tab, they click a DONE button, and then it puts a checkmark on that tab. Is there a way to make it, so that a COMPLETION button shows only when all 6 checkmarks are showing (i.e. that they’ve completed each tab)?

  2. Hi there,
    sorry but i couldn´t follow the tutorial.

    Why do you describe the solution step by step when you could do it with captivate ? Why don´t you produce a small video with download sources for the neccessary buttons ? Publish it here or on the Adobe Channel in youtube this would be a contemporary and appropriate tutorial.

  3. Cool demo! I saw this on Twitter and am glad I checked it out.

    My company is in the stone age and we still are using Captivate 4. I am about 99% sure this will work in Captivate 4 just as well, though. I can’t wait to give it a try.

  4. I tried this out and worked well. I believe serrioals question was the tabs are black. When you hover over the tabs, they turn orange. With basic Captivate knowledge, we know you can have a mouse over effect to show a hand cursor. Did you have to do anything different to make the mouse over go from black to orange?

    • When you want to add a custom button in Adobe Captivate, you have to create the graphics for it in three states — “x_up” “x_over” and “x_down”. I kept the ‘_up’ state as grey, ‘_over’ state as orange and ‘_down’ state as green… That’s how you see the hover effect as orange.

      Here’s the link to download the graphics i used for the button: http://bit.ly/htOEkG

  5. Oh. My. Goodness. Can I tell you how long I’ve been trying to figure this out???? Boo. All I wanted was some tabs to show pix, while the show is paused. I’ve been messing with buttons for two stinkin’ days. Thank you, thank you, thank you.

  6. This is helpful. Thank you but I need a bit more. I want to create a flowchart that takes up the main slide. I want the learner to click on the first shape, that has a short title of the step, in the chart and learn about that part of the process and then proceed sequentialy through the rest of the shape/steps in the chart learning about the processes under regarding each. So what I need is a sequential process where the learner knows where they left off and where they are, and information linked along the way. Can you direct me to a tutorial to help with that?

  7. Thanks for a great demonstration. When you hover over the text the button characteristics change back to up state. If the button has a lot of text this may be confusing for users. Is there anyway to include the text area in the button state colour change?

  8. I’m working in Captivate 6 and I’m having issues getting this to work. I’ve got everything set up just as you instruct but when I preview the stage, all of the tabs vanish except for the one that I clicked. Can you give me some hint as to what I’m doing wrong? Thanks

    • Hi Debbie,

      Please share your project with me at pjaising at adobe dot com and I’ll help you with it. Also, did you try adding the tabbed screen learning interaction in Captivate 6 instead of using this workflow? You just need to choose a theme and populate it with text/images/audio to make it work. Give it a try!

Leave a reply

Related