What exactly the problem is

A typical Captivate project, like the Encoder Demonstration you experienced in the previous chapter, involves taking screenshots of an actual piece of software. At the end of the process, the project will be typically published in Flash or HTML5 format and placed on a web page. Most of the time, that web page has to display lots of other page elements (such as logos, headers, footers, navigation bars, and the like) in addition to the Captivate movie. This can lead to a very delicate situation as shown by the following screenshot:

The previous screenshot shows the application we need to capture on the left-hand side of the screenshot. This application requires a minimal width of 1024 pixels to be displayed without horizontal scrollbars. On the right-hand side of the screen, we can see the wireframe of the web page we must put our finished movie on. The page has been designed to fit a 1024 pixels wide screen and has to display lots of elements in addition to the Captivate movie. To cope with the design requirement of the web page, our project should not be wider than 800 pixels.

So here is our problem. We have to find a way to fit 1024 pixels in 800 pixels!

Several approaches are possible to address this problem. Each of these approaches has its pros and cons. We will briefly review them one by one.

Resizing the project after the initial shooting

The first approach is a two-step process. The first step is to shoot the movie in a resolution of 1024 pixels and the second step is to use the Rescale Project feature of Captivate to downsize the project to 800 pixels.

By shooting with a resolution of 1024 pixels, the minimal requirements of the application to shoot are met, so the screenshots will capture the application in its intended size.

The disadvantage is that this approach requires the project to be resized, and the resize operation always has a cost in terms of quality. Not mentioning that the resulting project may result in a bigger file size. The smaller project size will also reduce the size of the screen elements of the captured application. In the resulting resized screenshots, make sure the font size is still big enough for the learners to read comfortably.

When resizing a project, it is always better to start with a big picture and reduce it rather than to enlarge a picture that is too small, so, as a first general rule, shoot big and eventually reduce the size, not the other way round!

Downsizing the application during the shooting

The second approach is to downsize the application to shoot in order to fit the requirements of the project. In our example, it means the application would be 800 pixels in width instead of 1024 pixels during the filming.

The biggest advantage of this solution is its easiness. Captivate shoots the movie at a width of 800 pixels and the movie is played back at 800 pixels too, so no special processing is required from Captivate.

There are however several disadvantages. Remember that the application that we want to shoot requires a width of 1024 pixels minimum, so by downsizing it to a width of 800 pixels; we will generate a horizontal scrollbar. This horizontal scrollbar will be captured and will be shown in the resulting Captivate movie. It could also hide some potentially important information from the screen.

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 shoot and the requirements of the movie to produce.

The idea is to leave the application to its intended width of 1024 pixels and, at the same time, define a capture area of 800 pixels in width. During the shooting, the smaller capture area will be moved over the bigger application as illustrated by the following screenshot:

In the previous screenshot, the capture area is the red rectangle. As you can see, the capture area will not always cover the same part of the application during the shooting.

This approach is a good compromise, but it has two major disadvantages. First, moving the recording area while filming will increase the size of your final movie, but more importantly, using this approach, your learner will never see the application entirely, which could compromise the quality of the learning process.

Using the new Scalable HTML content feature

This new feature of Captivate 6 allows the published movie to be resized to fit the screen it is viewed on.

Say we shoot and publish our movie at a size of 1024 pixels, but the movie is viewed on a website where the maximal resolution of our work can only be 800 pixels. In such a case, the Scalable HTML content feature will scale our movie down to 800 pixels so it fits in the available space.

The main advantage of this approach is that it makes our Captivate content ready for the mobile transition. When viewed on a Tablet or a Smartphone, our content will be resized!

The major disadvantage though is that, as a teacher, you lose control over how your content will be actually experienced. Only a small percentage of your students (those who have the exact same screen as yours) will see the course as you designed it. The other students will see the course either bigger (which means possibly pixelized) or smaller (which may mean too small to be comfortable).

This option will be covered in the Scalable HTML content section in Chapter 6,Finishing Touches and Publishing.

Conclusion

No approach 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: