Join Anastasia McCune for an in-depth discussion in this video Using advanced actions to replace rollover images, part of Captivate Projects: Mobile and Responsive Design.
- View Offline
- Rollover images don't translate over to HTML5 output from Captivate. In this lesson, we're going to use an advanced action to replace a rollover image in an interactive and HTML5 friendly way. The rollover image in question is on slide five. I'm going to preview this project from this slide and we can see how it works. - [Voiceover] Today the Landon is located in 20 countries and 400 neighborhoods around the world. - Okay, so now the audio is done. When you roll over the continents here, another image comes up with the countries in purple that all have Landon hotels in them.
And that's basically what it does, roll over and off and turn on and turn off. So that's what we're going to replace. So first we're going to get rid of that rollover image. And a rollover image is actually made up of two pieces, if you're not familiar with them. One is the actual rollover image and then the other half is the rollover area, which is the hot spot. And in our case they are on top of each other, they aren't always. It actually doesn't matter because I'm just going to hit delete on my keyboard and get rid of them.
So how we're going to replace that is use a combination of a click box, an advanced action, and then that same image with the purple countries. Basically, when someone clicks on the click box, that advanced action will run, that will toggle the image on and off. So we're going to start with the click box. I'm going to go to the interactions menu and then click box and Captivate will put one right on the stage for me. The first thing I'm going to do is go to the properties area and uncheck the success, failure, and hint captions.
Those captions are really useful in some scenarios, like if you have a software simulation and you want to give a user feedback if they've clicked in the right spot or not. But we don't want that today, so I'm going to turn those off. The other thing about click boxes is that they pause the slide, they act like a button. If you look here in the timeline, you can see this little pause icon. And so it will pause the project here until the user clicks, except actually I don't want it to do that because on this slide we also have this next button here that's hanging out.
And this next button has a pause as well. So for the click box with it selected over in the properties again, I'm just going to deselect this check box to pause project until user clicks. So the next button is going to take care of pausing the project until the user is done on this slide. The click box is just going to take care of turning the image on and off. So the other things we need to do to this click box, here in the timeline I'm going to right-click and say show for the rest of the slide. That way that click box is available the entire time my user could be on the slide.
Now I'm going to move it, and I'm going to resize it so it covers up pretty much all of the countries so a user can click anywhere and have the highlighted countries come up. Now we need to add in the image that should appear when the user clicks. So it's actually already in our library, since it was used in that rollover image from before. And it's actually near the bottom. It looks like I'm already there. You might have to scroll down to find it. It's this one called WorldMapOverlay.png.
So I'm just going to drag and drop that onto the stage. And I'm going to move it into the right place or at least as close as I can and probably just going to use my arrow keys here to see if I can get it to line up with the blue images below. And I'm going to turn that on and off in the timeline and see if I've got it, maybe move it over one pixel. All right, so that's pretty good. So a few other things for this image. I'm going to right-click it in the timeline and say show for the rest of the slide.
Also, I'm going to click up to the properties panel and I'm going to give this image a name. Right now it's called Image_65, which is just the name that Captivate gave to it when it put it on the stage. Well, that's not very meaningful or memorable. And we're going to want to know what image this is when we write our advanced action. So I'm just going to call this image WorldMapOverlay. Now, also here in the properties I'm going to click this little icon that looks like an I that's visible in output.
So basically what we're doing by making this not visible in output is it's invisible as soon as the user comes on to this slide. It can be a little confusing because we can still see it now but it will appear for us as the developers. However, during Runtime, like if we actually preview the project from this slide, that purple image should be off waiting for somebody to click on it and turn it on. - [Voiceover] Today the Landon is located-- - Okay, so it's off, now just a few other timeline things that we're going to do.
I'm going to move my click box just above the worldMapOverlay in the timeline in the stacking order. It actually doesn't seem to matter. That click box is going to work no matter if it's above or below the image. It just kind of seems to me like the right thing to do to have the interactive element, the click box, on top of the thing that it's turning on. It just makes more visual sense here in the timeline. Also, you've probably noticed this little part of Canada that is over this text caption here and it's obscuring what the words are.
So I'm going to click on the text caption so it's highlighted now in my timeline. And I'm going to grab that text caption and just move it and drag it above the image so it covers up that part that was sticking out. So that part is done, so we're about ready to write our advance action that's going to control the on and off for that map. The first thing we need to do is create a variable. That variable is basically going to store for us the information about if the overlay image is on or off. So to create that variable, I'm going to go to the project menu and then variables.
You can choose to have user variables or system variables. System variables come with a Captivate project by default. We want a user variable, one that is custom to this project that we are defining. So I'm going to say user and then click add new. So the name I'm going to give my new variable is OverlayToggle. You could really call it anything you want, but that seems to make sense. The value I'm going to give to this is false. And how we're going to set this up is that false means it's turned off, the image is turned off and true means the image is turned on.
So for the beginning we're going to say that the image is turned off and indeed it is, right, because we just turned off the visibility on the slide. So for the description I'm going to put just something simple like toggle variable for map overlay image. That's pretty much all we need. So I'm going to click save, and that variable now appears in the list of variables available to us in this project. So we're ready to create our advanced action. To do that, I'm going to go to the project menu again and choose advanced actions.
So here's where we're headed with that advanced action that we're about to write. We're going to be checking to see if a condition is true. So we're going to be writing what's called an if statement. It will look like this, if overlayToggle is equal to false. So basically, if the map image is off, then turn it on, show worldMapOverlay, and then change overlayToggle to true. So basically you say, yeah, the image is on.
The other half of this equation is going to be an else. So if the map is on, hide worldMapOverlay, and then set the overlayToggle to false. So let's go ahead and write that. So here we're in the advanced actions panel. And I'm going to change this action type from a standard action to a conditional action. We're checking to see if something is true. So the name we're going to give our action is showHideOverlay. And so here's where we're going to write the action.
So we're going to leave this drop down of perform if all conditions are true. We're just going to leave that there. So I'm going to click in this first line, white line under the if statement. And we're going to say if the variable called overlayToggle, and to find overlayToggle you can scroll through this list or you could actually just type OV and there it's found overlayToggle for us. We're going to say if overlayToggle is equal to the literal value of false. So we're basically saying if the map is off then I want you to show, so down here in the actions I'm going to say select the action of show.
You can type S and that'll bring up show worldMapOverlay, so there it is. And then the other thing we have to do is toggle our overlay variable. So I'm going to say assign overlayToggle so I'll type OV, so there's our variable. Assign overlayToggle with the literal value of true with a capital T, else. So now I'm going to click on else and we're going to write the other half of the equation. Else, so this is the condition where the map is on.
So if it's on, we want to hide it. I'll type in W, and it will give us worldMapOverlay. Then we need to set the overlayToggle variable back. So I'm going to assign overlayToggle with the literal value of false. So that should do it, so how this is going to play out, the first time somebody comes to this slide, the image is off and the overlayToggle variable is equal to false. So it's going to come in and it's going to say is overlayToggle equal to false, is false equal to false.
Well, yes, it is, so then show worldMapOverlay, turn on that image, and then change overlayToggle to true, the end. Now when they click on the map again, it's going to say if overlayToggle is equal to false. Well, this time it'll be if true is equal to false. No, it's not, so it'll drop down into the else. So the map is on, so hide the map and then assign overlayToggle with false. So basically just turn it off again.
The third time someone clicks on the map, and you can see where this is going, is overlayToggle equal to false. So is false equal to false, yes, it is. Show the worldMap, assign overlayToggle to true, and so on and so forth, so there's our toggle going on. So I'm going to save this action, our action is done. And I'm going to close, basically all we have to do now is attach this to the click box. We've written the action and it exists in memory. But the way things are now, it will actually never fire. So we need to go and find that click box.
It looks like I've got the click box layer turned off and locked, so I'm going to unlock it. I'm actually going to lock my worldMapOverlay so I don't select that mistakenly. So I'll click here, I've got my click box. And in the actions area, here in the property inspector, instead of go to the next slide, I'm going to say execute advanced action, which is there. Which action do I want to execute, of course, ShowHideOverlay, so let's test this out. I'm going to preview the project from this slide.
- [Voiceover] Today the Landon is located in 20 countries and 400 neighborhoods around the world. - Then it actually works, even if you're not listening to the audio, but-- so I click, and it turns on and it turns off, and on and off, so we were successful. The only last little thing I do to this is change this text caption. It says mouse over the map, and I think that should be changed to touch the map. That would probably be a little more appropriate for somebody viewing this on a mobile device. So there we have it, without too much effort, we've managed to replace a rollover image in a way that works pretty much just as well.
Now, this solution is HTML5 friendly and is going to work wonderfully for browsers on computers as well as browsers on mobile devices.
- 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