Drawing in Flash: Optimising Tips

A lot of people rag on Flash for vector drawing in favour of Illustrator and, yes, if your aim is artwork for print, then Illustrator is almost certainly your guy. However, if your final output is Flash and/or your artwork needs to be animated in Flash, then why not draw in Flash to start with? The tools are simple and there are no Illustrator-to-Flash conversion issues (taking gradients from Illustrator to Flash is generally no fun). I’ve a fair amount of experience drawing in Flash: my last full-time job at an educational multimedia company was about 80% production in Flash, Flash, Flash. At the beginning, most of our work had to be optimised for a 56k connection, which, as you can imagine, resulted in a whole heap o’tweaking to reduce file-sizes.

With that in mind, here are some very quick tips to make with the pretty in Flash, yet still keep file-sizes minimal:

Group and re-use items: drawing flat on the stage is all well and good, but every intersection will add to your file-size, as well as making your image a complete pain in the behind to edit at a later date. To combat this, use layers and sensible grouping, as well as re-use of symbols where appropriate.

Not everything has to be a symbol: Honestly! If an object is not going to be re-used or animated, then there’s probably no reason to make it a symbol. Movieclips are also slightly bigger than graphic symbols. Symbols add file-size - only a small amount, true, but it all adds up.

Use minimal points/vertices: the line tool is your friend, the brush tool is your enemy, trace bitmap is heresy (for optimisation, that is. I’m all in favour of mucking about with the brush tool and a Wacom if file-size isn’t an issue). Use ‘Optimise Curves’ (CTRL/CMD+ALT+SHIFT+C) to minimise points, and check your artwork with the sub-selection tool (A) to ensure that there are no stray points on your lines. Just select a point with the sub-selection cursor, and hit ‘DELETE’ to remove the pesky thing.

Keep gradients to a minimum: a few carefully placed gradients can work wonders, but a whole heap of them will seriously ratchet up your file size.

Use different line colours for easy selection: I’m sure you know that double clicking on a line will select all connecting lines, but it will only select those of the same colour. So, if you want to add detail to an image (shadows, highlights, etc.) and want to delete those new lines without disturbing your old ones—just draw in a new colour. I use violent colours - bright red and neon green - to ensure that no stray line segments get left behind.

Work Efficiently: Working efficiently is essential in a high-pressure production environment - learn your shortcuts and learn to work rapidly. For example, to very quickly trace a scanned sketch, quickly outline your image with the line tool, ensuring that end-points of your lines are created at the base or middles of any curves in the sketch. Then, with the line tool still selected, quickly curve the lines into place. Alternatively, hold down CTRL+ALT to pull lines out into a point.

Flash Bugs: Flash can add extra size to your file for no apparent reason. Try this: copy your layers into a fresh .fla and re-save; often the resulting file will be smaller than the original.

You can create beautiful, illustrated Flash pieces - just take a moment to ensure you’re not creating excess bloat for no reason. Sure, it initially takes a little more time and thought in your working process, but people with slower connections will thank you, and your files will be cleaner and easier to edit. I’m coming at this from the angle of years of designing for schools with mediocre hardware and slow connections, so I admit that I’m a bit of a zealot about it - if you disagree or have had different experiences, by all means comment and let me know! Flash gets a bad rap, but I’m always keen to learn more about the software.