Storing icons in external ZIP and seamless work with composite icons

There are a lot of ways to work with icons in Flex, e.g.:

  • Use @Embed(...) directive inline
  • Use [Embed(...)] metatag and store all icons in class like Assets.as

All this is good until you have too much assets because:

  • Each Embed directive takes huge time during compilation
  • Developer can not optimize memory/CPU usage via passing one BitmapData to the same Bitmaps instead of creating new BitmapData for each icon
  • Embed sometimes fails during incremental compilation

Another huge problem I’m going to address today is the runtime icons layering. Imagine you need these 9 icons (thanks to webappers.com):

The simple solution is just to embed all of them. But wouldn’t it be better to store and load only these 6 icons? You can compose them in runtime!

Solution


View Source

There is assets.zip archive near the application:

Here is how it works:

  1. assetManager = new AssetManager(); // utility class
  2. assets = new SampleAssets(assetManager); // create application assets class
  3. action = new LoadAssetsZIPAction();
  4. action.start("assets.zip", assetManager); // loading assets.zip from the same folder

Here is how we declare bindable icon in SampleAssets:

  1. [Bindable("barChart48Change")]
  2. public var barChart48:Class;

When assets.zip is loaded, barChart48.png is wrapped into Class and assigned to barChart48.

Layered icons

We have barChart48 and addLayer48 in assets.zip. Here is how to declare icon that will show them together:

  1. [IconLayer("barChart48")]
  2. [IconLayer("addLayer48")]
  3. [Bindable("addBarChart48Change")]
  4. public var addBarChart48:Class;

Update: SWFs are now supported too

Create .FLA file with name addLayerAnimated48.fla, set documentClass to addLayerAnimated48 and it will be possible to use resulting addLayerAnimated48.swf just like PNG images:

  1. [Bindable("addLayerAnimated48Change")]
  2. public var addLayerAnimated48:Class;
  3.  
  4. [IconLayer("comment48")]
  5. [IconLayer("addLayerAnimated48")]
  6. [Bindable("addComment48Change")]
  7. public var addCommentAnimated48:Class;

Note: for now only layered icons from SWFs use just screenshots, animation is not visible (it’s not principal, just not yet done).

P.S: Compiler option

Do not forget to add -keep-as3-metadata+=IconLayer compiler option to keep IconLayer metatag in non-debug builds.

P.P.S: FZip and ZIP – Adler32 error

FZip library that is used to work with ZIP works across all Flash Players only if ZIP is created without any compression. It does not bother because images are already compressed by itself.

Other topics

Change font size in the whole app with Ctrl+/-
Runtime icons for Flex components

6 responses to “Storing icons in external ZIP and seamless work with composite icons”

  1. This is a great idea! Thanks for sharing!

  2. Максим, а если я использую SWF как embed? Он после загрузке выглядит как MovieClip, как можно потом его использовать в нескольких местах используя предложенный тобой способ? Или он работает только для bitmap’ов.

  3. Спасибо Максим, буду следить. Я также добавил поддержку загрузки MP3 файлов, но с swf и типом контента MovieClip возникли проболемы, точнее я не смог представить его как Class для создания экзампляторов, так как деает это тег Embed.

  4. Огромное спасибо :)

Leave a Reply