Flash Development on the Fly: Moving Grass
One day on the way back from the US to the UK, FlashKit communmity member Alex Nino was in a plane and was having a really hard time sleeping. After trying many things to make the flight shorter, he decided to take his wife's notebook (while she slept) and write some ActionScript during the 2 and a half hours of battery using it with the LCD in the lowest brightness level possible. By luck he copied the latest open source Flex SDK 3 on his pen drive before boarding and her computer got at least notepad working fine.
This tutorial shows you how he came up with the idea of creating a moving grass animation--all done without an IDE, just using ActionScript and the Windows command line!
Raw Flash Development: Getting StartedIn that moment I had the idea of publishing all of the Flash experiments I've done so far on a website but I had no clue about how this website should look. It was that moment that the grass header came to mind, and after it was live some people came to me with some questions and ideas that made me realize that I should share the source code with those Flash developers who are working with games, interactive interfaces and crazy Flash applications.
Well, it was always tricky to make things look natural, especially animations that are based on nature themes--they are hard to achieve, so it was a kind of a challenge for me working on this grass. I've learned a bit more about drawing in a canvas (bitmap area) and the eternal fighting against performance drawbacks. Drawing with Flash using .graphics is powerful but it is a bit slow and could badly affect your Flash application specially when using gradients, filters and complex shapes with curves simultaneously.
The performance of the whole animation (500 leaves at time) is quite light; the expensive thing is the drawing API...as I said for each leave it needs to draw 2 different gradients, one for the leave shape and other for the leave shadow plus the curves of its shape. On my computer it takes up to 25% of my CPU when drawing them all at the same time:
When I move all of the leaves it takes about 25% of my cpu time on average:
Unfortunately I'm still working on the source code (cleaning up, commenting and making it nicer), and I'm also breaking the code into steps in order to make it easier to follow but the version I did on the plane in notepad is here if you want to take a look, all you need is to download the Open Source Flex SDK and that's all (no Flash IDE needed, no Flex Builder needed)! By the way the compiled swf file is quite big, (it is 2.74 KB, lol)! All you need to compile it is:
Click around on the Flash-swf below to understand a bit more how it behaves: