- In this video, let's learn how to modify the size and position values for the objects to make them work best in Responsive Projects. For that, let's create a new Responsive Project first. On the Captivate welcome screen under New tab go ahead and double click Responsive Project. I'll go ahead and reduce the magnification level to 66% so that I can get a full view of the stage. Now we'll go ahead and add a shape here.
So I'll go to the shapes and select the rectangle tool. I'll go ahead and draw a rectangle on stage. Now let's switch to the other views. I'll go to the Tablet view and notice how the size is reducing. And when I go to the Mobile view it becomes even smaller. This is happening because in the Responsive Project the default size and position of objects is set to percentage. You can modify these values easily from the POSITION inspector.
Let me go back to the Primary view and go the PROPERTIES inspector. And here inside the PROPERTIES inspector you'll find POSITION inspector as well which is unique in Responsive Project. In the POSITION inspector notice how all the values are set to percentage. Here for the height you can see there's Auto and this helps you maintain the aspect ratio of the object. You can notice here the size of the object is reducing but the aspect ratio is maintained.
Let's go back to the Primary view and if I go and change this Auto to Percentage you will notice that the aspect ratio is not maintained and the shape of the object is changing as per the shape of the slide. This feature is really useful if you want to add a background image or you want some image to cover the entire screen and change it's shape based on the size of the slide. You can easily use percentage values.
Notice how we can transform the shape as a background image. For that let's increase it's size so that it covers the slide completely. One way is to stretch it and try and make it look best on the screen, but the other way is we can go ahead and change this to 100% and width as well to 100% so that it covers the entire screen completely. And here at the top I will change it to 0% and left also to 0% so that it starts from the (0,0) coordinate value here.
Now this becomes a background image and because we have set the height and width to percentage when we switch to the other two layouts, you will notice that it takes the shape off the slide. Pretty nice for having a single color background and even a Gradient background. So if I go to the PROPERTIES inspector and change the fill to some other Gradient. I will just go ahead and change this to green. Notice how the color flows really well, you can even change the direction for the color here and see how it beautifully changes in the different views.
Let's go back to the Primary view. This will work best for your background images and even background images with slide colors. But if you have some image in which aspect ratio really matters, there you will not be able to use percent, percent value. Let's see an example. I'll go ahead and click Media, Characters. And let's add an Illustrated Character here. I'll select this Character and this pose of the Character.
Click Ok, and this Character is now added to the slide. And if you look at the POSITION inspector, notice how the default value is set to Auto and 50%. Let's go to the Tablet view and notice how the size changes, the aspect ratio is maintained over here. But if I go back to the Primary view and change the Auto value to Percentage, notice how the image becomes distorted when you are placing it on the Mobile and the Tablet view.
So for objects where aspect ratio is really important, make sure either height or width of the object is set to Auto. Let's do one more thing here. We move this object towards the right, make a little small, and see what happens here. I want this image to be in the bottom right corner but when I go to the Tablet and the Mobile view, it is moving upward. That's happening because of the Top and Left properties in the POSITION inspector.
Here if we instruct Captivate to follow the Bottom and Right coordinates it will do that. So for that again we will go to the Primary view and we would have noticed that every time I'm making any change I'm going back to the Primary view. That is because Captivate follows the parent-child relationship when we are changing the size and position of the object. So the changes that we make in the Primary view will be followed by the Tablet and Mobile view but not the other way around.
So it's always nice to do all the changes in the Primary view. But if you want some exclusive changes to be made for the Tablet and Mobile view, and you don't want the Primary view to follow that, go ahead and do the changes over there. So here I want to make changes to all three views for the position of this object, I'll go ahead and change this value from Top to Bottom. All you have to do is click the down arrow and select percentage for Bottom and the Top value will be grayed out.
Similarly, go ahead and change this value to percentage and the Left value will be grayed out. Now when you go to the other views you will notice that it is sticking to the bottom of the screen. Again, let's go back to the Primary view, and let's add an object which is dependent on this particular object. And one of the most common example of a dependent object is a caption, so I'll just go ahead and add a shape here. And I will select an Oval Callout.
I'll go ahead and draw this over here and change the tail towards the person. I'll go ahead and type some text here. Say, "Welcome". And now I will go ahead and change the orientation for this as well so that it follows the Bottom and the Right. So here I'll go ahead and select Bottom percentage and Right percentage. And you're gonna learn there's going to be something wrong. So let's go to the Tablet view and notice how this caption is moving above the person's image.
And in the Mobile, it's completely disconnected. That's because the coordinates that this image is following is different from this image. We need to tell Captivate that these guys are together and the best way to do that is to link this particular caption to follow the size and position of this particular object. We'll go to the POSITION inspector and there's this nice option here which says Smart Position. Go ahead and check this and you will get to see where the linking is happening.
So if I select the person's image, you will see that it is linked to the Right and Bottom. And similarly, this caption is also linked to the Right and the Bottom. Let's go ahead and change this linking. To change this link, go ahead and click and drag this arrow and push it toward the left of the image. And as soon as you see this blue line, go ahead and drop it. And this caption will now be sticking to this particular image and it will follow wherever this image goes.
We'll do the same for the Bottom linking. I'll go ahead and drag it so that it is linking to the Top of this image. As soon as you see this popular blue line, go ahead and drop it. Now when we go and view this object in the other views, notice how they are following each other. Now let's go ahead and un-check this value. We are done with this so whenever you have linking objects go ahead and use this. This is a very useful option for linking the objects in a flow chart or if you have objects which are related to each other.
Now let's go ahead and switch back to Primary view. And I will go ahead and add a new slide here. To add a new slide, I'll right-click the thumbnail in the FILMSTRIP, go to Slides and select New Slide from, let me select a Blank slide here. Now let's see another scenario, I'll go ahead and add an image here. Which we are going to use as a background image. I'll go to Media, Image, go to Exercise Files folder, Chapter 09 folder, Images, and here select Background1.png.
This image is now added to the Primary view. Notice what happens with the Default Properties, remember the Default property is Auto for the height and percentage for the width. Let's go ahead and switch to the Tablet view and notice how this image is moving up and there's this blank space left at the bottom of the screen. For the Mobile view also, there's half of the screen left blank. Now one way is to change it to percentage, percentage.
Let's try doing that which worked for the Gradient view. So we'll go ahead and change the Height to percentage and now when I switch to the Tablet view look how squeezed this image looks like. That's not what we want to do. In these views it will be better to use a part of this image. So let's do that. We go back to the Primary view, and here instead of Width being 100%, we will change this to Auto. So we will let Height be 100% and Width be Auto.
So this setting will cover the Height completely and spill out the rest of the image outside the stage. Let's go ahead and check this out. So I'll go to the Tablet view and notice how apart of this image is on the Right and when I go to the Mobile view half of the image is out of the screen. Now here if you don't like this view, you want to use the center part of this image. No problem, go ahead and right-click, select Align and say Center horizontally on the slide. This will center the image on this particular view.
Go ahead and do the same for the Tablet view as well. I'll go and select Align, Center horizontally on the slide. This will allow you to use an image partially on the screen. Let's see one more case here that is off a worldly object. We will go ahead and add a new slide. I'll go back to the primary view, go to the FILMSTRIP, right-click the second thumbnail, select Slides, and say New Slide from, Blank slide.
Here what we will do is, let's add a screen shot and then try and add a highlight box on top of it. So we'll go to Media, Image. And here in Exercise Files folder, Chapter 09 folder, Images folder, go ahead and select Screenshot.jpeg. And click Open. I'll go ahead and increase the size of the screenshot a bit and position it. Now here on top of this strike through text I want to add a highlight box because I want to talk about this particular option.
I'll go to the Objects, select Highlight Box. Here a highlight box appears. I'll go ahead and place this highlight box on top of the strike through image. Make sure that the Height is set to Auto and Width is set 4.8% after re-sizing it. Sometimes when you re-size just one aspect of it, you will notice that things change and that can make it distorted. So if this happens, go ahead and change it to Auto again.
Now with this Highlight Box selected, let's go ahead and change the PROPERTIES of this Highlight Box so that it's more visible. Go ahead and change this to a shade of red. And then Stroke as well, I'll go ahead and change it to a shade of red. Change the Width to 2 point so that it's visible. Now this Highlight Box should be on top of this screen shot all the time, but when we go to the Tablet view notice how it is drifting down. And in the Mobile view it is nowhere on top of the strike through text.
So let's correct this. This can be done if you're using percent relative for the vertical properties which are height, top, or bottom of the object which will move the object based on the Slide width instead of the object. Let's go ahead and do that and here I like the Smart Position option. You will have to go and do the setting for both the objects. So I'll select the screenshot first, go to the POSITION inspector, and here I will go ahead and change the Top property to percent relative, and Height as well to percent relative.
Then I will go ahead and select the Highlight Box, and again make the same changes for the Top property and for the Height. Now let's see if that makes a difference. I'll go to the Tablet view and notice how the Highlight Box is on top of the strike through text. In the mobile view as well, though you can't see it here, let me just make it Best Fit so that you can see it properly. Here you can see that the Highlight Box doesn't change it's place at all. So if you have overly objects, it's better to use this particular option to make your objects look right.
Besides these properties, you can also set a minimum and maximum size for an object by setting the values under Advanced, Accordion, and POSITION inspector. This will resize the object based on the screen size but will limit it from going beyond the minimum or maximum size. This property is especially useful for logos and other blending elements which need to look convisent and be legible at all times.
- Introducing actions, events, and variables
- Creating advanced actions
- Working with lightboxes
- Creating custom navigation
- Controlling audio through screens
- Building custom themes
- Inserting smart shapes
- Making elearning projects responsive
- Creating advanced quizzes
- Converting text to speech
- Being more productive in Captivate