Custom Hotspot Icons for Captivate VR Projects.

While researching virtual reality projects and 360° slides for our upcoming book on Adobe Captivate 2019, I came across interactive Hotspots. These handy little icons let your audience know that there is more to your virtual reality course than good looks. With them you can incorporate other interactive features like navigation, media controls, and quizzing. The only limiting factor is the variety of hotspot icons that is available. Or so it would seem.

The Work Around

At the bottom of the Hotspots menu is an unassuming menu item labeled, Image. The feature allows you to use your own image as a hotspot. This got me thinking, “does the image have to be a photograph or can I use my own graphics?” Turns out that no, it does not have to be a photograph and yes, you can use your own graphics. In this post, I won’t cover all the details about creating the graphics themselves, rather, I will focus on the process of converting graphics into a suitable format and size for vr hotspots.

First you need a graphic for the hotspot or the drawing skills and imagination to create your own. You will also need a graphic editing tool like Adobe Photoshop or Illustrator. You could use an alternative graphic application like PowerPoint, so long as it supports the export of .jpg or .png file formats. In fact, we have several video tutorials on creating icons and other graphics using PowerPoint. Click here to see the complete list.

Sizing Your Graphics

When you have decided on your graphics, it is time to size them appropriately. The default set of icons in the Captivate Hotspots menu are exactly 36 pixels by 36 pixels. You don’t have to maintain those same dimensions but it is a good starting point. If you must scale down your graphics to match this size, details in the graphics may become too small or disappear all together. You may discover that you must simplify your graphics in order keep them identifiable at smaller sizes.

Exporting Your Graphics

Now that your graphics are the appropriate size and you have cleaned up any loss in detail, you are ready to export your graphics. Most applications have either an Export command or at the very least a Save As command with which you can create a copy of your file in another format. Captivate looks for .jpeg, .jpg or .png file types when you use the Image option in the Hotspots menu. Let’s take just a moment to review these formats and decide which is the best for your graphics.

The .jpeg or .jpg (pronounced “jaypeg”) format is a very common graphic file type. It supports millions of colors and has a built-in compression process to reduce your file sizes. It is known as a “lossy” format because it removes detail information in order to save on file size. This format is good for images and graphics that have subtle color transitions but it does not support transparency. During the conversion to the .jpeg format, transparent pixels will become white. Some graphics software will give you the option to select a color other than white. This format is best for photographs because the compression will reduce the file size and will not affect the image quality unless it is set too low.

The .png (pronounced “ping” or “P-N-G”) format is like the .jpeg in that it supports millions of colors. This file type is known as a “lossless” format because it retains all detail information which means that the file sizes are larger than comparable .jpeg formatted files. The .png format also supports transparency which makes it perfect for line art, text, and icons.

Importing Your Graphics

Once you have your graphic appropriately sized and in the correct format, return to your captivate project and select Image from the Hotspots menu. An Open dialog box will appear and you can navigate to your graphic. Choose between the .jpg or .png format in the format menu located just above the Open button in the lower right corner of the dialog box. Select the graphic you want to use and click the Open button to place your graphic in the center of your screen. You can move the graphic around the 360° background to position it exactly where you want it. I find it best to locate the position in the 360° background first. I center this position on my screen first, then select the Hotspot option in the tool bar. Either way works but the latter seems more intuitive and easier to get right the first time.

Using your own graphics is a great way to personalize or even brand your Captivate 360° slides and VR projects. The process is not complicated and can even be a lot of fun. I encourage you to try this on your own but just in case you are a little hesitant to jump in to creating custom hotspot graphics, I have created some common interface icons for you. They are free for you to use in your own projects without any attribution. Use the download link below to grab these FREE icons for yourself.