Drag&Drop in 2016 with Captivate 9

Update: an updated version (with a new workflow) and more details about Resetting a slide is published recently under this link

Intro

As promised in a previous article, I explored the enhancements to Drag&Drop in Captivate 9, more specifically added InBuilt States. In previous versions only buttons and shape buttons had those states. Captivate 9 added multistates to all objects and provided InBuilt states for all objects in a Drag&Drop slide: drag sources and drop targets. Custom states can be added as well. Both InBuilt states and custom states have some limitations similar to the Inbuilt states for buttons. Drag&Drop objects have also limitations for added custom states.

Example Movie

Watch this movie, I left the default play bar active to allow you free navigation. You'll find two Drag&Drop slides with different use cases on slides 4 and 5:
  1. The first use case has only two drag sources, one of them being correct, the other incorrect. There is one drop target, the cup. Watch the different InBuilt states both for the two drag sources which have identical states and for the drop target. All states are introduced on slides 2-3. All objects have also one custom state. Because of my manipulation of the states on Submit, the default Reset button will not return you to a fresh start if you have used the Submit button. You'll have to use the custom 'My Reset' button in that case. 

  2. In the second use case you'll see 7 drag sources and 2 target objects: the box and the trashcan. You are supposed to drag all sources to the appropriate target. You'll find the 'My Reset' button here as well.

Drag Sources: states

The Drag Sources have 5 InBuilt States (see slide 2 in movie). Common to all those states and to the custom states is that you cannot add any object in a state. All the options on the Big Button Bar (horizontal toolbar) are dimmed with the exception of the Record button (for audio): no Text objects, no Shapes, no Higlight boxes (under Objects), no Media can be added to any state. Here is a short description of each state, of its functionality and limitations. As a visual reminder have a look at the Gallery, which shows those states for the first use case
  1. Normal state (InBuilt): is the Default state. This state will appear before dragging, and will re-appear if a drag source is sent back to its original position as well (for an incorrect object). The size of this state is important, because several states are locked to the same size. You can rotate the Normal state (watch the rotate handle at the top), which will also lock some of the states to the same rotation.

  2. Dragover state (InBuilt): this state appears when the drag source is over a drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
  3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state and become permanent. It is totally locked (watch the lock symbol bottom right): will keep the same size as the Normal state, cannot be rotated. Be careful: if you allow all drag sources, both correct and incorrect, to be dropped on the target, the DropAccept state will also appear for correct and incorrect objects! If you only allow the correct drag sources to be dropped, this state will only appear for them.
  4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. When the incorrect object is sent back to its original position, the DropReject state is replaced by the Normal state. Like the DropAccept state this state is totally locked: no resizing, no rotation possible
  5. DragStart state (InBuilt): this state appears when you start the dragging movement until you are over a drop target, where it will be replaced by the DragOver state. The state is not locked, it can be resized and rotated.
  6. Custom state: this state is also fully locked to the rotation and size of the Normal state. As written before, you cannot even add objects in this state (which is possible for buttons). That is a limitation, in many cases you'll want to revert to the old method of hide/show objects. For this example it seems as if I added the image of the wings, but I'm just cheating: for all states I used smart shapes. That way I was able to change the form of the shape (Replace shape), to change its fill and stroke. For the InBuilt states I used gradients or solid colors as Fill, for this custom state I used Image Fill. Since a shape can also be used as Text container, it was possible to change the labels of the states as well. If you are not yet member of the Smartshape fan-club, maybe... :)


Drop Targets: states

