Sliding Menu

Intro 

This post is meant as an answer to a thread posted in the eLearning community. "I want to create a menu that slides on and off the screen, like a door that moves to the left and right, when the user clicks a button." I invite you to read the comment by Greg Stager who is posting some links to blogs he wrote where JS is used to create slider solutions. As you know, I often try to use only Captivate features to solve similar use cases instead of JS. This is a new example. You'll find a step-by-step workflow to recreate the example I show. The shape (which I use as 'box') is not having a menu, I invite you to (re-)read my post about Hyperlinks for the creation of a Dropdown menu. They are a great way to avoid creating multiple interactive objects in the 'box'. 

If you don't like creating advanced actions, I have an offer at the end of the post to make your life easier...

Example

Watch this short file, only three slides after the 3 seconds long Title slide. They have two buttons (from the Assets panel in 11.5): a Next button on top, and the Slide toggle button below it. You can use the toggle button as many times as you wish on a slide. To restart, refresh the browser.


Step-by-step workflow

Step 0: Next button on master slide

I used only one master slide in this project, which made it easy to put the Next button on that master slide. I kept the default option 'Pause project until user clicks' (Actions tab). That will result in having each slide paused at its last frame.

Step 1: Sliding assets

Two assets have to be created and put on the first slide where you want to use the sliding box:

  • Sliding Box: I used a rectangular shape, labeled SS_slider. You can add content to it, but make sure that you check the Options tab, because you will need both the size and the exact x/y coordinates. Here a screenshot of my setup, since it was in a non-responsive project you see both size and location in px. If it was a responsive project, it would have been in %. Put the box in the wanted position after sliding in.

  • Toggle button (SB_Slider): will be used both for slide in and out. You need to create an extra custom state for this button, I labeled it Out. Remember that Rollover nor Down state can change when you switch from the Normal to the Out state, hence make those states neutral (I did not add text to them).

Time the Sliding Box and the Toggle button for the rest of the project, with the option 'Always on top'. The Timeline of that slide will look like this:


Step 2: Custom Out Effect

Create a time-based effect to get the sliding box out of the stage. Do not use an Exit effect, but a simple motion path. I added an AlphaFromTo effect as well (100% to 0%), and reduced the duration of both effects to 1 second. 

Workflow to save this effect as a custom effect is described in detail in this post. Do use that method after you have done step 3:

Step 3: Create Guides

Show the Rulers (View menu) and create two vertical guides, through the start and end point of the motion path. See this screenshot:

They will be needed to create the In Effect, to be exactly the opposite of the Out effect. Now you can save the custom effect, and take it out from the slider box.

If you didn't use a horizontal motion path, you'll need also horizontal guides. If you need more information about using Guides and Rulers, look at 'Guides Rule'.

Step 4: Move slider box in Out position

Use the guide in the scratch area to move the slider box to the correct position. I mostly use shortcut key (SHIFT or CTRL combined with left arrow) to keep that movement horizontal. For a non-horizontal movement, you use vertical and horizontal guide. You'll see a screenshot of the new position in step 5

Step 5: Custom In Effect

Create this effect using the two guides (or four if you needed also horizontal guides). In the screenshot you see this effect, where I combined a motion path effect with an AlphaFromTo effect (0 to 100%). Save the effect, same as for the Out custom effect. 

Step 6: Hide Slider box

Use the On Enter action of the slide to hide the Slider box. 


Pause

Now comes the hard work: you could skip steps 7-9 and scroll immediately to the bottom for an offer. 

Step 7: Variable v_slider

Create a user variable, which I named v_slider. It will be used to track the status of the Slider box: in or out? Similar logic you'll be able to see for all the Toggle buttons in this older post.

Step 8: Advanced Action ResetSlide

Create this advanced action (conditional):

The items marked by in this action will be parameters if you convert it to a shared action. Beware: the name of the custom effect cannot be a parameter! I used TestIn and TestOut as names, you can replace them by your names if they are different.

Step 9: Advanced Action ToggleSlider

Create this conditional action. Like with the previous actin, I indicated the 4 parameters if converted to a shared action.

 

Step 10: Attach the actions to events

The action ResetSlide has to be triggered by the Success event of the Next button, whereas ToggleSlider has to be linked to the Success event of the toggle button.

Offer

You can obtain the described actions as shared actions for free, including a short explanation of how to use them. You could skip steps 7 to 9, but still have to do the other steps.

How? Visit my website (lilybiri.com), fill in the contact form with your request, and a small comment on my blogs or website. You'll get everything by mail. I probably will post more offers in the near future, if you don't want to hear about them, you can indicate that as well (I am European, respect the GDPR).

Scrolling Text Interaction to replace Text Entry Box

Intro

Although I have already posted about one Submit button for multiple TEB’s, recently users tried to apply that blog to non-validated TEB’s, which was not the goal of that original post. Moreover giving another attempt to a TEB where the Submit has been done has become less easy with HTML5 output. SWF output had so many advantages (rewinding the playhead a couple of frames was simple), but that is the past.

Instead of writing long answers to the most recent thread, to explain why choosing Scrolling Text Interactions was a better choice for non-validated fields, I created a short example file. The workflow explanation will be in this article..

