Casual overview of Flash – 2D animation

This is some introductory class curriculum I threw together.

Casual overview of Flash – from a traditionally trained 2D animator, and user of Flash for an efficient home studio. (Not a web developer.)

Flash was originally developed to author web content, such as websites with interactivity. Animated ads embedded in your browser may be the most common examples of it you see today. “Flash” may refer to the authoring app itself, or content delivered in that file format. A web browser uses a Flash player plugin to play it.

Interactive Flash websites have fallen out of favor in recent years. Much of that content is on its way out. HTML5 is replacing Flash. Why?

HTML5 is an open standard. Flash is a closed, proprietary technology maintained by Adobe, one company controlling an important underlying method of delivering web content. See:

HTML5 will allow animation and video much the way Flash does, but as far as I know, that must be done through code (such as Javascript and CSS3). Flash content, on the other hand, needs no code to be delivered using Adobe’s authoring tools. In time, perhaps Flash’s method of authoring will be updated to translate its stuff for HTML5, or a 3rd party application will do it, but I can’t comment about that.

Flash will remain an excellent authoring tool as it is now, for certain content that isn’t meant to be universally web-based. Interactive Flash games embedded in apps will probably remain popular. So will the subject of this class, 2D animation for delivery as video files. This can be delivered as Quicktime movies, uploaded to Youtube, put to DVD, or broadcast.

Let’s step back to the original reason Flash was developed.

Early web content needed to use low bandwidth, because broadband wasn’t in place, and most people accessed the web via dialup. This ruled out heavy video content. For content limited by these constraints, Flash delivered a lot of bang for the buck.

Flash used code to trigger animation and interactive actions on static assets. (You download art of a character once, and then a Flash action slides it around the screen. That’s one piece of art, plus a bit of code, instead of many many bandwidth-hogging video frames.)

Flash uses Vector images. Bitmap images assign a math value to every pixel. Most video you see plays a series of bitmap frames. When you have raw, uncompressed HD video, this makes the files huge. Consumer devices don’t play raw HD video, and even highly compressed video was hard to deliver with low bandwith internet. Compression on bitmap images and video uses math algorithms to reduce large amounts of superfluous pixel info. Vector images conserves file size in a different way.

Vectors don’t apply values to every pixel. They specify points on a line (most simple line: point A to point B), curvature of line, what kind of fill is bordered by lines, and alpha (transparency) value for fills. Naturally this creates images that takes far less math to describe, and less file size. Vector frames can use much less data than bitmap frames.

What is the visual strength of bitmap images? Photorealism.

What is the visual strength of vector images? Hard edges and precise graphics, and ability to scale independent of pixel resolution.

A cool thing about using Flash when web constraints are not so important, is the way you can mix the two approaches. Video or photo collage and vector art can be used at the same time on the Flash timeline.

Here’s an interesting exercise:

Share favorite examples of pure vector animation, and examples of mixed approaches, then compare how (and why) each approach was used.

Let’s discuss Flash as an animation authoring tool, and it’s aesthetics.

Flash was not originally developed to help with frame by frame drawing. It was so well suited for delivering content to the web that it came to be used that way, sometimes as a sort of cheap short cut to approximate traditional cartoon animation. A lot of this stuff was not very notable for quality, but the best of it used limited animation styling like the kind developed in the 1950’s and 1960’s by the UPA and Hanna Barbera animation studios.

Those studios thrived at a time when North American animation was in a severe drought, due to the fading away of theatrical distribution after Hollywood’s “golden age”. This happened after the demise of the Hollywood studios “block booking” system. Features and short cartoons would be budgeted and created as packages, distributed to theater chains owned by the studios (vertical business integration.) Animation is very expensive, and in this type of studio system, it was easier to produce animation tied to live content without as many budget concerns. The system was broken up using anti-trust laws meant to end studio monopoly and separate production and distribution. This left animation studios with tiny fractions of their previous budgets to develop shows for the new (small screen) medium of television. The most successful worked inside the new limits, and used them as strengths. Flash animation started as a way to produce inside limits, too.

What we have now, is an authoring application that has evolved to be an entire studio in a laptop, accessible to the independent artist. It’s gone through many versions that lacked some needed features for this purpose, or had clunky ways to achieve them. Many features haven’t changed in a long time. Some people have criticized Flash for having too much “bloat” due to the way it evolved, or for being buggy or unstable. You may learn to avoid trying certain things with it, or try doing them in small chunks. One I can mention is its reputation for having trouble keeping sound synched for long scenes (these concerns may be adjusted by version updates.) A workaround to avoid such a problem would be to break up a long scene into smaller ones. Actually, once you get used to the environment, you can be extremely productive working in the particular style that’s influenced by the tools Flash provides.

