March 2, 2011

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! :)

Posted by poojajaisingh4:32 PM
  • Ram

    This is really cool…thanks for this useful info.

  • CT

    This is cool! But is there a way to make it so that once they’ve clicked a tab, it shows them, so they can see where they’ve already been?

    • poojajaisingh

      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.

  • CT

    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)?

  • Cameron

    hi, I’m trying to find any information relating to the collection of quiz results by e-mail. Can anybody point me at any useful information? Thanks

  • Helmuth

    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.

    • poojajaisingh

      Thanks for your suggestion. I’ll add a captivate demo to this post shortly! :)

      • Helmuth

        Could you already produce a captivate-video ? and could you already create a download source for buttons etc ?
        sorry for the inconvenience and thx ;)

        • poojajaisingh

          Will post the demo here on Monday morning.

  • Pingback: Creating a Click-Reveal Text Screen in Adobe Captivate 5 « Rapid eLearning | Adobe Captivate Blog

  • salmar

    Rectangles – loosing my mind. Where do you insert them in CP5??

    • poojajaisingh

      In the toolbar, it’s hidden below the line tool.

  • Jenza

    Tricky1 you have to click and hold on the line tool to change into rectangle!

  • Jennifer Snyder

    Did the demo for this ever get posted? Can you provide a link?

    • poojajaisingh

      Look for it on Monday morning…

  • Robert

    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.

    • poojajaisingh

      Thanks Robert! It should work well on Captivate 4 as well… If you face any issues, leave a comment here and I’ll be there to help you. :)

  • Pingback: Creating a Rollover Audio Screen in Adobe Captivate 5 « Rapid eLearning | Adobe Captivate Blog

  • Serrioal

    I can’t find the part of the tutorial where it shows adding the “over” state of the image…

    • poojajaisingh

      I’m not sure if i understand your question properly…

      Are you talkin about adding the over state of the button? That’s automatically taken.. When inserting a button, you just have to select the image in one of it’s state and rest are added automatically…

      • Armen

        If so, why did you add the green buttons manually then?

  • Brandon

    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?

    • poojajaisingh

      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

  • http://www.milleredu.com Al Miller

    Can you post a link to the source files? This is just what I was looking for! Thanx

    • poojajaisingh

      You can easily create this by using the steps in the demo. I have included the graphics I’ve used… Give it a try! :)

  • Evan_leo_king
  • Evan_leo_king

  • Pingback: Tabbed Screens in Captivate | HRD Online Training Blog

  • Pingback: Let’s Highlight those Interactive Objects! « Rapid eLearning | Adobe Captivate Blog

  • Megelias

    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.

    • http://www.facebook.com/pooja.jaisingh Pooja Jaisingh

      I’m glad it was helpful! :)

  • Pingback: Creating a Timeline Screen with Adobe Captivate 5.5 « Rapid eLearning | Adobe Captivate Blog

  • Carlos

    Hi Pooja – Very nice, thanks for the demo. One question; how is it that one can click the text captions, and still activate the buttons beneath?

    • http://www.facebook.com/pooja.jaisingh Pooja Jaisingh

      Thanks Carlos. In Adobe Captivate, if a non-interactive object is placed on top of an interactive object, the interactive object is still active.

  • Edgyhanger

    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?

  • Pingback: Here comes another Interactive Screen: Click-play Audio « Rapid eLearning | Adobe Captivate Blog

  • Yuna

    Thank you for the uber useful demonstration. Tabs are really useful in elearning, and Im so glad you showed us all how to do this.

    • http://twitter.com/poojajaisingh Dr. Pooja Jaisingh

      I’m glad it was helpful! :)

  • Glenn

    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?

  • David

    I went through the whole setup you gave really good directions. I am really new to Captivate. My question is this; what can I now do with this? Could you show an application? Perhaps to a more experienced user it may seem clear. My email is David@JKSTrainingandConsultngGroup.com

  • http://www.facebook.com/debbie.murillo.54 Debbie Murillo

    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

    • http://twitter.com/poojajaisingh Dr. Pooja Jaisingh

      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!

  • Subscribe to RSS feeds
  • Loading

  • Categories

  • Archives

  • Authors

  • Recent Comments

    • Stacie DaPonte: I am trying to combine drag and drop with image rollovers. I have a small square in the bottom of...
    • Dr. Pooja Jaisingh: Yes, it is :)
    • Lo' Roz: Please, is the new Drag and drop HTML5 compatible? It would be wonderful.
    • Jack Hampton: Congrats! It is good news and also that video is very good
    • Clint Elliott: I purchased multiple copies of Captivate 6 for our online school, and since we are now considered...

  • Captivate & eLearning Videos

    Subscribe to Adobe eLearning on YouTube.

    Check out the latest eLearning Videos on AdobeTV