Intro

Motion effects can be customized in many ways. Pausing Captivate's timeline will also pause automatically any effect if it is not finished. This feature can be used to make boring slides more engaging. To see what I mean, have a look at this example file. It has three slides using that approach:

• Business Model: has a simple left to right motion path use on a cover shape to deploy an infographic sequentially.
• Career Steps: uses a custom polygon path to have an animated avatar and discovering states in a multistate object
• Captivate Hurdles: has a custom curved path, and uses also multistate objects.

You can watch the example file full screen by clicking this link.

Or have a look at this embedded example:

Workflow

Steps

Each of these three steps will be explained in detail below:

1. Create the motion path, and edit its duration taking into account the number of wanted fractions.
2. Create the button and its advanced action, which will have two decisions:
   1. Decision 1 will manage the motion and pausing, and a tracking variable if you want a second decision to be done when all parts have been deployed. This decision is non-conditional
   2. Decision 2 will be done when the path has ended and is conditional
3. Test the interaction, it will probable need tweaking the path length and fraction times. Moreover if you allow to revisit the slide, you may need an On Enter action to reset the situation.

The detailed explanation will be done using the first example ‘Business Model’ . Explore its timeline:

Slide background is a a shape filled with a gradient. That shape was duplicated to be a cover, which is stacked on top of the Infographic (with the images) and the Next button. Motion effect will be attached to that cover shape. On top of the cover you’ll see the Play button (no pausing point), title and instruction text. The Next button has a pausing point which needs to be after the end of the motion effect.

Step 1: Motion path

The effect applied to the cover is a simple Left-to-Right motion path. It has no easing because easing would be applied to the start and/on end of the complete path, but you’ll use it in fractions. This linear path will be cut in 6 parts. I used a vertical guides grid to visualize the 6 fractions, and make sure that each guide is in between two images. Have a look at this screenshot, showing the guides and their setup (using View, Create Multiple Guides):

Motion path  is visible on the stage with end and start points. Those points are always connected to the center of the bounding box of the shape. The start point is at 1024/2px = 512px because the project width is 1024px. You need to extend the length of the path by moving the end point horizontally (keep SHIFT key pressed) to the X coordinate 512+1024px = 1536px. For that reason I added another vertical guide at 1536px. Turning the snap on for the guides helps to position the end point. See screenshot:

For the duration of the Effect, start from the time to use for each fraction. I found that using a time between 1 and 2 seconds is fine. As you can see in the timeline screenshot above, for this slide a duration of 1.5secs was chosen, leading to the Effect duration of 9secs. If you look closer to the Timeline, you’ll see that the effect duration is slightly shorter, because of step 3: tweaking.

Step 2: Action for Play button

Basic setup

At first sight the needed advanced action for the Play button seems to be rather simple.:

• Pause the slide On Enter.
• For the Play button use this sequence:
  • Continue      to release the playhead, the motion effect will start
  • Delay Next Actions by 1.5 secs          for the Business model slide 1.5seconds is 9secs/6
  • Pause      to pause the motion effect waiting for the next step (see guides in the first screenshot )
• The Next button will be uncovered in the last step.

However, there is no way to prevent the learner to click the Play button after the motion effect ended, and the Continue command would then override the pausing point of the Next button, which you probably want to avoid. To prevent this you need a way to track the end of the motion path. Using a variable v_counter for tracking is an easy way. Although you could use one conditional decision, I like to separate the advanced action in two decisions. Have a look at this screenshot of the basic PlayMotion action:

Supposed here is a starting value of 0 for the variable v_counter. When all 6 parts have been ‘discovered’ the Play button will be hidden. It could be possible to replace that Hide action by a pure Pause action, but it would lead to frustrated learners.

If you try out this basic action for the Business Model slide, you’ll have a flickering problem. That has been a pain since many versions. In the Tweaking section of this blog, I will show you how to solve this. Moreover in the video displayed in the previous post, you’ll see that the first part of the effect is deployed immediately. There is also need for an On Enter action on all the slides, to reset everything in the original situation including the value of the counter variable.

Extended Setup