This example was created with version 11.5.0.476, the most recent version of Captivate. I uses some image and button assets from the new Assets panel. However, nothing has changed for interactions in this major update to version 11. I am confident that the solution will work for every version since 8, meant for HTML output.

Example

File has two slides. Only the first slide is relevant for the workflow, the second is meant to test the Continue button (with action "Go to Next Slide").

The first slide has three fields to fill.  If any field remains empty, a textual warning will appear and you can retry. The Continue button appears when all fields have an entry. Project has no poster image, just the default play button. It is not rescalable. Here is the link


Setup

Variables

For three fields you need 3+1=4 user variables, none of them needs a default value in its definition:
  • v_one, v_two and v_three will be used witl be associated with the Interactions
  • v_null is needed for the advanced conditional action to test if the field is blank; more info in ‘Where is Null’

Scrolling Text Interactions

Next to each Text container (used a shape) an instance of the Scrolling Text interaction. Here is a screenshot of the setup of the first of them. Important is to link one of the variables and to uncheck the option ‘Read only’:

You see in the dialog box that I edited the font (used an Adobe font), the font size and attribute.  Just a reminder: it is not sufficient to type in a variable name to define it, you need to define it in the Variables dialog box. 

Although I resized the interactions to the same height as the Text containers with the questions, the height is decreased in the output file. Be careful with copy/paste to duplicate an interaction, prefer the Duplicate functionality within Captivate (CTRL-D).

Advanced Action

This action is triggered by the Submit button. I used the On Enter event of the slide to hide the warning that will pop up if at least one field is empty. This is the Preview dialog box. The operator 'is equal to' is replaced by the JS equivalent needed '=='. The logical operator OR is replaced also by its JS equivalent |  As you perhaps know, an advanced action will be converted to JavaScript on Runtime.

The replacement of the grayscale image by the color image, disappearing items on the slide: all is achieved using  the timeline. For those interested, here is a screenshot of that timeline, I didn't group any items, but their label clearly shows what they are.

Conclusion

As usual I appreciate any comment, whether to add an alternative or to ask questions. You are welcome on my website as well.

4 Tips for Interactive Video

Intro

Interactive video is one of the new features in CP2019 (version 11). Over 10 years ago I did choose for Captivate because it had a lot of possibilities for interactivity in any cptx-project, Some users do think that 'interactive video' is the way to go, but to me it is a nice addition especially to make existing passive video a little bit more engaging. To avoid confusion, because already did see a lot of theoretical posts here that talk about normal interactive projects, not about interactive videos, I will continue to point at published cptx- projects as ‘interactive movies’ to show the difference with less interactive 'interactive video'. A standalone interactive video can be nice. However I honestly believe that the combination of interactive video slides with static interactive  slides in a cptx project is more powerful. Later on I will try to show with use cases what I mean. These tips are for 'interactive video' only. 

The first version of interactive video offers the possibility to insert:

  • Bookmarks: which out of the box can be used with the new command ‘Jump to bookmark’ to realize some branching often based on answer to  knowledge check slides.

  • Overlay content  slides: which appear at certain frames of the video on top of the video (can take up part of the screen, with  in a dimmed version of the video in the background). Most Captivate features can be used on those content slides, including advanced/shared actions.

  • Overlay Knowledge Check slides: which are based on the quizzing master slides.  Their appearance is the same as for the content overlay slides. Scored quiz slides are not possible.Contrary to the overlay Quiz slides in a 360 slide, these Knowledge Check slide do honor the used theme, their style can be full controlled. However, you cannot use scored Quiz slides in overlay (which is possible in a 360 slide). 

I will post lin the future a full description of the timeline of interactive video slides, and line up the differences with a normal video. An interactive video is always a slide (synchronized) video, never an event video. Consequence: interactive video is not possible in a fluid box which can only support event video, nor in the state of a multistate object.

In this blog post, I’ll offer some tips for using and enhancing the present functionality of interactive video. I posted an interactive video, as illustration in this article . Explanation of the tips is based on that example, I recommend to watch it if you didn't had time yet.

Tips

Tip 1: Prepare Master Slides for Overlay slides

Interactive video supports two types of Overlay slides; Content overlay slides and Knowledge Check  overlay slides. Both types can have the same size as the project size, but I prefer to have a smaller size for the overlay slides, so that the video itself remains visible in the background (dimmed). That can be done by using a duplicate of the Blank slide, on which you insert a shape with a smaller size than the slide, as background for your content or questions. As with normal content master slides, you can create as many as you need.  Have a look at the 3 master slides used for the example video mentioned before:

Next to the Blank master slide you see two content master slides :

  • OverlayTip: has a bubble shape, semi-transparent as background; the white space surrounding the shape will be ignored in the overlay and show the dimmed video.

  • OverlayWarn: has a different shape, less transparent and also white surrounding space.

The Quiz master slide which I used is a duplicate of the MCQ... master slide. It is necessary to use such a duplicate because you need all the embedded objects with their functionality. I used a rectangular shape as background, not transparent.
Beware: 

  1. use a non-responsive theme, because the Quizzing master slides in a Fluid Boxes theme have a setup with fluid boxes. 

  2. when creating a slides based on this master slide, you need to choose Knowledge Check slides, because normal Quiz slides cannot be used as Overlay slides for an interactive video.

After insertion of 5 overlay content slides and one KC slide, the Filmstrip looks like this (watch the hierarchy symbolized by the smaller size of the overlay slides, and by the icons at the bottom). :

Tip 2:  No fixed duration but a Close button

To me Interactivity means to offer as much control as possible to the learner. Some need more time, some want to proceed quicker. That is why I don’t like the fixed duration for Overlay content slides - which is the default setting.  No problem for the Knowledge Check slides,  the Submit button (with a pausing point at 1,5secs) takes care of keeping the slide available as long as wanted. Same would be the case for a slide with a D&D interaction or when using an interactive learning interaction.

For the static content slides however you need to pause the slide. To achieve that with minimum effort,  I used a shape button on the two master slides OverlayTip and OverlayWarn.:Look at this screenshot, where the Close button is at the bottom left:

For shape buttons on a master slide, the pausing point visible at the end of the Timeline is just an indicator. It will not appear in the Timing Properties because smart master objects have no timing. However, in the default setup, the shape button will pause at the end of each slide, hence the indicator. Look under the Actions tab for the shape button on the master slide. 

The action triggered by the Success event of that button is very simple: ‘Continue‘, to release the paused playhead. Since the pausing point is at the end of each overlay content slide, it will close immediately and the video continues.

Tip 3: Information button

That button is available for the full duration of the project, from the second (video) slide on. . I described the workflow in an older post, which dates from  CP2017: Interactive Video Buttons but is still valid for the present version. It is a simple click/reveal button, which pauses the video and has a close button. That close button takes care of hiding the information and releasing the video playhead.

Tip 4: Navigation Menu

With the Menu button the learner has a TOC to bookmarks available, to review only parts of the video. I described my workflow in this post.

The menu button has a custom state, which is used to close the menu (similar to the Pause/play button of the example video). It triggers this action:

The menu items are hyperlinks triggering advanced actions, which jump to the wanted bookmark and close the menu. As mentioned in the past, for some weird reason the option 'Execute Shared Action' is not available for hyperlinks, or I would have used a Shared action instead of duplicate Advanced actions.

About State Commands and a Progress Bar

Intro

Recently a user posted a question about using the 'Go to Next State' command used in Advanced actions. You can read our discussions in this thread.

Time to write out some tips for multistate objects. This blog wants to give an answer to the user, and has its focus only on that solution. I plan to publish more about the basics of states and their commands later on.  To me personally the introduction of multistate objects is in the list of my favourite features in Captivate, closely following Shared/Advanced actions and Shape buttons.

Example movie

Watch this published rescalable interactive movie. The second slide has three shape buttons, navigating to three slides where you can read and confirm reading, or click hotspots, or answer questions. Each of your actions will result in changes to the progress bar on that second slide. Beware: whenever you have clicked an interactive object it will be disabled!


Terminology Multistate objects

InBuilt States and Custom States

You can add custom states to any object, static or interactive.  In those states you can have many object types: graphics, video, audio... but no interactive objects nor hyperlinks.  The Normal state is the default state, which will always appear unless you have changed to a custom state using a command (in a simple or an advanced/shared action). You have a lot of freedom for custom states: contrary to the InBuilt states, nothing is locked tto the default normal state. You can have objects in a custom state that are in a totally different position from the Normal state. Custom states are always controlled by commands, not by a situation. If you want a custom state to remain for future visits to the slide where the multistate object is sitting, you need to check the option 'Retain state on slide revisit'.

Inbuilt States exist for these object types:

  • All types of buttons Shape buttons, Image buttons, Transparent buttons and Text buttons.  You have four of those styles: Normal, Rollover, Down and Visited. The first three are part of the button style.  You don’t have the same freedom for location of those states, they are locked to the Normal state (look for the Lock indicator).
  • Drag sources and Drop targets on a D&D slide. For more information see: InBuilt states for D&D

I will only talk about shape buttons here. Contrary to custom states Inbuilt states appear automatically in a situation: when not hovering over button (Normal), when hovering over button (Rollover), when pressing button (Down) and when after clicking/tapping (Visited, if it has been created). You can only control Normal and Visited by a commandif necessary, not the Rollover/Down states.. 

State commands

These commands are available both in a simple action (dropdown list in Actions) and in the Advanced Actions dialog box, to be used in advanced or shared actions:

  • Change State of …. to 
  • Go to Previous State  …..
  • Go to Next State ….

When you use these commands as a simple action, from the dropdown list inthe Actions tab, they can only be applied to multistate objects on the same slide as the event triggering the action (Slide event, interactive button events) The Hypelink even thas only the first command (Change State). 

If you insert one of the commands in an advanced/shared action they seem to be able to apply also to multistate objects on other slides. That is indeed the case for the ‘Change State’ command, but is NOT functional for the commands Go to Next/Previous States. I have logged this as a bug, because you are able to choose multistate objects on other slides, however without any effect. That was the reason of the question in the forums, described in the Intro. 

