The Flash Aesthetic

It’s hard to identify an art movement while it’s in progress. Like the ups and downs of the stock market, the defining elements of a movement may not become clear until you come out on the other side of the boom or bust.  Even so, the Flash aesthetic has developed enough to be identified and examined.

Many of the common elements of Flash design have evolved because Flash facilitates certain aspects of animation, while making other aspects more difficult. The Flash aesthetic is born when techniques developed to deal with Flash’s strengths and limitations are carried over into other media.

The majority of any art is developed by not beginners learning the form, nor by masters who have learned to overcome its limitations, but by the intermediates – those who still rely on the templates and most obvious uses for the tools provided. The web provides a rich library of examples of these intermediate Flash presentations, and it is here that the Flash aesthetic has been building.

Having attained a critical mass, the Flash aesthetic has begun to move from web-deployed animation to still-frame illustration, television commercials and music videos.

The techniques of the intermediate-level creators have a consistent look and feel – the look brought on by the defaults and most evident manner of using the tools in Flash. Once you recognize this look and feel, it’s fun – a kind of cultural scavenger hunt – to pick out the elements of the Flash aesthetic that have begun to affect our cultural weave.

The Flash aesthetic has a number of elements that set it apart from traditional cell-animations. Of these, I will deal with four: Scaling, 2-D Style, Heavy Strokes and Motion Without Cycles.

Scaling#section2

Chief among these: Scaling elements without fear.

Traditional cell animations use layers of images on a clear film to produce foreground and background characters. Once a character is created for the foreground, it rarely is redrawn at a different size. Only by completely re-drawing the element can you get a larger (or closer) version of the character.

In the original Warner Bros. Looney Tunes shorts, Porky Pig pops out of a hole in the center of the screen and then the hole closes up after his famous line. In a way, this closing hole simulates what a camera movement might do at the end of a close or mid-range shot: pull back.

Why doesn’t the camera simply pull back? Because each frame of such a movement would require a complete re-draw of the sizing of Mr. Pig and the gradient backgrounds positioned behind him. The closing-up dot (which also appears in James Bond intros) simulates the “pull back” camera movement, without the required resizing of the animation.

In live film, however, it is commonplace for a character to approach the camera or vice versa. The “zoom-out,” “zoom-in,” “pull out,” and “close in” camera movements are a staple of traditional film and video work.

Flash’s vector basis gives animation the ability to pull off this type of movement with minimal effort. Notice how easy it is to resize an element in Flash. This resizing can be done with a single click and drag. The more simple a Flash command is, the more it impacts the Flash Aesthetic.

2-D style#section3

Final Fantasy movies aside, 2-D animation is making a comeback with the Flash aesthetic. Again, Flash’s technology is key.

Flat animations without any shadow layer are prominent in Flash movies. In many types of 2-D illustrations the shadow layer is used to lift an element off of its background. In computer-based animation, the most realistic shadow layers use alpha channels.

Alpha channels allow shadows to be created that actually blend in with the backgrounds they are over. Rather than simply making a character’s shadow completely black when they are in a grass field, alpha channels allow the green of the grass to come through.

Without this blending, the shadow is heavy and presents itself as an aspect of the style rather than simply a supportive attribute of piece.

Alpha channels, however, can be processor-intensive. To present a flat image, the computer must simply decide what pixel to change to what color and then make it that color. If there’s a whole area that will be the same color, the computer just has to calculate the edge of the element and fill everything inside.

But with an alpha channel shadow, the computer has to calculate exactly how much to change the pixel’s current color base on a percentage of the original image and a percentage of the current background.

This needs to be done for every pixel that is being updated. And there are no shortcuts for filling large areas with the same color. In order to keep Flash movies running at decent speeds, the alpha channels are first to go.

But here’s the kicker: The alpha channel slowdown goes away when the Flash movie is rendered to video. If a Flash movie is rendered frame-by-precious-frame into a stream of video images, the calculation part of the computing is done once. After the video file is created, the playback rate is not impacted by alpha layers because the Flash movie has been flattened. No further calculation necessary!

So when we see flat images without any shadow layer in, for instance, video format, we’re seeing the limitation of Flash technology being replicated in another medium – the Flash aesthetic at work.

{The video that demonstrated 2-D style is now offline. —Ed.}

Heavy Strokes#section4

Thick outlines that surround elements of the movie are common in Flash animation due to the poor resolution of the average monitor.

The outlines help to make elements “pop” into the visual front and center. At the poor resolution of the computer monitor (where a user is generally less than two feet away from the screen) this visual emphasis is critical in separating foreground from background.

In traditional animation it’s less critical because the viewer is usually much further from the screen, each pixel taking up less room and there by having increased resolution of the overall image. (Notice that the width of the outline of a Flash element can be set with only two clicks.)

Motion without Cycles#section5

The fourth element of the Flash aesthetic is the lack of motion cycles. In traditional animation, when characters move across the screen they do so in a walking cycle, a series of images in which the legs and feet move in a proper walking motion.

But in the Flash aesthetic, characters often lack this movement and are not given their gait and stride. They simply float across the screen.

My impression is that this is a matter of file size and work load. To create the additional movements required for a cycle of four images means three more images to create. The easy way out for the intermediate Flash animator is to simply have the character they’ve already drawn float across the screen. Not only does this reduce the animator’s illustration work load, but it also reduces the file’s download time.

Again, this becomes part of the Flash aesthetic once it shows up in other media. When a music video shows an still image moving across the screen without a cycle, we see techniques developed to deal with the limitations of Flash reflected in a medium that doesn’t have those limits.

See: Heavy.com.

Beyond#section6

Beyond these examples, we’ll continue to see more of the Flash aesthetic in other pieces like Janet Jackson’s video All For You, where the backgrounds have stylistic elements of the aesthetic.

TV commercials, print advertising and billboards will be next. Still images as well as moving images will be affected by this movement – and fine art and commercial art will have another palette to work from.

Welcome to the 21st century. Your first visual movement has arrived.