This simple slide didn’t need to have another action to be done besides part of the motion effect. That is not the case for the Steps nor the Hurdles slides. The extra actions need to be inserted before the Delay command in the Always decision. Look at the versions for the Hurdles slide. Multistate objects were used to show explanations. There are 4 parts. At the end the Play button (is in a group with a Tooltip) needs to be hidden, and the group of extra buttons made visible:

Step 3: Tweaking

Timing

When testing the project with F11, Preview HTML in Browser, you'll see that the timing is not perfect: motion effect. There are two ways to tweak this timing, and often both are needed:

1. Decrease the total time of the motion effect (Timeline panel or Timing Properties). That will speed up the motion, more will be shown with each part. If you look at the first screenshot, Timeline panel for the Business Model slide, you see that the duration of the effect is now 8.9secs instead of the original 9secs. For the Steps slide, I reduced the original 10secs (5steps of 2sec) to 9.7secs, for the Hurdles slide 5secs was reduced to 4.8secs
   
   
2. Decrease the Delay time in the advanced action for the Play buttons. You could see in the Hurdles action the change to 1.8secs. 

On Enter action

You’ll need such an action to reset the situation if the learner is allowed to revisit the slide, and also to be able to reuse the unique variable v_counter.  Whenever possible, avoid to create multiple variables if you can reuse the same variable. Here is a simple On Enter action for the Steps slide:

As promised, here is the On Enter action for the Business Model slide, which is more complicated because it solves the flicker issue, and will show the first part of the image (Hence the Assign to 1 command for the counter variable):

To avoid the flickering of the InfoGraphic image, it is hidden to start with and shown after 0.3secs.  I also added a Fade in Transition The starting value of the variable is now 1 instead of 0. To deploy the first part of the infographics you’ll see the same actions as in the Play button action. The total delay for this first part is 1.6secs.

More?

It would be wonderful to hear how the described workflow could inspire you for your projects.. 

Creating custom paths - curved or polygonal - comes with some issues:

• For polygons: you cannot create horizontal nor vertical parts for an obscure reason. I have logged this bug multiple times.
• For curves: realizing cusp points is normally not possible... 

If you want to learn how to overcome those issues, please let me know.

Why?

Since a while I planned to:

• explain the use of the Timer (or similar Hourglass) learning interaction
• create a new example of using the While condition in an advanced or shared action

For some reason every blog I write about Timing (not timeline) seems to attract lot of viewers.  I have been using the Timer interaction several times, in combination with Time system variables. It is one of the rare interactions that allows you to have an action based on the expiration of a set time (jump to another slide) without having to play with variables and JS or advanced actions.

However that Timer interaction has several drawbacks:

• You cannot pause.
• You cannot control the start. It starts running whenever its timeline starts, even if it is hidden in output.
• You cannot restart after a pause, since you cannot pause.
• You cannot reset it.

Personally I am also bit frustrated by the While loop, because of the time lag between two executions of the command sequence in the loop. I could see a lot more possibilities if I could control that time lag. ‘Delay next actions’ is not always possible. However I suspected an unexplored possibility which I used in this example. Compare the time showed in the Timer interaction and the digital Stopwatch.

Have a look at the example file, it shows two very simple Stopwatches: a digital and an analog version. You are able to start them, to pause, restart after a pause and reset.  They are very simple, show only seconds.  Reason: for this first version I didn’t want to use JS, everything is done with advanced (or shared) actions.

The workflow step-by-step will be explained in a blog post. You’ll learn how to ‘break’ an eternal loop created with a While condition.

Example project

It is not a full course, only to show the created Stopwatches. There are multiple possibilities to include such a stopwatch in a course: to allows the learner to check time spend on slides, questions. Since the time is stored in a user variable it is also possible to use that to calculate total time…  I would appreciate your ideas. You can watch the project from this link (rescalable) or the embedded version:

While loop

1. Eternal loop:  uses the condition ‘IF 1 is equal to 1‘ or something similar, which results always in a positive result. The specified commands will repeat continuously. However! Contrary to the default behavior in advanced actions, where all commands run immediately and in sequence (top-down and left to right through the decisions), the commands in a While loop will be delayed for 1 second before the next run. It is this feature which I have used for the stopwatches.
2. Limited loop: will need at least one variable. The condition ‘IF var is less than 6′ is an example. The variable ‘var’ needs to start with a number which you define in the variable definition or by another action. The variable will also need to be changed inside the commands. In this case it will probably be done with ‘Increment’. If var starts at 0, the commands will be run 6 times. In this case as well there is a delay of 1 second after each run.