You could see in the Example movie that I have a workaround. How?

Solution with variable and While loop

YOu will need one user variable v_counter,  to track the number of clicks while being on other slides than slide 2 with the Progress indicator SS_Progress (a multistate object). This progress indicator starts with a Normal state which is a shape with Alpa and Stroke = 0.

That variable starts with a default value = 0. The clicks on the OK buttons in slide 3, on the hotspots in slide 4 and on the correct answers in slide 5 do increment the variable, besides other commands. 

When returning to slide 2 (which has the progress indicator) using the shape button ‘Back to….’ (is on the used content master slide) an advanced action On Enter for that slide is launched, using the While loop:

Example: if the user has performed 3 actions on any slide, v_counter would be 3. The while loop will then be done 3 times, which means the 4th state of the progress indicator will appear. At the same time, the variable will be set back to 0 at the end of the loop. The learner can continue to visit another slide, and the variable is ready to track again.

This is just an example, many variations are possible. Maybe you want to allow visits and actions to consecutive slides before returning to the main slide, this can easily be achieved. Or have feedback appearing on the main slide after all slides have been visited, based on the obtained progress.. 

More?

I didn’t explain all actions in this post. The slide with the hotspots is based on a recent article about Hotspots in a 2D image.

Maybe you are wondering if I used the Visited state or a custom state for the OK buttons (slide 3) or the hotspots? What the quickest workflow is to create the states for the Progress bar? Did I use shared actions or advanced actions, and why did I choose that way? Why did I disable the buttons? If you are interested, I can explain… on demand. 

Available Events in Adobe Captivate

Intro

Over 6 years ago I published a blog post explaining the importance of Events in the application. I also offered for free a table describing all the possible events. Meanwhile new features have been added, the User interface has changes. It is time to update that old post and table. You will be able to download the table at the end. It is a protected document, you can print it at a low resolution, but no permission for editing. You can find workarounds, but please I beg you to show some respect for my work.

When training/helping users to start with advanced or shared actions, I often detect that newbies are not aware of the process needed to trigger an (advanced/shared) action: each action, whether a simple, shared  or advanced has to be linked to an 'Event', and that is the subject of this article. 

Events - out of the box

Lot of events to trigger an action are linked with interactivity, requiring  the user to act. That  is the case for Success/Last Attempt  events for (Shape) Buttons, Click Boxes, Text Entry boxes, interactive Learning interactions, Drag&Drop but also for Question/Knowledge Check slides. 

Less known are the actions that can be triggered when a Quiz is completed (Passed/Failed).

In that older blog post I mentioned the  Rollover slidelet which had  two events: on Rollover, and on Click. Since that object is no longer supported for HTML5 output, I took it out of the table. 

Object actions can be triggered by each drag event in a Drag&Drop slide and offer a lot of possibilities. Have a look at all the posts I published about Drag&Drop

Ignored by most users are the Hyperlink events. Such an event is not limited to 'hyperlink', but can trigger all sorts of actions, including Advanced actions. Find a example here.

Events that are not linked with interactivity are the slide events: when entering or when exiting a slide, you can have a simple, advanced or shared action to be executed. Have a look at the table to see possible limitations.

Often I get the question if an action can be triggered by time or by a frame. Not possible out of the box, but with micro-navigation, eventually the Delay Next actions command and/or the Timer/Hourglass interaction this limitation can be overridden. 

Overlay slides in Interactive Video, both the content and KC slides have similare events to those in a normal project. However the events for the hotspots in a VR project or 360 image/video are more limited as are the overlay Quiz slides in a VR project.

Widget to extend events

InfoSemantics developed a HTML5 widget that is one of my favourites: the CpExtra Widget. Adding events to objects is only one of its multiple features. It is not free but if you are plunging really into advanced/shared  actions, please try it out because it can add as many events as you want to any object. A trial version is available.

InfoSemantics used to have a SWF widget (EventHandler), worked great, but with the EOL of Flash player for all browsers, not so useful anymore.

List

You can download the list from this link

First column (Event) identifies the event, second column (Assign action) shows in which Properties panel (PI) you can indicate the action to be triggered, third column is A Description. When necessary you’ll find some comment/use cases in the last column, which also mentions the possible limitations for the event. 

There are two  tables. First table shows events able to  trigger only one simple, shared or advanced action/ The second smaller table summarizes the events which can trigger one out of two possible actions based on a condition: validated TEB, question slides, scored Drag&Drop slides  and Quiz.

I would appreciate if you left some comment in case you find this list useful. If you find this list useful, I could offer some other tables as well.

Answer key for Survey

Intro

Once in a while a question like in this thread pops up:

“….students will need to answer short answer questions.  They will not be right or wrong, they will be their thoughts.  Is there a way to have all their answers compile into a final screen at the end?”

It seems logical to use short answer quiz slides, in Survey mode, for this use case. However I prefer to use one of the Learning Interactions, ‘Scolling Text’ for reasons I want to explain in this article, by describing both workflows with their specificities. It is up to you to decide which you’ll use. In both workflows variables will be important, hope you are familiar with them.

Short Answer quiz slides, Survey mode

