Describing the problem

A typical Captivate project, such as the Encoder demonstration you experienced in Chapter 1, Getting Started with Adobe Captivate 8, involves taking screenshots of an actual piece of software. At the end of the process, the project will typically be published in Flash or HTML5 and placed on a web page. Most of the time, that web page displays many other page elements (such as logos, headers, footers, navigation bars, and so on) in addition to incorporating your Captivate movie. This can lead to a very delicate situation, as shown in the following image:

The preceding image shows the application you need to capture on the left. Let's pretend this application requires a minimal width of 1024 pixels to be displayed without horizontal scrollbars. On the right-hand side of the image is the wireframe of the web page you must put your finished movie on. The page has been designed to fit a 1024-pixel-wide screen and has to display lots of elements in addition to the Captivate content. To cope with the design requirement of the web page, your project should not be wider than 800 pixels.

So here is your problem: you have to find a way to fit 1024 pixels into 800 pixels! Several approaches are available to address this situation. Each of these approaches has its pros and cons, and we will go through a brief review of each.

Resizing the project after the initial shooting

The first approach is a two-step process. The first step is to record the project with a width of 1024 pixels, and the second step is to use the Rescale Project feature of Captivate to downsize the project to 800 pixels.

By recording with a screen width of 1024 pixels, the application is captured in its intended size, matching the student's experience of the application.

The main disadvantage of this approach is that it requires resizing the Captivate project. In Captivate, the resize operation is a one-way destructive operation. It always has a cost in terms of image quality. Surprisingly, the resize operation can result in a larger file size, even if the new resolution is smaller than the original one. Also, if the new resolution is smaller, the screenshots will be smaller as well and the information they contain might become very difficult to read.

Here are a few things you need to keep in mind when resizing a project:

Downsizing the application during shooting

The second approach is to downsize the application to record during the capture in order to fit the requirements of the project. In this example, it means the application would be 800 pixels wide instead of 1024 pixels during the capture.

As far as Captivate is concerned, this is the easiest solution, as no destructive or complex resize operation is needed. But for the captured application, this situation is not ideal. Remember that the application you capture requires a minimal width of 1024 pixels. So, by downsizing it to a width of 800 pixels, it does not have enough room to display all its components and generates horizontal scrollbars. These scrollbars and their associated scrolling actions (if any) will be captured and will appear in the resulting Captivate animation. Also, scrollbars sometimes hide important information from the screen, and therefore, from your students.

Using the panning feature of Captivate

In the movie industry, panning refers to moving the camera while filming. In Captivate, it means that you can move the recording area while capturing the slides.

This approach tries to cope with both the requirements of the application to record and the requirements of the movie to be produced.

The idea is to leave the application at its intended width of 1024 pixels, and—at the same time—define a capture area that is 800 pixels wide. During the recording, the smaller capture area can be moved over the bigger application, as shown in the following image:

In the preceding screenshot, the capture area is the red rectangle. In other words, Captivate only captures what is inside the red rectangle. As you can see, the capture area does not always cover the same part of the application during the recording.

This approach is a good compromise, but it has two major disadvantages. Moving the recording area while filming increases the file size of your final movie. But more importantly, using this approach, your learner never sees the application entirely, which could compromise the quality of the learning process.

Using the Scalable HTML Content feature

The Scalable HTML Content feature makes the published movie fluid, so it fits the screen it is viewed on (even as the screen is resized!).

For example, say you shoot and publish your movie at a size of 1024 pixels, but the movie is viewed on a website where the maximal resolution can only be 800 pixels. In such a case, the Scalable HTML Content feature scales the movie down to 800 pixels so it fits in the available space.

This approach is quick and easy to implement, but it has a major flaw: you lose control over how your content will be actually experienced. Only a small percentage of your learners (those who have the exact same screen as yours) will see the course as you designed it. The other learners will see the course either bigger (which means possibly pixelized) or smaller (which probably means too small to be comfortable).

This option will be covered in Chapter 13, Finishing Touches and Publishing.

Using a Responsive Project

Captivate 8 introduces one more solution to this problem. By using a responsive project, you can rearrange the layout and the content of your course to make it fit various screen sizes.

The main advantage of this approach is that you can control almost every aspect of your project on virtually any screen size. On the other hand, the projects built using this solution can only be published in HTML5, so only the objects supported in HTML5 can be used in such projects. Also, creating a responsive project takes a bit more time and requires using special tools and features of Captivate.

Building a responsive project is covered in Chapter 9, Creating a Responsive Project.

Conclusion

None of these approaches is perfect, but you'll have to choose one anyway. The best approach depends on the project, on your learners, and on your personal taste. Here are some general guidelines to help you make the best choice:

Finally, never forget that you are teaching. Your learners don't care about your sizing concerns; they just want to learn something. If the chosen approach compromises the quality of the learning process, then it is the wrong approach!