Consistent browser size with Captivate recordings

Adobe Captivate is a great tool for creating demonstrations on your computer.  In a case where you are capturing a process in a web browser, a major hurdle is consistency when re-recording or editing the demonstration.  As you begin a new recording, you need to make sure the browser window is the exact same size each time you record.  Otherwise you’ll see a jump from slide to slide.  Here are a few tips to make this process a lot easier.

Only record what’s “inside” the browser.

In most demonstrations, the viewer does not need to see the browser chrome (buttons, address bar, bookmarks, etc).  Resize your browser so Captivate’s recording area is just inside the edges.  Don’t forget to include the scroll bars in case you need to show the page scrolling down.

Before you start recording, write down your browser’s size

Once you have the browser sized correctly, you need to make sure you save the size for future recordings.  Go to http://whatsmy.browsersize.com and write down the Browser window width and Browser window height.  You’ll need to know this width and height the next time you want to add/edit the recording.

Next time your record, make sure the browser is the same size

This is the easy part.  Remember the width and height you wrote down when you first recorded the demonstration?  If you’re like me, they are probably on a random Post-it note underneath a stack of papers.  Once you find the width and height, put this line of JavaScript code in the address bar in your browser:

javascript:resizeTo(992, 744)

Of course, replace the 992 and 744 with your width and height you saved from the first recording.  You should see the browser window resize.  Now you can position the recording area inside the browser and start recording

Comments are closed.