Monday, April 23, 2007

ActionScript 3 and Programming Style

I’ve began commenting with dashes to separate functions in the 60’s.  (See the ActionScript 3 code below.)  Initially I used asterisks but they required 3 holes in a punch card whereas dashes required only 1.  A card filled with 3 rows of holes would sometimes collapse in the reader.  Style has beauty and function but it also has history and structural integrity.

Before starting this blog I picked up a new book, “clear blogging” by Bob Walsh published by Apress.  I like it so far but I haven’t finished reading it.  I felt I needed some hands on experience at the same time.  However, I’m going to start exercising one of his points and that is to blog about topics I love.  One topic I love is “programming style”.

This is the ActionScript 3 code I used to measure the SWF file size in my previous post:
    import flash.display.Sprite;
    import display.Header;

    public class EFD1 extends Sprite
    /*  --------------------------------------------------------------------
        -------------------------------------------------------------------- */
        public function EFD1
            var lvHeader:Header = new Header
                [0x8A39B9, 0x9D5BBF],
                "Shop by Category"
            addChild( lvHeader );
        } // Constructor
    } // class EFD1
} // package

package display
    import flash.display.*;
    import flash.text.TextField;
    import flash.geom.*

    public class Header extends Sprite
    /*  --------------------------------------------------------------------
        Private Static Variables
        -------------------------------------------------------------------- */
        // Programmers looking at my code:
        // Please don't do what I've done here.  That is, don't declare these
        // as static variables.  I did this when I was testing how much memory
        // is used.  Although this technique works and is expedient, it will
        // end up biting you later on.
        private static var svCorner     :Number = 5;
        private static var svHeight     :Number = 18.0;
        private static var svIndent     :Number = 5;
        private static var svMargin     :Number = 2;
        private static var svTextColor  :uint = 0xFFFFFF;
    /*  --------------------------------------------------------------------
        Private Member Variables
        -------------------------------------------------------------------- */
        private var mvTextField :TextField;
    /*  --------------------------------------------------------------------
        -------------------------------------------------------------------- */
        public function Header
            ( avWidth  :Number,
              avColors :Array,
              avText   :String = "" )
            var lvWidth:Number = avWidth - svMargin - svMargin;

            //Add Gradient Header           
            var lvMatrix:Matrix = new Matrix();
            lvMatrix.createGradientBox( lvWidth, svHeight, Math.PI * .5, 0, 0);
                [1, 1],
                [0x0, 0xFF],
            graphics.drawRoundRect( svMargin, svMargin, lvWidth, svHeight, svCorner );

            // Add TextField            
            mvTextField = new TextField();
            mvTextField.x = svMargin + svIndent;
            mvTextField.y = svMargin;
            mvTextField.width = lvWidth - svIndent - svIndent;
            mvTextField.height = svHeight;
            mvTextField.textColor = svTextColor;
            mvTextField.selectable = false;
            setText( avText );
            addChild( mvTextField );
        } // Constructor
    /*  --------------------------------------------------------------------
        -------------------------------------------------------------------- */
        public function setText
            ( avText :String )
            mvTextField.text = avText;
        } // setText
    } // class Header
} // package display

Code produces EFD1.swf

Sunday, April 22, 2007

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.

Friday, April 20, 2007

Getting Started with RIA

This is my first attempt at blogging.  I’m finding the hardest part of getting started is choosing the focus of the blog.  I’ve decided initially it will be about Rich Internet Applications (RIA).  I don’t have any RIA’s up and running and have never even created a traditional website so I’m guessing the blog’s framework will be a journal.

I have been programming since 1966 but I really have done very little work recently due partly to health problems.  Actually I have kept active during the last two years; just haven’t made any money.  Now I’m trying to reboot my career.  I’ve changed directions umpteen times in the last 40 years and actually enjoy the transitions.  I love programming, but I have to admit in recent years I’ve had to take what I can get to survive rather than do what I want to do.  I’m hope developing RIA’s will be fun.  I have resisted doing web applications because I feel that the customer has to settle for the limitations of HTML and the browser.

Although I don’t have any RIA sites up and running I do have experience writing a Flash application that I’m going to use for discussion.  The application was written originally with Flash MX2004 and more recently updated to Flash 8.  My goal is to move to Flex or perhaps just Actionscript 3 and build something similar but maybe for a different type of business.  My son has suggested a web site for an auto dealer because of his recent experience buying a car.

The application I wrote was for my daughter-in-law’s hobby of doing custom floral arrangements.  She was often asked when promoting her hobby if she had a website.  Since my son was a developer of corporate web sites he started to build one for her, but they could never agree on how it should look.  Finally they found a template for a florist website that they both liked.  Since I wasn’t working he asked me to look at it.  He wanted me to change the text and set it up so that they could insert pictures of her arrangements in it.

Well, I looked at it and I just couldn’t believe you could make money selling something like that template.  For example, the template split parts of a picture into more than one table cell to make it line up.  The few pages they had didn’t match her needs and they were missing a lot what she did need.  But it did look pretty good.

I told them I would try using Flash which I had previously used to write some small educational applications.  It took a lot longer to write than I thought it would and I will discuss some of my experiences in the future.  But to make an already long story somewhat shorter, she really hasn’t pursued the hobby since and it has been sitting there waiting to put in a few unaddressed details.  The link to the applications is:

My RIA Demo

Keep in mind this is not a running business and the products are not real.  I will touch on the details of the application as I go along but I think the most interesting things about it are that it is all written from scratch graphically except for the Actionscript TextField object and it is less than 70k in size.  There is also very little demand on the server.