Optimising for Beginners - Part 1
This article probably contains nothing new to anyone with Flash experience, so I'm writing a couple of 'FAQ' articles for people just starting out.
Beginners often email me and ask why their 2 minute .swf movie is 25MB in filesize, and the answer usually comes down to them not optimising their graphics.
In Flash, to optimise graphics (Modify > Shape > Optimize) means to remove excess vector points. The following methods work for the pencil tool too, but I've written from a Brush tool perspective simply because that's my personal way of drawing in Flash.
If you draw using the brush tool, Brush Smoothing will help you create smoother lines, removing points as you draw but it can cause a few problems with line control.
To see this for yourself, choose the smallest brush size, then put the Brush Smoothing slider (found in the Property Inspector) up to 100. Now write the letter 'S' and you'll see the problems it causes.
The file size of this 'S' shape (if you could call it that) is now a tiny fraction of what it was, but you can see that the line has been optimised so much, that it's nothing like the line I wanted to draw.
So you can find your own Brush Smooth setting preference for drawing with the brush tool. My personal favourite setting is 20. It removes some points as I draw, but leaves my linework pretty much untouched. The only problem here, as you can see below, is that the lines look a bit 'knotty' or jagged.. and the file size is huge.
Left: a knotty line; Right: the points on that line make for some huge file size.
The process of optimising starts by selecting the artwork and going to Modify > Shape > Optimize. Here you get a slider with which you can control the amount of smoothing.
This slider, incidentally, controls a value of 1 - 64. In a later article you'll see why I've brought that to your attention.
After clicking OK, you get a totals message.
In the image above, you'll notice I had my slider about 1/8th of the way along. You can see in the image below how many points were removed:
The line is a little less knotty but still not as smooth as I'd like it. I could hit Ctrl + Y (Repeat last action), or I could go to Modify > Shape > Optimise and use the slider again. Yet another method of tweaking this line is to use the Subselection tool (A) to display the points as above. Those points can then be individually selected, manipulated or deleted.
----
These steps have allowed you to control the smoothing after you've created the artwork, rather than having that control taken from you as you draw. Don't get me wrong, the Smoothing slider is fantastic for many reasons (a future article) and the fact that it even exists in Flash allows us to customise the way we work.
Optimising your linework is a must if you intend to publish your Flash work on the internet. Compare the earlier unoptimised 'S' image, with the optimised one above and you can see that the difference is probably triple, or more. This translates directly to filesize and the difference between a 30 second download and a 7 minute download.
It's worth reiterating that drawing with the Smoothing slider on a higher setting will remove points and filesize as you draw, but as you'll see when you start experimenting, there's less control.
--
Next article will be about how to set a keyboard shortcut for optimising your linework. One keypress and your lines clean themselves up!
Beginners often email me and ask why their 2 minute .swf movie is 25MB in filesize, and the answer usually comes down to them not optimising their graphics.
Get into the habit of optimising your artwork as you go.
In Flash, to optimise graphics (Modify > Shape > Optimize) means to remove excess vector points. The following methods work for the pencil tool too, but I've written from a Brush tool perspective simply because that's my personal way of drawing in Flash.
If you draw using the brush tool, Brush Smoothing will help you create smoother lines, removing points as you draw but it can cause a few problems with line control.
To see this for yourself, choose the smallest brush size, then put the Brush Smoothing slider (found in the Property Inspector) up to 100. Now write the letter 'S' and you'll see the problems it causes.
The file size of this 'S' shape (if you could call it that) is now a tiny fraction of what it was, but you can see that the line has been optimised so much, that it's nothing like the line I wanted to draw.
So you can find your own Brush Smooth setting preference for drawing with the brush tool. My personal favourite setting is 20. It removes some points as I draw, but leaves my linework pretty much untouched. The only problem here, as you can see below, is that the lines look a bit 'knotty' or jagged.. and the file size is huge.
Left: a knotty line; Right: the points on that line make for some huge file size.
The process of optimising starts by selecting the artwork and going to Modify > Shape > Optimize. Here you get a slider with which you can control the amount of smoothing.
This slider, incidentally, controls a value of 1 - 64. In a later article you'll see why I've brought that to your attention.
After clicking OK, you get a totals message.
In the image above, you'll notice I had my slider about 1/8th of the way along. You can see in the image below how many points were removed:
The line is a little less knotty but still not as smooth as I'd like it. I could hit Ctrl + Y (Repeat last action), or I could go to Modify > Shape > Optimise and use the slider again. Yet another method of tweaking this line is to use the Subselection tool (A) to display the points as above. Those points can then be individually selected, manipulated or deleted.
----
These steps have allowed you to control the smoothing after you've created the artwork, rather than having that control taken from you as you draw. Don't get me wrong, the Smoothing slider is fantastic for many reasons (a future article) and the fact that it even exists in Flash allows us to customise the way we work.
Optimising your linework is a must if you intend to publish your Flash work on the internet. Compare the earlier unoptimised 'S' image, with the optimised one above and you can see that the difference is probably triple, or more. This translates directly to filesize and the difference between a 30 second download and a 7 minute download.
It's worth reiterating that drawing with the Smoothing slider on a higher setting will remove points and filesize as you draw, but as you'll see when you start experimenting, there's less control.
--
Next article will be about how to set a keyboard shortcut for optimising your linework. One keypress and your lines clean themselves up!
9 Comments:
I have just recently discovered your blog and it already helped me A LOT! Nice to read useful tips from THE best flash anumator on the web (that i have seen).
And since this is the first time i write to you, GREAT JOB on Brackenwood and on the Animotd project!
Welcome! Thanks for the message and the feedback :D
Your blog is really awesome, great job on the 30 days 30 shorts also, I been checking biteycastle everyday. My favorite is 'Shutup', I laugh every single time I see it haha.
:)
Hey adam
Sometimes when I'm using the brush tool in flash, it gets to the point where navigation getss laggy, i'e it takes 20 seconds or so for what I've drawn to appear on the screen, could I half finish the drawin, optimise it and then draw some more, optimising the whole thing again later? This would be much faster, but I'm worried about the difference being noticable, ie you can see the areas that have been given this treatment twice.
This helped alot, I'm new to flash and have been trying to figure out how to get my brush lines look as clean as yours.Thanks!
i've been studying your site for the past few days, not knowing you had one (yet before hand i always watched your flashes on newgrounds) and it is helping me so much
Your blog entries have tought me information i've never even thought of (i mean i thought i knew enough in flash) and examining your animations themselves has also helped.
I've realised that every single frame of your flashes is an amazing piece of artwork, and i'd like to be able to achieve that.
I've been looking at your animations frame by frame (in animations of yours with or without secrets) just so i can learn how you use gradients in certain areas, how you smooth the lines, how you make the lighting on the grass, bushes, trees, etc.
Thanks so much just for being there in a sense, even thought you've never even heard of me hahah.
Looking at your art, animations, blog etc. has been a real help to me and a big inspiration.
I've used flash myself for like 4 years but never really though to use tutorials or anything until the past year (i joined deviantart and newgrounds last febuary) and those have been helping alot, i consider this year my golden year of animating. And for the past week or so i've learned alot more just by looking at your site.
Thanks, thanks alot.
PS sorry for such a long comment hahah ):
Hi mrev+(a x 5)! Thanks for the message.. great to hear that my stuff is helpful. Hopefully I can keep posting interesting stuff here and hopefully soon, on the Bitey Castle Academy page.
To the anonymous poster, the problem you're describing is a result of many many (possibly millions of) points on the stage. Even with the simple S shape in this article, you can see there's probably well over a hundred points.
Each time you add to that, you're adding to the load on your CPU when it redraws the stage. Even if you have an amazing kickarse computer, lots of fine detail on the stage will eventually cause some slowdown.
One solution might be to work using several layers. For example, distant elements on layer 1, midground elements on layer 2, foreground elements layer 3, characters layer 4, and so forth. Turning off (making invisible) any layers that you aren't working on means that your computer only has to draw a fraction of the points.
Of course, when it comes time to view them all together, you'll get a big fat chunk of lag. One way around this might be to create an optimised copy of the artwork to use as reference, while hiding the more intricate originals.
..true, true..tips, movies..Best site for me=D
Adam, what would You say about making a contest..You know.."What's your favorite animodt?"..because for example I'm curious about other peoples favorites.
My choice:
1. Razor (I almost feel the pain when I see this animodt;))
2.Dry lip (tasting his lips-simple animation but great for me)
3.Newsreader xD
.and of course..My congratulations finishing Your 30 shorts
Regards
Filip
thanks :D
I have a poll on the Bitey Castle forum that people are voting on
here
Looks like Shutup and Flight are leading the pack at the moment
Post a Comment
Links to this post:
Create a Link
<< Home