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.

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.

Flex SWF files are big, but I like the productivity

My RIA Demo

My first Rich Internet Application (RIA) was created with Flash MX2004. I then converted it to Flash 8.  Now I want to build new RIA’s, so I bought Flex Builder 2 which will hopefully help me be more productive.  I have been excited about the new way of doing things.  I think the biggest advantage will come from the addition of the Sprite object and other more focused visual objects instead of having to use heavy weighted MovieClip’s for everything.  Also, all of these visual objects, including the MovieClip, are now created and added to the Stage in a familiar object oriented manner.

One of the hardest things about using Flash to build RIA’s was learning how to take the animation out of the application.  It was hard to use the documentation and the help available from the internet because it was usually described in terms of frames.  Eventually, I was able to weed through it. I ended up using only 2 or 3 frames to get my application started and otherwise never used a timeline.  It looks like ActionScript 3 can be used like a traditional development language and I like that.

We are told Flex 2 applications will run faster due to improved player performance and that never hurts.  I really don’t have a problem with my first RIA running too slow after the initial startup and I must have hundreds of little MovieClips that need to be created.  I’m even happy with the startup speed but anything less than instantaneous startup could always use improvement.  I’m going to put more effort into the startup speed in my next application.  I’m thinking I can really make a lot of improvements here especially since I won’t have the overhead of MovieClips and will gain from the reported player improvements.

I got the impression from somewhere in the hype that the compiled code would be more compact but I’m skeptical.  My Flash 8 application is currently 68,089 bytes long.  I was always amazed at how small it was.  I started programming in the early days when program size dominated the architecture.  I am probably more attuned to size than most programmers because it is usually not an issue today.  Of course there is no doubt that the larger the file, the slower the download.  Also, the ISP allows a limited number of bytes per month before surcharges kick in.

I became disappointed immediately after installing Flex Builder 2.  I created an MXML project and compiled it with no code added.  The size of the SWF file was 125,617 bytes.  That was nearly twice as big as my working Flash 8 application.  Then I built an ActionScript 3 project with no extra code.  The file size was 568 bytes compared to 36 bytes for a Flash 8 file.

The difference between the empty ActionScript 3 and ActionScript 2 SWF files is not a great concern.  (That is, unless you need an SWF file that does nothing.)  I’m not even sure I would be totally unhappy if I could write the equivalent functionality into an MXML application and it took 68,000 additional bytes on top of the base 125,000 bytes.  The start up could actually be faster because of improved performance even though the download would be slower.

Unfortunately, it really does appear that the code grows quickly when using Flex Builder 2 to build either ActionScript 3 or MXML projects.  I wrote some ActionScript 3 code to create a Sprite with a rounded rectangular header with gradient fill and a TextField for a title.  The size of the SWF is 1179. That means it took 611 bytes for this function along with some test code.  Now the source code is relatively concise compared to doing this with Flash 8 and the source code is clean and clear which is wonderful.  I haven’t taken the time to build a Flash 8 file to do the same thing.  There is a fair amount of code to do just the drawing of a rounded rectangle in ActionScript 2.  But I don’t think it would take 611 bytes to do it.



I tried to duplicate a small part of my existing application with MXML and it grew to 283,867 (or 158,250 bytes more) and I admit I didn’t even figure how to do everything with the MXML.  Because of this, I’m not sure I’m going to commit to MXML at this point. This is disappointing for at least two reasons. First, I didn’t need to buy Flex Builder 2 to build pure ActionScript 3 applications.  Second, my hope of increasing productivity was due partly to being able to use the nice set of GUI controls Flex provides.

At this point, I have a gut feeling that the SWF files are going to be significantly bigger even if I don’t use MXML It may be that I’m not configuring the project correctly.  It may be that the end result is still better than before because of speed of execution will compensate for the slower download time.  I have seen enough to know that I will be able to develop projects faster and the resulting source code will be easier to maintain but I sure would like to hear some comment about the file sizes.