Internet Commerce
Developer ChannelFlashKit.com
JavaScriptSource Developer Jobs ScriptSearch WebDeveloper.com Webreference HTMLGoodies HTML5 Dev Center Developer.com jGuru.com PHPBuilder
|
  Tutorials HomeWhat's NewTop RatedSubmitmyTutesRandom!
Search Tutorials
 Tutorials » Actionscripting
Mr Grass, the grass movement algorithmHi guys, one day in my way back from US to UK, I was in a plane with really hard problems for sleeping and then after trying many things to make the flight shorter I decided to take my wife's notebook (while she sleeps) and write some action script during 2 hours and a half of battery using it with the LCD in the lowest brightness level possible, by luck I copied the latest Open source Flex SDK 3 on my pen drive before boarding and her computer got at least notepad working fine. In that moment I was with the idea of publishing all experiments I've done so far in a website but I had no clue about how this web site should look like, so it was here when the grass header came to my mind and then after it was live some people came with some questions and ideas that make me feel that I should share the source code of it with those flash developers who are working with games, interactive interfaces and crazy flash applications. Well, it was always tricky for everybody making things looking natural, especially animations based on nature themes, they are hard to achieve, so it was a kind of a challenge for me working on this grass. Here I've learned a bit more about drawing in a canvas (bitmap area) and the eternal fighting against performance. Drawing on flash using .graphics is powerful but it is a bit slow and could affect badly your flash application specially when using gradients, filters and complex shapes with curves simultaneously. On this project I am using 3 layers of different grass groups; each of them is using a Blur filter independently and also different scale responding to the mouse position, each group contents 167 leaves (500 in total) that are being drawn dynamically on each frame when there is any mouse interaction. Each leave has 2 different gradients fill applied, one is the face up to the light and the other one is its shadow or darker side, also each of these has to responds differently to the mouse depending of its shape and nature stiffness. I've been thinking and thinking in the best way for doing it, I tried many different prototypes but at the end the best approach for having 100% control of each canvas leave was making then based of the class Shape (flash.display.Shape) due that in this way I don'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 per 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 is taking up to 25% of my CPU when drawing all at the same time.
When I move all leaves it takes about 25% of my cpu time in average
Unfortunately I'm still working on the source code (cleaning up, commenting and making it nicer), also I'm breaking the code into steps in order to make it easier to follow and swallow but the version I did on the plane in notepad is here if you want to take a look, all you need is download the Open Source Flex SDK and that's all! (no Flash IDE needed, not 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
|
||||||||||||||||||||||||||||||||||||||||||||||||
 |
|||||||||||||||||||||||||||||||||||||||||||||||||
Mr Grass, The grass movement algorithm
|
 |
 |
|