Breaking a loop?

To break an eternal (or limited) loop, you need a combination of two conditions with the AND operator. The second condition will probably refer to a variable. I used a Boolean variable as you’ll see below. That variable needs to be changed by another action. Example:

IF 1 is equal to 1 AND
     v_stop is equal to 0

As long as the variable v_stop has the valueo 0, the loop will continue. But if the variable is toggled to 1, the loop will be broken.

Workflow Step-by-Step

Variables

• v_time: stores the number of elapsed seconds. It starts with a value of 0, also after Reset.
• v_stop (Boolean) has a default value of 0 and is used in the combined condition of the While loop. It will be toggled to 1 when the Pause button is pressed.
• v_start: stores the frame number of the first frame of the slide. It is necessary for the Reset functionality, where I used the workflow described in this recent post ‘Replay or Reset‘.

Events and Actions

EnterAct triggered by the On Enter event

Both v_time and v_stop are reset to their default values (0). The frame number in v_start is needed for the Reset action.

Start actions triggered by the Success event of the Start buttons

These actions are slightly different for both stopwatches. This is the digital version:

The button used in this version has a custom state to replace the Normal state when the Pause button is used. It has the text Restart. The variable v_stop needs to be reset to 0, because it could have been toggled to 1 when the Pause button was used.

The combined condition for the While loop has been explained before.

The version for the Analog stopwatch:

Needle is a shape with a transparent part to be able to apply a rotation effect. The technique has been described in this blog ‘Reference point in Captivate‘.

The rotation effect was defined as a custom effect. If you want more information, have a look at:

How to use a Custom effect in an (advanced) action

ResetAct, triggered by the Reset buttons

As explained in the Replay/Reset blog, this action needs only one command:

In this use case the Continue command is superfluous, since Captivate is waiting from the first frame for a click on a button.

Intro

The origin of this article is (again) due to a forum question: "I want to rotate a triangle around a certain point" using the Rotation effect. It is time to explain the importance of the reference or registration point for objects in Captivate. In other Adobe applications like Illustrator, InDesign, Animate you have lot of control over that point. Look at this small screenshot: it shows that reference point in two different locations. Sorry for the low resolution, it is very small in Illustrator: left image shows the reference point in the left center, the right image at the bottom right. It was that last point that was wanted by the OP in the forum, but ... Captivate doesn't allow changing the reference point.

Reference points Captivate

The Reference/registration point in Captivate is used in different situations. In some situations it is located at the top left corner of the bounding box, in other situations in the center of the bounding box. The 'bounding box' is the rectangle surrounding the object or the object group. You'll see it during editing, when selecting an object or a group.  The visual presentation of that box on the stage is not looking always exact, it can look larger than it really is. The correct size (px) of that box can only be seen in the Options tab of the Properties panel. 

Location, resizing, rotating

The X and Y value in the Options tab are the coordinates of one of the registration points: the top left corner of the bounding box, as you can see in this screenshot:

The red lines in this screenshot are guides. The dotted square is the bounding box. The blue circle indicates the first reference point, which is top left and has its coordinates in X and Y in the Options tab. If you uncheck the 'Constrain Proportions' option, and increase the Width (W) or the Height (H) you'll see that the reference point will not move, increasing width will move the right border of the bounding box, increasing height will move the bottom border.

However, if you use the Rotation button on the stage, or the Rotation option in the Options tab, the used reference point is no longer the one indicated by the blue circle, but the center of the bounding box, which is indicated with a white circle in the screenshot. Same point is used for Flipping and 90° rotation buttons in the Options tab. The reference point will (weirdly) not change in the X, Y coordinates when you rotate an object as is visible in the next screenshot: you see that the X/Y still references to the blue circle center, which is no longer part of the bounding box of the shape:

Aligning

