Intro

There are many ways to create a Click/Reveal interaction. Some are very old (with jump to slide), others are pretty old (show/hide) and lot depends on the exact situation. It is possible that I will make a complete analysis, although  I don’t think this will appeal to many users.

However my sense of justice is too keen, and I cannot  leave this type of comment (newbie)  without reacting:

“This is basic stuff right! Why is it so complicated?  “

If you want to know more, explore the discussion link.

I created a quick example of the most basic workflow which can be used. Will explain step-by-step.

Example

A two-slide project. The Click/Reveal interaction is on the second slide. You see three characters, which act as toggle buttons. When you click a character, a speech bubble will show up, when you click the character again, the speech bubble will disappear.

There is a Back button top left (but you can also use the Back button on the playbar which I have left in this project). You'll see that when revisiting the slide, the original situation is reset: no speech bubbles. Even if you leave the slide with one or more speech bubbles opened.

You can use this link to view a rescalable version or watch the embedded one below (fixed resolution):

Step-by-step

Step 1 Characters to button

Download the Characters and insert them on the slide.  Check the option ‘Use as button’ in the Properties panel (red outline in screenshot below). Leave the option ‘Retain state on slide revisit’ unchecked (green outline)
TIP: you don’t have to do this three times. Select the three inserted Characters (using CTRL button to add to the selection, or by creating a selection rectangle which cuts the three characters. Check the option in the Properties and it will be done for all the Characters.

 

Step 2: Custom state

Select one of the Characters. Click the State view button in the Properties.  Look at the screenshot above, where you see the button with a Blue outline. The  Object state panel will appear, which will have 3 states because you have a ‘button’: Normal, Rollover and Down. I deleted the last two ‘InBuilt’ states. They were identical to the normal state. You can do that with the right-click menu as shown in this screenshot. The Down state was already deleted, here the Rollover state will be deleted. 

Now add a Custom State using the New State button. Make sure to choose Custom under the first dropdown list (click the triangle button). You can edit the default name (NewState1). You have seen in the previous screenshot that I labeled it ‘Answer’.

That state will be selected, and you can add the speech bubble (eventually even with audio attached to it) and or any other object you want. Use the stage, where all will be dimmed in the background except your new custom state:

Close the Object State panel using the Exit State button at the end of the top Big Button Bar:

Step 3: Actions

Select the Actions tab in the Properties panel for the selected Character button. For the On Success event  set up this action:

You may see how easy it is to detect the multistate object to choose from the second dropdown list, since its name appears at the top of the Properties panel.

IMPORTANT! You have to uncheck the option ‘Continue playing the Project’ (red outline). That will prevent the playhead to be released. Will not expand in this article on pausing the timeline.

Your toggle button (character) is ready.  Start testing using F11, Preview HTML in Browser.

Comparison with Show/Hide

What are the advantages of the described workflow over the older Hide/show workflow which was chosen by the user:

• Show/Hide will need a lot more objects on the slide. In the multistate workflow the character is the only object: it is used as button, and the bubble (eventually the audio and/or other objects) is in a state of the character.
• Since using 'Go to Next State' will loop between the Normal and the Custom state, there is no need for a close button. If you want to achieve the same with Show/Hide you can also create such a toggle button, but that means a tracking variable and a conditional advanced or shared action. If you don't want a toggle button, you need to add a close button to the group to be shown.
• One of the biggest advantages is the automatic reset when revisiting the slide. Because the option 'Retain state when revisiting the slide' is unchecked, revisiting the slide will result in having the Normal state for each of the Character buttons. If you use a Show/Hide workflow, you have to use the On Enter event of the slide to reset everything, which means another advanced or shared action.

Hope you understand why I labeled this post as being a 'super easy' workflow. Multistate objects are available since version 9, there is no reason why you want a more complicated workflow in the 3/4 last versions.

To be honest, there is one disadvantage: you cannot apply an effect to the Speech bubble when appearing.

Intro

One of the type of objects that is indicated by the tracker as not compatible with HTML output are rollovers: rollover caption, rollover image, rollover slidelet, rollover shape. However if you ignore that warning for a non-responsive project, the rolloverrs will work fine when used with a mouse on a desktop or laptop screen (with the exception or the slidelet, which you should avoid at all times). Its functionality will not work on a mobile device, even not when using a stylus. But the 'mouse' users have that functionality.

However when you create a responsive project using Fluid Boxes, the options for inserting a rollover are greyed out. There is no way to add them. Is there a workaround to have rollovers for desktop/laptop users? That question appears once in a while in forums or social medai. In this post I will talk about my tentavies to mimick a rollover..

Example Movie

I cannot insert a responsive movie in a blog post. Use this link to have access to it. Try it out on a laptop or desktop screen: roll over the buttons in the left and in the right most Fluid box. You'll see rollovers for the big Blue buttons which do not have a real button functionality. The red buttons on the right are active, a hint message appears when rolling over the buttons. You can click those red buttons. This is a static screenshot of that slide (which appears after the poster image and the first slide):

If you try this on a tablet or a smartphone, rollovers will not appear. I tested on iPad and on an Android (HTC) phone.

First Mimick: Hint Messages

You did see the Hint messages for the red buttons when hovering over them. If you use a tablet or a phone they will not show up. Those buttons have the InBuilt States 'Rollover' and 'Down', but only the Down state will be visible on those mobile devices. This is the Object state panel for the second button:

For interactive objects it is possible to check the option 'Hint message' in the Actions tab. In all themes included with Captivate those messages are no longer in a caption but in a shape. The hint message appears wh

There are some problems with this solution:

• Buttons and Hint messages will share the real estate in the (normal) Fluid Box.
  

  
  That is a waste of space especially for mobile screens where those hints never appear. and the buttons may shrink too much as you can see here:
  

  
• I tried to use a static fluid box for each button+hint to be able to stack the Hint message over the button but that leads to very ugly flickering and is excluded.
• You don't have control over the exact size of the buttons, and certainly not over the HInt messages (look at the screenshots above). This may be not so important since you'll only watch on a big screen, but nevertheless.

Second Mimick: Rollover State

With the blue shape buttons I demonstrated that you can fill the Rollover state with Text (mimicking a rollover caption), with an image (mimicking a Rollover Image) and with both. Here is a screenshot of the second shape button, having an image and text:

The effect is quite nice, provided you use rather big shape buttons as was the case here:

There is a possible problem when using images: they can be distorted if the option 'Maintain Aspect ratio' is unchecked. That was the case in the example, and can lead to distortion:

Shared Action for Red buttons

The active red buttons trigger a shared action which will change the state of a shape (showing explanations), add a star to a progress indicator and have it animated. If you have read blog posts written by me, you know that I am a big fan of Shared Actions.