Use Hyperlinks as Interactive Object.

Intro

Quite a while ago i have blogged about using Hyperlinks as interactive objects. Those blogs included examples. However the articles were written in the SWF era… which is almost over.  I'm talking about these posts::

More is in a hyperlink – Dropdown menu

More is in a hyperlink – Close button

Later on I used the Dropdown menu workflow in all the interactive videos which I posted here, to create a Bookmark menu. Here is one example: Custom Play/Pause button

Last week, a user asked questions about the same topic. That was the incentive to check out if the described workflows for SWF output were still valid for HTML5 output. 

Example file

You can have a look at this example file, where I show 4 use cases; or watch the embedded version below (fixed resolution, whereas the link goes to a rescalable HTML output):
  • Navigation buttons
  • Show/Hide workflow
  • Close button for a popup
  • Forced view

I did keep the typical Underline for the hyperlinks (but often edited the color). You will find tons of them. The design of the slides was taken from the Quick Start Project included with version 11.5, labeled ‘Rhapsody’. It always reminds me of the epoch of the Hippies…

No audio, sorry.  There is no playbar, nor TOC. Navigation is done with SVGs, which have a tooltip (added in the Rollover state) for those who use a desktop/laptop. It is a rescalable, non-responsive project. I  checked  out the workflows in a Fluid Boxes project as well, because they may be very interesting for that type of project.


Setup

Navigation menu

The list with commands which you can open when clicking the down arrow next to the field 'Web page' looks shorter than the Simple Actions list under the Actions tab for an interactive object:

Some commands are indeed missing, but most Slide commands can be found under the unique 'Slide' command. In this screenshot you see how to translate the Jump to Slide command, which you'll need to create navigation buttons (see Menu slide, second slide in the example project):

Comparing with interactive objects

The big advantage of using hyperlinks is that everything could be done with one text container, in which you mark several items as hyperlinks . Great way for a custom Table of Contents, which you can have sliding in/out. Especially for responsive projects: click box over text is not possible in a normal fluid box; limiting number of objects make setup much easier for Fluid Boxes workflow as well as for Breakpoint Views.

Alternative for buttons? Advantage is that you don't have shrinking of the text when pressed, you don't have to configure InBuilt states. Disadvantage: you miss the Visited state to indicate that an item has been visited.

Show/Hide

The slide with the hyperlinks in ellipses, was created as a 'dynamic' hyperlink (to be compared with Dynamic buttons). Text in the ellips are user variables, used as hyperlink. 

The user variables v_fx and v_KC  have a default value of 'Show', while the text shapes with the info are hidden with the On Enter action of the slide. A simple conditional action (similar for both) is used:

It would also be possible to have all the info boxes in one multistate object (which I use in the next two use cases).

Comparing with interactive objects

Similar to the navigation solution, if you don't like shrinking nor styling of InBuilt states this could be a solution. Again, since a Visited state is missing, that can be a drawback.

Another drawback is that you cannot use shared actions, which I would have done in this case. You need to use duplicate advanced actions.

Close button

Normally it is not possible to add an interactive object to a state in a multi-state object. You cannot create a hyperlink neither. However it is possible to have the same hyperlink available in all states, with the same triggered action. On the Close Box - slide, The info multi-state object is a shape with 6 states. Here is a screenshot:

Just FYI, the second state (QSP) looks different in the Object State panel, but that is just a  glitch. It is exactly the same on the state. To create this multistate object you need to follow carefully this workflow:

  • Create the shape (Tx_Info is the label I used) with a close hyperlink (big X), which I aligned to the bottom, centered. That will become the Normal state. You need to choose a command, but will have to edit that command later on. 
  • Go into the Object State panel and duplicate the state, the X hyperlink will be included in this second state.
  • Close the Object State panel and edit the hyperlink. It need to be 'Change state of Tx_Info to Normal'. 
  • Change the color of the X character to a color from the background, so that it will be invisible; if there is a Fill and/or a stroke, set Alpha and Stroke both to 0. The Normal state will now seem 'invisible'.
  • Return to the Object State panel.
  • Select the second state, style the X hyoerlink to a visible color. Add the necessary text and/or background fill.  Double check by previewing if the hyperlink action is functional.
  • Duplicate the second state, and edit the text/fill
  • Continue the duplication until you have all needed states.

