# Flash Vector Cartoon (Newgrounds-Era Web Animation)

> Short cartoons drawn and animated in Macromedia Flash for the browser and passed around portals such as Newgrounds. Characters are closed vector shapes with flat colour fills and an even stroke, stored as reusable symbols and moved by computer tweening like cut-out puppets, with looping walk cycles and a few mouth shapes. The tone is absurd, ironic or cute-gory, often interactive. By 2002 it was on television (Home Movies, then ¡Mucha Lucha! on US children's TV). Its portal heyday ran to about 2010, and it faded once Flash Player was retired at the end of 2020.

- Period: 1997–2020
- Where: North America, Western Europe, East Asia, Global / networked
- Origin: Independent animators and small studios drawing directly in Macromedia Flash for dial-up web audiences, from John Kricfalusi's George Liquor Program (1997, made with his Spümcø studio), the Joe Cartoon site (1998) and Tom Fulp's Newgrounds Portal (1999) to China's Flash Empire scene and Korea's Mashimaro (2000). Its limited-animation descent from UPA is indirect, by way of TV limited animation and Kricfalusi's Spümcø, not direct.
- Branch: Digital native
- Also known as: Flash animation, Flash cartoons, Newgrounds animation, Flash movies, Web cartoons, Animutation (its collage sub-strand)
- Page: https://stylogeny.com/styles/flash-cartoon/

## How it works

- Draw every character as closed vector shapes with flat fills and one even stroke weight, or no stroke at all.
- Build figures from simple rounded parts (big heads, pie or dot eyes, mitten hands) so each part can be a reusable symbol.
- Move the figures by tweening rigid pieces like a cut-out puppet, and loop walks, mouths and backgrounds instead of drawing every frame.
- Shade with the tool's linear and radial gradients and glows on otherwise flat art.
- Frame the film as a fixed browser stage with a preloader, title card and replay button, and let the viewer click to set things off.
- Play it absurd, ironic or cute-then-gory, for a community that votes on what survives.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Isolated object](https://stylogeny.com/design-choices/isolated-object/) (characteristic)
- [Full bleed](https://stylogeny.com/design-choices/full-bleed/) (characteristic)
- [Collage & layering](https://stylogeny.com/design-choices/collage-and-layering/) (occasional)

### Space & hierarchy
- [Sequential narrative](https://stylogeny.com/design-choices/sequential-narrative/) (defining)
- [Repetition & rhythm](https://stylogeny.com/design-choices/repetition-and-rhythm/) (characteristic)
- [Single focal point](https://stylogeny.com/design-choices/single-focal-point/) (characteristic)
- [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (occasional)

### Typography
- [Hand-lettering](https://stylogeny.com/design-choices/hand-lettering/) (characteristic)
- [Rounded sans](https://stylogeny.com/design-choices/rounded-sans/) (occasional)
- [Type as image](https://stylogeny.com/design-choices/type-as-image/) (occasional)
- [Bitmap & pixel](https://stylogeny.com/design-choices/bitmap-and-pixel/) (occasional)

### Colour
- [Flat fields](https://stylogeny.com/design-choices/flat-fields/) (defining)
- [Gradients](https://stylogeny.com/design-choices/gradients/) (characteristic)
- [Full polychrome](https://stylogeny.com/design-choices/full-polychrome/) (characteristic)
- [Dark ground](https://stylogeny.com/design-choices/dark-ground/) (occasional)

### Form & shape
- [Stylised figuration](https://stylogeny.com/design-choices/stylised-figuration/) (defining)
- [Rounded & pill](https://stylogeny.com/design-choices/rounded-and-pill/) (characteristic)
- [Distortion & exaggeration](https://stylogeny.com/design-choices/distortion-and-exaggeration/) (characteristic)
- [Geometric primitives](https://stylogeny.com/design-choices/geometric-primitives/) (occasional)

### Surface & texture
- [Flat](https://stylogeny.com/design-choices/flat/) (defining)
- [Gloss & highlights](https://stylogeny.com/design-choices/gloss-and-highlights/) (occasional)

### Ornament
- [Ornament-free](https://stylogeny.com/design-choices/ornament-free/) (characteristic)

### Imagery
- [Flat vector illustration](https://stylogeny.com/design-choices/flat-vector-illustration/) (defining)
- [Comic & cartoon](https://stylogeny.com/design-choices/comic-and-cartoon/) (defining)
- [Found & vernacular imagery](https://stylogeny.com/design-choices/found-and-vernacular-imagery/) (occasional)
- [Photomontage](https://stylogeny.com/design-choices/photomontage/) (occasional)

### Medium & production
- [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (defining)
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (defining)

### Tone & intent
- [Playful & witty](https://stylogeny.com/design-choices/playful-and-witty/) (defining)
- [Ironic & self-aware](https://stylogeny.com/design-choices/ironic-and-self-aware/) (characteristic)
- [Communal & popular](https://stylogeny.com/design-choices/communal-and-popular/) (characteristic)
- [Rebellious & subversive](https://stylogeny.com/design-choices/rebellious-and-subversive/) (characteristic)
- [Warm & approachable](https://stylogeny.com/design-choices/warm-and-approachable/) (occasional)

Avoids: Painterly brushwork, Grain & noise, Paper & letterpress bite, Misregistration & overprint, Hand-painted, Painterly illustration, 3D render, Modular grid, Authoritative & institutional, Luxurious & glamorous

Palette: #000000, #ffcc99, #66ccff, #66cc33, #ff3333, #ffffff

Typefaces: Hand-drawn vector title lettering made with Flash's own pen and brush tools and animated with the cartoon, as on title cards and series logos, Embedded TrueType display faces rendered smooth by the Flash Player (FlashType anti-aliasing from Flash 8), Bitmap-emulating pixel fonts made to stay crisp at small sizes in Flash (e.g. Craig Kroeger's Miniml) for interface text such as preloaders, menus and buttons

Known for: John Kricfalusi, The Goddamn George Liquor Program (launched 15 October 1997), an early cartoon series made for the internet in Flash; Joe Shields, Joe Cartoon (site launched 1 December 1998): interactive Flash cartoons Gerbil in a Microwave (1999) and Frog in a Blender; Tom Fulp, Pico's School (Newgrounds, 1999); Mike and Matt Chapman (The Brothers Chaps), Homestar Runner (site launched 1 January 2000) and Strong Bad Email (from August 2001); Aubrey Ankrum, Rhode Montijo and Kenn Navarro, Happy Tree Friends (Mondo Media, online from December 2000); Zhu Zhiqiang, Xiao Xiao stick-figure fight series (Xiao Xiao No. 3, April 2001), hit on Flash Empire and Newgrounds; Kim Jae-in, Mashimaro (2000), Korean Flash web cartoon of a cute but yeopgi (bizarre) baby-faced rabbit with a plunger on its head; Neil Cicierega, Hyakugojyuuichi!! (2001), an animutation

## Where it comes from, and what it’s close to

- Grew out of: [UPA & Cartoon Modern](https://stylogeny.com/styles/upa-cartoon-modern.md) (1944–1960)
- Influenced by: [Early Web Vernacular](https://stylogeny.com/styles/early-web.md) (1994–2004)
- Led to: [CalArts Style (Rounded Cartoon Character Design)](https://stylogeny.com/styles/calarts-style.md) (2010–present)
- Alike in its design choices: [Saul and Elaine Bass Conceptual Film Graphics](https://stylogeny.com/styles/bass-conceptual-film-graphics.md) (1954–1995), 62% alike
- Alike in its design choices: [Cobi and Mariscal's Barcelona '92 Mascot Graphics](https://stylogeny.com/styles/barcelona-92-identity.md) (1987–1992), 61% alike
- Alike in its design choices: [Yami-Kawaii (Sick-Cute)](https://stylogeny.com/styles/yami-kawaii.md) (2013–present), 61% alike
- Alike in its design choices: [Chat Reaction-Sticker Cartooning (LINE)](https://stylogeny.com/styles/line-reaction-sticker.md) (2011–present), 59% alike
- Alike in its design choices: [Skateboard Deck Graphics](https://stylogeny.com/styles/skateboard-graphics.md) (1973–1989), 56% alike
- Alike in its design choices: [Korean Webtoon Graphics](https://stylogeny.com/styles/webtoon.md) (2002–present), 56% alike

## Sources

- https://en.wikipedia.org/wiki/Flash_animation
- https://en.wikipedia.org/wiki/Adobe_Flash
- https://en.wikipedia.org/wiki/Newgrounds
- https://en.wikipedia.org/wiki/Joe_Cartoon
- https://en.wikipedia.org/wiki/Homestar_Runner
- https://en.wikipedia.org/wiki/Happy_Tree_Friends
- https://en.wikipedia.org/wiki/Xiao_Xiao
- https://en.wikipedia.org/wiki/Animutation
- https://en.wikipedia.org/wiki/Salad_Fingers
- https://en.wikipedia.org/wiki/Weebl%27s_Stuff
- https://en.wikipedia.org/wiki/%C2%A1Mucha_Lucha!
- Fred Patten, Animation World Network (26 November 2003), professionals on making TV series in Flash: https://www.awn.com/animationworld/flash-animation-more-flash-pan
- Animation Obsessive, 'When Stick Figures Fought': https://animationobsessive.substack.com/p/when-stick-figures-fought
- https://en.wikipedia.org/wiki/Mashimaro
- https://ko.wikipedia.org/wiki/마시마로
- https://en.wikipedia.org/wiki/The_Goddamn_George_Liquor_Program
- https://en.wikipedia.org/wiki/Home_Movies_(TV_series)
- Zeh Fernando on Flash pixel fonts and Miniml after Flash MX 2004: https://labs.zeh.com.br/blog/?p=16

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Flash Vector Cartoon (Newgrounds-Era Web Animation)”, https://stylogeny.com/styles/flash-cartoon/