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, the
MouseEvent.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.
Autumn is here again and it’s time to review some of the happenings from the summer. Here are 43 hand selected Flex and ActionScript 3.0 libraries, APIs, tips, and tricks. There have been several new APIs launched, Cairngorm was open sourced, a Flex 3 update was released and Grant Skinner created a new tweening engine. There have been new Flex application development frameworks released. There was a Flex code generator update and there have also been some design pattern updates released. You don’t want to miss out on this link round up!
The Flex and AS3 ecosystem is exploding. The demand for individuals who know these technologies is at an all time high. I currently get about 5 people per day that are seeking developers who know this stuff. Over the past year the demand has only increased. More and more kats are jumping into Flex/AS3 dev every day. Along with the surge of interest has come a ton of new tools, libraries and components. I put together two blog posts last year showcasing many of these new libraries, tools, etc. The hit count on these those posts is pretty impressive to say the least. It surprised me quite a bit actually. Since the start of 2008 there have been several cool items introduced to the community. Here is a new list of 36 Flex and AS3 tools, libraries and components that I’ve been tracking. I hope someone else gets some use out of this list. I need to check out many of these projects myself…
Atom Feed (xml)