I have tried with Hide for the hyperlink, but had lot of issues, seemed not to be functional. That is the reason why I switched to an invisible Normal state.

In the ellipses you find more hyperlinks. They change the multi-state object to the appropriate state. Here is an example for the first category 'QSP':

Comparing with interactive objects

As far as I know this is the only way to have an action propagating to other states in a multi-state object. Shared actions are not possible nor are Visited States (although with a more complicated advanced action possible).

The action triggered by the hyperlink can be rather complicated. A not so complicated example follows

Forced View

Setup of the multi-state object is quite the same as in the previous slide. In this case the change of state is triggered by real 'buttons', which seemed logical with this content. That also allowed me to use a Shared action. To track the clicks, a user variable is needed for each of the buttons. The shared action is visible in these two screenshots:

The X hyperlink, which was propagated to all states, triggers an advanced action with two decisions. The Back to Menu button is hidden with the On Enter event of the slide, and made visible when all variables have been toggled to 1. That meant that they all have been clicked:








Forced view - special use case

Intro

Another blog and example output, due to a question by a user today. 

“I have groups of slides. Each group consists of a handful of slides that has event video on each slide and nothing else. The videos autoplay. The user can enter these groups at any point and must watch each video before being redirected back to a main menu. “

After I had gotten all details, I created this example file. The assets panel in 11.5 was very useful as you can see. Only Chapter 1 has been worked out with 4 slides containing event videos. For Chapter 2 and 3 only one slide is available with a back to menu button. Try it out: you can start with any video, but then the sequence will be linear: 1-2-3-4, 2-3-4-1, 3-4-1-2 and 4-1-2-3 are all possible. You can use the Chapter 1 button on the main menu as many times as you wish. It should be foolproof. However… you have to watch the videos from start till end.

The embedded movie is at a fixed resolution. The project is published as Scalable HTML and you can also play it directly in any resolution from this link.


Setup

Variables

Four Boolean variables were created: v_one, v_two, v_three, v_four. They are meant to track each if a video has been viewed completely. Only when all variables are toggled to 1, will the learner being returned to the main menu slide. The default value is 0 and will be set by a shared action (see later).

Events and actions

Enter event of video slides 1-2-3-4

This event is used to trigger an advanced action which will check the value of the 4 variables. If they have all the value 1, the learner will be navigated back to the menu slide. Have a look at  the Preview of this action:


Exit event of video slides 1-2-3

For the first three video slides this event is used to trigger a simple action, similar to this one for the first slide:

Assign v_one with 1

Only the variable is different for the second and third slide. Since the sequence is linear, after that event the playhead will continue to the next slide. There is no pausing point on the slide, which makes it possible to use this event.

Exit event of video slide 4

The action is now more complicated, because two situations are possible:
  1. All video slides are viewed (learner started with first video)
  2. Not all video slides are viewed (learner did not start with first video)

The first situation means that the learner will be navigated to the main menu slide, the second that he still has to view video 1 and maybe more. This means we need a conditional advanced action. Here is the screenshot:

Since the exit event has also to toggle the variable v_four, I used two decisions. The first one ‘Always’ is toggling that variable. The second decision is the conditional one described above.

Success event of the Video buttons (Chapter 1 slide)

You would expect them to trigger a simple ‘Jump to Slide’ action. However, since the learner will return to the menu slide, and can restart viewing Chapter 1, there is a need to reset the variables. This event was used for that purpose as well. It is a perfect example of an action where a shared action can save a lot of time, because it will have only one parameter: the slide to jump to. All variables, and the literal ‘0’ do not have to be parameters. Here is the screenshot of a filled in action for the first video button:

Since both remaining chapters will have a similar group of video slides, this approach can be used there as well, to reuse the same variables. The advanced actions described before, can be duplicated and edited. The shared action can be used as it is without any change.