Embedding assets in your mobile application

Traditionally flash developers have been more focused on the browser to deliver their content. While delivering the content through the browser, developers generally embedded their assets within the root swf. Honestly, there is no other way except loading these images off their servers but this could have resulted in a lag whilst the content was running

With AIR however, developers need to make certain changes to their applications to make them more apt for deployment on mobile devices. With AIR, developers get access to the file system and the assets for their content can be accessed off the file system instead of being embedded within the root swf. Assets for the application should be packaged along with the application and then should be accessed on demand by simply loading them using a Loader.

On iOS, the swf file is converted in native arm code. For any application it is always preferred to have a small executable. A small executable has a lower memory footprint and a lower load time.

Let us talk a little more about assets. Assets can be broadly classified into two categories

1)   Assets that do not contain ActionScript byte code (abc)

Under this header we can consider all media files, xml files, database files that do not contain any code. For using such assets, it is imperative that such assets are not embedded within the swf but should be loaded on demand using the Loader class. SWF files that only contain assets and do not contain any code should be loaded in a similar fashion. They should not be embedded as part of the root swf. Even the timeline animations created from Flash Professional should be loaded in the same way.

The easiest way to identify if your swf has code or not is to simply run swfdump on your swf and then search for a DoABC2 tag. The executable swfdump is available as part of the SDK.

FlexSDK/bin/swfdump mySWF.swf | grep DoABC2                                            (On MAC)

FlexSDK/bin/swfdump.exe mySWF.swf | find “DoABC2”                                  (On Windows)

2)   Assets containing ActionScript byte code (abc)

Under this header we can consider swf files that have any actionscript 3 code will fall under this category. Such files cannot be loaded at runtime and should be embedded using the Embed syntax

 [Embed(source=“myswf.swf”, mimeType=”application/octetstream“)]

public static const myClass:Class;

Under this header I would also like to mention that certain workflows within Flash Professional might introduce actionscript code within a swf file without the developer himself typing in any code. One example would be exporting linkages for fonts. An AS developer may want to export a font from a swf file to be used later in some other swf. However, as soon as a linkage is created to be exported for Actionscript some AS code becomes part of the swf.

By not embedding assets within the root swf, developers keep the size of the executable smaller which goes a long way in keeping their application more performant. On demand loading of assets keeps the memory usage of the application lower. Rich content could have assets upwards of 50 MBs and keeping those assets permanently in memory unnecessarily keeps the memory usage of application high.

A smaller executable also keeps the load time of application lesser, thus enhancing the experience of your application.

Mobile devices have download, memory and performance considerations, and we strongly recommend that all mobile AIR apps try to keep their footprint below 50MB, where possible, to improve the user experience. Loading assets on demand is a simple technique that goes a long way in making performant applications.

10 Responses to Embedding assets in your mobile application

  1. Ivan says:

    What about frame labels?
    Won’t having labels result in having abc?

    • Kshitiz Gupta says:

      No frame labels do not introduce ABC. The easiest way to identify the same would to use swfdump and then do a grep for DoABC2.

      • Ivan says:

        Then I suppose one can attach some code after new swf is loaded based on frame labels. Not very convenient but it can work when you have many animations which have some code (i.e. buttons with complex animations)

        • Kshitiz Gupta says:

          I have not tried what you are mentioning over here but I think it should work. Load the swf and take it as a movie clip. To think a swf without any AS code is similar to a video with some meta data( your frame labels). Do let me know the outcome of your experiments.

  2. Brett U says:

    I have been embedding background images for my View classes, but thought I would take your recommendations and see what happens if I just use What I find is that when using a Slide transition between views, I can see a white background on the new view momentarily, before the image has finished loading and is added to the display list. How can I load the image so that it doesn’t “pop in” ?

    • Brett U says:

      The website ate my Image tag: s:Image source=”path/file.png”

    • Kshitiz Gupta says:

      Are these images being served over the network are or present as local images? The idea here is just avoid the images from being embedded, as embedded images are added to the swf which increases the executable’s size. You could always load the image earlier with a loader and then use the loader’s bitmapdata to show in the source of the s:Image

      • Brett U says:

        The images are local. I understand the concept of using a loader, but when (in terms of the View being rendered) should I try and load the image, and how can I delay the View from sending a “view is ready for transition” event until I’ve completely loaded the image from the loader into the Image control? Do I do it in the childrenCreated() method, or when? Doing it in viewActivate() is too late, as the transition is already taking place before the viewActivate event is fired. Thanks!

        • Kshitiz Gupta says:

          Can you try sending the decoded bitmap to the next view as data and use the data as source for your s:Image

          • Brett Uglow says:

            Hi Kshitiz, I found a solution which seems to allow work. Using ViewNavigator.resumeTransition() and ViewNavigator.suspendTransition(), I can tell my new View object to suspend the transition (from the current View) until such time as my images have loaded (by adding a img.addEventListener(FlexEvent.READY, imageLoaded) call to the images that are in the background of the view). When the last of my images has loaded, I call ViewNavigator.resumeTransition() and the transition plays and my new View has a nice background.

            Thanks for your help!