Skip to content
June 7, 2011 / Daniel Freeman

Pure ActionScript + MadComponents vs. Flash Builder 4.5

I’ve been dedicated to MadComponents lately.  With new updates and new features or components every few days – I’m having a completely self indulgent time with this free mobile library of components for Flash or Flex developers.

You can join the fun by downloading/check-out MadComponents from: http://code.google.com/p/mad-components/

When I’m not working on projects like MadComponents, I’m a freelance developer and trainer with expertise in several Mobile development technologies – not just Flash/AIR.  Mobile development is my passion nowadays.  But my bread-and-butter work is still as an experienced senior Flash Builder (Flex) developer.

I’ve been tinkering with Flash Builder 4.5 since before it went public on Adobe Labs.  But my familiarity with Flex makes me contemptuous about its shortcomings and lardy-arsed bloated-ness.  In the context of mobile applications – it’s just inappropriate.  Flash Builder 4.5 inherits a legacy from its predecessors which were never intended for mobile deployment.

Considering the great job they’ve done of improving the performance of Flash and AIR on mobile devices – I’m really surprised by the decisions Adobe made with the Spark Mobile components and framework.

But I know whatever my opinions about Flash Builder 4.5  – the Flex fanboys will love it.  The Adobe branding, and strength of the Flash community will guarantee its success.  I know Adobe is encouraging developers to blog about there favourite features, and there are a few sycophantic bloggers that I’ve completely lost respect for.

At least Pure ActionScript development can take full advantage of the mobile enhancements in Flash and AIR.

