DC Comics

Mini-animations

DC Comics hero image

The Challenge

Create small animations for the DC Comics website based on the cover art of the latest comic books (circa 2002).

Various issues of DC Comics titles

The Approach

At the turn of the century the world wide web was smaller, slower, and much simpler than the one people enjoy today.

90's style DC Comics home page

Constraints on bandwidth meant that any animation must be small and heavily-optimized. The limited list of content creation tools and browser plug-ins meant that animations lasting more than a few seconds were nearly always made in Flash.

Structure
  • run a 15 second animation
  • loop animation three times
  • end on poster frame
  • link to appropriate comic book
Technical Requirements
  • must be 200 pixels wide and 80 pixels high
  • must be optimized for speed
  • must be designed and developed in Macromedia Flash (pre-Adobe)
Success Criteria
  • follows the standard structure
  • meets all technical requirements
  • is engaging to the audience

The Process

Each animation followed more or less the same process:

  1. Collect cover art and in some cases supporting promotional material
  2. Come up with a pitch for the animation.
  3. Receive approval from the online editor.
  4. Create the animation in Macromedia Flash.
  5. Review/revise animation based on feedback from the online editor.
  6. Send completed Flash SWF file to the online editor.

The Results

Each animation followed the prescribed structure and met all of the technical requirements. While exact figures were not shared, the animations did result in greater interest in the comic books based on clicks.

Original size: 200x80

For presentation on this website I converted all Flash animations to modern video and doubled their original dimensions from 200×80 pixels to 400×160 pixels, so some pixelation is noticeable. And while the originals looped three times, these videos only loop twice.

JD gained experience in animation

Batman: The 10 Cent Adventure

The moving red spotlight of this animation was inspired by the cover art.

Old PC monitor

Green Lantern #146

This animation uses Flash's support of "objects within objects" to create the glowing eyes.

Old PC monitor

Batman: Gotham Knights #25

This animation delivers a walking effect by moving a static image.

Old PC monitor

The Dark Knight Strikes Again

The lightning in this animation was inspired by the original miniseries The Dark Knight Returns.

Old PC monitor

The Titans #36

Multiple instances of the same object could move simultaneously using ActionScript, Flash's scripting language.

Old PC monitor

The Spectre #11

To "fill out the crowd" in this animation I used Photoshop to multiply the number of Spectres.

Old PC monitor

Have You Hired Me Yet?

What are you waiting for? Email me quick before somebody else does!

Email JD