Flash drawing tools have a certain feel that comes from working with vectors. Drawing with “thick and thin” line weight is not easy. Flash may distort your intended lines by grouping the vector points mathematically, and not in a visually pleasing way. You can learn to adjust the way it translates points into lines, edit individual points, massage the lines into place, “optimize” them, and accept a certain degree of “Flash style” line quality. This kind of drawing comes with great advantages, though.

Drawing vector art in Flash may introduce you to manipulation abilities you don’t have in other media. Stepping back and forth in the history to undo steps is much different than drawing on paper and erasing. Cutting and pasting objects can let you reuse art over and over. Scalability of vectors apart from pixel resolution can help you efficiently edit drawings instead of retracing them, by scaling, flipping, warping, and editing points. Your drawings can be mirrorable, squashable, and stretchable. Time is another dimension you can manipulate, such as copying frames and cycling for efficient re-use.

From time to time you may hear people say that animation on paper is dead, because applications like Flash gave people shortcuts to do the same thing. It isn’t exactly the same. Painting digitally can simulate oil painting, but the different approaches have their own strengths. A Flash animator may achieve very high quality and productivity, but the style it achieves is its own, apart from the organic, breathing quality of animation drawn on paper. For frame by frame drawing, Flash’s vector environment isn’t the only digital method, either. Photoshop introduced an animation timeline in recent versions that many people prefer for non-vector drawing. Artists should choose the approach for the results they want to achieve.

There are other applications you may want to try that are intended to compete or add to what Flash does. For a 1-person studio solution, Toon Boom Animate has recently evolved as an application “by artists for artists” (this doesn’t necessarily make it easier, though.) Adobe Creative Suite is a package of complementary authoring apps. As an artist, you may wish to try drawing your vector art in Illustrator or bitmap art in Photoshop, import it to Flash, and export video files to composite in After Effects. You can combine it with live video edited in Premiere. One reason to use After Effects is for its “2 ½ D” style 3D space. This simulates layers of “index cards in space” – not objects you can rotate, but with parallax illusion of depth (multiplane). Speaking of features that Flash has added over time: in version CS5, for the first time, Flash introduced that kind of 3D space. Toon Boom Animate does it as well. This is something you can get into as an advanced user.

For now, we will begin exploring the work space, and learning to create animation using traditional drawing and motion principles commonly seen in Disney movies.

As you develop your skills, consider aiming for efficient, productive mixed technique, using all the tools at your disposal: economical Flash short cuts, tweening, limited animation using layers, cutting/pasting frames, scaling/manipulating drawings, duplicating symbols, and cycling. And when you become skilled, you can make it stylish and appealing.

For further reading, check this blog: Flash and HTML5 at Adobe MAX 2011

This was the last Adobe MAX conference, and the next one will be held in May 2013.

Research to learn more:

– Adobe’s 2005 acquisition of Macromedia (the original developers of Flash), and integration of Flash into Adobe Creative Suite.

– 2007-2008: a peak for Flash on the web, before the next big thing- the mobile market and app economy.

– Adobe vs. Apple: Apple’s 2010 decision to drop Flash support from iOs and iphones, hastening the decline of Flash on the web.

– Using Actionscript 3 to create interactivity.

– Strengths and drawbacks of Flash based websites, and why they’re no longer popular: interactivity, rich animated content, but problems with support in browsers and mobile devices, and lack of indexability for search engines.

– Challenge: how to export vector graphic images out of Flash, for editing in Illustrator or other applications.

– The Adobe FXG file format, meant as an interchange format for vector graphics, now apparently abandoned due to adoption of the open HTML5 standard.

– The SVG file format (Scalable Vector Graphics), an open format supported by web browsers that enables animation and other rich content.

– Why persisting users of older browser versions with compatibility problems compromises fast/wide adoption of web standards. (Older versions of Microsoft Internet Explorer did not support SVG). Web developers and designers hate IE and hate having to make their work compatible for users of older versions!

– Adobe Edge- released 9-24-12: a new HTML5 animation editor for rich web content.

– Authoring for iPhone and iPad using Adobe Publishing Suite. Developing for iOS using Flash Professional, allowing people to apply knowledge of ActionScript 3 towards interactive mobile content.

– More info about Developing for mobile devices with the Adobe Flash Platform, which may be an important market for job seekers with Flash skills.

Leave a Reply