#Preparing Screenshot Documentation
For some assignments you will be asked to document your work with screengrabbed images and/or videos. Such media are likely to remain viewable for many more years than your software remains functionally executable. This page lists three techniques, for preparing:
- Screenshot images
- Screengrabbed videos
- Animated GIFs
You can take a screenshot of your software with an external tool, or sometimes from within the app itself. You can then use Photoshop, Gimp, Pixlr (in a browser) or any number of utilities to crop and adjust the image. All operating systems have a native screenshot function. Go here to learn how:
http://www.take-a-screenshot.org/
Another method is to save a frame computationally, directly from your software itself. Here is a list of techniques for obtaining or exporting screen images from a variety of popular arts-engineering toolkits:
- p5.js: saveCanvas() or saveFrames()
- Processing: saveFrame()
- OpenFrameworks: ofSaveScreen(string filename) & ofSaveFrame()
- Cinder: use app::Renderer::copyWindowSurface(Area &area) to copy the screen into a file, then save it manually
- PureData GEM: [pix_snap2tex]
To record video of your app running, you will need a screen recording application:
- QuickTime X: Mac (tutorial here)
- Camtasia: Win, Mac
- ScreenFlow: Mac
- SnapZ Pro X: Mac
- ScreenFlick: Mac
Once you have made a screen-grabbed video, consider adding a narration soundtrack in which you are explaining what's going on. You will then need to upload your video to a host such as YouTube or Vimeo.
Animated GIFs are robust, simple, and durable ways to document moving imagery. The easiest way to make one, is to screengrab directly to an animated GIF with LICEcap:
http://www.cockos.com/licecap/
Another alternative is to save out a sequence of frames, such as with the p5.js saveFrames() function, and compile these into an animated GIF. Here are some other techniques for doing so:- Animated GIF maker (online/in-browser tool)
- Animated GIFs using Photoshop (tutorial)