journal

So I ran across this pdf by Joa Ebert recently about Actionscript 3 optimization techniques. It was a good read, nothing that hasn’t already been stated before, but I figured I’d touch up on some of the major points here in this blog. This post is especially for AS2 developers that are still in the old AS2 mode of typing.

Native Types

One of the basic things to remember is to use integers instead of numbers when iterating in a loop. Heres an example…

// Slow Version
for (var i: Number = 0; i <n; i++)
   void;       
 
// Fast version:
for (var i: int = 0; i < n; i++)
   void;

Typing

Strict type your objects. In AS2 creating objects dynamically using the Object class was a very nasty habit. Instead create the class specifically.

// Slow version:
for (;i<n;i++)
{
   var v: Object = new Object;
   v.x = 1;
   v.y = 2;
   v.z = 3;
}
// Fast version:
class Vector3D
{
   public var x: Number;
   public var y: Number;
   public var z: Number;
}
for (;i<n;i++)
{
   var v: Vector3D = new Vector3D;
   v.x = 1;
   v.y = 2;
   v.z = 3;
}

Casting

Array access can be speeded up by telling the Flash player what is inside the array. Since arrays can contain any object the player has to gure out what type it is. This step can be eliminated by casting the object.

// Slow version:
for (;i<n;i++)
   array[i].x = 2;
 
// Fast version:
for (;i<n;i++)
   Vector3D(array[i]).x = 2;

Promoting Issues

If you do something like i * 2 the expression will be promoted as a Number. Array access has been optimized for integer numbers. So whenever you do some calculations make sure that you keep the int type by casting again as an integer.

// Slow version:
for (;i<n2;i++)
   Vector3D(array[i*2]).x = 2;
 
// Fast version:
for (;i<n2;i++)
   Vector3D(array[int(i*2)]).x = 2;

Instance re-using

Using a lot of uneeded istances slows the Flash player down in two ways. The first is that a lot of garbage is created which means the garbage collection has to do extra work. The second argument against a lot of unneeded instances is simply that you have to create them which takes an extra amount of time.

// Slow version:
for (;i<n;i++)
   p = new Point(i, i);
 
// Fast version:
for (;i<n;i++)
{
   p.x = i;
   p.y = i;
}

try..catch and null

What I always tell my team is to never use try catch unless you’re trying to access something external to the flash player like files, web services, etc. and only if you’re going to notify the user of what went wrong in the exception. Other than that use nulls like so…

// Slow version:
// Slow version:
var o: Sprite;
for (;i<n;i++)
{
   try
   {
      o.blendMode = BlendMode.ADD;
   }
   catch ( error: Error ) {}
}
 
// Fast version:
var o: Sprite;
for (;i<n;i++)
   if ( o != null )
      o.blendMode = BlendMode.ADD;

Alot of these optimization tricks not only optimize your code in runtime. But alot of these tricks are good for code readability. I can’t emphasize enough how good it is to get in the habit of creating classes instead of dynamically creating objects, clear and concise commenting, and abstracting your code to manageable classes. In the end, it will make you a better programmer.

There is a really good post on InfoQ of the top 10 development mistakes in Flex Development. Most of these things a Flash developer just knows and a traditional web developer may not. To all the traditional developers out their building Flex this is for you. Remember this is basically a somewhat optimized version of Flash so you have to watch out for the traditional problems of Flash, memory alloc, client cpu, deep linking, etc.

Top 10 Flex Mistakes

Gret new article on DevNet about embedding fonts in Flash.

Just wanted to post some resources for Python regarding Flex Development. I like Python, its a clean dynamic language that’s 10 times as fast to program as most languages. For AMF use PyAMF at http://pyamf.org/. Another great resource whether you use Python or not is TRAC at http://trac.edgewall.org/. It hooks into SVN and provides a face to your version control. And after you have TRAC installed, check out MYLYN at http://www.eclipse.org/mylyn/. It hooks into your TRAC repo and reflects bugs right there in eclipse. You can also use it with other bug trackers too so check it out if you’re not using it and you have an existing bug tracker. Of course you can use PyDev for Eclipse at http://pydev.sourceforge.net/ but I’m a solid TextMate fan and been using it since it was released.

This great post provides a brief tutorial on how to use Google Analytics to track events and what not in your Flash applications.

Until Flex Builder 3 Stand Alone includes Ant built in you will have to install it separately. For those that are not familiar with Eclipse, this can be tricky to install.The following is the revised steps for Flex Builder 3 Stand Alone.

• Launch Flex Builder 3
• Go to Help > Software Updates > Find and Install
• Search for new features to install, click next
• Select “The Eclipse Project Updates”, click finish   
• Note: If you do not have the option above click New Remote Site and enter “The Eclipse Project Updates” as the name and “http://update.eclipse.org/updates/3.3″ as the url.
• In Eclipse Project Updates > Eclipse SDK Eclipse 3.3.2 (3.3.3, 3.3.4, etc) Select “Eclipse Java Development Tools…”, or otherwise known as JDT click next
• Accept the license agreement, click next
• Click finish to start download
• Eclipse downloads Java Development Tools
• Click “Install all” to install Java Development Tools
• Restart the Eclipse workbench

That’s it! You now have Apache Ant support in your standalone Flex Builder 3 install.Go to Window > Other View > Ant and Click OK. You now have the Ant view

So after reading Skinner’s post on AS3 Resource management I have one thing to say, CLEAN YOUR CODE!!  That means removing all listeners, and nulling out all of your visualloaders, etc.  Best thing to do is in all of your views have an initialize function and a clean function.  This way you can add listeners in your init and remove them in your clean function.  Also any displayobjects that you remove from the stage never get deleted, at least not that I know of and I build this stuff all day.  So everything that you have in that class is going to remain in memory. So if you can, remove them in your clean function.  Anyway, that’s all for now… have you all seen Google’s new app engine? HOT!!!

Adobe has a great article on improving Flex performance.  Its a definite must read just for the slew of hints and tricks.  Alot of it deals with using Runtime Shared Libraries and a few optimization techniques when compiling your libraries.  Good stuff for all you Flex developers.

So I came across this interesting little write up on using the command pattern in WPF, in the article is also a link to a separate article on understanding events.   If you’re not using these techniques in your Silverlight or Flash apps, you’re really missing out and you should try to learn how to use them.  Especially in the internet app world these patterns are very important for decoupling your sender and receiver.  Its good practice not to tie a button click for example directly to whatever is receiving it.  I’m glad to see this being used more in the Silverlight/WPF community

Ok I always forget this so I’m gonna blog about it and hopefully it’ll stick. If you want to dynamically change the color of a movieclip using hex values use this example

var c:ColorTransform = new ColorTransform();
c.color = 0xFFFFFF;
box_mc.transform.colorTransform = c;