How to Beat Captivate's Interactive Catch 22

Have you ever tried to create a software simulation in Captivate 4 or 5 that enabled a rollover effect, a double-mouse-click, and a right-mouse-click all at exactly the same location on a slide?  Up till now it's been impossible to achieve due to competing limitations of Captivate's default interactive objects.  Now a widget makes it possible to respond to up to seven (7) different mouse events from the same Captivate object!

View the working example here. For the full story on how this was created, read on...

The Puzzle

We have a client that produces one of the world's most popular chemical management systems - Chem Alert. Like many software applications, Chem Alert allows users to search for and display lists of chemical products used in the workplace. It uses classic rollover effects to provide feedback to the user about which listed item is currently in focus, and it has two different mechanisms for opening a dialog to provide greater product details.  Users can double-click a list page line item to jump to the product's detail page, or they can right-click the same line item to spawn a context menu with the same details page option, plus extra task options. 

This use-case is very common in software, but the problem for Captivate developers is that it's been difficult, if not impossible, to replicate such behaviour accurately in sim/tutorials.  Achieving one event-driven action is easy enough. You might even manage two. But when you need to have three events possible at the same spot, at least one fails to work due to an annoying Captivate Catch 22.

The Captivate Interactive Catch 22

You can simulate rollover effects in Captivate by inserting a Rollover Image or Rollover Caption.  So, with a screen capture of a list line item's mouseover state, I was easily able to replicate that part of the software's behaviour. Place the Rollover Image object exactly over the correct spot on the slide capture background, set Transition Effect to No Transition, and it looks exactly like the real thing when you mouse-over/mouse-out at runtime.  So far so good.

Captivate also allows you to add click-boxes that react to mouse events such as a click, double-click, or even a right-click (as long as you turn off accessibility and run it with HTML page in a browser).

But what Captivate doesn't do out of the box is offer multiple actions from a SINGLE interactive object. This means if you need a click AND a double-click action at the same point on a slide, you simply can't do it with one clickbox.  You can try stacking two separate clickboxes on top of each other to listen for different mouse events at the same cursor coordinates, but the result is that only the one on the highest layer of the Captivate timeline will "hear' and respond to the mouse event.  The one sitting underneath won't "hear" the event.  So, clickboxes for click and double-click don't work properly when stacked one above the other.

In a wry twist, you CAN have one click-box set to listen for a click or double-click, and the other set to listen for a right-click event.  Both work in this case because Captivate happens to use a totally different method of detecting right-click mouse events. It uses JavaScript instead of ActionScript. What happens in the background is that the JavaScript running in the web browser "hears" the right-mouse click, and calls back to inform the ActionScript code, which then trots off to find the exact current coordinates of the mouse cursor in the Captivate movie, and  identify which clickbox should respond.  It's a roundabout hack, but it works well enough.

When I discovered this double event bounty, I thought my issue was solved.  But then I found the rollover effect had stopped working...  Alas, the click-boxes sitting on top of the rollover area prevented it from hearing the mouseover event.  Bummer!  Back to the drawing board.

I tried every trick of the trade I could think of without success, including using Advanced Actions to show/hide the rollover image, jumping to slightly different captures to simulate rollover, all to no avail.

Standard Captivate just doesn't offer a way to handle three different mouse events on the same object...but thankfully Captivate widgets do.

Solution: Stacked Event Handler Widgets

Some months ago we created an interactive widget called Event Handler that enables you to add interactivity to almost any Captivate screen object.  You can take a stock standard text caption, highlight box, animation, or image, and effectively turn it into an interactive object that will trigger one of Captivate's Standard or Advanced Actions from a range of mouse events including:

  • Roll-over,
  • Roll-out,
  • Mouse-down,
  • Mouse-up,
  • Click, and
  • Double-click

The obvious missing event was right-click. We didn't add this to the mix in Event Handler 1.0 because Captivate already provided it via clickboxes, and AS3 doesn't offer an effective way to bypass Flash-Player's default right-click response of spitting up a context menu. 

But while wrestling with this triple-mouse-event issue we thought:

"Wouldn't it be cool if you could have multiple Event Handlers referencing the same screen object so that each listens for a different mouse event. If we add right-click to the list of events, it would be possible to respond to six or seven different events on the same object!"

And that's exactly what we did.  This is what the newly revamped Event Handler interface looks like now:

 Event Handler Properties Dialog

Adding right-click as an option proved to be possible by piggy-backing on the same method that Captivate uses for right-click on click-boxes...let JavaScript listen for it and then find out which object lies at the current mouse coordinates.

Here's how we set up the simulation to kill three events with one widget and beat the Captivate interactive Catch 22:

  • Set up a Rollover Image to simulate the rollover effect. 
  • Insert two Event Handler widgets on the slide.
  • Set both Event Handlers to listen for different mouse events on the same object using its Item Name.  
    NOTE: Rollover Image objects are actually made up of two separate objects.  The Rollover Image and the Rollover Area that triggers its show/hide behaviour on mouse-over/mouse-out. The breakthrough trick on this project was naming the Rollover Area as the target object on which the Event Handlers listen for mouse events
  • Set each the Mouse Event and Success Action for each Event Handler respectively. 

The resulting behaviour? 

  • Doing a mouse-over triggers the image rollover.
  • Double-clicking triggers a jump to a slide showing the product details page. 
  • Right-clicking triggers a jump to a slide showing a context menu.

And there's more...

Not being content with just adding right-click functionality to our widget we decided to also wipe out another restriction on Interactive Widgets that widget developers have complained about...inability to disable or lock pausing behaviour so that you could do infinite clicks on the same slide objects to trigger repetitive actions without advancing the slide. 

But we'll save that particular goodie for another story.  I guarantee you're gonna love it!

Comments

Ah, as a developer, I love hearing stories like these. Congrats!

IF YOU LIKE WHAT YOU'VE READ ABOVE, THERE'S PLENTY MORE!

Join more than 2500 other Adobe Captivate users just like yourself and receive regular troubleshooting tips, illustrated tutorials, technical information, and creative solutions to real-world e-learning development issues. (See an example here.) Click the button below to join our community.  It's completely FREE!