Join Anastasia McCune for an in-depth discussion in this video Simple replacements for rollover captions, images, and slidelets, part of Captivate 8: Mobile and Responsive Design.
If you've used rollover captions, rollover images, or rollover slidelets before, you know that they can be a really nice way to make content in your Captivate projects interactive. The thing is, they're not HTML 5 compatible, so they're not suitable for anyone viewing an HTML 5 version of your project. That's, of course, pretty much anyone on a mobile device, so let's take a look at some very simple options for what to use instead. So, in this project, we have a rollover image, and a rollover text caption. If we go to the project menu, and then HTML 5 tracker, we'll see that the rollover images on slide five and the rollover captions on slide seven, so I'm going to click on the slide five one, and it'll take us directly there, and actually, I'm just going to preview this project from here so we can see both of those things in action.
(quiet background video speaker) Okay, so I'm going to mouse over the map here, and we're going to see this image that has the purple countries that highlight where the Landon Hotel has locations, so that's the rollover image. Now, we're going to go on to see the rollover text captions. (quiet background video speaker) So we're just going to mouse over the title here, where it tells us to tap here to read more or less, and this text object comes up that tells us more information about the hotel, so that's the rollover text caption, so I also want to point out really quickly, in case you look at some of the other slides in this project, that the hotels after London, so Paris, and Vienna, and Los Angeles, and all the other ones, have the same setup, and it looks like you should be able to mouse over the header here, and get a text box that tells you more about the hotel.
Those ones are actually not working right now, and that's on purpose, because later on we're going to fix them all in one fell swoop. So for replacing these, at the very simplest, instead of having an interactive element that shows and hides the purple highlighted countries, you could just have that image displayed all the time, and for the text captions, instead of having a rollover for them, you could just have the text appear all the time. This, of course, not as exciting as being able to touch an area of the screen and have the highlighted countries come up.
However, the most important thing is to make the content available to viewers using mobile devices, so if you don't have a lot of time to rebuild a project, or just what makes the most sense is to just display it on the screen without anything fancy, I think that's fine. Now, here's another option depending on what your content is. You might be able to use one of the learning interactions that come built into Captivate. To show you those, I'm going to quickly insert a blank slide, and now I'll go to the interactions menu, and then learning interactions.
There's a wide variety here, from games to a certificate of completion, to interactions that are good for presenting data. These are all HTML 5 compatible. Now, I think the tabs or the accordion ones could be a possible way to display information about our featured Landon Hotels. For instance, if we try the accordion one, and you can change the colors for these, by the way, then we can have each header be one of the hotels, and then put in the text and the picture of each one below.
If you use these, I want to point out that there's a known issue with these learning interactions when you're trying to preview them in a responsive project. This next bit doesn't apply to nonresponsive projects. So I'm going to open up a sample file to demonstrate. So it's actually that same accordion interaction, so when I go to preview my project, I can see the information here for the largest break point, but now when I try to go down to the next smallest size break point, it looks like the interaction didn't resize.
It looks like it's cut off, and the same thing for the smallest mobile view, so that is a known issue with the preview. It works on devices fine, and the way you can actually work around this when you're trying to test your project in Captivate, is back in your project, just go to the break point that you want to view first. Once you're at that break point, then preview the project again. And this time, you'll see the resized interaction just fine.
Finally, another option for replacing rollover images or captions is to rebuild them as HTML 5 content or animation. Now that works if you have someone versed in Adobe Edge Animate, or who can otherwise animate using HTML 5. We'll talk more about how to utilize those kinds of files in Captivate in the movie about replacing text animations and SWF animations, so you'll see that in just a little bit, so we've seen the options for replacing rollover captions and rollover images that don't require anything fancy.
If you do want to get a little fancy, keep watching the next lessons, and we're going to use some advanced actions, and then shared actions later, to get this stuff working in an interactive HTML 5 friendly way. Finally, just a quick note. There is another type of rollover object that exists in Captivate. We've already seen the rollover image, and the rollover caption. The third one is the rollover slidelet. The biggest difference is that a rollover image displays an image when you touch the hot spot. Rollover captions display a text caption when you touch the hot spot.
A rollover slidelet can display an image or text, or an image and text together, and so on. The suggestions I made here, and the other ones that you'll see in this course, apply to rollover slidelets, as well.
- Using the HTML5 Tracker
- Choosing mobile-friendly dimensions and controls
- Adding gesture support and geolocation features
- Adding video
- Ensuring mobile compatibility for nonresponsive projects
- Utilizing smart positioning
- Creating responsive quizzes and simulations
- Previewing and publishing a mobile Captivate project