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 likeAssets.as
All this is good until you have too much assets because:
- Each
Embeddirective takes huge time during compilation - Developer can not optimize memory/CPU usage via passing one
BitmapDatato the sameBitmapsinstead of creating newBitmapDatafor each icon Embedsometimes 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
There is assets.zip archive near the application:
Here is how it works:
-
assetManager = new AssetManager(); // utility class
-
assets = new SampleAssets(assetManager); // create application assets class
-
action = new LoadAssetsZIPAction();
-
action.start("assets.zip", assetManager); // loading assets.zip from the same folder
Here is how we declare bindable icon in SampleAssets:
-
[Bindable("barChart48Change")]
-
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:
-
[IconLayer("barChart48")]
-
[IconLayer("addLayer48")]
-
[Bindable("addBarChart48Change")]
-
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:
-
[Bindable("addLayerAnimated48Change")]
-
public var addLayerAnimated48:Class;
-
-
[IconLayer("comment48")]
-
[IconLayer("addLayerAnimated48")]
-
[Bindable("addComment48Change")]
-
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
This is a great idea! Thanks for sharing!
Максим, а если я использую SWF как embed? Он после загрузке выглядит как MovieClip, как можно потом его использовать в нескольких местах используя предложенный тобой способ? Или он работает только для bitmap’ов.
Valeriy, yes, I believe that it’s possible to use it for .SWF embeds though the code needs to be slightly modified.
I’ll try to add this feature today or tomorrow or you can do it yourself.
Спасибо Максим, буду следить. Я также добавил поддержку загрузки MP3 файлов, но с swf и типом контента MovieClip возникли проболемы, точнее я не смог представить его как Class для создания экзампляторов, так как деает это тег Embed.
I’ve updated the post, now it’s possible to use SWF’s even with animation!
Огромное спасибо :)