Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this lesson, we are going to build a click box. A click box is very much like a button. However, it's invisible, so you don't have to worry about styling it anyway. They behave like a button in all other respects. We use click boxes to add interactivity to static images. Let's do that now. We're going to be using the Chapter 7_a file that we developed in the first part of this chapter. If you don't have it open, please open it now and then go to slider number 1. We are going to create a click box. Although we can do it from the Insert menu, it's here under Standard Objects, I'm going to use the toolbox over here on the left.
This here is the icon for Click Box. Click it now. Now you can see that we have a click box. The click box, as I said before is invisible in that you don't see it when it's on the stage. If you look over on the right, we can determine what action it will take. These actions are exactly the same as we see for other buttons. In this case, I am going to turn on Show Hand Cursor Over Hit Area. However, if you leave it blank, you can have a completely secret click area that someone will have to know it's there to be able to use.
Now that we've enabled that, let's move it into the upper left-hand corner of the screen. I would like this to surround the Hansel and Petal logo. What I would like to have happe, when a user clicks it is that we will return to the home slide. Let's take a look at our actions. On Success, I'm going to go to a slide and then I will choose the slide I want to go to. Since, I am on the Home slide now, I can't choose that. So, what we will do is we will is we'll cut it and will paste it onto slide number 2.
We have got it selected, we will cut with Command+X or Ctrl+X, go to Slide 2 and paste with Command+V or Ctrl+V. Now, let's jump to slider number 1- Home. We will copy this now with Command+C or Ctrl+C and we will paste it onto Slides 3 and 4. Now, let's preview our project and see what happens.
Remember the click box is not on slider number 1, so nothing happens up here. We will go down to the Displays page and hover up over Hansel and Petal. Do you see how the cursor changes to a hand? Click up there and we will return to the Home slide and there we are. So now with that click box, we have got button navigation with store, displays, and gifts and we have click box navigation for the Hansel and Petal logo. Let's close the preview now.
Now we will save this as Chapter 7_b. Let's take a quick look at the Timeline before we finish. One of the differences between a click box and a button is that we don't always have an expectation that a user is supposed to interact with a click box. In many cases, click boxes are completely invisible. So, as I said before, they are kind of like secret areas on the page that you have to know where to click in order to get it to do something. Take a look at the Options over on the Properties panel. We had enabled Show Hand Cursor Over Hit Area but you will also see Pause project until user clicks.
This is on by default. Looking at the Timeline, you can see that the pause is actually at the very end of the duration of the click box. Comparing to the buttons, you will see the buttons actually paused in the middle of their duration. You can change the timing of that by dragging this center area to the left or to the right. I am not going to make that change right now. But it's something that you can explore on your own. If you don't want the project to pause until the user clicks, you can disable that function right here. Now you can see that the pause has disappeared.
You can also mandate that the user double-click or that we don't have any sound when we click on it. Lastly, you can mandate that we right-click in order to enable it. Let's remove that Pause project until user clicks on the other two pages. So we will go to Display and disable and the same on Store. I can do that safely because we've already paused the buttons. If I didn't have buttons on this slide however, I might want to keep that Pause project until user clicks on.
Having made those changes, I'll save the document. I will not rename it at this point. Click boxes are a great way for you to add additional interactivity to your projects. They allow you to build both visible and hidden interactive areas that the user has the option to interact with. As you can see from this project, most projects will mix both buttons and click boxes in order to build the type of interactivity that's required for the project.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 69958 Viewers
80 Video lessons · 127380 Viewers
52 Video lessons · 62336 Viewers
59 Video lessons · 48031 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.