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.
In this project I am using 3 layers of different grass groups; each of them is using a Blur filter independently and also a different scale responding to the mouse position. Each group consists of 167 leaves (500 in total) that are being drawn dynamically on each frame when there is any mouse interaction. Each leave has 2 different gradient fills applied. One is the side facing up to the light and the other one is its shadow or darker side, and each of these has to respond differently to the mouse depending of its shape and natural stiffness. I was thinking and thinking of the best way of doing it--I tried many different prototypes but in the end the best approach for having 100% control of each canvas leave was making them based out of the class Shape (flash.display.Shape). Doing it that way I didn't have to redraw the whole area when only some leaves are being animated.
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: