Intro

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

• 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:

Why?

Recently a Captivate posted a question in the Adobe forums.: ‘How to create a lightbox within a state of an object‘. She was upgrading an older project, where the developer used a slide for each lightbox, by using multistate objects to replace the multiple slides.  After having asked for some extra information, it turned out to be more complicated than just the creation of lightboxes.  It was about a two-step process for extra information:

1. Clicking a ‘question button’ would show the answer to the question as a popup (Click-Reveal workflow). That popup didn’t really need a way to close it, but clicking another question button should replace the content by new content. OP was correct that using a multistate object was the perfect workflow for this first step, with a Normal state which was invisible by setting Alpha (for the Fill) and Stroke both to 0. I have demonstrated this use multiple times in blogs.
   
   
2. The content needed to have a way to open a ‘lightbox’ (in the traditional sense explained before) with more information related to the question/answer already shown. 

Problem

Such an interactive object can be a button, a click box or… a hyperlink. Quite a while ago I wrote a couple of articles to demonstrate the power of hyperlinks which is ignored by many. However, for HTML5 output in the recent version (11.5.1) its use to run advance actions seems not always to be functtional, needs lot of testing. Originally when creating the sample output, I planned to use hyperlinks in most cases, but had to give up for the reason just explained. BTW all actions triggered by hyperlinks worked perfectly for SWF output. So I had to revert to buttons in most cases. I will explain the complete setup in a blog.

Example project

• Clicking a question button will show a popup which should contain the answer, and there is a (image used as) button to open the lightbox. The question buttons shows a ‘Current state’ when clicked.
  
  
• Clicking the button opens a lightbox: cover, shape with content, and a hyperlink used to close the lightbox. When the lightbox is closed, the question button will revert to a ‘Done state’. It is not a Visited state, but a custom state.

You can watch the project below (fixed resolution) or using this link (rescalable output)

Setup

Objects – timeline

See the setup, using this screenshot of the timeline panel:

From bottom to top:

• Five question buttons, which are shape buttons labeled SB_Quest1….SB_Quest5. They have a pausing point at the default 1.5secs. For those buttons I deleted the InBuilt Rollover and Down states, but added two custom states: ‘Current’ and ‘Done’. 
  

  
  .