The Drop Targets have 6 InBuilt States (see slide 3 in movie). Three of those states have a name that is identical to an existing state for the drag sources: DragOver, DropAccept and DropReject. For Drop Targets you can add objects to all states, both InBuilt and custom states. Some states appear immediately, other states only appear after Submitting the exercise. Here is the overview, again with a visual reminder from the first use case in the example movie.

  1. Normal state (InBuilt): is the Default state. This state will be the main state before the Submit button is clicked. It can be replaced by another state but that will only be for a short duration. The size of this state is important, because several states are locked to the same size. You can rotate the Normal state, which will also lock some of the states to the same rotation.

  2. Dragover state (InBuilt): this state appears when a drag source is over the drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
  3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state. However this state will remain visible only for a short duration. Then the Normal state will re-appear. The reason is that a drop target can accept multiple drag sources, and has to be ready to 'accept' or 'reject' the next drag source.  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
  4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. The state will appear for a short duration before reverting to the Normal state. State is  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
  5. DropCorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
  6. DropIncorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are not all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
  7. Custom state: this state is also fully locked to the rotation and size of the Normal state which is limiting even though you can add objects.  

Reset - My Reset

The default Reset button has been added to both use cases (slide 4-5). This button can only be used to reset before submitting the result. I added an extra button 'My Reset', which is really the Replay2 button described in a previous blog post. If a D&D slide is not included in a quiz, has not score it will be reset when you re-enter the slide. This is what I'm doing, getting back to the last frame of the previous slide, then continue. That may result in some flickering, depending on the bandwidth, but the D&D will be totally reset. The mentioned blog post explains the need for a user variable v_enter to store the first frame number of each slide with an On Enter action. 

Setup Use Case 1

Have a look at the Timeline of this slide:

There is only one correct answer: DragSource1 to Target1. There is an object action for this correct answer, to change the state of the other drag source to the Custom state, as you can see here:

Setup is almost the default set up: Snap behavior will change the size and the opacity of the dropped object to 70% (size) and 80% (Opacity), and snaps to the center (Anchor). There is one attempt allowed, and the actions on Success and Failure are visible here:

The advanced action DDSuccess4 has three statements:

Due to hiding the drag sources with this Success event, the On Enter action of the slide has to 'reset' the situation by showing the group Gr_Draggers again. This was combined with the assignment of the user variable v_enter for this slide in the action:


Setup Use Case 2

Have a look at the Timeline of this slide:

Effects are time-based, starting after the pausing point of the Drag&Drop (1.5secs which is default). Back and Next buttons have no pausing point in this slide. When the playhead is released by the Success event, it has to continue seamlessly to the end slide 6.

For the correct answer all Christmas balls have to be dropped either in the box (2, 0, 1 and 6) or in the trashcan (3, 4 and 5). There are no object actions in this use case. 

For setup of both drop targets size and opacity of the drag sources will change to 0% to have them disappear in the target. You can see that the actions on Success and Failure are very simple:

Even the on Enter action of this slide can be a real 'simple' action to have the correct frame number assigned to the user variable v_enter:






1 action = 5 Toggle Buttons

Intro

In the past I wrote some posts about creating Toggle buttons. The oldest article explained the use of an Expression and a system variable for a button that kept the same style but could turn on/off a functionality (created for versions 5/5.5). My excitement about shape buttons, appearing in version 6, was the inspiration for several scenarios in which the style of the toggle button changed with the on/off situation. 

When shared actions appeared with Captivate 7, I posted some articles about the difference with advanced actions. Captivate 8 enhanced shared actions by allowing variables and literals as candidate parameters. Although Captivate 9 seems not to add any improvements to shared actions (had hoped secretly for an easier way to edit them), combining shared actions with the new multistate objects will save a lot of time. The use case described here is a good example. Start by watching the example movie to understand my interpretation of Toggle buttons.

Example movie

This movie has 4 slides, the third slide shows the toggle buttons. Try them out, there are two instances of the shape button that toggles the visibility of an image or a group. They use a different user variable. Beware: images do overlap on the slide. The other shape buttons are muting/playing audio, showing/hiding Closed Captioning, Table of Content and Playbar. I choose shape buttons over normal buttons because they offer more freedom for styling the InBuilt states. To navigate to the last slide you have to 'toggle' on either the playbar or the TOC for navigation.

