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...
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.
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:
- Click, and
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:
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!