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! 🙂
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!
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
Hi David,
Here are two example screens that you can create with this type of a set-up:
Click-based animations: https://elearning.adobe.com/2011/05/adding-multiple-click-based-animations-on-a-screen-with-adobe-captivate-5.html
Timeline Screen: https://elearning.adobe.com/2011/09/creating-a-timeline-screen-with-adobe-captivate-5-5.html
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?
Yes, you can add the text in the button images as I’ve done in this example: https://elearning.adobe.com/2012/04/enabling-assessment-module-after-course-completion.html (Click Start and see the buttons on Menu page)
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.
I’m glad it was helpful! 🙂
[…] demonstrations for tabbed and click-reveal text screen are already available here and for the benefit of blog readers, […]
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?
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?
Thanks Carlos. In Adobe Captivate, if a non-interactive object is placed on top of an interactive object, the interactive object is still active.
[…] text, rollover image, rollover slidelet, click-reveal text, click-display animation, pop-ups, tabs, etc. We saw how to create some of these screens in my previous blog posts. Now let’s see how we […]
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.
I’m glad it was helpful! 🙂
[…] usually create interactive screens with a pop-up, click-reveal text, rollover text, rollover audio, tabs, click-display animation, etc. But the fact that the learner might miss out on some hidden content […]
[…] it out here. This entry was posted in Captivate Tips. Bookmark the permalink. ← Writing Multiple […]
Adobe Creative Suite 5 (CS5) Master Collection
http://www.filesonic.com/file/1154536121/Adobe.Creative.S-5.CS5.Master.Collection.WithKey.4.48GB.rar
Adobe Captivate 5.0
http://www.filesonic.com/file/1154533151/Captivate_5.single.link.rar
Can you post a link to the source files? This is just what I was looking for! Thanx
You can easily create this by using the steps in the demo. I have included the graphics I’ve used… Give it a try! 🙂
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
I can’t find the part of the tutorial where it shows adding the “over” state of the image…
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…
If so, why did you add the green buttons manually then?
[…] the last few week’s we learned how to create a Tabbed Screen and a Click-reveal Text Screen with Adobe Captivate 5. We also learned how to embed a Captivate […]
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.
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. 🙂
Did the demo for this ever get posted? Can you provide a link?
Look for it on Monday morning…
Tricky1 you have to click and hold on the line tool to change into rectangle!
Rectangles – loosing my mind. Where do you insert them in CP5??
In the toolbar, it’s hidden below the line tool.
[…] back with the next type of screen. We learned how to create a Tabbed Screen couple of weeks back. Now let’s see how we can create a Click-Reveal Text screen in Adobe […]
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.
Thanks for your suggestion. I’ll add a captivate demo to this post shortly! 🙂
Could you already produce a captivate-video ? and could you already create a download source for buttons etc ?
sorry for the inconvenience and thx 😉
Will post the demo here on Monday morning.
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
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)?
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?
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.
This is really cool…thanks for this useful info.
You must be logged in to post a comment.
