Rules of Flash Animation

[CNO]

Just wanted to repost this here in case you didn't get this week's newsletter.

I'll post the other two parts when they go out (sorry if you've seen the article already).

Please, feel free to add your comments or suggestions, maybe I can get a part 4 out of this.

************************

Rules of Flash Animation
-or-
How to work with Flash, not just in Flash.
Part 1 of 3

There are certain aspects of many flash animations on the web today that scream "amateur", and some nagging elements that might hamper an otherwise stunning piece of work. Just about all of us are guilty of making these mistakes - they are part of the learning process. Therefore I've compiled this list of rules that I go over in my head each time I approach an animation, hoping that it might help someone else as well.

Note - I'll try to stay away from Flash basics, as I'm sure you all have a manual somewhere and know about simple things like onion skinning.

1. Do not motion tween
No man or animal in nature moves in such a mathematically precise way. If you must motion tween, for heaven's sake, use ease-in and ease-out. Also,
inserting extra key frames in-between your start and end keys will give you more control over the motion (though too many will ultimately render your motion tween useless).

2. Use shape tweens sparingly
If you are going to shape tween, watch out for outlines (shape tweens usually work best on limited color fills) and use shape hints often (Modify>Transform>Add Shape Hint [CTRL-H]). You may also want to consider
converting your lines to fills (Modify>Curves>Lines to Fills). Flash is popular enough now that I should never have to suffer through watching outlines flip and distort through a tween, or listen to someone try to pass it off as an "effect".

3. Reduce, Reuse, Recycle
Reduce your file size by making as many elements as you can into members and reusing instances. Have a walk cycle? Turn it into a movie clip. Reduce the time it takes to make your animations by keeping well-organized libraries and reusing character elements throughout scenes and movies.

