captivate-01

Adobe Captivate 9: Rollovers for Software Simulations

full_rollover_gif
Created with Captivate!

The most recent eLearning project I completed was for an online software application, so creating online software training has been on my brain. I typically create training for adults, so I have been paying close attention to incorporating adult learning theories into software training. In my recent posts, I talked a bit about how Adobe Captivate allows you to create software training that can look as close to the real thing as you can get.

One of the ways I accomplish realistic software simulations is to create rollover elements that mimic that system so when you roll your mouse over an object you need to click, the rollover state of that object appears. Let’s take a look.

Screen Capture Tools

One thing you’ll want to make sure you have in your toolbox (in addition to Adobe Captivate) is a screen capture tool. I know there are multiple options on the market – some even native to your operating system – but I have always preferred SnagIt, by TechSmith

A critical feature the screen capture tool must have is the ability to freeze the screen in any state. So if you hover over a button or menu and a rollover state is triggered, the screen capture tool must be able to capture that rollover state.

I set up a keyboard shortcut for capturing a portion of the screen, and not just an entire application or window. I like having the control of the “crosshairs” when I take a screen capture. Once you have the program and the shortcuts figured out, you’ll be able to use the tool with Captivate.

Screen Capture Setup

I like to have all of my screen captures sorted before I build in Captivate, so let’s start there. Let’s say you’re creating training on Google Docs, and your learner needs to practice changing the font style. You can capture the dropdown menu images for the rollovers outside of Captivate. 

file_structure_exampleBefore you start snapping, make sure you have a solid folder structure in place. You don’t want the images dropping into random folders. For complex projects, I’ll create subfolders for each section to keep the images separate.

Once you set up your folder structure, confirm the capture settings, and memorize your keyboard shortcuts, you’ll be able to fly through capturing all the images you need. First thing to grab is the rollover state of the first thing users will click.

Normal State: button_normal_state        Hover State: button_hover_state

When you capture a dropdown menu and its rollovers, there are few things to keep in mind:

  • The rollover state of the currently selected option could look different from the others.
  • Pay attention to what appears behind the menu, especially if you are going to reuse the menu on other screens.
  • You can usually get away with cropping the drop shadow out, if you add it back in when you drop it into Captivate.
  • You don’t need to be exact when you capture the images because you can crop those out later.
  • Save each rollover image with a consistent naming convention, such as menuoption1_rollover or hover_optionA.
  • Pay attention to the dimensions of your rollovers so that everything has a consistent size.

folder_structureOnce I’ve got all my images organized, my files will look like the image here. I typically save the image of the menu with a “z” so that it always appears at the bottom and doesn’t get mixed in with the menu option rollovers.

Captivate Setup

Now we’ve got all of our images sorted, we can add them to our simulation. Let’s assume you’ve already captured the appropriate screens using Captivate’s Software Simulation options. You’ve got a clean background to work with, so now you just need to add the dropdown menu and rollover elements.

To build this interaction in Captivate, we’ll have one interaction that opens the dropdown menu, and one interaction that selects the font style. Technically, you can use either a Click Box or an invisible Button to trigger the interaction (I’ve been using invisible Buttons lately, because they’ve been working better with keyboard shortcuts for learners).

  1. Add the Button and adjust the settings.
      • Transparent button
      • No Caption
      • No Fill and no Stroke
      • Pause until User clicks
      • On Success action is Continue*
  2. Place the Button on the area users must click to open the dropdown menu.

*The On Success action should be Go to Next Slide, if each step of the interaction is on its own slide.

Add Rollover Images

Now you can add the rollover image. Select Rollover Image (Cmnd-Shift-O) from the Objects menu in Captivate. From the window that opens, select the appropriate image for the rollover. When it’s dropped onto the slide there will be two parts: the Rollover Image and the Rollover Area.

The Rollover Image should be lined up in the exact same spot as the normal state of the interaction. When you move the image, the Rollover Area will be left behind.

timeline_show_hideTo line up the image exactly, you’ll want to take advantage of the “hide” feature in the Captivate Timeline. Toggle the image on and off, then move the image as needed.

The Rollover Area takes on the default settings of a Highlight Box, so you may need to change the settings so that the Rollover Area is 100% transparent (change the project’s default settings, so you won’t have to adjust the Rollover Area’s settings again). Then, utilize the Align toolbar to resize and align the Rollover Image and Rollover Area with one click.

align_toolbar

Any time you use a Rollover Image and an interactive object, such as a Button, on the same place on the slide, the Rollover Image must be above the Button on the timeline. If you add the Button before the Rollover Image, you shouldn’t need to adjust anything on your timeline.

Next, you need to have the dropdown menu appear on the slide. Insert the image (Cmnd-Shift-M), and align it with the background image. Again, use that Show/Hide toggle feature in the timeline to make sure things line up appropriately. If you want, you can lock the menu image so that it can’t be moved on accident as you add the other Rollover Images.

timeline_example

Remember, if the Button’s action is Continue, the image will appear on the same slide, immediately after the button in the timeline. If the Button’s action is Go to Next Slide, the image will appear at the beginning of the next slide.

Now you’re ready to add the other Rollover Images to the menu. To really make the menu look like the real system, you have to create the rollovers for every menu object. That’s right – every menu object. Depending on the size of your menus, that can mean 10 or more rollovers.

animation_half_rollovers
Menu with and without rollovers.

Trust me, the extra effort you put into making these details look like the real system will pay off. Your end product will look professional and may even fool a few people into thinking they’re actually in the software.

The good thing is, there are keyboard shortcuts and tricks you can use on all of the Rollover Images, so the process gets easier and quicker each time.

The basic steps for adding a Rollover Image as an element of a software simulation are as follows:

  1. Select Rollover Image from the Objects menu in Captivate.
  2. Select the appropriate image from your folder and click Open.
  3. Line the image up with the background.
  4. Line the Rollover Area up with the Rollover image.
  5. Rinse, repeat.

I hope that you give this trick a try for your next software simulation project. I know it seems tedious, but once you find your rhythm it goes really fast. Do you have a different way of creating similar rollover effects? What tricks have you discovered in Adobe Captivate? Let us know in the comments below!

After receiving a Master’s Degree from NAU in Literacy, Technology, and Professional Writing, Sarah returned to her home town of Omaha, Nebraska where she gathered almost 10 years of experience in Instructional Design. Sarah loves utilizing technology to create training, whether to teach people how to use a computer system, improve their sales numbers, or incorporate a new process into their daily routine. Her background in English and Technical Writing helps keep her focused on writing and editing to provide clear and concise content for training. When the opportunity opened up with the Learning & Professional Development team, Sarah and her family (which consists of a bicycle-obsessed husband, two energetic daughters, and an annoying German Shepherd) jumped at the chance to move back to Flagstaff where they can ride bikes, hike, camp, ride bikes some more, and generally enjoy the outdoors without humidity or mosquitoes.

Check Also

Building a Studio

Building a Studio

So you want to build a studio? First and foremost, congratulations! You are about to …

file_folder_icon

Organization: Naming Conventions

It’s a running joke on my team that I have a strange obsession with organization, …

Comments