If you align two or more objects (use the Align Toolbar which you can open by Window menu) the result can be surprising. Have a look at this first screenshot: I kept the rotated arrow, added a rectangle with exactly the same width (300px), and having the reference point at the same X value. That means that the center point of both shapes has the same X value as well, centering the shape will not move them.  In a first test, I selected the arrow first for alignment (see right image in screenshot). 

The result for left align is to be seen in the left image: the most left point of the bounding box of the arrow has been used as reference. When the bounding box is turned off, there seems to be no 'alignment' between the shapes. The second image looks better.

Same alignment rules when you use grouped objects instead of single objects. The bounding box of the group is what matters.

Effects

For all effects the center point of the bounding box (white circle in the very first screenshot) is the absolute reference point. It is the case for all categories of Effects. Especially for motion effects, the new Guides are very handy to locate the start, end and intermediate points of the motion path as I showed in this post: Guides Rule!.

That was the original question which I mentioned in the introduction: how can you rotate an object, not around its center but around another point.  Since version 9 it is possible to apply an effect to a group. You cannot have individual effects for objects that are grouped (which is a pity). But in this case effect on a group provided a workaround for this particular question: 

• Add an object that is 'invisible' to the end user, like a shape with a Fill Alpha = 0 and a stroke = 0.
• Group that object with the object to be rotated, in such a way that the center of the group bounding box coincides with the rotation point you want to use.

This sounds more complicated than it is really. Have a look at this visual presentation: the wanted rotation point was the right bottom point of the triangle. Duplication of the triangle with rotation provided me with that 'dummy' object which I made invisible to the user (here I added a light grey border to make it visible):

The red lines are guides which will not be visible on publishing. You see in this screenshot that the bounding box looks bigger than it really is, because its exact size is indicated by the red guides.

Intro

Today an important patch for version 8 was released, to upgrade to version 8.0.1.242. Like with the update to 7 I wonder why this is not a full 8.1 or even 8.5 because there are not only a lot of bug fixes, many features were extended and even added. Have a look at "What is new" for a summary. And Dr. Pooja Jaisingh already blogged and posted some other links: Free Update to Captivate 8. In this article  by my friend Michael Lund you'll find not only his first reflections but clear instructions about installing the patch. But none mentioned some of my favourite new features: using SHIFT to constrain an ellipse/rectangle shape to a circle/square and big improvements to color management. 

But this post is not meant as a personal summary of the new features! As an advanced user I'm used to customize Captivate of course: custom themes, custom theme color palettes, custom shapes, custom effects and... custom workspaces because I'm using Captivate 8 in Expert mode. And when following Michael's (correct!) guidelines for updating, most of those custom items will get lost. If you do not are happy with the default items, never customize, do not bother to continue reading. However, if you share my frustrations about losing precious work, maybe you could find some workarounds in this article. Some of them can also help when you have to 'clean' a tired Captivate application by killing its Preferences.

Workflow 

Before installing an update, before deleting the Preferences folder (or using the CleanPreferences files in the subfolder 'utils'):

