App Size: Flex vs Actionscript Project (Flex Framework Caching)

Following on from discussions at the ‘after’ part of last nights MMUG-Dublin meeting, I created a pure Actionscript 3 project and a similar Flex application project, both in Flex Builder 3. The aim was to compare final swf size. Both apps draw 3 circles on the screen.

Three circles, well done

Size Wise:

Flex 3 Application SWF (Release Build of Project): 169KB (but only 65KB with framework caching – see Optimization section below)

Pure Actionscript 3 Project SWF: 1KB

Optimization – Framework Caching

By default, the flex framework gets merged into your main swf file, adding around 100KB+. This can be avoided by going to Properties/Flex Build Path/Library Path/Framework Linkage/ and selecting Runtime Shared Library (RSL) from the dropdown. When you do a Build Release Project, your framework will be exported as a signed swz and an unsigned swf . These files should be placed in the same directory as your main swf file on the web server. In Flex 4, the framework RSL will automatically point to a public section of the Adobe site, where the swz’s will be available. Saves you having to host them.

The framework will only need to be downloaded by a particular client once, and will be cached by Flash Player, meaning every subsequent use of your app will not require downloading of the framework.swz (in the release will be named something like framework_3.2.0.3958.swz).

Read more about framework caching here: http://ted.onflash.org/2008/01/flex-3-framework-caching.php

Conclusion

If Actionscript will suffice e.g. for drawing three circles on the screen, go with a pure AS3 Project. If your developing data driven applications and user interfaces, use the Flex SDK (saves a tonne of time and effort, and whats 60kb these days – less than most peoples profile pics). Have a look at this Stackoverflow question for more opinions on each approaches pros and cons.

Code

Flex

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	initialize="onInitialize()">
	<mx:Script>
		<![CDATA[
			import mx.core.UIComponent;

			private function onInitialize():void{
				drawCircle( 0x336699 );
	            drawCircle( 0x993333 );
	            drawCircle( 0x339933 );
			}

			private function drawCircle( color:uint ):void
	        {
	            var circle:Shape = new Shape();
	            var displayObject:UIComponent = new UIComponent();

	            circle.graphics.beginFill( color );
	            circle.graphics.lineStyle( 2, 0xCCCCCC );
	            circle.graphics.drawCircle( 30, 40, 30);
	            circle.graphics.endFill();
	            circle.x = (this.numChildren * 65) + 10;
	            circle.y = 0;

	            displayObject.addChild(circle);
	            this.addChild(displayObject);
	        }
		]]>
	</mx:Script>
</mx:Application>

Actionscript Project

package {
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;

	public class ActionScriptProject extends Sprite
	{
		public function ActionScriptProject()
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            doDrawCircle( 0x336699 );
            doDrawCircle( 0x993333 );
            doDrawCircle( 0x339933 );
		}

		private function doDrawCircle( color:uint ):void
        {
            var child:Shape = new Shape();
            child.graphics.beginFill( color );
            child.graphics.lineStyle( 2, 0xCCCCCC );
            child.graphics.drawCircle( 30, 40, 30);
            child.graphics.endFill();
            child.x = (this.numChildren * 65) + 10;
            child.y = 0;
            addChild(child);
        }

	}
}
Advertisements

Tags: , , , , , ,

4 Responses to “App Size: Flex vs Actionscript Project (Flex Framework Caching)”

  1. Colm Brazel Says:

    Hi Brian,

    Good to see you last night. Point well made.

    Thanks for link to stackoverflow.

    best

    Colm

    • bishopondevelopment Says:

      That being said, i’ve never used a pure AS project (and dont really intend to), but I was surprised by the size difference!

  2. bishopondevelopment Says:

    And with the HttpService/WebService and Remoting tags in Flex, getting data into the app is much easier than in pure AS (as far as I know!)

  3. Reggie Says:

      5 décembre 2012Très bon article qui reprend paeteifamrnt tous les points à savoir Très bien construit également, et la partie pour les sous-titres décalés est bienvenue et servira à pas mal de gens je pense.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: