I wrote this tutorial a while back and posted it to LinkedIn. I figure I should probably post this here so others in the Captivate community are aware of the possibilities.

While there are fantastic tutorials on how to create 360 paintings and some great tutorials on how to create spherical images and video from 360 cameras, they still don’t address Captivate nor do they approach things from the perspective of instructional design/eLearning development (or whatever you or your org happens to call our field).

Firstly, I have a small disclaimer to make: I’ve done quite a bit of work on this so don’t ask me how I came to my findings. Let’s just say it was trial and error, math, about 50 different attempts, and a bit of my sanity (I got to the point where I pejoratively started labeling my images “attempt 852″…etc.). I finally found a size that works great and I hope it helps you out.

Secondly, I can’t guarantee this will always work. The version of Captivate I’m using is 11.5.1.499 (2019) which I believe is the latest update. The version of Photoshop is 21.2.0 (CC2020) which is also the latest version. So far it all works, but who knows what HTML5 changes browsers will make or if/when Captivate will no longer allow this. So keep that in mind when attempting this. Some things are outside our control and you don’t want to be the king who tries to build a wall to stop the tide from coming (I borrowed that line from Rod Ward) ☺.

Third, being an ID is so much more than just technical skills, so I’m happy to share these findings. I won’t say more than that, since you can read my profile on LinkedIn about what I’ve done. If you know me, you know that in a former life I was a teacher and this type of sharing just helps me as well as others grow. I like to think of it as my little contribution to the Captivate community for so much that I’ve been taught over the years.

When I first started this 360 journey I followed the tutorials out there for creating 360 paintings (which are amazing, by the way), but I kept running into so many walls (both literally and metaphorically) when importing the images into Captivate. Then I got the idea of simply working with a single layer as a spherical image (yes, that is totally doable in Photoshop) and then working with images and other assets on layers on top of the spherical image layer. It worked. But that’s when I started my insane journey of figuring out the optimal size that would look best for Captivate.

One thing I kept in mind during my trial and error phase was that in Captivate we’re looking out at a spherical image through a fixed window (1024 x 627), so that became my first big clue. Then, and quite by accident, I got curious about using a plain flat image. I had noticed that when importing regular images Captivate completely distorted them (i.e. turned them into spheres or at least attempted to). By this time I had found some optimal sizes but was still using a spherical layer, so I went back to my lab and had at it with figuring out the optimal sizes without using a spherical layer.

All I can say is size really does matter with these images and the 2:1 ratio listed in many places doesn’t work as nicely in Captivate as it does for paintings that will live on YouTube or Facebook. Captivate is its own thing and bless its heart because that’s a good thing.

The Eureka moment for me came with my attempt with the coffee course sample shown below. It turns out a spherical layer isn’t necessary (at least for now) and that Captivate does indeed create the spherical image (sphericize the image? I don’t even know if that’s the correct way to describe what it does but it does it).

However, this successful attempt wasn’t without some compromises. The biggest problem I ran across was the spherical wall of coffee beans became pixelated as I rotated around the image. So I went back to the drawing board in terms of optimal sizes. After attempt 900 (I jest), I found the following: W: 6000 x H: 2000 actually worked nicely, so did having an image frame that was 6000 x 150 right in the middle of the canvas. This might not make much sense to you, so I’ll let the images speak for themselves:

Another view of the sizes that work best with Captivate.

Below is the same image within Captivate:

Below is what this image looks like zoomed in to 100% in Photoshop:

Remember, I did say size matters with these images. What I mean by this is the image quality and not the frame itself. You actually want the frame to be on the smaller side of things. The size of the image you place within the frame makes a big difference. If you want to use multiple frames and multiple images, that is possible as well, just keep in mind a few other things I discuss later in this tutorial.

One thing you want to avoid is a large image frame (over 150px). The larger your image frame the more issues you’ll run into, like weird user experience because the “wall” is just too big or produces more distortion than is necessary. That 150px image frame is a sweet spot (and, yeah, that was another thing that I had to figure out by trial and error). I don’t know if this is the right way to describe it, but the larger the frame in your original image the closer your learners will be to the “wall” that image creates when you load the file in Captivate. Just a bad experience overall. So keep the image size huge, but the frame small.

The other issue I ran across is what I call the seam (or where the left and right edges of the image meet to create the back of your cube or sphere). For this I just had to adjust the image around in Photoshop so that the seam blended in nicely and didn’t create a nasty break in the image. You can, as I show you later, use that seam/break in the image to your advantage.

Once I figured all of this out, I had some fun with my insights and decided to create a template for others to use (link way below Davy Jones’ locker).

Some of you will recognize the pirate ship, the clouds, and the islands above from my last post celebrating Talk Like a Pirate Day. Guess what? It started out as a flat image and not a spherical panorama or a 360 painting.

Captivate did the sphericizing (is that even a word?) on its own. I just had to figure out where to place certain elements so they wouldn’t come out distorted. I think I tried 5 different versions of the sun before I was happy–turns out if you place elements too high they get super distorted. In my case the sun came out like a tear drop, an egg, and, well, finally a sun.

Using solid colors and gaps will help avoid the seam issues I showed above with the coffee photo.

Here’s another proof of concept course using the same approach:

And below I show you how you can use the gap to your advantage!

This is one instance when leaving a gap in the “seam” actually works for the course. Or to put it another way, the image frame didn’t span the entire width of the canvas. In this course the gap became the entrance to the harbor, where the villain enters to destroy the city.

Now on to the good stuff! And what you’ve all been waiting for. If you didn’t read anything I wrote above, this is where you want to pay attention.

This information was hard earned, so I hope some of you out there make good use of it.

And if you can’t figure all of that out, I have attached a PSD template that you can use (sorry there are no assets in it, but it will save you some time, just turn on your guides). The color adjustment layers allow you to quickly change the colors of all the sections.

PSD for 360 images