August 11, 2011

Let’s Highlight those Interactive Objects!

When creating an eLearning course, it’s a good practice to display content for the learner in bite-size pieces. For this, we 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 is always our cause of worry.

Instructional text comes for rescue here to guide the learner to click/roll-over the object. But the instructional text doesn’t seem to be sufficient when you have multiple interactive objects on the screen. In this case, you would like to visually indicate to the learner which objects they have interacted with and which ones are left out.

We can do this by adding event-based highlight effects along with the use of variables and advanced actions.

Take a look at this example:

Isn’t this awesome! As soon as you click a button, the highlight goes off.

Follow these simple steps to implement this functionality to your interactive screens in Adobe Captivate projects:

Let me know what you think about this functionality by leaving a comment on this post.

Happy captivating! :)

Posted by poojajaisingh11:31 AM
  • Brian Donahower

    Nice effect, but that’s a lot of work for one button (x 4). Nor does the glow return when the learner selects another option.

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

      Hi Brian,

      The idea here is that the glow never returns, so that the learners know that they have already clicked the button. If you want the glow to return, you can add script lines for the buttons to set the other variable values back to 0. For example, for the first button, you can assign a = 1, b = 0, c = 0 and d = 0 This will bring the glow back when the other button is clicked.

      • Brian Donahower

        I appreciate you took the time to review … thank you for your time.

        / Brian

  • Sheraz

    Awesome! the video explains everything.

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

      Thanks :)

  • http://www.facebook.com/people/Darren-Priest/540886968 Darren Priest

    I like this a lot, but I’m wondering why you have a jump to slide action as well. Is the pop-up on another slide?

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

      Hi Darren,

      It’s all on one slide :)

      The logic used here is:
      The conditional script Glow is associated with the screen load.
      The variable value changes on the click of the button.
      The Effect is applied based on the variable value.
      After the learner clicks the button we need to check the Glow script for the variable value and apply effect accordingly.
      For that we need to load the screen again… So Jump to the same Slide :)

  • Eric

    I banged my head against this for over an hour. It’s pretty basic logic – does it require Captivate 5.5 to work?

    • Eric

      I think I figured out the problem. The first time the frame is displayed after meeting the criteria, the action does not take effect. The second time, however, that the frame is displayed, the action does take effect.

      Not sure what is going on. I’m using Captivate 5.0.2.

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

        Eric, recheck your advanced actions to see if it includes the jump to same slide action for all the buttons.

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

      Hi Eric,

      You can use this logic in Captivate 4 and above to get the desired results.

  • Ananth

    Nice. Very useful.

  • http://www.facebook.com/people/Amy-Blankenship/743874381 Amy Blankenship

    How do you do this with rollover captions?

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

      Hi Amy,

      You can do so by using Rollover slidelets and place the text captions inside the rollover slidelets. Using Rollover slidelets will allow you to set the event action where you can associate an advanced action to remove the glow. Also, keep the captions visible inside the slidelets. Rest of the steps mentioned in the blog would remain same.

      • http://www.facebook.com/people/Amy-Blankenship/743874381 Amy Blankenship

        Thanks for your reply. Unfortunately, that’s not really practical, given the additional overhead of making slidelets (and the fact that they will not stay up until the user rolls off them, instead disappearing when the timeline expires). It would be wonderful if Adobe would bring all the different rollover features to have the same functionality.

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

          I understand Amy. It’s some extra work to add slidelets to implement this functionality. If adding a slidelet is not a workable solution for you, I would encourage you to log an enhancement request and we will try and help you make your workflow lean in the future versions of Captivate. Here’s the link to log the ER: https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

          For the slidelets disappearing way too soon, I would recommend that you increase the slidelet timing to 60 or 120 seconds.

  • 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