Join Anastasia McCune for an in-depth discussion in this video Programming custom controls, part of Captivate 8: Mobile and Responsive Design.
- You can build your own custom controls into Captivate Projects destined for viewing on mobile devices. We're gonna do that here by making a button navigation system. We'll be working on this sample project, which has had the play bar and the table of contents turned off in the project skin, so this button navigation that we're building is gonna be the only way that users have to control the project. I want to say right up front, that this lesson is a little bit longer than most, however, if you're gonna be building Captivate Projects and you need your own navigation you're gonna need to know how to do this stuff, so I hope you stick with it all the way through.
I'm gonna show you a lot of stuff in this movie and you're gonna be able to apply it to your own projects right away. Now since we're talking about mobile devices, first off, we need to consider the fact that people use their finger and not a mouse to navigate around, of course, a fingertip is bigger and not as accurate as the tip of a mouse, so when you create your own playback controls a best practice for mobile would be to make sure the buttons are pretty big, so they're easy to tap. If you can, it's good also to leave some space around a button so a user doesn't accidentally click on another button that might be right next to it, so we've tried to incorporate that principle into this project.
So to build out our button navigation system you could use buttons like you find under the interactions menu, and then button. When you choose that you get a little tiny button on the screen and there's three different types of buttons that you can have. A text button, a transparent button, or an image button. These are the types of buttons that have been around in Captivate since forever. There's nothing wrong with using these types of buttons in your project if you want. I'm actually not going to.
In this project we're gonna use smart shapes that have been turned into buttons. I like smart shape buttons because they can do everything a regular button can but they offer some neat options as well, like defining what the button should look like when someone rolls over it with a mouse and what it should look like when someone presses down on it. You have the ability to save a style and then apply that style to other buttons, plus some other things. We're not gonna get into all those details about smart shape buttons, but I am gonna show you in case you've never made one before, hot to get a smart shape to be a button in the first place.
So you just go to the shapes menu and you pick whatever shape you want your button to be. So I'm gonna choose this rounded rectangle and you just draw the shape on the stage by clicking and dragging. So here we have our smart shape and if you want to change what it looks like here instead of just the rounded rectangle, here in the properties menu under basic, you can drop open this drop down here and there's some other choices of shapes that you could choose. So if you want this to be a star button you could just click star and now it's a star.
You could make it go back to whatever shape that you want. You could type in your button. You could make it say next. You could make it say continue, whatever it is that you want. You can format that button. The character formatting is here in the properties. You could format what the fill is like. You could use a gradient fill or a solid fill. You could even use an image. There's lots of different choices and we're not gonna get into all the details. The important thing is to check this use as button check box.
When you do that something changes on the screen here. The first is that you now have an actions menu for your smart shape button. Just like a regular button you can now choose what happens on success when somebody successfully clicks the button and they can go to the next slide, or they can go to the previous slide, or exit the project, or whatever it is. Also, notice here in the timeline there's this little pause icon. That means that as the play head, this red play head goes down the slide, the slide will be paused here at one-and-a-half seconds by this button.
It'll just hang out and wait there until the user presses the button. Now if you decide that you don't want that, you also have the option to turn that pause off. You just click to the timing area here in the property inspector and deselect the pause after button. So now this smart shape button doesn't pause the slide. We actually have a begin button that pauses the slide right there. it's here in the timeline. This next button is a button and it just hangs out and it's waiting for somebody to click on it, but it doesn't pause the slide.
So those are all choices that you have with smart shape buttons. That being said, I'm gonna delete this one off of our first slide and we're gonna go to slide two. Here we already have some smart shape buttons that I've already set up for this project. There are actually four of them. I'm gonna slide up here in my timeline to the top. We have a pause button that has the visibility turned off, so I'm gonna click through each of these buttons quickly. This one that is for jumping to the next slide is called BTN Next.
The button for jumping to the previous slide is called BTN Previous. The play button is called BTN Play. The pause button is called BTN Pause. I wanna point out also that there's another smart shape underneath all four of those buttons. It's this white rounded rectangle that's behind them and that is just a smart shape and it's there basically for visibility, so you have a nice white background behind these dark grey buttons.
The other thing that I want to point out about these buttons is about the play button in particular, so if I click that and then look here in the properties you can see that it's not visible in output and you can toggle that just by clicking on that I. So not visible in output maybe at first glance seems a little confusing. You can see it right now, but that is for us as the developers. It's still visible, not visible in output means that during run time for your users, when they're watching the project that play button will not be visible and so let's go ahead, I'm gonna turn the visibility of my pause button back on.
In my timeline, let's preview the project from this slide really quickly and you'll see how just the pause button is visible in the navigation. So that hopefully makes sense because as the audio starts you want the user to be able to pause the playback if they want, so that's why it's there. There's one last thing to point out for all these buttons. If you select any of them, I'm gonna go to the timing area and you can see that the pause after check box has been de-selected.
So none of these buttons actually pause the slide. They're there mostly as navigation buttons. That's because in general I want this project to be able to just advance on it's own. That way the user doesn't have to click continue on every screen. This project is pretty reliant on audio, so with these navigation buttons, not pausing the slide, the user can listen. The project keeps going ahead when one sections been viewed and so on and so on. If the user is listening, but they need to pause, they use the pause button.
If they need to go back or forward, they can. So this set up is not appropriate for all projects. Of course, you might want your navigation buttons to pause the individual slides. So it's up to you if you choose to use that or not in your projects. So now you know all about those buttons. The first thing that we want to do is make them available to the user at any time during the project. Right now they're only on slide two. We need these to be available on all the slides. So that's easily done by using your arrow and I'm just gonna draw a selection rectangle around all five of those smart shapes, the four buttons, plus the white rectangle that's behind them.
Now I'm gonna go over to the timing area in the properties and I'm gonna set the display for rest of project. Now it doesn't look like much has happened, but if I click to slide three or slide four or so on, you can see that we now have the navigation available on all of the slides, so that's cool. So let's get these buttons to actually do something. We're gonna assign some actions to them. The ones that are probably the easiest ones to start with are the jump to the next slide and jump to the previous slide buttons.
To get those to work I'm just gonna click on the jump to the next slide button, BTN Next. In the properties, I'm gonna go to the actions area and I'm gonna say on success I want you to go to the next slide. Similar for the previous button. On success, I'm going to go to the previous slide. So those two were pretty easy to take care of. Now let's talk about the pause button and the play button. So the pause button, this is what's displayed to the user when the project begins.
The audio's going, the slide is playing, so the pause button is displayed so that they can pause the playback if they want. So we're gonna write an advanced action for this pause button. It's gonna do three different things. First of all, it's gonna pause the lesson. Second of all, it's gonna hide the pause button and then it's gonna turn on the play button. So that way when the user wants to start the project up again they can click the play button. So to write this advanced action I'm gonna go to the project menu and choose advanced actions.
So we're going to go ahead and start from a blank action, a standard action is fine. We have to give our action a name. I'm gonna call it pause lesson. The first line of my advanced action, I'm gonna double-click here in this first white line here underneath the actions area. The first thing I want this to do is to hide the pause button, so I'm gonna double-click and there's a list of different commands that we could choose from. We could scroll down and find hide. Or you could also just type H on your keyboard and it should bring up hide.
I want to hide the pause button. Remember, that's called BTN Pause, so I can just select that from this drop down. The next thing I want it to do is show the play button. So I'll double click in the first area on the next line. I'm gonna type S, I want it to show BTN Play, show the play button. Of course, finally we actually need it to pause the lesson as well. The way we do that is using a command called assign, I'm going to assign to a variable that already exists within Captivate.
It's called CP Command Pause, so instead of scrolling through and trying to find that I'm gonna type in CP and the capital C-M-N-D and then capital P. There you are, there's CP Command Pause. Assign CP Command Pause with the literal value of one. So I know this looks kind of strange, but really what it does is turn on CP Command Pause, which stops the project. This advanced action is all ready to go.
I'm going to save it as an action. We're gonna write a similar action for the play button but of course it's gonna do the opposite things. It's gonna turn on the pause button, turn off the play button, and then restart the project. So I'm gonna click this button that looks like a plus sign, so we're creating a new blank action. This one I'm gonna call play lesson. So right here in this first line in the actions area I'm going to give it the first command. I'm going to double-click.
I want to hide the play button. I want to show, so I'll type S, the pause button. Right, because when the project is playing you want the pause button to be available so a user can click on it, and then finally, of course, if somebody clicks the play button you want the project to actually play. So on this next line we're gonna assign, there's a variable called CP capital CMND, R for resume, CP Command Resume.
We're going to assign that the literal value of one. So here we go, hide the play button, show the pause button and start the project again. So this action is ready to go. I'm gonna click save as action at the bottom of this screen. My script has been saved successfully and I can click close. So our advanced actions are written. We haven't actually attached them to the buttons yet and we have to do that otherwise those buttons won't work. First, I'm gonna click on our buttons here.
Which one have I got? I've got the pause button here and we can see that in the properties so here on the on success area I'm gonna change this so that when somebody successfully clicks on it, it's gonna execute an advanced action. Which one is it gonna execute? How about the one that we just wrote that is called pause lesson. So easy enough. Now I'm going to super lock that pause button and turn off the visibility so I can grab my play button. I'm gonna change the action for that in the properties area to execute and advance action so when somebody clicks on you, execute the advanced action called play lesson.
That's about it. Let's test the project and see if it works out. So I'm going to preview the project from this slide. So first I've paused the project and you can see that that works and our button changed, so now I have the play button available and I can go forward, continue on with the project.
Cool, so now I was able to jump forward to the next slide and I'll jump back to the previous slide. So you can see that those buttons are working pretty well, so that's great. It wasn't too hard to set those up. Before we go on though, there's a little bit of a tricky scenario to think about. Let's say I'm watching a slide and I've paused it just like we have here.
Now I decide that instead of just hitting play again, I've heard enough of what the lady has to say and I'm just ready to go on to the next slide. So I hit the forward button. Well, the project is going to go forward all right and the project will continue on, but that play button is still gonna be displayed. Well, when a project is playing, you want the pause button to appear, so that as the user is listening, if they want to pause they can hit the pause button.
That's not gonna happen. So let's test this out. We are here, we are paused. I'm gonna click forward and this should turn into the pause button, but it won't. Ah, so how do I pause the project? I actually have to click twice in order to do it and that's a little bit confusing, isn't it? So that's gonna happen with the forward button and the back button, so what we really need to do is go back into our project and then update the actions for the forward button and the back button to be a little bit smarter.
Right now they just do the very simple go to the next slide, and go to the previous slide. We need to update them so that they go forward or back, but that they also turn off the play button and turn on the pause button. So we need to actually write two more advanced actions. So I'm gonna go to the project menu again and we're gonna choose advanced actions. Let's write the one for the jump forward button first. So, I have a blank action here. It's a standard action. I'm gonna give it a name of BTN Next Clicked.
This is what should execute when the next button has clicked. Again, the actions that we want this to do are to show the pause button, so I'll double-click here. I will show the pause button. Next line I'm gonna double-click, I'm gonna type H so we can hide the BTN Play button and then finally, go to the next slide. So I'm just gonna double-click on this next line and say go to next slide. Easy enough. I'm gonna click here and save as action.
So our script is saved successfully. We actually need a very similar action for our go back button, so I'm just gonna click this create a new action button here so we have a new blank action to work with. Let's call this action BTN Previous Clicked. This one is going to be very similar. In our first line here we're going to show the pause button. We're gonna hide the play button and then we're going to go to the previous slide because this is for the previous button.
I'm gonna save this as an action. Our script as been saved successfully. Now we're ready to attach those to our buttons. Here on slide two for our jump forward button or BTN Next, I'm gonna change, in the actions area I'm gonna change the on success to execute advanced action and I want it to execute the one that we just created called BTN Next Clicked. Finally, for the previous button I'm gonna change the action to execute advanced action BTN Previous Clicked.
So let's go ahead and preview the project from this slide and see if we've got that little strange test case worked out. Okay, so we're gonna pause Vanessa. We are going to click forward. When we do we should go to the next slide. The project should begin and this should turn into the pause button. So let's test. And it worked and now let's test it for the back button so when I click this we should go back to the previous slide, the slide will start playing and this button in the middle should turn into the pause button and it worked.
So now our new button actions were successful. This has hopefully illustrated how when you build your own navigation it's worth while to take some time and test it and see if you can break it actually and see if there's any sequence of clicks that a user might do that could break the way your navigation works and if you need to create a work around for that. So we just built out some mobile friendly navigation for the entire project using advanced actions. We built those on slide two and they appear for the rest of the project so they're available for all of the slides.
Now another way to have navigation controls propagate throughout a project is by placing them on a master slide so we're gonna kind of shift gears here and look at a different way to have navigation be included in many different places. So to set up our scenario here I'm gonna jump to slide six, sorry slide seven. Slide seven talks about a hotel that is in London. It has a header that tells you the name of the hotel. It has a couple different pictures of it and then there's also this text box that appears, so how this is supposed to work is when you click on this click box, there's a click box here, the text turns on.
Then you can click here again and the text box will turn off so you can toggle that on or off to read more about the hotel if you want. These other slides are exactly the same way. We have six slides that are this way. One about London, one about a hotel in Paris, Vienna, Los Angeles, San Francisco and New York as well. So the thing I want to point out about all these slides is that they're all about nine seconds long, nine seconds long. All of them, so if we preview the project from this slide, let's see how this works and the problem that we're trying to solve.
So here we are. I see these nice pictures of the London Hotel. I'm gonna click to read the text. Maybe I close it, I'm gonna click again. I'm gonna keep reading. I'm reading and reading, and uh-oh, what happened? We've just gone forward ahead on to Paris. Well, I'm gonna start reading about Paris and you know what's gonna happen here, right? It's gonna go ahead onto the next slide. Well, how do we fix that? One thing you could do is stretch out the length of all of your slides. The thing is you don't know how long a user will want to actually hang out and read the text.
What if the person's a slow reader and what if they're a fast reader? You just don't know and you can't expect them to know that they should hit the pause button to stay on the slide for more than nine seconds. So we need to add a button here that will pause until the user clicks to go forward, but we need a button on all six of these slides. So instead of building it six times we're gonna look at how we can build it once and apply them to all of the slides. We're gonna use master slides to do that.
So what are master slides? Think of them very much like master slides in PowerPoint. What you put on the master slide is displayed through the entire project and that's good for things like a logo maybe that you want to appear on every slide. Captivate has master slides too. So to get there you just want to click off to the side of any one of your slides. So just kind of in this scrap area to make sure that you see the properties for the slide. Over here in the property inspector now I'm gonna click master slide view. So there's this master slide here, this one at the top that's called Landon Hotel Theme.
This one is the master, master, master slide. It's like the king of all the master slides and then there's these sub-master slides below it. They're technically in Captivate called content master slides. They're sub-master slides. So a Captivate project will have some of these master and sub-master slides by default when you create a new project and then you can create your own too. You can see here that the master slide has a purple background on it. Now, on our first sub-master slide it also has the purple background on it and this one is called blank.
You can see that right here and you can give it a name right there it's called blank. That purple background is being pulled from the master slide right here. Now I'm gonna go on to my next sub-master slide, my next content master slide. You can see that this also has the purple background that is pulled from the master slide, but it's also go this light purple that is on it as well and so this sub-master slide is called blank light. So there's some other ones. I'm also gonna point out the one here called two content.
You can see that it's got the purple that again is pulled from the master master slide and it's also go this light purple rounded rectangle on it. It's got a spot to add some pictures. It's got this little line across it and so on. So those are our master slides. So I'm gonna click this button that says filmstrip view and go back to the main project here. If I go to slide one you will see that it is using the master slide called blank.
So is slide two, we can look in the properties area here and see that it's using the master slide called blank. Slide three is using the master slide called blank light and it has that dark purple and the light purple. Slide four is also using blank light so you can see that those design elements come through. All of these hotel slides that we've been looking at, slides seven through 12 are all using the master slide called two content.
If we need a next button on all of those slides a logical place to put that next button would be on the master slide that they all use. So that's what we're gonna do. I'm gonna click to the master slide view again. We're gonna make sure that we're on two content and we actually need to add a next button here. If you slide it over a little bit there is a next button just kind of hanging out on the side just ready so we don't have to spend time drawing one. I'm gonna drag him over to the right spot. Now in the properties I'm also gonna make sure that pause button until user clicks is selected.
That way it will pause the slide and the user can read the text for as long as they want. Now this button needs an action. You can see here that in our on success area it doesn't have any, so this is basically needing to do the same thing as the jump to the next slide button that we programmed earlier, right? It just has to jump to the next slide, but it also needs to make sure that the pause button is displayed in the navigation and that the play button is hidden. So we already wrote the advanced action that does that, so all we have to do here is just add that on.
So on the on success, I am going to execute the advanced action and the one that I want to execute is called BTN Next Clicked. So now I'm going to click off to the side of my slide. I'm gonna go back to the filmstrip view and I'm gonna preview the project from the beginning and we're gonna make sure that everything works as intended and I'm gonna fast forward through the project so that we can get to these hotel slides quickly. (music playing) Okay, so here we are at the London slide and I'm gonna click to turn on the text.
There it is, and I can turn it on and I can turn it off an we can sit here all day long and nothing is going to happen until I click either the jump to next slide or the next button, either one is fine. They both use the same action. So we jumped ahead to the next slide. The pause button is here and that's fine. The next button is ready for us. I can read as long as I want. When I'm ready to go forward I can click next. So you can see that this works for all six of our slides and it was very easy to set up because we put that next button in the content master slide.
So there we have it. We have done a lot. We have seen how you can add navigation controls to a project either by having them displayed for the entire project or by adding them to content master slides and both can be very powerful depending on what you need to use. Before we close I'm gonna point out that there are some other advanced actions related to navigation in this project. They're already built in. We haven't gone over them. You can check them out on your own if you want. The first one is on slide 16. That is the first slide in a quiz.
On this slide I don't want the user to be able to use this navigation here. I want them to be able to use the buttons that are associated with the quiz. So if you click off to the side of the slide and go to the properties and you can see that for the on enter event for this slide that basically means as soon as the user enters this slide it's gonna execute an advanced action called hide nav. If you want to see what that does just click this little button here that looks like a folder and it will open it up and show you what the advanced action does.
The second advanced action that exists is here on the last slide. There is a start over button and that does pretty much what you would expect. You can click here and see what it does. It basically starts you back at the first slide of the project and it also turns on all of the navigation buttons again. So we've made our own custom navigation. We've seen how buttons can pause or not pause a slide by default. We've also seen how we can write advance actions to make them function.
All of that is great, but probably the most important thing when deciding on controls for your mobile Captivate projects is also to keep it easy to use on the smaller screens of mobile devices. All of these fancy controls are fantastic, but if they're too small to click on it doesn't really matter, so be sure to try to keep your buttons big and make sure that your skins work with the overall size of your project if you use a skin. Another cool thing you can include in your Captivate projects as a control for those using mobile devices is gesture support.
That's a really cool feature. We'll discuss it in detail in the next lesson.
- 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