4. Be careful with sound
Sound can account for almost 1/2 to 1/3 of a final animation file size. Learn which sounds are essential to your story and which can be dropped or replaced with a sound currently in your library (Don't forget - Flash does have some basic sound manipulation tools like volume envelopes within the program). You should prepare your sounds outside of Flash for web delivery
and compression (equalize where necessary), and export from Flash with the proper settings (mp3 is a great file format for streaming background music).

5. Plan ahead
A good storyboard will quickly become your best friend. With it you can easily identify where you can save on animation before producing unnecessary imagery, and you can carry the images directly into an animatic composed in Flash (which is particularly useful if you animate right in the program).

Disclaimer - Rules are made to be broken. Always use your discretion - I would encourage people to deviate from these methods if it means better animation. These are just some hints I've compiled while working in the program. I'm sure I'll be adding more soon - if you have any ideas or comments, e-mail them to: chris@perfectlyfunctional.com.

[megatoon]

Nive CNO. Did you write this up? Personally I don't think you missed anything.

You may also want to consider
converting your lines to fills (Modify>Curves>Lines to Fills).

You learned me something new. I like


I see this is Part1. So I'll resign up for the nerwsletter. To get Parts2&3. Well worth the spam from Internet.com

[CNO]

Originally posted by megatoon
Nive CNO. Did you write this up? Personally I don't think you missed anything.

I did - it's actually an article I had written up for the old version of Perfectly Functional, and I've gone through and updated some parts. Have been getting some great feedback regarding it, and chatting with some interesting people I'm trying to get posting here in A&A.

[megatoon]

Likw I said Awsome job! Is there anyway you could foward me a copy? Since I probabley didn't get this one.

terries@shaw.ca

Cheers

[jbirdwsk]

Nice post, I guess I'm a Flash amature indeed. Let me ask a question, it says not to use motion tweening. What is the best method to use for lets say, text scrolling (or some text animation effect) a frame by frame method when I try takes up way too much space.

take it easy on me, I've been on Flash since version 3, but I'm still hokey with it

[justice strike]

action script

what's important is that you create a sence of space with the use of overlapping and perspective

[xup878]

nah he means for creature animation dont use tweens...
hey i remember when this first came out

[CNO]

Originally posted by jbirdwsk
Nice post, I guess I'm a Flash amature indeed. Let me ask a question, it says not to use motion tweening. What is the best method to use for lets say, text scrolling (or some text animation effect) a frame by frame method when I try takes up way too much space.

take it easy on me, I've been on Flash since version 3, but I'm still hokey with it

No problem! I tried to qualify in the tutorial - it's not that you should never use motion tweens, but you should never use a motion tween with the default settings. Easing in and out are important to prevent your work from having a rigid mechanical look - even mechanical devices don't move that perfectly.

As Justice indicated, if you can learn a bit of scripting, you can have even more control over the motion and have a smaller file size overall.

[edit]
-Sent out that e-mail today, mega.
[/edit]
[Edited by CNO on 02-15-2002 at 10:41 AM]

[jbirdwsk]

I never knew about ease in ease out. It makes sense to me. No matter how I do my tweens they always look too sudden, hummm if this is all I needed to do to fix it I'm going to be happy! I've learned more from this board in 2 months then 3 years with Flash

[ilsoap]

Thanks for the article. Fortunately (for me, anyways) I learned a lot of this stuff when I took an animation course a year ago. We used Flash for animating, but the teacher was someone from a classical animation background. Very helpful.

Anyways, my website is at http://www.screenhog.com. I think it has a lot of what you're talking about in it already (and I'd really like some feedback about it).

[CNO]

Here's Part 2, taken from today's newsletter.

I've been getting some great feedback still. One thing I seem to be getting a lot of questions about and perhaps should clarify is the "do not use motion tweening" rule. As was indicated before, this applies more to character animation, where you should draw as many keyframes as you can before resorting to motion tweens for your animations. Of course, in the case of text animations things like motion tweens are more effective. The most important issue them becomes using the easing features, not using a default tween setting.

*****

6. Up a stream without a preloader
Test your animation on every machine possible, under every possible condition. Tweens, gradients, and other processor-intensive actions (stretching your animation to full screen instead of specifying a pixel size) will slow down your show to a crawl on a slow machine. Use school computers, library computers (both quite possibly your lowest common denominator) - not everyone will be watching your animation on the multi-gigahertz machine you created it on. Use the bandwidth profiler in Flash to get an idea for how it will stream over the web (Control>Test Movie || Control>Show Streaming), and use Colin Moock's FPS speedometer during testing. Finally, please, please use a preloader.

7. Quality over quantity
Especially noteworthy is the fact that you can change the quality settings on the fly using actionscript. Certainly we are all perfectionists and want our animations to look the best always, but if it means your animation will not chug along, you'll hardly notice the difference between high and medium quality settings.

8. Don't over-optimize
Sure it's easier to set the slider to maximum and let Flash do it's optimization thang, but have you ever heard people complain that everything animated in Flash looks like it was animated in Flash? This function and tweens are two of the biggest culprits. Instead, use the eraser tool to catch stray marks and selectively smooth curves (particularly relatively unimportant elements, like those in the background).

9. Every keyframe counts
When your animation is "done", you're about halfway there. Play and watch your animation until you can run it through forward and backward in your head. With shorter attention spans on the web, every moment counts. With Flash doing some of the in-between work for you, you might miss something you wouldn't ordinarily if drawing every frame by hand. The difference between good animation and great animation might be as simple as removing a keyframe here and there. Take every opportunity you have to make your animation as tight as it can be.

10. Do not trace bitmap
I know some people love and live by this command, but it is often a dangerous thing to use. Trace bitmap often produces huge vectors on anything but 2-color images, and they are hardly animatable (sure you can optimize, but see rule#8). Oftentimes people use this command for photos or other complex images when a well-compressed jpeg would be much more effective and much smaller in file size.

The same discliamer applies - and if you have any questions, don't hesitate to e-mail.

[ilsoap]

Oh, that reminds me of another Flash no-no.

Whenever possible, don't use too many alpha, gradient, or mask effects. They can get very processor intensive (especially if you're using two or all three at once).

[Naldoman]

Great set of guidelines, CNO. I think I've seen you post them before. I do Flash animations every day at work, and many of my co-workers do not use the ease settings. It takes me longer to always put them in, but I hate seeing jerky animations even on short pieces or small movements. Often I will re-do times I've re-done tweens to get them 'just right', even if it means staying late or slowing my production a little bit. I know my employers appreciate quality work and are willing to tolerate my pickiness.

One quality issue I have not seen mentioned is how Flash appears on LCD screens for low-res flatscreens, laptops or PDAs. I have seen that animations run particularly slow for LCD screens, and additionally, much detail can be lost. Gradients or low-alpha objects literally disappear. Colors become muddy or washed out.

With the price dropping on flatscreens, and hand-held computers, what is the point at which we should consider designing no-gradient, low-animation varients of our work for people on the go who have no time to marvel at our vector-finesse'???

For months my company has produced content for PDAs, and the task of scaling down the FX and animations has come to be greater than expected. We have found that simply chopping out the rough areas is workable, but not the best solution.

As always, a new platform works best when the content is designed specifically for that platform. How many of you have designed for a screen that's 250x150 pixels in size? How small can a button be before it's functionally useless for the consumer? What is a viewer's patience for loading graphics on a screen smaller than his hand? When is a picture worth 1000 words? (Large text blocks really slow down a hand-held).

[CNO]

Great topic, Naldoman. I haven't noticed the issue with Flatscreens, but then I work on a Mac, and everything looks better on my TiBook.

But the portable devices issue is one that should definately be addressed.I know I ran into an experience not to long ago where I was designing a project to work both large and small - hoping that it could be used on PCs and PDAs, and designing with that in mind. But when shrunk down, though it was servicable, the anti-aliasing in the player made certain things very difficult to interpret.

I've always been a big proponent of Flash in PDA development (if ony the players would catch up quicker), as vectors seem like a good way to present a lot of information visually to a smaller screen. Not to mention the potential audience for quick animations - people stuck on trains, etc.

The issue is probably more about useability (above and beyond anything Jakob likes to talk about) - how can you simplify information to icons and pictograms which are easily accessible to smaller screens? How much text is too little/too much? Not to mention device compatability (will a backlight make my animations look horrible? Or vice versa?

I'd love for you to share any tips or tricks you've come up with in the field.

[edit]
Just wanted to add that there's a great article on content visualization over at Flashmagazine ( http://www.flashmagazine.com ).
[Edited by CNO on 02-20-2002 at 10:45 AM]

[justice strike]

well actually i think there is the need for a script that adjusts the flash movie to the size of the screen (that means make one use for all screen types of flash files)

the problem isn't really the color of the pda's or tft screens (trust me i have a tft screen and i can see most colors better then some friends who have a crt and consider the red to be black on their screen) but the size of the screens. A good point is made by cno about readability of the text and icons. I think it could be solved easily if flash could detect the size it is running in (ever noticed u can use the same flash file u made in 800*600 in 1600*1200)

u just set a pixel fixed size of pictograms wich are readable for both pda and normal screens, however if u enlarge a flash screen and the size of a pictogram (or even letters) is pixel fixed, u will get alot of empty space. Here is where the script comes in. it detects what the size is and determines if elements can be added.

just think about it, if u see a fly on a tft screen nearly as little dots (like that addictive game of xup) wouldn't it be a waste of resources to show that on a pda. But infact u can actually make 2 versions in 1 flashfile without having the user adjusting it to their screen size (u know enter here for 800*600) u can add elements for big screens while those elements could be removed from pda systems (ie. wallpaper or some sort of decoration)

[chrisvo69er]

You wanted some tips? Here's a few (as bleeding obvious as they are ) :

Running movies at full screen is a no-no.
Contain your movie in a web page so the width and height remain true to it's size. IE - if it's a swf file and you can resize the window then the viewer can change the window size to see tweens and graphics outside of the intended viewing stage.

Now I havn't tested this one but apparently it's true (although it defies logic).

After exporting your movie as a swf, import it back into flash and export it again. It will run faster and the file size will be smaller. You may have to redo some movie clips etc.

This seems strange as there are alot more keyframes and symbols when you do this but apparently it works!

And before anyone says "bull****", I heard that from ShockAnime, the guy who created Genryu's Blade.
[Edited by chrisvo69er on 02-20-2002 at 11:49 AM]

[CNO]

Originally posted by chrisvo69er
After exporting your movie as a swf, import it back into flash and export it again. It will run faster and the file size will be smaller. You may have to redo some movie clips etc.

It's questionable - a well-formatted movie from the outset shouldn't need this step. If you want to reduce the file size of your .fla, you can select and delete unused items from your library using the pull-down tab on the right side.

The disadvantage of exporting and re-importing your movie is that you will lose all interactivity and movie clips - it's just a method of flattening your frames - breaking apart and re-grouping elements would work just as well (and give you more control).

Another tip which I didn't bring up in the tutorial is that guide layers can be used for anything, not just motion paths, and will not export in the .swf (and thus, not increase the file size of your final movie). It's a good method for making notes directly in your Flash movie, or to use when rotoscoping actions.

[Naldoman]

Originally posted by CNO
I've always been a big proponent of Flash in PDA development. Not to mention the potential audience for quick animations - people stuck on trains, etc.

The issue is probably more about useability - how can you simplify information to icons and pictograms which are easily accessible to smaller screens? How much text is too little/too much? Not to mention device compatability (will a backlight make my animations look horrible? Or vice versa?

I'd love for you to share any tips or tricks you've come up with in the field.

Wish I had a list of tips. Generally all I can offer is that even though Flash scales wonderfully, it's just not that simple to shrink your layout. Keeping the text manageable and readable is a key issue. Use very short sentences, the absolute basics.

** Limit text to two or three sentences at a time---any more is like trying to read microfiche held up to a light bulb!!
**Usability---On PDAs units, users must "tap" buttons rather than 'click on' or 'roll over' them. Make sure your instructions correspond to this reality. Scrap fancy rollover states. Drag and drop is out.
**Keep loop animations to a minimum, better yet, kill them all. PDA resources are very limited. Any loops will slow your animations to a crawl.
**Keep vectors in solid colors. Avoid all shape tweens! If you need subtle colors, use a jpg.
**Working for PDA display almost flips around all the conventions! Keep file sizes incredibly small---less than 15K, like your Flash Kit footer! Load your material in small digestable chunks that run sequentially, not on top of each other.

[CNO]

Part 3 of 3

11. Use layers
By separating different elements of your characters into layers, you give yourself many more options for reusing elements. You should probably have at least one locked background layer. And be sure to name your layers! Nothing is worse than having to click through 32 layers to find out which is your character's right eyeball.

12. Unleash color palettes
Flash has the ability to import and export color palettes. If you have a color scheme you know you will use later in another movie, save the palette file in the same folder as your .fla.

13. Use masks
A regrettably underused element of Flash is the mask tool, which can be used to create great effects with limited effort (such as shadows moving across characters). One technique I've found useful is to make a duplicate of your character on a layer above, break it apart and paint it black. This way you can have a mask animated across a series of frames which follows the motions of your character (Note - I'll try to post an open-source example of this soon too).

14. Give detail where detail is due
Don't animate backgrounds too much. In addition to adding to your file size's overhead, it may ultimately detract from the focus of your animation. You may think it is adding "atmosphere", but spend the extra time animating your characters - if they are well animated, the viewer's attention will be on them and they won't notice the lack of action elsewhere. Learn when and where to compromise - sometimes a good soundtrack can compensate for limited animation.

[argonauta]

I've seen this very often and I don't think it's very efficient:

a movie inside a movie inside a movie inside a movie. It creates multiple timelines inside the original ones, and its actually very processor intensive. So, my tip....DON?T DO THAT.

Another little thing:
when you create an image member in your library and then put it in your movie, you have several options for the image instance:
loop once, loop, on frame only....I think those are the once, don't have flash on this computer
anyway.....if your image is one frame only, click on that option (usually most images in flash are one frame only).
The difference isn't visible, but if we're talkin bout flash efficiency, then, my suggestion is to always keep in mind to set that option.

argonauta.-7*