Concept 

All toggle buttons have in common to be associated with a variable that can be toggled by the developer: I'm talking about Boolean variables, which can have only two logical values '0' (False/No) or '1' (True/Yes). Both system and user variables are possible. On this screenshot you see the Timeline with the 6 shape buttons, labeled to identify their functionality (SB is my indication for Shape Buttons):

Variables

The associated variables are in the same sequence as on the timeline, from top to bottom:

  • v_visgrp (user variable with Default value = 0) for SB_visib_group

  • v_visib (user variable with Default value = 0) for SB_visib

  • cpCmndShowPlaybar (system variable with Default value = 1) for SB_Playbar

  • cpCmndTOCVisible (system variable with Default value = 0) for SB_TOC

  • cpCmndCC (system variable with Default value = 0) for SB_CC

  • cpCmndMute (system variable with Default value = 0) for SB_Audio

This list shows that one of the system variables doesn't have '0' as default value, cpCmndShowPlaybar. Solution for this discrepancy can be found in switching the states for the associate button, or in switching the variable itself to '0', thus hiding the Playbar. I used the second scenario: with the On Enter action for the third slide I did Hide the Playbar, which toggles cpCmndShowPlaybar to 0

The shared action can be used for any button with such a, associated Boolean variable, system or user variable. Some examples are shown in the last slide of the example movie: cpLockTOC or a user variable to toggle an audio object.

States

The shape buttons have three InBuilt states: Normal, Rollover and Down. For each button I added one custom state. That state will change the shape button to show the 'OFF' state, and if necessary additional objects are added in this state. In this screenshot you see the 4 states for the shape button SB_Audio:

This shape button has a SVG added in each state. At this moment SVG cannot be used as a Fill image for a shape button (maybe in a next version?), they are separate objects. For some states I also changed the style of the shape itself (Fill):

  1. Normal: has a SVG indicating you can mute  audio (since cpCmndMute has a default value of 0, which means that audio is playing)
  2. Rollover: Speaker only (SVG), Fill different
  3. Down: Speaker only (SVG), Fill different
  4. AudioOn: has a SVG indication to play audio; this will be the state that is visible when audio is muted, cpCmndMute = 1.

The buttons SB_TOC, SB_CC and SB_Playbar have a similar setup: for the InBuilt states text was inserted in the shape. The custom fourth state adds two line objects (cross) over a duplicate of the Normal state. Look at the screenshot for the SB_Playbar:

Both instances of the Visibility toggle button use SVG's to change the style of the shape button (similar to SB_Audio), but they add other objects for the 4th custom state as you can see here:

Shared Action

The action has to be conditional, checking the value of the Boolean variable. Only two commands are needed, both in Then and Else part: to change the state of the shape button itself and to toggle the variable. Toggling the variable between 0 and 1 will switch the functionality between On and Off. If you write this out as an advanced action, in this case for the Audio button, it would look like this:

When creating a shared action, it is important to identify the parameters. Compulsory parameters in this action are:
  1. the button itself (SB_Audio in the screenshot above)
  2. the state 'Normal' which is used and
  3. the state 'AudioOn' which is used as well

Candidate parameters are:

  1. The variable cpCmndMute: it has to be a parameter, because we need other Boolean variables for the other buttons
  2. Literal '1': because I choose the 4 th state (custom) for each button with this action in mind, it is not necessary to define this literal as a parameter

This leads to the definition of the shared action with 4 parameters, the compulsory and one candidate parameter. In this last screenshot you see the parameters with their values for another button, SB_Playbar. Watch the description of the parameters.

Conclusion

In many situations using a Captivate playbar is not a good choice, and with states, one single shared action from your script library it is now really simple to create not only Next and Back buttons, but also every other toggle button needed on the course slides. If using shape buttons (as was the case here) you can put them on the first slide of the course, time them for the rest of the project. They will have each a unique ID, which allows you to take control of those shape buttons, to hide them when they are not needed on some slides. Good luck!