I did an experiment.  I wrote the same application in Flash Builder 4.5, and then using Pure ActionScript + MadComponents.  (You can check out my code at http://code.google.com/p/mad-components/source/checkout – take a look at MadComponentsAMF.as .  To run this demo, you’ll need to set up a Zend PHP server.  Or Coldfusion, or Java.  see: http://www.adobe.com/devnet/flex/testdrivemobile/articles/mtd_1_1.html )

Having built the same app using Flex and MadComponents, the resulting file sizes are:-

Flash Builder 4.5:     .apk 2MB                               MadComponents:    .apk 70KB*

(* built using the same amxmlc and adt that came with Flash Builder 4.5)

Wait a minute!!  The Flex app is about 28x fatter than the Pure ActionScript + MadComponents version.

28 x fatter!

That’s not insignificant for a mobile device with limited memory and capabilities.  I was surprised by the numbers, and I scoured Flash Builder for an option that might yield a more optimised app.  But I couldn’t find any way to do that.

The fan boys will probably retort that Flash Builder makes things easier.  But does it?

Over the next few weeks, I’m going to blog some tutorials, based on Adobe’s “Getting Started With Flex On Mobile” tutorials at:-  http://www.adobe.com/devnet/flex.html

I’m going to take each of these tutorials, and write about how to do it with MadComponents.  Subscribe to this blog if you’d like to follow these.  Oh, and if you’re an irate Flex fanboy – leave a message below:-

Advertisements

41 Comments

Leave a Comment
  1. Sanad / Jun 7 2011 11:28 pm

    Daniel!

    I will be waiting desperately for the tutorials. Great work!

  2. mani / Jun 8 2011 1:12 am

    Flex components is used to improve development efficiency, as its 28X fatter than pure as, maybe it’s time is 28X faster than pure as too..

    • Daniel Freeman / Jun 8 2011 6:45 am

      *lol!* …. and I believe in Santa Clause, the Tooth Fairy, and the Easter Bunny.

    • DaveW / Jun 8 2011 5:13 pm

      You’re insane, Flex isn’t anywhere close to 28x faster to develop.

    • Brian Vaughn / May 9 2012 2:12 pm

      Sorry I realize this comment is old, but “28X faster” based on what? Just pulling numbers out of your ass doesn’t make them so.

      • Daniel Freeman / May 31 2012 12:25 pm

        28x faTTer. Although MadComponents has been reported by many developers as being faster than Flex in that it is a bit more responsive and apps fire-up more quickly.

  3. NJT / Jun 8 2011 9:14 am

    As an example, take a look at ‘UIComponent’ class – it has over 14000 lines of code (!) and is required for every visual element in a Flex project… I keep on wondering how the makers of Flex do not obey the quite limited runtime performance of the AVM, not to speak of mobile devices. Flex might have nice concepts seen from a developer-centric point of view – but perfomance matters a lot when it comes to _user-centric_ experiences. Imho, that’s the reason why Flex is rarely used (compared to pure AS3) and 3rd party frameworks that are much more lightweight have such a big success.

  4. RimV / Jun 10 2011 12:33 am

    I think @mani has a point and people using Flex for ease of development and extensibility. There will be drawback but that is how a huge framework is stuck into it.

    Literally if you want super light weight app, making everything from scratch and using pure AS but development time may cost a lot.

    .02 cent from a Flex fanboy

    • Daniel Freeman / Jun 10 2011 7:08 am

      MadComponents saves you development time.

      MadComponents has an XML mark-up language, similar (but easier) than MXML.

      MadComponents is easier to learn than Flex.

      MadComponents is lightweight and powerful.

      MadComponents is extensible.

      MadComponents is skinnable.

      MadComponents is IDE agnostic. You can use it in Flex, or Flash, or AXDT, or Flash Developer….

      MadComponents has been built from the ground up for mobile devices. (It wasn’t built for another purpose – and then perverted to Mobile).

      Neither you, nor Mani have followed the link to the code, and compared MadComponentsAMF.as to the code from the Flex tutorial. The MadComponents one is simpler than the Flex one – because MadComponents was designed that way.

      My 0.98 cent from a Flex expert, and creator of MadComponents is “I agree – don’t make everything from scratch – Use MadComponents!!!!”

      Of course – one aspect missing from MadComponents is a visual drag-and-drop IDE. I could write one – I just don’t have time. But if I did write one – I would innovate, and write something new and fit-for-purpose. For example, MadComponents has several components than span over multiple pages. (pages, tabPages, viewFlipper, navigation, treeNavigation, etc.) So he editor should possess a view where you can visually edit the structure of the project over multiple pages. Sometimes writing something NEW from scratch IS the best policy. It’s what Adobe should have done with their Flash for Mobile AIR IDE. My frustration with FB4.5 is that Adobe never sat down and had a re-think. They never innovated. They were lazy. They just modified what they already had.

      Developers will look at Flash, versus the alternatives for non-native mobile development. PhoneGap, Titanium, Corona, Shiva+AirplaySDK, etc. They’re going to conclude that Flash is bloated, and go for another solution.

      End-users are going to download Flex based apps – but realise that they’re not getting “value” considering the size of the app. They’ll want to accommodate other apps on their device, so they’ll delete the Flex one to make room.

      Adobe have really shot themselves in the foot with FB4.5. It infuriates me that Adobe are “bribing” developers to say nice things about FB4.5 in their blogs. If Adobe want to add momentum to Flash on Mobile – Adobe should be supporting community initiatives like MadComponents.

      • Pravat / Jun 22 2011 1:53 pm

        Chill dude, we’ll try it. Someones beginning to sound like a MadComponents fanboy. 🙂

  5. Marcus Baffa / Jul 18 2011 12:59 pm

    Hi Daniel,

    Great Job. I am a Flex Developer and I would like to mix Mad Components with Mobile Chart Components distributed with Flex 4.5.1.

    How Can i do this. How can I mix Flex Mobile Components with Mad Components ???
    How Can I include States and Transitions With your components ???

    Thanks in advance.

    • Daniel Freeman / Jul 18 2011 9:08 pm

      I’m making a change to uipages that will be a bit like states using uipages transitions. Probably not as powerful. What do you need? 0.5.7 update due friday. In the meantime I’m travelling and using mobile Internet. a bit limiting but I’ll try some experiments with graphs etc. Get back to you end of week.

      • Marcus Baffa / Jul 19 2011 12:58 am

        Hi Daniel,

        I am a Flex programmer I do not work with Flash. I am using for the first time an ActionScript Mobile Project.

        I am working in two mobile app. One of them will use RTMFP to stream video and audio so I need something like an UIComponent to host the videos. It works in with Flex Mobile Project.

        And the other one will need to use the Charts components of Flex 4.5.1.

        I am trying to migrate both to Mad Components. So I need a place to associate my Video object and a place to instantiate my charts.

        Can You help me !!!

        Thanks

      • Daniel Freeman / Jul 24 2011 1:46 pm

        I’ve added charts to ExtendedMadness (My extended components library, available on the download site).

        Take a look at the MadComponentsDesktop.as example in the code repository.

        I haven’t tried incorporating the FB4.5.1 graphs into a project, but if you can set it up in ActionScript, you can addChild to a placeholder, like you’ve done with video.

      • mvbaffa / Jul 19 2011 2:51 pm

        Hi Daniel,

        Just one more thing. It would be great if you could support gestureworks (gestureworks.com).

        By the way I succeded to cal an FluorineFx #C AMF service from my project.

        Last thing, How can we define a password input field.

        Thanks

  6. Daniel Freeman / Jul 19 2011 9:11 pm

    To include video, put an empty placeholder image into your layout. (image I’d=”placeholder/)

    Then

    var placeholder:UIImage = UIImage(UI.findViewById(“placeholder));
    placeholder.addChild(video);

    To make a password Input field

    var input:UIInput = etc etc findviewbyid etc
    UILabel(input.getChildAt(0)).displayAsPassword = true;

    I’ll have a go at graphs. probably weekend. Not easy to answer questions this week. Away from home using very slow tesco prepaid mobile Internet that mosty can’t connect.

    • Marcus Baffa / Jul 20 2011 12:33 am

      Hi Daniel,

      The password Worked OK. But to use an image as a placeholder for video did not worked.

      I have used in a Adobe Air application an UIComponent it worked OK. I do not know why but I can not change the width and heith property of the image. I wrote:

      var placeholder:UIImage = UIImage(UI.findViewById(panelVideo));
      placeholder.width = 106;
      placeholder.height = 80;

      But width and height stays zero. I tried to put the dimensions directly in the image directive like this:

      Even if it worked i need to set the width and height dinamically.

      Can you help me.

    • Marcus Baffa / Jul 20 2011 12:35 am

      By the way,

      How can we move the controls programatically ???

      Thanks

    • Marcus Baffa / Jul 20 2011 1:26 am

      I have define the image like this 106,80 and it worked. But I still need to define the width and height programatically

  7. Daniel Freeman / Jul 20 2011 9:25 pm

    I assume you want to resize the image placeholder, but also adjust the layout to compensate for the size change? (for example, a button under the image would be moved down by the image size growing).

    Suppose image is inside vertical. (I use square brackets to represent less than and greater than characters), note: autoLayout=”true” is important.

    [vertical autoLayout=”true” id=”form”]
    [image id=”image”]

    var form:UIForm = UIForm(UI.findViewById(“form”));
    form.data = {image:”160,240″};

    • Marcus Baffa / Jul 24 2011 10:31 pm

      Thanks Daniel,

      I will check it out.

      By the way the problem of MadComponents and Flex 4.5.1 is that when you use with UI.create(this, NAVIGATOR); the create uses internally the addChild method. In Flex 4.5.1 we must use addElement. When you call the UI.create Flex gives an error in the addChild.

      If you could fix this problem I beleive that we will be able to use MadComponents with flex 4.5.

  8. Marcus Baffa / Jul 24 2011 11:10 pm

    Hi Daniel,

    Its is me one more time.

    You have done a terrifIc job. Mad Components is by far more complete and look really better that Flex Components.

    But, I must insist, if you make Mad Components compatible with flex we can have additional components not yet avaiable in Mad Components like the Charts, Flex Charts are excelent. and the containers, for instance TitleGroup, avaiable.

    If you allow me, I would concentrate in this, because with your components and addtionally the components distributed by Adobe we will have an very strong development environment.

    Check the id you can use an alternative method to create your views using addElement. I beleive this will make Mad Components compatible with flex. I understand that Flex generates I larger swf. Bu there are some situations that it is necessary.

    Thanks for your attention.

    • Daniel Freeman / Jul 25 2011 3:44 pm

      It is possible to make custom component flex wrappers for MadComponents. So they can be mixed with spark components and expressed layouts in MXML. While relatively straightforward, it’s not something I have time for currently. But if someone else wants a crack at this, I can give some advice.

  9. Marcus Baffa / Jul 25 2011 6:04 pm

    Hi Daniel,

    If you don’t mind I would like to read some tutorials or some reading you could indicate.

    Thanks

    • Daniel Freeman / Jul 25 2011 9:21 pm

      Just follow my tutorial series, and feel free to ask me questions. In the “recent posts” panel on the right of the page, you’ll see Tutorial 1 to Tutorial 7.

  10. Marcus Baffa / Jul 26 2011 9:43 am

    Hi Daniel,

    I have created a Flex Mobile Application and a Mad Sprite. The Sprite is very simple:

    protected static const HOME_VIEW:XML =

    30,0

    ;

    protected static const NAVIGATOR:XML =

    {HOME_VIEW}
    ;

    The Sprite Constructor is like this:

    public function MadSprite() {
    super();

    // support autoOrients
    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;

    UI.create(this, NAVIGATOR);
    }

    In Flex I have a MXML that has only a UIComponent:

    In the creation complete I have this:

    private function init() : void {
    var swf:Sprite = new MadSprite();
    wrapper.addChild(swf)
    }

    When I run the flex App first I receive the error of null reference in the stage.align line. The stage is null at this moment, If I comment the lines that set the statge Align and ScaleMode I receive the following error:

    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at com.danielfreeman.madcomponents::UI$/create()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/ExtendedMadnessLib/src/com/danielfreeman/madcomponents/UI.as:49]
    at MadSprite()[D:\Flex 4.0 Projects\FlexMad\src\MadSprite.as:61]
    at FlexMad/init()[D:\Flex 4.0 Projects\FlexMad\src\FlexMad.mxml:18]
    at FlexMad/___FlexMad_Application1_creationComplete()[D:\Flex 4.0 Projects\FlexMad\src\FlexMad.mxml:5]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.core::UIComponent/dispatchEvent()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:13128]
    at mx.core::UIComponent/set initialized()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:1818]
    at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\managers\LayoutManager.as:842]
    at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1180]

    Since UI.create(this, NAVIGATOR); calls addChild I need the include mx:components I cannot use spark s:Group as container.

    Would you please give me a simple example of wrapping a Mad Sprite in Flex UIComponent. application. I have read your tutorials and I have not found anything about that.

    Thanks in advance,

    By the way do you intend to publish the source code of MadComponents ???

    • Daniel Freeman / Jul 27 2011 8:06 pm

      I did a simple test, putting a picker bank in a SpriteVisualElement wrapper. What I’ve done is very rough – but most MadComponents can be wrapped up this way. (see the MadComponents sans XML post for how to use MadComponents in a pure ActionScript way).

      package com.danielfreeman.flexMadness
      {
      import com.danielfreeman.madcomponents.Attributes;
      import com.danielfreeman.madcomponents.UIForm;

      import spark.core.SpriteVisualElement;

      public class FlexUIPicker extends SpriteVisualElement
      {
      protected static const WIDTH:Number = 280.0;
      protected static const HEIGHT:Number = 180.0;

      protected static const DATA:XML = //define data here – or even better pass it in as a parameter.

      protected var _picker:UIForm;

      public function FlexUIPicker()
      {
      _picker = new UIForm(this, <columns gapH=”0″><picker>{DATA}</picker><picker>{DATA}</picker></columns>,new Attributes(0,0,WIDTH,HEIGHT));
      _picker.y = 10;
      super();
      }

      override public function setLayoutBoundsSize(width:Number, height:Number, postLayoutTransform:Boolean=true):void
      {
      super.setLayoutBoundsSize(width, height, postLayoutTransform);
      _picker.layout(new Attributes(0, 0, isNaN(width) ? this.width : width, isNaN(height) ? this.height : height));
      }

      override public function get height():Number {
      return HEIGHT;
      }

      public function get pickerBank():UIForm {
      return _picker;
      }
      }
      }

      so once I define my custom component, I can write MXML:-

      <?xml version=”1.0″ encoding=”utf-8″?>
      <s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
      xmlns:s=”library://ns.adobe.com/flex/spark”
      xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”955″ minHeight=”600″
      xmlns:mad=”com.danielfreeman.flexMadness.*”>
      <s:VGroup>
      <s:Button/>
      <mad:FlexUIPicker/>
      <s:Button/>
      </s:VGroup>

      </s:Application>

      By the way, I had to override height in this example, because the pickerBank is masked, and it was returning the unmasked height otherwise. – It was a quick and dirty fix.

      • mvbaffa / Jul 28 2011 1:44 pm

        Thanks Daniel,

        I am at this moment I am working on Flex Mobile Application that uses the StageWebView.

        How could I, using Mad Components, show a web page inside, for instance a ???

      • Daniel Freeman / Jul 28 2011 2:50 pm

        StageWebView, just like StageVideo and Stage3D, is considered as being mapped to a rectangular area of the stage, rather than inside the display list (tree). So you can’t put it inside anything, but you can put it behind a placeholder.

        (I haven’t ried the following, but I’m sure it’s not too far out)…

        Suppose you have an image placeholder in your layout:- <image id=”myImage”>320,240</image>

        var image:UIImage = UIImage(UI.findViewById(“myImage”));
        var imagePoint:Point = image.localToGlobal(new Point(0,0));
        public var webView:StageWebView = new StageWebView();
        webView.stage = this.stage;
        webView.viewPort = new Rectangle( imagePoint.x, imagePoint.y, image.width, image.height);

  11. mvbaffa / Jul 28 2011 5:15 pm

    Thanks Daniel,

    MadComponents by default use IPhone Style Buttons in the ActionBar. How can we identify the target OS and switch the Button styles ???

    • Daniel Freeman / Jul 28 2011 7:57 pm

      I think Capabilities.os will tell you what target you’re running on. (flash.system.Capabilities). On Android it returns linux something.

      The right button is skinnable. The Twitter Client tutorial has an example of skinning it. The left button isn’t, but you can disable it. (assign the empty string to it). You can addChild() your own button into the navigation bar, to use instead of the standard left arrow.

      var nav:UINavigation = UINavigation(UI.findViewById(“nav”));
      nav.navigationBar.backButton.text = “”; //Makes it invisible;
      nav.addChild(myOwnButton); // Add your own button
      myOwnButton.y = 4; //position it if need be.

      One thing I’ve neglected to provide is a way to change the navigation bar colour programmatically. I thought I’d written this, but I haven’t – so I’m going to fix it in 0.5.8. You’ll be able to say nav.colour = 0x222222; // or whatever – Android tends to use dark colours.

  12. Jeffry Houser / Aug 17 2011 2:37 pm

    I didn’t see anyone say it yet, so…

    You seem very confused as to the difference between Flex and Flash Builder.

    Flex is an SDK. It includes an ActionScript Library (The Flex Framework) which is probably analogous to your component set.

    Flash Builder is an IDE and a tool for developing both Flex and ActionScript applications.

    Comparing file sizes between an app built with Flash Builder and one built with Mad component set doesn’t make sense. Unless your Mad component set will somehow turn ActionScript into an APK.

    I believe you are comparing an app built using the Flex Framework to an App built using your components. If so, you should update your post to reflect that.

    You may also specify how you created the app w/ your components.

    If you were to use a Flash Builder ActionScript only project, it wold not come with any of the “weight” that the Flex Framework introduces. It seems likely to me that you could use your components w/ an ActionScript only project and end up with a much smaller file size than you would have in a Flex Project.

    • Daniel Freeman / Aug 17 2011 3:14 pm

      Given that FB4.5 has introduced new mobile spark components, and all the attention that FB4.5 has received has focussed on MXML projects and these components. I make no apology referring to FB4.5. Most average users will be using it to build MXML Flex framework projects after all.

      But I also have issues with the Flash Builder IDE itself. I believe it needed re-inventing for mobile. Not just re-hashing with a new set of components.

      I am indeed comparing an app built using to Flex framework, to an app built using my components. Given that I point to a tutorial that describes how to build the Flex app, and also the source code of my madComponents version – I believe this is clear – isn’t it?

      I use the command line tools (amxmlc, and adt) to create an .apk, or .ipa package. (See tutorial 5 for details).

      “If you were to use a Flash Builder ActionScript only project, it wold not come with any of the “weight” that the Flex Framework introduces. It seems likely to me that you could use your components w/ an ActionScript only project and end up with a much smaller file size than you would have in a Flex Project.”

      … precisely my point.

      But I will go back over my wording and change where I’ve slipped up on the whole Flex/FB thing. I tend to slip the other way too. I’ve been using Flex since the first buggy Mac Beta, so I’m still in the habit of calling the IDE “Flex” despite the name change.

      • Jeffry Houser / Aug 17 2011 3:26 pm

        You might say Flex 4.5 introduced new Mobile Components; and that would be correct.

        You might say Flash Builder 4.5 introduced a Flex Mobile Project type; and that would be correct.

        But, to say Flash Builder 4.5 introduced new mobile components is inaccurate.

        According to Adobe; there are tons of users who use Flash Builder w/o using Flex. That is why the name was changed from Flex Builder to Flash Builder.

        The point you think is made in your post is not clear; specifically the labels on your screenshot images.

  13. Chris Douglass / Aug 18 2011 2:31 pm

    Seriously. Give it a rest. If you don’t *know* how bloated Flex is then, seriously, don’t even bother commenting about it. It is bloated. If you’re building serious apps that need [near] real-time performance you can’t use it if want to deliver you app using AS3. If you want to pick apart someone’s message then become a journalist or a satirist and do the rest of us a favor and stop wasting our time and bandwidth having to defend and support the coders that contribute value to the community.

    Daniel, this is excellent work. Evaluating now for our apps. Looks like just what I needed. Flex just can’t cut it for our app (and I’ve been doing AS and Flex for a *long* time before I make that statement).

    Thanks again for your hard work. The rest of it is noise.

  14. Yuslan Harman / Oct 23 2011 8:41 am

    Okie, i a bit confiuse here, are this MadComponent cannot use on Flex Mobile Project ?
    by the way, Daniel im ur big fan… cool component ….

  15. Jan / Oct 28 2011 12:18 pm

    In fact, flex component are much SLOWER than any reasonable pure AS3 implementation. They are just too fat (styling, skinning ..) Use pure as3 if speed of your app is a concern to you ..

  16. Erwinus / May 31 2012 1:00 am

    I did the same with an app and made a Flex and AS3 version. In the first place the size of the AS3-only apk size was small until you don’t have adobe Air installed, you must include Air to run it on an device without adobe Air. For both versions, you need adobe Air (Captive run-time) even when it is written in AS3 only. Both versions produce a SWF file that is not native to the OS.

    AS3 version without Air is: 396 kb
    AS3 version with Air is: 8.795 kb
    Flex version is: 9.175 kb

    So i think you “export release build” settings are not correct to compare both versions (i had the same issue before).

    As you can see, there isn’t much difference between the similar apps.

    • Daniel Freeman / May 31 2012 12:24 pm

      I’m willing to concede the point if something wasn’t set correctly. At the time I was attempting to compare NON-Captive runtime versions.

      But what is the size of the Flex app WITHOUT captive runtime?

    • Brian Vaughn / May 31 2012 12:29 pm

      I don’t think it’s fair to say “you need adobe Air (Captive run-time) even when it is written in AS3 only”. This depends on which devices you’re aiming to support. The size Daniel initially made is still valid for certain circumstances.

To discuss MadComponents/MC3D, join the Facebook group!

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: