Digital native · 1997–2020 · North America, Western Europe, East Asia, Global / networked
Flash Vector Cartoon (Newgrounds-Era Web Animation)
Also known as Flash animation, Flash cartoons, Newgrounds animation, Flash movies, Web cartoons, Animutation (its collage sub-strand)
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.
Make something in this style Get advice in this style Mix it with another style
01
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.
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.
02
Its design choices
From Stylogeny’s vocabulary of design choices: defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.
- Layout & composition
- Space & hierarchy
- Typography
- Colour
- Form & shape
- Surface & texture
- Ornament
- Imagery
- Medium & production
- Tone & intent
- 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
03
Make something in this style
Say what you need, and Stylogeny’s image studio draws it from Flash Vector Cartoon (Newgrounds-Era Web Animation)’s design choices and checks it against them. It takes about a minute, and you get a link to share.
04
Where it comes from, and what it’s close to
Before it
The style it grew out of, and the styles it borrowed from.
Alike in its design choices
Styles that make many of the same choices, related or not, besides those above.
05
Often taken for
Flash Vector Cartoon has no real works recorded yet, so these are its nearest styles by its choices alone, with the choices that tell them apart.
-
CalArts Style (Rounded Cartoon Character Design)
CalArts Style is one of Flash Vector Cartoon’s nearest styles by choices; no real work of either fits the other better.
Choices that tell Flash Vector Cartoon and CalArts Style apart Choice Flash Vector Cartoon CalArts Style Dark ground occasional avoids Painterly illustration avoids occasional Gloss & highlights occasional avoids Painterly brushwork avoids occasional Gradients characteristic — CalArts Style descends from Flash Vector Cartoon: a shared line, so the likeness is inherited.
-
Saul and Elaine Bass Conceptual Film Graphics
Saul and Elaine Bass Conceptual Film Graphics is one of Flash Vector Cartoon’s nearest styles by choices; no real work of either fits the other better.
Choices that tell Flash Vector Cartoon and Saul and Elaine Bass Conceptual Film Graphics apart Choice Flash Vector Cartoon Saul and Elaine Bass Conceptual Film Graphics Comic & cartoon defining — Visual tension — defining Gloss & highlights occasional avoids Limited spot colours — characteristic Gradients characteristic — Both descend from American Mid-Century Modernism in the family tree.
-
Cobi and Mariscal's Barcelona '92 Mascot Graphics
Cobi and Mariscal's Barcelona '92 Mascot Graphics is one of Flash Vector Cartoon’s nearest styles by choices; no real work of either fits the other better.
Choices that tell Flash Vector Cartoon and Cobi and Mariscal's Barcelona '92 Mascot Graphics apart Choice Flash Vector Cartoon Cobi and Mariscal's Barcelona '92 Mascot Graphics Flat vector illustration defining — Light ground — characteristic Sequential narrative defining — Line illustration — characteristic Gradients characteristic — Both descend from Italian Futurism in the family tree.
-
Yami-Kawaii (Sick-Cute)
Yami-Kawaii is one of Flash Vector Cartoon’s nearest styles by choices; no real work of either fits the other better.
Choices that tell Flash Vector Cartoon and Yami-Kawaii apart Choice Flash Vector Cartoon Yami-Kawaii Sequential narrative defining — Pastel — defining Full polychrome characteristic — Rounded sans occasional defining Distortion & exaggeration characteristic — No shared descent in the atlas: they reached these choices separately.
— means the choice isn’t among the style’s recorded choices. Critics recorded each work’s choices with the styles’ descriptions in view, so this shows whether the descriptions hold together, not proof that they are right.
06
Combine it with
Styles Flash Vector Cartoon (Newgrounds-Era Web Animation) pairs well with or plays against, from the research. Each is worked out as a combination: which style gives the type, the colours and the forms.
- Zagreb School of Animated Film Contrasts · Textured, earthy, modernist art-house shorts against the even strokes, gradients and portal irreverence of Flash.
- UPA & Cartoon Modern Contrasts · Same limited-animation logic, but hand-painted, off-register and spare; set against mechanical vector lines and tweened puppets.
- Internet Ugly & Meme Vernacular Pairs well · Shares the ironic, communal portal humour; add MS Paint crudeness and Impact captions for a rougher meme strand.
- Early Web Vernacular Pairs well · Its native habitat: put the cartoon in a cluttered portal page of banners and visitor counters for the full dial-up context.
- Rubber-Hose Revival (Cartoon Mascot Graphics) Pairs well · Both run on rounded, pie-eyed figures; borrow its period title lettering for an Old-Timey parody like Homestar Runner's.
- CalArts Style (Rounded Cartoon Character Design) Pairs well · Direct precursor: both build flat-vector, rounded characters with even strokes that a crew can redraw and tween; this style adds sliver or dot eyes and softer, thinner-limbed proportions.
- Flash-Era Web Design (Flash Portfolio Sites) Contrasts · Made in the same tool at the same time, but the cartoon is bright, loose and character-led, where the portfolio site is dark, gridded and abstract.
07
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
How Stylogeny researches and checks a style: where the facts come from.