• A group of shapes used as text container for the answers SS_Answer1…. SS_Answer5. I could have used a multistate object as well. I started using individual texts because I hoped to use a hyperlink for the lightbox switch.
  
  
• A shape used as Cover. Its position in the stack order is important: it needs to be above the answer and question objects, but under the multistate object SS_ExtraInfo. That cover is a shape, filled with dark gray, partially transparent. Beware: it is also used as text container: look for the text ‘Close Lightbox‘ which has been converted to a hyperlink triggering an advanced action.
  
  
• Multistate object SS_ExtraInfo which has a state to appear in the lightbox for each of the answers. The Normal state is empty (Alpha and Stroke shape = 0).
  

  
• Button Bt_Info (used a button from thitOt not necessary to be on top of the stack, Its position in the stack order is not important, because will be hidden when the lightbox appears.

Variable

Events and Actions

On Enter slide event: "EnterAct"

This simple non-conditional action is meant to set the slide to its original situation:

If I had used a multistate object for the Answer popups, with a Normal state that was invisible (like for the SS_ExtraInfo), I would not have needed the second command (Hide Gr_Answer). By hiding the Cover, I also hide the hyperlink since it is a text in the cover. No need to hide SS_ExtraInfo since the Normal state is invisible. Why didn’t I use a hyperlink instead of the button Bt_Info? Because the advanced action was not triggered as it does when using SWF output. Too bad.

Question buttons:  Shared Action "QuestAct"

Another non-conditional action, based on this Advanced action:

I converted it to a Shared action, with these 6 parameters:

Button Bt-Info: Advanced action "ShowLightBox"

This is an action with 6 decisions. The first decision is non-conditional, the five remaining decisions are conditional because a different state has to be shown based on the question number in the variable v_quest.  Those decisions have only one command and can easily be created with the duplicate decision button.

Hyperlink: Advanced action "CloseAct"

The hyperlink in the Cover shape triggers a 6 decision action very similar to the previous one:

More…

You can extend the described workflow to more than 5 questions. The shared action can be used, and you may have to add decisions to the two longer advanced actions.

I didn’t provide a close button on the answer popups, for learners who don’t want to see the lightbox, for whom the answer popup is sufficient. It could be done with a hyperlink or an extra button.

It would be possible to have something happen when all question buttons have been clicked, but that will require the creation of one extra variable for each button, a Boolean to be toggled from 0 to 1 if a button has been clicked.  The check for the extra happening has to be added to the CloseAct.

HTML Update

A blog post about Hyperlinks in HTML output is published recently. Please check it out:

Hyperlink tips (HTML)

Intro 

Hyperlink commands

• Continue: since the hyperlink event has no way to prevent 'Continue Playing Project' as is the case for simple actions, this is not that important
• Return to Quiz: is meant for remediation, normally to be triggered by a Next button
• Play Audio/Stop Triggered Audio: can always be done using an advanced action
• Execute Shared Action: which is really a pity :(
  
• Pause: can always be done using an advanced action
• Exit: can always be done using an advanced action
• Toggle: can always be done using an advanced action
  
• Show/Hide TOC: can always be done using an advanced action
• Show/Hide Playbar: can always be done using an advanced action
• Lock/Unlock TOC: can always be done using an advanced action
• State commands: Go to Next State/Go to Previous State cannot be done by advanced action, Go to State is possible.
  

For hyperlink events some commands have been put together in one dialog box, which is the case for the Slide command:

Example

Watch the movie: after the title slide the dropdown menu 'Go To' appears. When you click on that shape button, another shape wlll drop down. It has 6 hyperlinks, I left them underlined to emphasize their type.

When clicking on a hyperlink you'll be navigated to another slide which has a Back button to return to the Menu slide. The content slides are about the same subject as the previous blog post about popups and Close button. Of course it would be possible to have multiple slides in each 'chapter', and have only selected slides in the dropdown list.

Setup, variables and actions

Objects on Dropdown menu slide

The objects on the slide with the Dropdown menu are visible in this screenshot of its Timeline:

User variable v_start

The shape button SB_Menu (Caption 'Go To') is on top of the originally hidden Smart Shape SS_DropDown, and pauses at 2,6 secs, after all effects have been accomplished. To mimick the behavior of a dropdown the Effect 'Stretch From Top' is applied to that shape. The effect starts at time 0 and has a duration of 1 sec. The arrow shape ArrowGoTo has some explanation and the effect EaseInFromLeft is applied. The second arrow ArrowDropDown has a similar effect, starting bit later, but that shape is not visible until the button SB_Menu is clicked.

One user variable was created: v_start. It will be used to store the frame number of the first frame of the slide with the dropdown menu. I learned from experience that effects are much more consistent when you use micronavigation instead of applying the effect by an advanced action. The content of the variable will be used to send the playhead back to the first frame of the slide, to have the time-based effect being played.

Events and Actions

1. On Enter (Dropdown menu slide): standard advanced action EnterDropDown

2. Success event of the shape button SB_Menu: standard advanced action DropAct

This action will hide the arrow shape ArrowGoTo, show the shape SS_DropDown and its arrow ArrowDropdown and return the playhead to the first frame of the slide with the system variable cpGotoFrameAndResume which has 'Continue' built in. That way the effects for the dropdown menu and the arrow with explanation will appear as they are timed from the start of the slide.

3. Hyperlink events

Contrary to the situation explained in the previous blog post where the hyperlink event was used as Close button, in this case it doesn't matter that the playhead is always released when executing a command by a hyperlink because of the navigation to another slide. The command Slide was used, which opens the dialog box slide. Here the LInk is set to point to the correct content slide. In this screenshot you see the hyperlink setting for the navigation with the item 'Decor':

HTML Update

A blog post about Hyperlinks in HTML output is published recently. Please check it out:

Intro

Example movie

Watch this two-slide example.

1. The title slide has a text hyperlink 'Next' to proceed to the next slide.
   
   
2. The second slide has six shape buttons, each opening a popup (it could have been a lightbox as well, work flow is identical). In the popup information you'll find  the text 'Close X' which is a hyperlink  to close the popup.
   
   Download CloseButton.swf

States and Hyperlink

It is not possible to add interactive objects to a custom state: button, click box, shape button, Text Entry Box, all are greyed out. However it is possible to have a hyperlink within a text container, that will be active for all states of that container. This can be a welcome workaround. It is however not possible to have different actions for the hyperlinks in different states. Since the goal here was to close the popup, I created a shape as text container with 7 states as you can see in this screenshot:

The 'Normal', or default state looks invisible: there is no text in the text container with the exception of the text hyperlink 'Close X'. This was achieved by giving the text hyperlink the color of the background, the text container a Fill with Alpha=0% and no stroke. The other states have a Fill (Alpha=100%), they have information text with a visible color (also for the Text Hyperlink) and an image.

Actions

1. Next Hyperlink - Title Slide

2. Shape buttons to open popup - Second slide 'ActionProcess'

Look at the timeline of the second slide: all shape buttons (name starts with SB_) pause the slide at the same time, 15,5 secs. When triggering an action, the playhead should not be released, to allow clicking as many times as wanted, in any sequence on those shape buttons. The number of attempts is left at Infinite.

The only command to be triggered is to change the state from the default 'Normal' state to one of the custom states. The choice is yours: 

• you can use a simple action (be sure to uncheck the option 'Continue Playing the Project'
• you can use a one-line advanced action, create duplicates for each button; playhead will not be released
• you can use a one-line shared action with two parameters (text container and state).

3. "Close X" hyperlink - in text container second slide

Beware: there is NO option to prevent 'Continue Playing the Project' when you assign a command to a hyperlink. That means that you cannot use a simple action, but have to use a standard advanced in this case.It is again the action 'Change state...to Normal.' 

Another difference for hyperlink events: the command Excecute Shared Action is missing. That is too bad, because if it had been available, one shared action would have been able to achieve both showing popup (with the 6 shape buttons) and close the popup (with the Hyperlink).

Conclusion

Hyperlink makes it possible to have an action in a state for an object, although it has to be the same action for each state of the object. You learned about the differences between hyperlink events and other events to trigger an action:

• There is no way to prevent the playhead from being released if you trigger a simple action; use a standard advanced action.
• You cannot trigger a shared action with a hyperlink.
• Some commands have a different look: example is the Slide command (see screenhot in this article).