Playing with Captivate 9

Intro

Version 9 has been released about 10 days ago, while I was on vacation. My fans know that I seldom will post immediately a 'full' review, because I want first to play around a little bit, to try out some reported new features before offering my personal reflections and tips. You will not read anything about the new Quiz features, nor about the enhancements to Responsive projects today, maybe later on in another article. There is too much to write about!

First project

No better way to get the feeling of new features than to create a real project from scratch. In the following movie (only one slide) you'll see that I recreated a slide that was posted in the first article about shared actions. I didn't upgrade the project, didn't use the objects, nor the actions/variables from the old project. If you watch it closely, you'll detect that I used:

  • new states work flow, both for static and interactive objects
  • imported SVG's and roundtripping with Adobe Illustrator
  • Effects 2.0 with custom curved motion paths
  • new commands in Advanced/Shared actions

I will offer some tips about those 4 major new features when you have played with this slide. Refreshing the browser will allow you to restart the movie. Of course I discovered also some little gems hidden between the big diamonds, while exploring. 

Example movie

Multiple States

In Captivate 8 it was possible to create 3 states for shape buttons, both in the Object Style Manager or individually using the Properties panel, Style tab. In this example you did see that the 'default button states' (Normal, Rollover, Down) can even have a different label, not only a fill and a stroke applied to them. Look at this screenshot of the Object State panel for the central oval shape button in the movie. Watch the default states (marked by red rectangle) and the extra 4 states I added to end up with 7 different states. 

For the four extra states I used SHIFT-CTRL-ALT-Z to Duplicate State a couple of times. You'll find the option also in the right-click menu on a state.

Drag&Drop objects also have InBuilt states, but will blog about Drag&Drop in a future post.

Hidden gem

In the Object Style Manager (I saved the style for that central shape button) the different default states for shape buttons show up, just like for any normal button. They were also saved in the OSM for Captivate 8, but not displayed in this 'cool' way :)

SVG - Illustrator roundtripping

I call this the (until now) missing link in the beautiful bracelet of Adobe applications that allow you to create amazing eLearning courses: Captivate, Photoshop, Audition, Edge Animate, Edge Inspect and now finally Illustrator!! Scalable Vector Graphics, contrary to bitmap images, do not suffer from quality loss on re-scaling. Moreover for simple graphics the file size is incredibly low, which is certainly an advantage when you are creating for mobile devices. Beware: file size can be large if you have complicated graphics. Look at this screenshot: I used 8 SVG's - they end up in a dedicated folder in the Library:

You see the usage in the Library as for other assets. Example: the SVG ManGreen has been used 4 times, in the 4 states of the central shape button.
The man-SVG's are very small, but the lightboxes with text are using a complicated filter and size is much bigger. The settings used in Illustrator to save these files as SVG are visible in the next screenshot. To preserve the font, you have to convert it to outlines.

Effects 2.0

The previous Effects panel is gone! Effects timelines are now embedded under the object to which they apply. Live preview with the Play button in the Timeline (or use Space bar), you can have all motion paths on different objects visible at the same time. That makes life so much easier. Curved motion paths are possible. When you hover over an effect in the Effects part of the Timeline panel, you'll see a preview of that effect. This works even with custom saved effects:


Hidden gems

  1. You can use the same shortcut keys for effect timelines as for the object timelines to increase/decrease its length. That is a valid alternative for typing in a value in the Timing panel or for dragging with the mouse. Example: right arrow key will move the whole effect timeline 0.1sec to the right, CTRL-Right will move over 1sec, SHIFT-Right will increase the timeline duration with 0.1sec. All arrow combinations shortcut keys described in this old article: TinyTimeline Tidbits are functional. I regret that CTRL-E, which extends the duration till the end of the slide has not been included for Effect Timelines. Neither does CTRL-L move the effect timeline to the playhead position, it will move the object timeline with the Effect timeline even if the Effect timeline is the selected one.

  2. For the custom motion effects (scribble, curved, line) start with the cursor over the present location of the object, and the beginning of the path will snap to the center point of that object (more precise: the center point of the bounding box).

  3. You can uncheck 'Show motion paths' if your screen is getting too crowded, look in the Timing panel just above the fields for Effect Start and Effect Duration. BTW you can increment the values in those fields using arrow keys: UP for 0,1sec, SHIFT-UP increments to the next full second. Field has to be selected in that case. If field is not selected you can use the typical Adobe scrubber.

