Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this lesson we are going to take a look at a feature of Captivate called a rollover slidelet. A rollover slidelet is different from a rollover image in that when you use a rollover image you're able to display one image. In the case of a rollover slidelet, however, you're able to display just about anything that you can put on a slide and have that appear and disappear. This means that you have a lot more flexibility when creating the type of rollover content that might include more than just an image, but also might include some text or perhaps other types of objects that you would want to display.
We are going to be using the Chapter 7_d file that we built earlier in this chapter. If you don't have it open, please open it now and then let's go to slide number 3. I would like to add an image to this slide and that's in your Library already. It's called wide shot inside flower shop. Open your Library and if you don't have it available, you can always recover it by switching to the Classic workspace. Here's wide shot inside flower shop and let's drag it onto the Stage. Once again it's too big so we will reduce it to fit and then shrink it some more.
Be sure to hold down your Shift key so that you will maintain proportions. Make it about that big and we will stick it just about there. I'd like to leave some room at the bottom, so we'll have some space where our slidelet can be. Let's insert the slidelet now. There's an Insert Slidelet tool here and we can also get it from the Insert menu. This is located under the Standard Objects and you'll see Rollover Slidelet.
The rollover slidelet has two areas. It has the rollover trigger area, which is highlighted in blue, and it has the window that will be shown when we roll over that area. When you create the new slidelet they are nested together, so I need to split them apart. First I will take the display area and move it down here. Let's make it to run across the bottom of the screen. It can overlap the picture a little bit. The next thing it will do is it will put the slidelet rollover area right here.
Select the trigger area and drag it over right about there and we can make it a little bit bigger. I'd like not to show the border, so we will turn it off and now let's concern ourselves with the slidelet itself. Select it and now let's look at the Timeline. Where did all of our stuff go? Well, when you're in the slidelet, you're looking at a complete slide that will be exposed by that rollover action. This slide is currently empty.
So we need to put some things in it. Let's switch to our Library and I would like to grab bulbs on display. We will grab bulbs on display and drag it onto the Stage. Now select the Properties and we are going to crop it. Use the Crop Image function and what I'd like to do is to focus on this giant bulb here. We need not to constrain proportion, so deselect that and you can make it taller and a little wider to get the entirety of the plant.
We're ready to go. Click OK and this image is still quite large. Let's Fit to Stage so that we can select it now. Here's our cropped image fit to the Stage. Reduce it so it fits in the slidelet. Hold down your Shift key and then you can reduce and now the image fits entirely within the slidelet. Our image needs to get put into the slidelet now and so we can do that by selecting it and then cutting with Command+X or Ctrl+. And then select the slidelet.
Once we have selected the slidelet we can paste the image into the slidelet. We'll do that with Ctrl+V on a Windows computer or Command+V on a Macintosh. Now that we have the image in the slidelet we can slide it off to the left. Now, it's where I want it to be. We can insert other content into the slidelet as well. Select the slidelet and right-click. There's an Insert menu that includes some of the Standard Objects as well as image animation, Flash video, or text animation and widgets.
Let's insert a text caption. Type the phrase "Bulbs can be big too!" And then select all with Command+A or Ctrl+A and we will make it to be 40 points. Hit Escape to get out of Editing, and we will slide it up into the middle. Lastly we will change our caption type from HaloBlue to Glass Green. Slide that up a little bit more. All right! Now, we have our slidelet that consists of this text caption and this image.
It will be triggered when we roll over this area right here. Let's preview from here and see what we get. We will hover over the slidelet and you see that displays with the blue outline. It then disappears. We will try to trigger it again. There we go. It appears, and then it will disappear. Let's go take a look at the timing for the slidelet. The slidelet persists for three seconds.
You can change the amount of time that the slidelet exists on the Stage by dragging here left or right. You could also select the slidelet and adjust its timing properties. Let's extend it to 5 seconds. Of course having done that, we want to extend these elements as well. Select them both and use Command+E on a Macintosh or Ctrl+E on a Windows computer to extend them. Let's go back to the rollover area for the slidelet and show you one more feature.
The slidelet can also act like a button. Once you put your mouse over the slidelet you could click and if you were to click, then you could choose any one of the button actions that might appear. You can also assign a keyboard shortcut. Lastly, the rollover itself can also trigger a behavior. So think about that. You have the ability to assign different responses to clicking and to rolling over. If you don't need all of those options then you may want it to stick around.
In this case it won't behave like a button. It'll simply behave like a rollover area. In the rollover you can determine a response behavior. However, nothing will happen when you click on the rollover area. Let's leave it this way because I don't need it to be something that's going to respond to a click. Having made that change we will preview one more time. And when we roll over now, it will last for six seconds before it disappears.
Let's close the preview and save. We will call this Chapter 7_e. We've barely scratched the surface with rollover slidelets. You can do a lot of things with the rollover slidelet that you can't do with the rollover image. Use rollover slidelets to add more content and more information to your rollover areas.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 64863 Viewers
80 Video lessons · 124401 Viewers
52 Video lessons · 60325 Viewers
59 Video lessons · 46149 Viewers