Tips for Interactive Video

Intro

Interactive video is one of the new features in CP2019. Although for a normal cptx-project interactivity is very normal and has a lot more features, 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’. A standalone interactive video can be nice. However  I believe that the combination of interactive video slides with static slides in a cptx project is much more powerful.

This 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 be partially visible in a dimmed version behind the overlay slides. A lot can be used on those content slides, inclusing 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.

I will post lin the future a full description of the timeline of interactive video slides, and the differences with a normal video. An interactive video is always a slide video, never an event video. Consequence: interactive video is not possible in a fluid box.

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  as a b log. You can watch the applied tips there.

Tips

Tip 1: Master Slides for the Overlay slides

You can have 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, and have a shape with a smaller size than the slide, as background for your content or questions.  Have a look at the 3 master slides used for the example video mentioned above:

You see two content master slides next to the Blank master slide:

  • 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. You need all the embedded objects with their functionality, a duplicate is necessary. I used a rectangular shape as background, not transparent. Beware: use a non-respnsive theme, because the Quizzing master slides in a Fluid Boxes theme have fluid boxes. Second warning: 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 inserting the content slides and one KC slide, the Filmstrip looks like this (watchthe hierarcy sympoblized by the smaller size of the overlay slides, and by the icons at their bottom. :

Tip 2:  Replace Fixed duration by Close button

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

For the static content slides however you need to pause the slide. I used a shape button on the two master slides used for the content overlay slides:

For shape buttons on a master slide, the pausing point is not visible on the Timeline, nor in the Timing Properties because those objects have no timing. However, in the default setup, the shape button will pause at the end of each slide. Look under the Actions tab:

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.

Tip 3: Information button

That button is available for the full duration of the project, from the second (video) slide. I described the workflow in an older post, which dates from before CP2019:  Interactive Video Buttons

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 post Tips for Interactive Video appeared first on eLearning.

Using Advanced Actions to change state of an object but it’s not working

Hi there,

In Captivate 9, I have created a module where I want to use advanced actions to change the state of buttons.

I’ve setup the following Completed state on a button.

On slide 12, the users clicks this button, which jumps them to the next slide. On entry into this slide, I have assigned a variable with the value of 1.

The user completes a few slides. Then on slide 15 I have an advanced action set on entry of the slide that if InspectionOrder = 1, change the button’s state to completed.

However, the state of the button is Normal. I’ve outputted the variable Inspection Order on slide 15 to confirm it is set to 1, and it is. So my variable is changing correctly but for some reason the state of the button is not changing to Completed.

What am I missing? Thanks in advance for your help. Much appreciated.

Thanks
Leanne

The post Using Advanced Actions to change state of an object but it’s not working appeared first on eLearning.

States and State Commands

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!

Play

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). Nothing is locked to the default normal state for custom states . 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 command if 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.

The post States and State Commands appeared first on eLearning.

Issue with Advanced Actions not showing.

Hey!

I am having an issue where a button isn’t doing what the advanced action is telling it to do. Basically I have created an interactive glossary where letters unlock once a Module is viewed, for example if I am viewing Module 1.1 this would reveal 10 words in the

glossary. The glossary is built as a text box with various states for each letter, for letters such as C there is multiple words that need to be shown at different points.

To make this work I have used the module selection buttons to assign each letter variable with 1 as you can see below.

The learner then needs to click on the letter which will tell the glossary text box what state it needs to be in, as you can see below. For some reason this advanced action isn’t working when I have clicked the button and I can’t seem the figure out why. I have clicked on the Module selection button to increment the variable ‘C’ so when I click on the button (which has the below advance action) the state changes aren’t going through. I have tried using if statements instead of while and tried creating a fresh action but neither seem work.

Can anyone help please?

The post Issue with Advanced Actions not showing. appeared first on eLearning.

Hotspots for a 2D Image – workflow 2 (close button/lightbox)

Intro

A week ago I published a first showcase, explaining how to replicate the hotspot workflow for VR projects on a 2D image. This second article about using hotspots for a 2D image is not duplicating as closely that same feature: instead of showing the popups for a duration defined by the developer, this workflow will offer a close button for the popups. The learner decides when to close a popup and proceed (eventually) to the next hotspot. I also used a technique, often labeled as ‘lightbox’: to have the popup stand out of the rest of the content, it will have a semi-transparent cover in the background dimming the rest of the slide.

Example movie

I used the same image (welcome screen) and content for the popups as i the first workflow. Only  some small color changes and changes in the location have been applied . Watch this 3-slide movie: after the title slide (doubles as poster image) you can test the new hotspot slide, and the last slide gives a short Step-by-step list if you want to use this slide in your project.

Play

Try it out: quick workflow

You can download the project file from this LINK.

If you do not need to have more than 6 hotspots, and you are happy with the resolution of the project (1024×627) and its Theme (Pink Icing), you can quickly use the hotspot slide using these steps:

  1. Create a blank project, with that resolution and theme. Create your title slide, and eventually a poster image as explained in his older article
  2. Copy the hotspot slide from the sample project and paste it into your project. The object names will get an extra number, but you don’t have to bother about that. The advanced and shared action is automatically adapting to the new names.
  3. Select the Image..  ‘WelcomeScreen.png’ and replace it by your image (Properties panel).
  4. Move eventually the hotspots to the right location. If you need less than 6 hotspots you can hide some of them in output. Deleting is also possible. Start by hiding or deleting the last hotspot(s). The sequence of the hotspots is starting with HS_Responsive (first in first row), going to the right and then to the second row. Last hotspot is for the PPT.
  5. Open the multistate object SS_Info.. which is just on top of the ‘Cover’ (needs to be there). Click the State view button in the Properties panel to open the Object State panel.
  6. Leave the Normal state alone. Replace the content in the other states by your content (follow the sequence described under 4.)  You don’t need to rename the states, nor to delete the last unused ones (just leave them as they are).
  7. Start testing with ‘Preview HTML in Browser’ (F11).

More?

Of course it is possible to have more control over the design, to add hotspots if more than 6 are needed. Let me know if you want to try this out from scratch, taking advantage of the shared action which you can reuse in any project. I could write out the complete step-by-step workflow if you find it useful.

The post Hotspots for a 2D Image – workflow 2 (close button/lightbox) appeared first on eLearning.

Importance of Captivate’s Events?

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.

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.

The post Importance of Captivate’s Events? appeared first on eLearning.

Issue with Shared Actions (not disappearing when advancing/requires two clicks)

Hi everyone! First time poster here. I’m creating a curriculum for a client that wanted it created with Captivate. It’s a fish ID course, so each slide is a fish image. There’s a question mark at the bottom that, when clicked, opens the fish name. I made it a shared action so that when the user advances to the next slide, it is supposed to disappear.

It worked fine for one export, but now the actions apparently no longer work. Additionally, it requires two clicks to trigger the pop-up. I got these buttons working over two months ago at this point, and since it was my first time working with advanced actions, I can’t remember for the life of me what I did.  In the one screenshot of the Advanced Actions box, you’ll see that one setting is left blank. I don’t remember why that’s like that but it’s the same in the archived version of the project where the actions work correctly.

If anyone can advise, I’m happy to share a link to the project. It’s a massive file; every slide is an image so it’s 776.2 MB (even when saved as 150 dpi at 1280 x 720). I’ve included some screenshots that might be relevant. Looking forward to some answers!

The post Issue with Shared Actions (not disappearing when advancing/requires two clicks) appeared first on eLearning.

Custom Effects in Advanced/Shared Actions

Intro

Almost 8 years ago I posted this article on my personal blog: Editing Motion Paths and Using Custom Effects. 

Since that time Effects have been improved a lot, advanced and shared actions can make life much easier. Time to upgrade that blog post, meanwhile testing the behavior of effects in HTML output in CP2019. While Flash was always to be trusted, that is not the case for HTML output. And indeed, I bumped onto a problem with the Scale effect, and sometimes the Rotate to effect. When those problems are solved, I will post a published movie. The workflow to use Custom effects in a shared or advanced action is however still the same since many versions. It is a bit complicated, I have answered many questions about it in the forums. I will write it out now step by step.

When do you need  a custom effect?

Effects have been improved in some ways. Some parameters can be defined in the Advanced Actions dialog box. Look for the start time of an effect, its duration and more numeric fields (alpha, rotation, ease in/out, alpha….). However when using a combination of effects over and over again, you can create one custom effect which saves that combination and can applied in one step including the sequence and duration of the different effects. Another practical example are the motion effects, where you need to edit the motion path, which is certainly the case for more complicated custom motion paths.  This screenshot shows an example of a complicated combination of effects on the Timeline. It was meant to be applied to simulate a swimming fish:

Step by Step

Step 1:  Create and save effect

Create the effect or combination of effects on any object as a ‘Self)time based animation and test it out thoroughly (Preview HTML in Browser for a non-responsive project) in several browsers before saving it with a custom name.

You don’t need to save it in a specific folder. I use to save it with the project I am working on as is the case in the screenshot above. Effects are stored in XML-files.

Step 2: Apply the custom effect as time-based animation

If you would try to use the saved effect in a shared/advanced action it will no be available. If this is the first custom effect you ever created, there will not even be a Custom category to choose from You need first to delete all the individual effects applied to the object (above it was to the object SV_Fish (a SVG image). Then apply the custom effect as a (Self) time based animation again, but now with ‘one’ effect chosen with the browse button.

When looking at the timeline you’ll see exactly the same result as in the screenshot at the beginning: all the effects in the correct sequence and with the duration you had chosen.

The result of this second application is that the Category ‘Custom’ will now have been created, and it will have the new custom effect ‘Swimming’.

Step “: use in advanced or shared action

If you only wanted to apply this action using an interactive object, you could use a simple action. The field Category will now have the Custom category.

However often effects are used in Advanced or Shared actions in combination with other commands. In this example the Fishes are originally hidden, so I need to Show them and apply the effectn eventually also have an audio clip playing separately.

The two buttons on this example will trigger the same shared action. Both fishes are hidden in output at the start. When creating the advanced action, the category Custom can now be used, and the available parameters (start, duration) could be edited, but mostly you’ll not want to do that.

Because I needed to use this action twice, maybe also later in other projects unchanged or as template for other actions, I preferred a shared action which will have only one parameter: the object itself. An effect cannot be a parameter. However, the effect can not only be applied to one object, but also to a group. I can replace one fish by a group of fishes.

The post Custom Effects in Advanced/Shared Actions appeared first on eLearning.