In this post I explain the benefits of a great little freeware application called Sizer, which allows Captivate developers to instantly resize any application or browser window to an exact, predefined size. You can download this wonderfully useful app from this link.
NOTE: It seems to work fine on Windows 7-10 64bit PCs as long as you set the app to Run as Administrator.
Why You Need Control of the Target Window Size
One of the basic objectives of creating a software simulation in Adobe Captivate is that you want the learner to forget that what they’re looking at IS a simulation. Ideally, the learner should be able to suspend belief (as much as possible) and work through the simulation as if it really were the software itself. This is best achieved by removing any distracting details, such as for instance the title bar and window ‘chrome’ that normally surrounds the app. When your target is a web application running in a browser, you may also have lots of extraneous toolbars that eat into your available screen real estate and further distract the learner.
Captivate always had the ability to snap to an existing application window, or set your capture size first and then snap the app window to that instead. But if you just ran with these options, what you ended up with once you published to a browser was a replication of unnecessary details such as the title bar and window controls, as shown in the screenshot here:
Snapping your capture window to an existing browser or app window was only much good if you wanted your project to be exactly the same size as whatever the window happened to be at the time. And then there was the added problem of splicing in new capture screens at a later date. What we needed was greater control of the target application window.
Capturing the Application Area
My preference has always been to capture just the application area itself, not the window in which it runs. This has two advantages:
- It maximises the area available to display the app screens for browser-based output, and
- It reduces the amount of visual distraction for the learner. No double-ups of title bars, toolbars, and controls.
In the early days of Captivate this meant a lot of fiddling around to get the browser window exactly the correct size with the top-right corner of the capture frame positioned pixel-perfect at the top-right corner of the application…inside the browser or window.
More recent versions of Captivate have an option to capture an Application Region, which could be any area inside the application which the capture window can detect and snap.
But if you are trying to end up with captures at specific pixel dimensions, this still necessitates having the window surrounding the application set to a slightly bigger, yet exact size. Microsoft Windows itself provides no way to specify the size of a window’s internal display area (i.e. the part of the window that displays content). Web-savvy developers can use JavaScript to artificially spawn a browser window at a given size and call the application into it. But all of these methods are still too inconvenient and time-consuming for most Captivate developers.
Sizer – total control of browser window dimensions
The best solution I’ve found so far for all this fiddling around is a great little free-ware app called Sizer. Just download, install and run this simple app to get complete control over the dimensions of the windows you need to capture. It allows you to just right-click the bottom-right corner of any Windows Explorer, browser, or application window to select from a context menu of preset sizes.
Sizer runs in your System Tray. Just right click the Sizer icon there and choose the option to Configure Sizer…
As you can see, there are quite a few options. But the most important one for me is the ability to set up and name one or more custom window size presets which will be added to the default right-click menu.
For example: I have a client whose LMS and SOE (standard operating environment) require me to use 995 x 627 pixels as my Captivate project size.
So, first I work out exactly how big the external window needs to be so that the internal application area will be exactly 995 x 627.
Then I create a custom configuration in Sizer for that external window size. When I need to capture a project for this client, I just run Sizer, open the client’s web application in a browser, right-click the bottom-right corner, select my custom window size, set Captivate to Application Region, and snap to the internal area of the browser.
Pixel perfect captures every time! And if I have to come back at a later date for more captures to add into the project, I know they’ll be seamless when integrated with the rest. This has saved me a lot of time and frustration.