1. Find the custom items in these locations (I'm on Win7, will be different on Mac):
   
   

• Workspaces in   \Users\<yourprofile>\AppData\Local\Adobe\Captivate 8.0\Workspaces   
  which means they will be refreshed because this is in the Preferences folder. Here you see the default workspaces, each defined by two files.
  

  
  
  
  
• Custom Theme Color Palettes in   \Users\Public\Public Documents\Adobe\eLearning Assets\Layouts\8.0\ThemeColors
  Layouts is one of the folders you have to delete before installing a patch.
  

  
  
  
  
• Custom Themes in  \Users\Public\Public Documents\Adobe\eLearning Assets\Layouts\8.0\en_US
  I will mostly not save my custom themes in this folder, but better check if you have some there. The last item in the path can of course be different if you didn't install the US English version as I did.
  

  
  
  
  
• Custom Effects contrary to the themes, I like to have some custom effects in the Gallery with other effects in a subfolder Custom:
  

  
  The Gallery can have more custom items. Eventually check also the folder en_US in the installation folder. Maybe you have edited some of the files there as well.
  
  

Intro

For a recent webinar about conditional advanced actions I recreated a file in Captivate 6 to check a Sequence of clicks, as described in the article. You can play with this file in the Example section. In this version I used a lot of custom motion path effects to put the cards on a stack. If the sequence is not correct, there is a reset button to offer the user a new attempt. And that meant that the motion effects had to be reset. I was very happy to find an easy way for this work flow, and that is the goal of this article.

Example

Play with this movie that has only 4 slides: on the first slide you choose between two ways of playing and will be navigated to either the second or third slide depending on the choice. On slides 2 and 3 in case of wrong answer you can reset the cards to their original position, on slide 2 this will happen with the Next button, after you checked the sequence with the Question Mark button. On slide 3 you have a reset button? Last slide will only be reached in case of a correct answer. Want to cheat? The sequence is 57142

Work flow

The work flow is pretty simple: you have to return to the very first slide, and using an advanced action on entering that first slide, redirect again to the slide just left. And the objects that had moved will be back in their original place, the effect is reset. I tried out different other work flows like navigating to the previous slide, but for some reasons it only is functional if you return to the very first slide. In the example movie, the On Enter action for that first slide is a bit more complicated because I have some more actions to be done, but in the next example I keep it really simple, just having the focus on resetting the effects.

Second example with details

Description

This example has 5 slides: Intro, TimeBased, ButtonTrigger, AATrigger and Summary. On slides 2,3,4 you'll find an effect applied to one object, first time-based, then triggered by a button and at last one triggered by an advanced action attached to another button. On slides 2 and 4 other objects with effects will appear, which was not possible for the slide with the button that triggers an Effect, because you can only apply one effect that way.

Shape buttons

I used default buttons from the Shape Button category, but changed the triggered actions. On the Intro slide there is only a Next button (used a rollover shape as tooltip). On slide 2 you'll find 3 buttons, timed for the rest of the project (and hidden on the last slide Summary). Each of them has a tooltip as well, and they all have a pausing point near the end of the slide, but play button pauses a little bit before the others:

Reset button: the default action for this button is 'StartSlide', and this is what I wanted it to do.

Play button: has a different functionality, depending on the slides

• on slide 2 (TimeBased), slide is paused on entering, and this Play button will just release that pause by the statement 'Assign cpCmndResume with 1'. The playhead will continue, and the three objects that start on different moments will get visible with their effect.
• on slide 3 (ButtonTrigger): no need to pause on entering, I covered the original play button with a transparent shape button that triggered the Effect on the hexagon by a simple action, thus limited to one object with effect.
• on slide 4 (AATrigger): no need to pause on entering; again I covered the original play button  with a transparent shape button that triggered an Advanced action NewApply with two statements: "Apply Effect..." and "Continue". This button pauses at exactly 1secs, whereas the other objects appear after that time (see timeline). The Continue statement is needed to release the play head so that the other objects appear with their effect.

Advanced Action EnterIntro

This action, triggered by the On Enter event for the first slide (Intro), has to be conditional. It has to check if this slide is visited for the first time. To achieve this I created a user variable v_visited (no default value, so empty to start with) that will be set to 1 when the slide is visited for the first time. On all following visits, the user is navigated back to the last visited slide, the slide on which he clicked the Reset button. And that makes the magic happen: the object that was moved by the applied effect is back in its original location. The conditional action is rather simple:

IF v_visited is equal to 1

THEN Go to Last Visited Slide

ELSE Assign v_visited with 1

When returning to the last visited slide, all objects will be in their original place. Even if you have clicked twice the Play button! Try it out with the example movie. You'll see a different behaviour depending on the slides:

1. On Slide 2 (TimeBased): pressing the Play button a second time will not have any effect, since the play head has stopped at the pausing point of the Next/Reset button and all effects have been played.
2. On Slide 3 (ButtonTrigger): pressing the Play button another time will replay the Effect, since it is triggered by that button. But motion effects are always relative to the present position of the object. So.... the hexagon will move outside of the stage. 
3. On Slide 4 (AATrigger): if you press the Play button again, the hexagon will move again (outside of the stage), but not the other objects. Their effects were time-based and the play head is at a position after those effects. If I had applied the effect to those objects by the Advanced action as well, they would have played. But then it was not possible to start the effects at different times.