Setup quiz slides

No right/wrong answer means that scoring has no sense, change the stqtus of the quiz slide to ‘Survey’. Nevertheless a score slide will be inserted but you can hide it easily.

Answers to quiz slides are stored in a reusable variable, cpQuizInfoAnswerChoice.After a short answer question the variable will contain the text typed in by the learner in the short answer field. Reusable means that the value will change after each short answer slide. Since we need to store each answer safely (for reusing on the slide at the end), you will need:

  • to create a user variable for each short answer question; I will label them v_First, v_Second, v_Third for the example you’ll see in the demo movie;
  • the default answer area is pretty small (one line), if you expect longer answers, make sure to increase the height of the answer area. It is not possible to edit the used master slide because it applies to multiple types of quiz slides;
  • the content of the system variable cpQuizInfoAnswerChoice is updated when the Submit button is clicked; it has to be transferred to the appropriate user variable, using the After Survey event; for that purpose I created a shared action with two commands:
    Assign v_First with cpQuizInfoAnswerChoice
    Go to Next Slide
    only parameter is the user variable (here v_First)
  • apply this shared action to each of the question slides, with the appropriate parameter.

Setup Answer Review slide

In the example movie I created one text container (shape or caption) and inserted the three user variables in it. Be careful to increase the number of characters to be shown when inserting the variables. You’ll also have to leave enough space for each variable. Of course you could create multiple text containers and/or have the answers distributed over multiple slides.

Using Scrolling Text interactions

A limitation of Short Answer quiz slide is that you can have only one answer per slide. When using a Scrolling Text interaction you can have several question on a slide as you can see in the example movie.

Setup interaction

Setup of the first answer box can be seen in this screenshot:

Two important items are indicated  in the screenshot:

  1. You have to type in the name of the variable to be used. There is no way to use a dropdown list. Beware: you have to create the variable, it is not created uatomatically.
  2. To allow text to be typed in by the user, the checkbox ‘ReadOnly’ has to be unchecked. By default it is checked.

It would have been possible to enter the question in the interaction, instead of having it in a separate text container. I preferred not to do it. Reason: if the user adds the answer, instead of overwriting the question, the variable will contain html tags, like <br>.

The Submit button, which you’ll see on the slide, triggers  the (default) action ‘Go to Next Slide’.

Since I reused the three user variables in this part of the example, I have created an advanced action triggered on Enter to empty the user variables with the technique described in this article.:

Setup Answer Review slide

Very easy: duplicate the slide with the interactions, and take out the On Enter action to reset the variables. The interactions are now populated with the given answers. Moreover the learner can still edit those answers, because of the option ‘ReadOnly’ being unchecked. If you don’t want it, check the option ‘ReadOnly’ on this duplicate slide.

It is also possible to use a similar slide for the first workflow with short answer quiz slides. That will be useful if you want indeed to allow editing the answers.

Example movie


Force First View (micro-navigation)

Intro

This question appears often: how can I force the user to view the slide completely before the Next button appears; but when revisiting the slide the Next button should appear immediately. From a pedagogical point of view, I don't think this will improve the efficiency of the learning, but that is off topic. 

Watch this movie: forcing view is used on the slide with the animated dices. The workflows for the audio slides will be explained in a future blog post.



I will explain my analysis and how to create the needed variables and advanced action.

Analysis

Look at the timeline of the animated dices slide from the movie.

This particular slide is just an example. You see that the Next button (a shape button) appears after the last animation has finished, the learner is forced to watch everything that happens on this slide before the Next button becomes available and learner can proceed. We don't want to put him/her throught the same ordeal when revisiting the slide. Here are three possible workflows:

  1. Create two Next buttons: the one at the end (visible at first visit) and another hidden button, with a timeline that starts from the start of the slide. That second button has to be made visible on second and later visits, whereas the first button will be hidden. Advantage: learner can watch the animations if he wants to, but also skip them by clicking the Next button.
    Problem: this will not be possible in responsive projects with Fluid boxes if you want the two buttons in exactly the same location. Even though they are not timed to appear at the same time, a normal fluid box doesn't allow this.

  2. One Next button, timed from the start of the slide, to be shown/hidden. Use the On Enter event to check tf it is a first visit. If that is the case, hide the Next button, use the command 'Delay Next Actions by....' and enter the time that you want to keep the Next button invisible, then Show the Next button. This looks a good workflow but you have to avoid to offer the possibility to the learner to pause the slide. The Delay command takes not into account any pausing. If  you cannot figure out how to script this solution, send me a note.

  3. Use what you learned about Micro-navigation:  except for the first slide visit, jump directly to the start frame of the Next button's timeline. That means that everything will be in place, animations are finished in this case. Check to have all objects timed for the rest of the slide (CTRL-E).  Since there is no stacking in this workflow, this workflow is also functional for responsive projects developed with Fluid Boxes. Focus of this article  is on this last workflow. Check the Timeline screenshot: the jump should be equivalent with 10secs , start of the Next Button timeline.

All workflows need to track if the learner visits the slide for the first time or not. That can be done by a user variable. We could use a Boolean, or a variable that is incremented with each visit. It is the increment approach that will be used here.

