Notification
Legend
227 posts
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 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! 🙂
You must be logged in to post a comment.
- Most Recent
- Most Relevant
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)
