Friday, May 18, 2007

Migrating State Picker drop-down list to AS3


I was hoping to be able to post regularly and at the same time have some meat in the content. An early goal was to narrate my experiences converting my 2 custom drop-down lists to ActionScript 3 (AS3). I knew it would be a challenge. To be perfectly honest, I almost gave up back when I was trying to build them with ActionScript 2 (AS2).

I built a State Picker and a Date Picker control with Flash MX2004 and later updated them with Flash 8. The controls are built from scratch using only TextFields and MovieClips. The State Picker is shown below and the AS2 Rich Internet Application (RIA) demo the controls were written for is linked below also. The Date Picker can be seen from the demo as well (click on “Shipping Info” in the RIA’s menu).


State Picker in RIA Demo in Shipping Info Form


My RIA Demo


I have played around with Flex 2’s MXML but up until a few days ago I really haven’t done anything serious with AS3. The bottom line is that it has taken me longer to figure out how to do this with AS3 and thus a larger gap in my posting than I had hoped. I was hoping to post the source code early in the narrative but I know now that this won’t happen. I do have a rough version running and I will try to post the .swf file shortly.

Wednesday, May 2, 2007

SWF Size: ActionScript 3 versus ActionScript

I was concerned I wasn’t going to get compact SWF files from ActionScript 3 (AS3) like I was getting from ActionScript 2 (AS2). But after running some simple tests, I am now thinking AS3 will not be a problem.

Unfortunately, I’m still disappointed with the large SWF size from MXML projects. However, I still plan to use Flex 2 with MXML to develop my back-end tools to take advantage of its rapid development qualities. At the same time I will pick up some practical experience with MXML. Maybe after seeing MXML in action, I might become less resistant to using it in my Rich Internet Applications (RIA).

SWF files are compressed and this can cause confusion when it comes to analyzing and comparing size. For example, when I refactor my AS2 source code to be more efficient, I sometimes find it results in a larger size. Simply changing the order of things in your code can affect the size because of the compression. Fortunately, I found Flash 8 AS2 SWF files end up amazingly small regardless of my coding style.

My tests are crude and leave plenty of room for misinterpretation and argument. Nonetheless, I have concluded AS3 files grow incrementally at about the same pace even though they start out initially about 500 bytes larger.

I wrote test code in AS2 and AS3 to build 2 TextFields. I compared the resulting SWF file size by compiling 3 different versions of each. The first, everything was commented out. The second, 1 TestField was created. Finally the third, 2 TextFields were created.

AS2
var mvTextField1:TextField = createTextField
(
  "T1",
 getNextHighestDepth(),
 0,
 0,
 200,
 20
);
mvTextField1.text = "T1";

var mvTextField2:TextField = createTextField
(
  "T2",
 getNextHighestDepth(),
 0,
 20,
 200,
 20
);
mvTextField2.text = "T2";

AS3
package
{
 import flash.display.Sprite;
 import flash.text.*;

 public class ActionScriptSizeTest extends Sprite
 {
  public function ActionScriptSizeTest()
  {
   var lvTextField1:TextField = new TextField();
   lvTextField1.x = 0;
   lvTextField1.y = 0;
   lvTextField1.width = 200;
   lvTextField1.height = 20;
   lvTextField1.text = "T1"
   addChild( lvTextField1 );

   var lvTextField2:TextField = new TextField();
   lvTextField2.x = 0;
   lvTextField2.y = 20;
   lvTextField2.width = 200;
   lvTextField2.height = 20;
   lvTextField2.text = "T2"
   addChild( lvTextField2 );

  } // Constructor

 } // public class

} // package

AS2 / AS3 SWF Size Comparison, bytes
Test AS2 AS3 Increase

No code

36

566

530

1 TextField

144

667

523

2 TextFields

172

694

522



The results actually show AS3 to be better incrementally than AS2 but the differences are too small to be significant.  Remember, the compression confuses everything.  I was worried that bringing in a TextField might require some extra library code.  It turns out adding a TextField adds only a little more than 100 bytes for both ActionScripts.

The whole coding strategy changes when you migrate to ActionScript 3, so I can’t say if the equivalent program would be smaller or larger.  I’m never going to write the same application again.  At the very least I would write it with more features.  So I’ll never know.