Captivate 8 Custom Motion Effect Example

I created a Captivate activity with a custom effect using motion and scaling to animate two cars driving away to the horizon. Each car moves depending on how you answer a series of questions. Click the image to view the activity (Flash only).

2 cars on parallel roads

The movement is saved as a custom effect (drive_away) so I can reuse it, as explained by Lieve Weymeis on her blog. The custom effect contains a Left-to-Right movement (which I edited to move up instead of left to right) and a ScaleTo 0.8. One note about these custom effects: they seem to be very glitchy and unstable. I had the entire activity working perfectly and then went back to add the Restart button and make a few minor edits. In every Advanced Action that I edited, the custom effect started scaling larger instead of smaller, even though the exact same action was being called. I had to re-create the effect a second time and save it with a new name. Lieve says these Effects and Advanced Actions don’t play well in Captivate 8, so she prefers to build these sorts of effects in Adobe Edge Animate. You can see the glitchy version from before I edited it to see the problem. Sometimes the cars get larger; sometimes they get smaller.

Each Yes/No button triggers an Advanced Action, so I built two Advanced Actions for each question. The Advanced Actions do several things:

  • Increment a variable (Points_ID or Points_Dev)
  • Apply the custom effect
  • Show the next question
  • Hide the previous question

I have 8 questions total. Questions 1 through 4 look like this:

Advanced Action

Questions 5 through 8 required conditional actions. Once the score for either variable exceeds 4 points, I apply the effect, show the appropriate final feedback, display the restart button, and hide the sign for the questions. The IF action checks the score and finishes the activity if the score is above the threshold; the ELSE action matches the earlier questions to continue to the end. The actions for the final question

IF statement

2car-Q5-ELSE

If I was creating an activity like this again, I might use Shared Actions instead of Standard Actions. For this time, I wanted the flexibility of being able to add more lines to the action (like adding the Restart button), which isn’t possible with a Shared Action. Now that I know all the actions needed, I’d be able to save some time with Shared Actions in the future. I would also investigate Adobe Edge Animate if I was doing more of these after the problems I experienced.

The car image came from GraphicStock; I edited the license plate and recolored a copy of the same image. If you’re interested in purchasing a license for GraphicStock, you can get an 83% discount through my link. For $99 a year, it’s a good library of vector images, buttons, icons, etc. The roads are built with Smart Shapes directly in Captivate.

The original concept for this activity came from another instructional designer on a recent project where she wrote the storyboard and I did the Captivate development. In the original version, learners weighed the benefits of two different types of insurance plans. I thought it was such a cool activity that I wanted to re-create it on my own with non-proprietary content. You could use this type of activity for anything where your audience needs to weigh the benefits of different choices: investments, employee benefits, hiring decisions, project management, face-to-face training vs. e-learning, time management, healthy eating, selecting the right equipment for a job, etc. Instead of cars, you could animate people moving along a track. With just ScaleTo in one dimension, you could animate a glass filling up or a thermometer rising.

Are you feeling inspired to create something like this yourself? How could you use a comparison activity like this? I’d love to hear about it if you use this as the basis for your own activity.

One thought on “Captivate 8 Custom Motion Effect Example

  1. Pingback: 2015 Year in Review | Experiencing E-Learning

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s