Reducing CPU usage in Adobe AIR
Let's be honest. AIR gets a bad rap for being a bloated runtime, using up a lot of precious memory and CPU. Although a lot of AIR applications seem to fall into this trap, it doesn't have to be this way. There are a number of techniques you can use to develop a lightweight application that rivals native programs in terms of performance.
One simple and easy way to drastically reduce CPU usage is through framerate throttling. In this article, I will explain what framerate throttling is and how best to implement it in your application.
Note: To make the most of this article, you should have general knowledge of ActionScript and AIR application development.
WHAT IS FRAMERATE THROTTLING?
Framerate throttling is the technique of controlling an application's framerate to increase performance when in use and reduce resource usage when idle. As of ActionScript 3, developers have an extremely useful property in their possession—Stage.frameRate. This gem lets you change the framerate on the fly. In previous versions of ActionScript, we were stuck with what we set it to in the IDE. Thankfully, times have changed and there's no longer an excuse for processor-heavy applications lingering in the background.
HOW DO YOU IMPLEMENT FRAMERATE THROTTLING?
Since framerate throttling is essentially a matter of setting the Stage.frameRate property to a lower or higher value, it's up to the developer to decide how involved or advanced it will be. It also depends on the application itself—some allow for more integration than others.
Note: The performance results in the following examples are done on a Macbook Pro 2.8 GHz Intel Core 2 Duo. Since CPU usage is in terms of percent, results will vary from computer to computer.
Novice
The rawest form of throttling is by using the NativeApplication Event.ACTIVATE andEvent.DEACTIVATE events—increase the framerate when active, decrease it when inactive. With a single blank window, this results in 1.8% CPU usage when active and .4% when inactive. You can actually set the framerate to .01 on deactivate for .2% usage, but in testing I discovered the window chrome never loses focus.
package {
import flash.desktop.NativeApplication;
import flash.display.Sprite;
import flash.events.Event;
public class Application extends Sprite {
public function Application () {
__init ();
}
private function __init ():void {
NativeApplication.nativeApplication.addEventListener
(Event.ACTIVATE, __activate__);
NativeApplication.nativeApplication.addEventListener
(Event.DEACTIVATE, __deactivate__);
}
private function __activate__
($event:Event):void {
stage.frameRate = 50;
}
private function __deactivate__ ($event:Event):void {
stage.frameRate = 1;
}
}
}Intermediate
Certain applications allow more advanced framerate throttling—for example, an application that still needs a level of interaction, even when in the background. Let's say your application has scrollable content to reference and since AIR allows mouse wheel scrolling while in a different application, you need a higher framerate at that time.
In this example, if the application is in the background, but the mouse wheel is scrolling, theMouseEvent.MOUSE_WHEEL handler increases the framerate and sets up anEvent.ENTER_FRAME event that will reduce the framerate half a second after scrolling. In cases like these, it's best to have a buffer in place, so you won't change the framerate with every scroll, but also because there's no event for when the mouse wheel is idle.
package {
import flash.desktop.NativeApplication;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.utils.getTimer;
public class Application extends Sprite {
public static const ACTIVE:int = 50;
public static const INACTIVE:int = 1;
public var active:Boolean;
public var scrolling:Boolean;
public var buffer:int;
public function Application () {
__init ();
}
private function __init ():void {
NativeApplication.nativeApplication.addEventListener
(Event.ACTIVATE, __activate__);
NativeApplication.nativeApplication.addEventListener
(Event.DEACTIVATE, __deactivate__);
stage.addEventListener
(MouseEvent.MOUSE_WHEEL, __mouseWheel__);
}
private function __activate__ ($event:Event):void {
active = true;
stage.frameRate = ACTIVE;
}
private function __deactivate__ ($event:Event):void {
active = false;
stage.frameRate = INACTIVE;
}
private function __mouseWheel__ ($event:MouseEvent):void {
if (!active) {
if (!scrolling) {
stage.addEventListener
(Event.ENTER_FRAME, __enterframe__);
}
stage.frameRate = ACTIVE;
scrolling = true;
buffer = getTimer () + 500;
}
}
private function __enterframe__
($event:Event):void {
if (buffer < getTimer ()) {
stage.frameRate = INACTIVE;
scrolling = false;
stage.removeEventListener
(Event.ENTER_FRAME, __enterframe__);
}
}
}
}Expert
If performance optimization is what you live for, you can impress your friends with some intricate framerate throttling. (Note: This won't impress girlfriends.)
In my applications, I like to have transitions from one state to the next for both a smoother environment and a better feel. Because of this, I like to use a high framerate (50). Unfortunately, the higher the framerate, the higher the CPU usage. Therefore, I set the framerate to 50 only when a tween is active. When one isn't, I reduce the framerate to 24. On top of that, there are instances when a loader is animating while the application is in the background. A loader doesn't need 50 fps, so I'll set the framerate to 5 when the application is visible in the background and 1 when not visible.
Note: For this example, I'm using an animate() method to call at the beginning of each tween. Ideally, you would want to build the framerate throttler into your tweening engine, so you wouldn't need to call animate() manually.
package {
import flash.desktop.NativeApplication;
import flash.display.Sprite;
import flash.events.Event;
import flash.utils.getTimer;
public class Application extends Sprite {
public static const ANIMATING:int = 50;
public static const ACTIVE:int = 24;
public static const INACTIVE_VISIBLE:int = 5;
public static const INACTIVE_INVISIBLE:int = 1;
public var active:Boolean;
public var animating:Boolean;
public var buffer:int;
public function Application () {
__init ();
}
private function __init ():void {
NativeApplication.nativeApplication.addEventListener
(Event.ACTIVATE, __activate__);
NativeApplication.nativeApplication.addEventListener
(Event.DEACTIVATE, __deactivate__);
}
public function activate ():void {
if (!animating) {
stage.frameRate = ACTIVE;
}
}
public function deactivate ():void {
if (!animating) {
stage.frameRate = (stage.nativeWindow.visible) ?
INACTIVE_VISIBLE : INACTIVE_INVISIBLE;
}
}
public function animate ($duration:int = 1000):void {
stage.frameRate = 50;
buffer = getTimer () + $duration;
animating = true;
if (!animating) {
stage.addEventListener (Event.ENTER_FRAME, __checkBuffer__);
}
}
private function __activate__ ($event:Event):void {
active = true;
activate ();
}
private function __deactivate__ ($event:Event):void {
active = false;
deactivate ();
}
private function __checkBuffer__ ($event:Event):void {
if (buffer < getTimer ()) {
stage.removeEventListener
(Event.ENTER_FRAME, __checkBuffer__);
animating = false;
if (active) {
activate ();
} else {
deactivate ();
}
}
}
}
}Framerate throttling is a small chapter in the optimization of your AIR application's performance. It's a basic way to get your foot in the door and in the mindset of keeping resource usage low. This mentality and practice can easily lead to more responsive applications that enhance the user's experience while leaving a light footprint. Let's face it—no one likes bloatware.
When developing Flex and/or AIR applications there are a handful of tools that really make the difference between a good project and a great project. They are all very valuable and provide stability and clarity for the RIA development process; or at least they have for me. From Unit Testing to SVN utilities to frameworks and libraries I’ve found the following ten items to be very useful and helpful. I’d even go so far as to say these are critical for quality Flex RIA development; but as Les says: “It’s just a matter of opinion.” 
Here are five great Flex 3.0 and AIR books that are worth checking out in the next several months. Programming Flex 2 is an outstanding book and the updated Programming Flex 3 is sure to please. Creating Visual Experiences with Flex 3.0 by Juan Sanchez and Andy McIntosh is a must read and these AIR books also look really awesome. I’m putting these books on my radar for those cold winter (stay-at-home) nights approaching…
Programming Flex 3: The Comprehensive Guide to Creating Rich Internet Applications with Adobe Flex
Adobe AIR: A Guide for Developers
Professional Adobe Flex 3
Creating Visual Experiences with Flex 3.0
Adobe AIR Cookbook: Solutions and Examples for Rich Internet Application Developers
Atom Feed (xml)