Launch Pad

ID #1043

Why is part of the Captivate movie cropped in the browser? Or, why are there scroll bars around the Captivate movie in the browser?

This is a really common problem when deploying Captivate movies on the web. The problem is not isolated to the Launch Pad. You can google this topic or look it up in the Adobe Forums and see a huge variety of issues - size of screen captures, browser-specific issues, resolution of end-users' monitors, HTML and css/div "clearing floats" issues, etc.

The bottom line is, the most effective remedy is to capture and create smaller movies. Captivate movies have to play back within the web browser - and you have to take into account the required screen real estate taken by the broser for the menu bar, scroll bar, status bar, etc.

Here's how we deal with this specifically in the Launch Pad.

We set the container DIV used to display the Flash movies to overflow: hidden. This will crop the portion of the Flash movie that extends beyoynd the available space of the browser window. If you desire, you can change this value to overflow: auto if you desire to display scroll bars around the Flash movie. Neither of these options are ideal.

In our experience, you'll typically, run out of horizontal space before you run out of vertical space, but you have to take both into account.

Let's go through the numbers for a user with 1024 x 768 resolution. The widest Flash movie you can place in the Lanuch Pad would be:

768 - 8 (4px x 2 body margin) - 225 (menu column) - 12 (4x x 2 padding right column) - (XX browser interface) =
approximately 450 pixels width

Using the Right and Left menu Launch Pad layouts, we've approximated that there's room for Captivate movies at 755 x 540 size. However, this is not a gurantee, and developers need to test solutions in their intended environment.

You options are to:

  • Capture smaller movies.
  • Provide scroll bars around the Flash movie by setting the value in #right .content { to overflow: auto;. By default, this is set to overflow: hidden.
  • Uncheck the option to include borders in the Captivate publishing options
  • Resize movies after capturing in Captivate. Note: perform a File > Save As and save a coyp of your original size movie because resizing is a permanent change to the movie.
  • Use the horizontal Launch Pad layout to allow for more (horizontal) space.

We strongly suggest testing your layout using various browsers and resolutions. You can use free browser resizing utilities such as RJL Software's Resize Browser.

Tags: -

Related entries:

Last update: 2009-02-25 12:18
Author: KCWebPlaza
Revision: 1.2

Digg it! Share on Facebook Print this record Send FAQ to a friend Show this as PDF file
Propose a translation for Propose a translation for
Please rate this FAQ:

Average rating: 4.33 (3 Votes)

completely useless 1 2 3 4 5 most valuable

You can comment this FAQ