Teaching the Value of Computational Thinking to Time-Based Digital Media Students Using ANI 201: Animation I

Scott Roberts
School of Cinema & Interactive Media
DePaul University

April 2, 2009

The majority of students studying time-based digital media production (animation, digital video, interactive media, etc.) view computer science with a mixture of fear and disdain. Getting these students to accept that computational thinking skills are relevant, let alone useful, to their work is a challenge. Yet the increasing use of scripted automation in software such as Photoshop, After Effects and Maya are making these skills indispensible for creative professionals working with the moving image. One educational approach is to show students a pragmatic tool that will help them in a larger project, and then break the tool down into components that demonstrate computational thinking concepts.

The Concept of Automation

If we analyze digital video at the level of the frame it can be abstracted into large amounts of discrete, incrementally changing data. Manipulations of one frame can be automated and applied to any number of other frames; the automation of iterating changes enables freer creative experimentation with an efficient feedback process. A student who recognizes the way that these processes can be separated and adapted to multiple uses and software will be able to work faster and with more creative control.

Digital Media Automation Learning Goal

Students should understand the pragmatic value of automation for digital media manipulation. They should be able to apply the principles of automation to a variable set of objectives in a production environment.

The Use of Automation for Hand-Drawn Animation

In ANI 201 Animation I students are introduced to hand-drawn animation, an art form that appears far removed from computation. Since its discovery in the late 1800’s, however, technological innovation has been critical for the practical and economical production of hand-drawn animation due to the large number of drawings required (from 8-24 drawings per second). One aspect of the process, the cleaning up and resizing of the scanned drawings, can be made simpler by using Photoshop’s Action and Batch Processing tools.

After completing approximately 60 drawings for the project, students input the drawings into Photoshop using a flatbed scanner that has been adapted to 3-pin registration (a method that allows accurate registration between successive drawings). In order for automation to work, it’s critical that all the drawings are correctly registered to each other and are of equal size when scanned. The raw scanned images are stored in an appropriately named folder, and the files are numbered sequentially. Another empty folder should be created ahead of time for the processed drawings.

  1. Open up a representative drawing in Photoshop. This drawing should be one that allows them to judge the borders of the image area frame, and be representative of the value range used in most of the images. Usually a drawing from the middle of the sequence works best.
  2. Select the Actions tab (open it under "Window" if it isn't open) and New Action... Give it a name that will help you remember its use. This turns on the Action recording (notice the red dot at the bottom of the Actions window).
  3. If your scans need to be turned, select Image > Rotate Canvas and choose the appropriate direction.
  4. Adjust the black and white levels by selecting Image > Adjustments > Levels... and move the sliders to get a good contrast between the blacks and whites, or use Auto Levels if this doesn't make sense to you.
  5. Adjust the image size to video size by selecting Image > Image Size. It's better to have an image slightly larger than your frame than smaller, since you can shrink it down without losing quality.
  6. Make any other adjustments (I can't think of any, but you might theoretically use a filter or something) and then Stop your action recording by clicking on the black square at the bottom of the Actions window.

You now have your Action ready to apply to all of your drawings at once, using batch processing. You need to close the image you were using (do this AFTER stopping your action recording).


Batch processing

  1. Make sure that your unprocessed scans are all in one folder, and are numbered sequentially. You also need another empty folder for saving the processed scans.
  2. Make sure that everything is closed in Photoshop. Select File > Automate > Batch.
  3. Make sure that the action you just created is set as the Action.
  4. Under the Source: section, click on the Choose button and find your source folder. Leave all the options in this area unchecked.
  5. Under the Destination: section, choose Folder from the pull-down menu. Then click on the Choose button and find your destination folder. Leave all the options in this area unchecked, unless you'd like to rename your saved files for some reason.
  6. Select Okay to start the batch processing. Sit back and imagine the old days when people had to do repetitive work themselves.
  7. Open up one of your processed images from the destination folder to check that everything worked.

You should now be ready to import your images into After Effects (see the related FAQ for help).

Discussion Questions

  1. What are the limitations of the Adobe batch processing system? What can’t it do?
  2. How does the creation of a batch processing script differ from creating a computer program?
  3. How could the ideas of batch processing be applied to other animation/video software, such as Flash, After Effects, Maya or Final Cut?
  4. Show and discuss a simple example of using the scripting system in After Effects.


Once students learn the basic process, and its usefulness, they need to understand that the strength of an automated system is that it enables flexibility and experimentation. There are numerous examples that can be used to adapt the script that they’ve created.

  1. Students will choose a step in the automated process and batch process the same group of files using different settings. Possibilities include: resizing the target frame, changing the levels settings, applying a sharpen filter, cutting a section of the image that contains an unwanted scanning artifact, etc.
  2. Students will be asked to figure out how to best tackle a production problem using batch processing. For example, “You have a set of 100 high resolution images that are to be processed for use on a website. You are asked to create one set of the images resized to 600 pixels wide with high quality JPEG compression, and another set resized to 300 pixels wide with medium quality compression. Describe the steps you would take to accomplish the tasks efficiently using batch processing.”