I have been working on a project in Adobe flash for the last few months. It basically does a ton of animation and math on every screen. So i put all the code in onEnterFrame, the standard way to run continuous code, so it ran on each frame. Over the months I have done by best to optimize it for speed and efficiency but it had still ran slow, and used a lot of CPU power. How can I make it faster I thought?
The first most obvious thing to try was to up the FPS. Flash defaults it to 12, which seems rather slow for animation doesn’t it? So I updated it to 30, which didn’t seem the to change anything. 60fps offered a slight improvement. So it logically concludes that 120fps (the max you can set in flash) would give the best performance, and it seemed like it did. But the program was still using a ton of CPU power, and had a very low fps.
Was there a way i could squeeze a few more fps out of the program? Well there happens to be a function called updateAfterEvent() which basically tells the program to issue another screen refresh immediately. The only problem is that you can only call it from certain functions., one of which is NOT onEnterFrame. It would only work if called from an event, such as a mouse movement or key press. It also would work for a periodically ran function called through setInterval(). This looked like the option to try.
The function has this basic format:
setInterval(function, ms, params)
It takes a pointer to a function, the number of milliseconds in between calls to the function, and any params you would like to send it. That sounded wonderful, just set a really low ms, and pass in the function that does the same thing my current onEnterFrame does, and it should run as fast as I want. Well, not really. The one gotcha with this function is that it will only call the function at most, as often as onEnterFrame is called. The resolution of this timer is only as fine as the FPS in the movie. Even if i set the ms to 0, it would still only be called as often as onEnterFrame. Back the square one again, or was I? The new difference now was that I could call updateAfterEvent in the function, because it was called through setInterval. Yea! So i put the new code in, removed the old onEnterFrame, left out updateAfterEVents, set the ms to 10 and watched to see if there was any improvement.
Suddenly there was a 10x speed up. The animation wasn’t as sluggish and it responded to the uses key presses immediately. That didn’t make any sense. The same amount of code was being ran on every frame, the program should run the same speed. I tried changing the ms down to 1 and the animation only got faster. I changed the FPS of the program down to 12, and the animation was still just as smooth. I wondered if the function was being called more often the the screen updated, so I turned the FPS down to 1. A FPS of 1 resulted in jerky animation just as expected. So the function was still only being called as often as the screen updated. Turning the fps back to 12 (the default). I ran the program and watched the cpu usage, it was only around 10-20%, instead of the whopping 70% it was using before. Changing the FPS had the most effect on the CPU usage. A higher FPS resulted in more processor usage. But changing the MS in setInterval had barely any effect on CPU usage. Hmmm…. So i went around and changed all my onEnterFrame to setInterval code. This resulted in a much more responsive program, that had lower CPU usage. I still don’t know what the problem with putting code in onEnterFrame is, but I dont think I’ll be useing onEnterFrame much anymore.
The moral of the story:
DO NOT USE onEnterFrame in flash, its slow. Only use it if you absolutely must, but I don’t know why you would.
Changing the FPS does NOT result in faster code. Only MORE CPU usage.
USE setInterval(…) instead with a lowish FPS (such as 12)