Advanced Action + Variables

The variable that will track the visits got the name v_visit, and a default value of 0. It will be incremented by 1 on each visit. Eventually you can show the number of visits by inserting that variable in a text container:

We have to jump 10secs ahead, which has to be converted to frames.You can use the system variable cpInfoFPS. We'll use another variable v_skip to store the number of frames (that variable could be reused on several slides):

v_skip = cpInfoFPS * 10

The advanced action will have two decisions, as you can see in this Preview:

In the first decision 'Always' which is not conditional, the number of frames is calculated and the tracking variable v_visit is incremented. The second decision 'JumpFrames' is conditional: if it is not the first visit, the playhead will jump as many frames ahead as calculated in v_skip. Since this action is triggered On Enter of the slide, the system variable cpInfoCurrentFrame corresponds with the first frame of the slide.

Afterthoughts

How will you manage if you have a lot of slides that need to get this 'Forced view' action?  What can be reused? Will you duplicate and edit the actions? What has to be edited? Try to find an answer to those questions. Look out for my reflections in two future posts: next one will show that a similar advanced action can be used for another use case, and in a third post I'll explain why this perfect to be converted to a Shared action, how to convert the present advanced to a Shared action to make it as flexible as possible.




Micro-navigation (introduction)

Intro

Recently I presented two sessions about the Timeline at the Adobe eLearning Conference in DC (25th of April 2018). Maybe you did read a previous post, where I offered some easy Timeline Tweaks, taken from the first presentation 'Demystifying Captivate's Timeline' which was aimed at clarifying basic features of the timeline, including the different ways of pausing the timeline. The second presentation 'Mastering Captivate's Timeline' plunged deeper into exploring advanced workflows, including use of variables, advanced/shared actions and.... micro-navigation. I created that term in this (old) article. The word has been adopted by many Captivate users. Time to upgrade this article to integrate the changes within newer versions (system variable names) and the switch from SWF to HTML output. If you have a look at that article, please use a Flash Player enabled browser to watch the embedded interactive movie (SWF).  The present post can be considered as an introduction to 'micro-navigation'. We will start with a comparison between navigation between Slides (macro-navigation) and navigation between Frames.

Navigation

Between Slides

You, Captivate user,  are aware of slides and master slides. Slides appear in the Filmstrip and each slide is based on a master slide Master slides have a dedicated panel, which looks very similar to the Filmstrip. In the Newbie UI when activating the Master Slide panel it will replace the Filmstrip in the left docking station. The Timeline panel can be used both for slides and master slides. Timing (horizontal scale) itself has no real meaning for master slides,  panel is used to change the stack order (or z-order) of objects. If you insert a shape button having a pausing point on a master slide,  pause will be visible at the end of the timeline. 
For sure you have used navigation commands for slides. In the dropdown list of the Actions tab for any event (slide event, interactive object event) or hyperlink navigation commands are available. They allow you to override the default navigation. 'Default navigation' means when the playhead reaches the end of a slide it will automatically move to the next slide.
The slide navigation commands are:
  • Go to the next slide

  • Go to the previous slide

  • Jump to slide ...

  • Go to last slide visited

Maybe you are not aware of the availability of dedicated Shape buttons in the Shape thumbnail dialog box, that have an advanced action to go to the Last slide or the First slide of a project?
Also less known are the system variables from the category 'Movie Control'  related to slide navigation. They be used in actions:
  • cpCmndGotoSlide  can be used to replace the simple command 'Jump to Slide'; beware: index starts with 0, whereas the index of cpInfoCurrentSlide starts with 1 (exceptional to make it possible to use in a progress indicator). If you want to restart a slide without re-entering the slide, you can use "Expression cpCmndGotoSlide = cpInfoCurrentSlide - 1"  

  • cpCmndNextSlide  is a Boolean variable with a default value of 0. With 'Assign cpCmndNextSlide with 1" has the same result as Go to the next slide     
  • cpCmndPrevious is a Boolean variable with a default value of 0. With 'Assign cpCmndPrevious with 1" has the same result as Go to the previous slide

Between Frames

A published cptx-file (to HTML or SWF) is an interactive movie. Each movie '(and animation' plays at a certain speed, the 'professional' name for that speed is 'Frames per Second' rate, or FPS. The quality of a movie depends on the resolution but also on that FPS number. The default FPS for a published cptx-file is 30FPS. You can see this rate in the Project Info panel.
 

It is possible to change FPS rate in Preferences, Project Publish settings.

 
With the default rate (30), each second on the timeline has 30 frames, the smallest unit on the timeline  (0,1sec) 3 frames.  I use the word micro-navigation for navigation between frames. Contrary to the navigation to slides, there are no commands available for micro-navigation. It is only possible using advanced or shared actions which allow you to manipulate the system variables available for frames. The relevant frame system variables are:
    
From the category 'Movie Information'
  • cpInfoCurrentFrame: your best friend when exploring Captivate's timeline, debugging projects with advanced actions, micro-navigation etc. You'll find that variable inserted in a text container quite often in my tutorials. You can watch an example in this interactive movie   
              
  • cpInfoFPS: returns the FPS rate, by default set to 30 as explained above. This variable can be used in calculations (with Expression) to convert from seconds to frames.

  • cpInfoFrameCount: similar to cpInfoSlideCount (total number of slides in project) it returns the total number of frames in the project. It can be used in combination with the previous variales to calculate to the total duration of the project (as shown in the TOC).
    From the category 'Movie Control'
  • cpCmndGotoFrame can be used to jump to a frame using its frame number (similar to cpCmndGotoSlide); playhead will not be released, project remains paused.
  • cpCmndGotoFrameAndResume can be used to jump to a frame using its frame number and to release the playhead at the same time, project will continue.

Testing? 

It is just a proposal: test out what you learned by creating a one-slide project, similar to the one visible at the start of this post and as thumbnail.  Design is up to you, but this is required for the 'exercise':

  1. Replace 'No action' for the On Enter event of the slide by 'Pause'; the slide shouldn't start playing automatically.
  2. Insert the system variable cpInfoCurrentFrame in a text container (example has it bottom right); that will allow you to track the location of the playhead. When starting the slide it will pause immediately, it will show 1 (although the system variable starts with 0, there is a small delay).
  3. You need two buttons: one for navigation forward, and one for navigation backwards. I used two shape buttons from the category Buttons, but replaced the action (see below). In the example they are at bottom center.
  4. A number of objects staggered on the timeline. In the example I have 7 shapes aligned in a row. They appear 1 second later than the previous one. All objects are timed for the Rest of the Slide. Result will be that the slide itself will have a duration that is longer (8secs in my case). To move an object on the timeline one second to the right: select the timeline of that object and use shortcut key CTRL-right (see Colors and Keys for Timeline). Here is a screenshot of the Timeline in my example:

    You see a small gap (0,1 sec) before the first object. Reason is the delay I mentioned before: playhead is stopped at frame 1, I don' want that shape to appear immediately. Because this is a one slide project, I didn't need to pause the slide at all, not even at the end. Both buttons have no pausing point as you can see in the Timeline.

Three events are used on this slide for actions:

  1. I already mentioned the On Enter event of the slide, which is set to 'Pause'.
  2. The button SB_Next triggers a one-line advanced action that should look like this:
  3. The button SB_Back triggers a one-line advanced action that should look like this:

Test now, either after publishing and uploading to a webserver, or with Preview HTML in Browser! 
Everything is working as exptected? Great, you are ready for more advanced workflows with micronavigation. Watch out for the next article about micro-navigation: a shared action that can be used in different situations: forcing full view of a slide on first visit, but not on later visits is one of the use cases.


Where is Null in CP2017?

Intro

One of my most visited blog posts published 7 years ago (Captivate 5, 5.5)  is Where is Null?

Beware: the embedded movie is a SWF, you need a browser with enabled Flash Player to watch that movie. Everything worked fine for SWF output also in later versions. However it is now partially broken for HTML output in CP9 and CP2017. Several users contacted me to ask for a solution, hence the reason for this new post.

Use Case

The use case can be split up in two phases:

  1. Checking the entry in the Text Entry Boxes): user has to enter something, but it is not to be validated, cannot be empty. Because the way Captivate is treating the value of variables, you need to create an empty variable, which I use to label 'v_null'. If the TEB field(s) is (are) empty, a warning should appear for the user.
    That part described in the old blog post is still valid!  For that reason I will restrict the explanation in this post to one TEB on the slide.
  2. Reactivating the Text Entry Boxes) to allow a new attempt for the learner. Once the Submit button is clicked the TEB is deactivated by default. It is this second part that is no longer functional in recent versions for HTML output.  Focus will be on this second part.

Example Movie

You can watch the example movie by clicking this link

CheckTEB

Workarounds for Reactivating TEB

I propose two workarounds: the first workaround uses the dummy slide as described for another use case in a recent post as Tip 2 (Reset Slide). Since you will re-enter the slide, you can use the On Enter event to restore the initial settings. The second workaround uses micronavigation, which was also used in the original setup. But in this case micronavigation will be not be used to move the playhead before the pausing point of the TEB, but to re-enter the slide.

Solution 1: Using Dummy slide

In the movie this solution is on slide 3, the dummy slide (duration 0,1sec) is slide 2. You see the slide numbers at the bottom in the movie. That is the biggest drawback of this solution, you will have extra slide(s). Three events are used on slide 3:

  • On Enter event triggers the advanced action EnterEmpty which resets the situation when re-entering the slide: clears the TEB associated variable v_MyName, hides a Group Gr_Retry (message + button) which will be shown when the TEB is empty and hides another group Gr_OK (message + Next button) which will be made visible when the TEB has an entry.

  • Success event of the TEB triggers the shared action Check_TEB which is also used in the second workflow. It has 3 parameters: the variable associated with the TEB, what (group or object) has to be shown when the TEB is empty, and what (group or object) has to be shown when the TEB variable has a value. In this case the two last parameters are groups: Gr_Retry and Gr_OK.
  • Success event of the Retry button has the simple action 'Go to Previous Slide'.

Solution 2: Using micronavigation

You see this solution on slide 4. This solution needs one more user variable v_start to store the first frame number of the slide, using the On Enter event of the slide. The Retry button will use this number in combination with the system variable cpCmndGotoFrameAndResume to navigate the playhead to one of the last frames in the previous slide. This will avoid the creation of extra slides as with the first solution But the workflow is a little bit more complicated.  The used events and actions are now:

  • On Enter event triggers the advanced action EnterEmptyBis which resets the situation when re-entering the slide: clears the TEB associated variable v_myName, hides a Group Gr_RetryBis (message + button) which will be shown when the TEB is empty and hides a message  Tx_Welcome_20 (kept the generic name) which will be made visible when the TEB has an entry. It also defines the value of v_start with the current frame number, which will be the first frame of the slide. 

  • Success event of the TEB triggers the shared action Check_TEB  used in the first workflow. It has 3 parameters: the variable associated with the TEB, what (group or object) has to be shown when the TEB is empty, and what (group or object) has to be shown when the TEB variable has a value. In this case third parameter is not a group but the message Tx_Welcome_20.

  • Success event of the Retry button triggers an advanced action RetryAct with two commands: clears the variable v_myName, and calculates the frame number that is 2 frames less than the start frame of the slide. I prefer 2 instead of 1 frame because there could be a small delay which makes v_start equal to the second frame number of the slide.

Roundup

Drawback of both proposed workarounds, compared with the original solution (broken now) is possible flickering when the slide is re-entered. I have tried a lot of ideas to avoid that flickering which is an annoying issue since many versions (if my memory is correct since version 6): transitions (not slide transition which is unsupported for HTML output), Delay command, delay on timeline etc.. 

Drawback of the first workaround is that the total number of slides (cpInfoSlideCount) and the current slide number (cpInfoCurrentSlide) cannot be used directly to indicate slide progress due to the inserted dummy slides.

For the second workaround: if you want to apply this to multiple slides, it is possible to reuse the variable v_start which stores the first frame of each slide. If you use the shared action, the variable v_null is not defined as parameter. That means it will be automatically created when import or drag this action to the Library of a new project. As you probably know I am a big fan of shared actions. Maybe I will post some of my tricks to save time with shared actions. in a future post.





Drag&Drop Actions

Intro

In the webinar which I presented on 2018/3/15 about Shared Actions, I showed several workflows with shared actions. If you want to have a look at the presentation used during the webinar, look at my previous blog post. You'll find a link to the published interactive movie

One of those examples, was a Drag&Drop slide where both advanced and shared actions were used as Object Actions. It can help you with the tough task to choose between the two types of actions. A similar example appears in the presentation, where only a shared actions was used. It had 7 drag sources and two drop targets:

Example movie

You can watch this movie to understand the goal of the D&D slide. It has 6 drag sources and only one drop target. You will be asked to drag only the correct new features in CP2017 to the drop target. Only when the answer is correct will you see the Next button. There is a Reset button for the D&D, which is not the default reset (because of the states used on the drop target) but uses an approach which I have explained already multiple times.


Setup D&D slide

Auto Submit Correct Answers is activated, and the Submit button has been dragged to the scratch area. The drop target accepts all drag sources, which will disappear behind the target but the count is limited to 3 (because there are 3 correct answers). Due to the Auto Submit which only will happen for the correct answer, the Next button will only appear when the answer is completely correct (Action 'On Success'). 

The drop target is a multistate object. I didn't add InBuilt states in this case but three custom states, using a gradient edited for each state with 'Edit Gradient'.

On the slide, not overlapping with any object, there is a multistate shape, labeled 'Comments',  acting as feedback container. The normal state is blank and you see the other states in this screenshot:

Advanced Action DD_CorrectAct

I imported the shared action used in the presentation to the project Library and used is as a template for this Advanced action DD_CorrectAct. I added the Play Audio command. First I tried to add the audio to the state 'Correct' of the multistate shape 'Comments', but that proved not to work in this case, probably due to the Drag&Drop limitations. After the duration of the audio clip (4secs) the shape reverts back to the Normal state, which is invisible to the user (Alpha and Stroke set to 0).

Sorry for the generic label on he drop target. You probably know from my previous blog posts that renaming an object used in a D&D interaction, will kill the set up. 

Since this action is used with exactly the same feedback text and same audio clip for 3 drag actions it is much better to use an advanced action in the situation. 

Shared Action DD_IncorrectAct

The previously described Advanced action DD_CorrectAct is used as source to create a shared action. Since there is no state change needed for the drop target, the fifth command can be deleted. Five parameters are needed (due to the fact that audio couldn't be embedded in states). Four of them are compulsory parameters, one candidate was turned into a parameter: the literal for the delay time. That delaty time has to be at least as long as the audio clip to be played.

You just need to apply the advanced action and the shared action to the proper object actions: 

Want more?

Goal of this simple example was to show when to use a shared action instead of an advanced action? It could have been done with 3 duplicate advanced actions, which is what I see most clients doing. Start to appreciate the advantages of shared actions over duplicate advanced actions:

  • Ease of transfer to other projects
  • Management in the Library
  • Possibiity to use as template

Give it a try. If you want to learn more, give me some feedback, please.