New Commands

These commands have been added:

  1. Go to Next State: only available in the list for simple actions, for all events

  2. Go to Previous State: only available for simple actions, for all events

  3. Change State: available for simple, advanced and shared actions. This command needs two paramaters: the object and the state; for a shared action both will be compulsory parameters. I used this command a lot in the example movie, both in a conditional advanced action (on the central shape button) as in a shared action triggered by the four bubble shape buttons.



  4. Delay Next Actions by: finally you will be able to time commands in the sequence for standard/conditional advanced and shared actions. This new command takes one parameter: the amount of time which can be a literal or a variable. In the next screenshot you see that I used it to play the audio clip after the custom effect (with a duration of 1.2secs) has been finished. That parameter is a 'candidate' parameter, not compulsory, when you use it in a Shared action. For more information about parameters see the article Parameters in shared actions. The situation is the same in Captivate 9 as it was in Captivate 8.

    Personally I am very excited about the this new command, which allows better control over timing by advanced/shared actions. 

Hidden gem

Also about timing, not a new command but an improvement of the command Apply Effects in an advanced/shared action: you can now add values for the Start time and the duration of the effect.

More Small Gems

  1. Drag&Drop until Captivate 8 didn't have a Success Caption by default. I explained a workaround in Drag&Drop Tips. You can forget about that tip in Captivate 9, Success caption is now available. It uses the default Success Shape or Success Caption style, depending on your Preferences and theme.


    Objects used in Drag&Drop similar to interactive objects, have also 'Inbuilt states'. That is not a little gem, will post a new Drag&Drop Tips article for version 9 in the future


  2. Intelligent naming of copy/duplicate. In former versions, a copy or duplicate of an object in the same file or in another file would get a generic name. In Captivate 9 if you copy/duplicate an object with a meaningful name the copy will keep that name with an added underscore+number. Big improvement, and now you have even more reasons to set up a good naming convention for your projects. Look at this screenshot: this is a copy of the central shape button to another file:



  3. Simple action feature: another popular post (and a Youtube video) can be dropped in the trash can for Captivate 9 but I don't regret it at all. You no longer have to create a standard oneline advanced/shared action (or use micro navigation) to prevent the playhead from continuing. Just check the box that is highlighted in this screenshot:





System variables in Captivate 8/9 and 2017

I published a new version of the table with system variables for CP2019. It is still free to download and personal use. Check out: 

Intro

Captivate 9, 2017  users: there is no change about system variables in both versions, you can download the same table.

The post 'System variables in Captivate 6' has been very popular, probably because it offers more details than what can be found in the documentation of Captivate itself. Later on I mentioned some new variables in Captivate 7 in the post New Features in 7.0.1.
Time to upgrade the table for Captivate 8, you can download (for free) the pdf from here. The document is encrypted to discourage abuse. You will be able to print it at low resolution (150dpi) and it can be read by a screen reader. 

The table was first proposed at the Adobe Learning Summit presentation about Advanced and Shared Actions. 

New

Captivate 8 only added two new variables:

  • cpInfoMobileOS in the category 'System Information': is read-only and detects which device is used, returns a number or a case-sensitive string

  • cpInfoGeoLocation in a new category 'Mobile': returns the geometric location when using a device on which such detection is enabled. This is the first variable that has not one but three components. Latitude, Longitude and Accuracy are numbers. There are several tutorials around, like this one.