Another cool way to embed assets into a Flex application is to load a SWF file and embed specific library assets using the [Embed] metadata and specifying the library symbol to embed.
Full code after the jump.
The following example embeds three different symbols from the “assets/icons.swf” file. Each asset is given its own unique variable so even though there is only one SWF file, you can easily reference each individual library asset:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/25/embedding-assets-from-swf-files/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
<mx:Script>
<![CDATA[
[Bindable]
[Embed('assets/icons.swf', symbol='bulletCheck')]
private static var BULLET_CHECK:Class;
[Bindable]
[Embed('assets/icons.swf', symbol='bulletCritical')]
private static var BULLET_CRITICAL:Class;
[Bindable]
[Embed('assets/icons.swf', symbol='bulletWarning')]
private static var BULLET_WARNING:Class;
]]>
</mx:Script>
<mx:Button id="checkBtn" label="Check" icon="{BULLET_CHECK}" />
<mx:Button id="warningBtn" label="Warning" icon="{BULLET_WARNING}" />
<mx:Button id="critcalBtn" label="Critical" icon="{BULLET_CRITICAL}" />
</mx:Application>
You could also make the code a bit nicer (in my opinion) by moving those Embed tags and variable names into an external ActionScript file, as seen in the following example:
Images.as
/**
* http://blog.flexexamples.com/2007/07/25/embedding-assets-from-swf-files/
*/
package
{
public class Images
{
[Embed('assets/icons.swf', symbol='bulletCheck')]
public static const BULLET_CHECK:Class;
[Embed('assets/icons.swf', symbol='bulletCritical')]
public static const BULLET_CRITICAL:Class;
[Embed('assets/icons.swf', symbol='bulletWarning')]
public static const BULLET_WARNING:Class;
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/25/embedding-assets-from-swf-files/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
<mx:Button id="checkBtn" label="Check" icon="{Images.BULLET_CHECK}" />
<mx:Button id="warningBtn" label="Warning" icon="{Images.BULLET_WARNING}" />
<mx:Button id="critcalBtn" label="Critical" icon="{Images.BULLET_CRITICAL}" />
</mx:Application>
Pretty neat.
Updated 7/29/2007
Another trick when embedding assets from SWF files is you can use the following shorthand notation:
[Bindable]
[Embed('assets/icons.swf#bulletCheck')]
private var BULLET_CHECK:Class;
[Bindable]
[Embed('assets/icons.swf#bulletCritical')]
private var BULLET_CRITICAL:Class;
[Bindable]
[Embed('assets/icons.swf#bulletWarning')]
private var BULLET_WARNING:Class;
Note that the Flash library symbol name is appended after the SWF with a “#” sign.
Another trick when embedding assets from SWF files is you can use the following shorthand notation:
[Bindable]
[Embed('assets/icons.swf#bulletCheck')]
private var BULLET_CHECK:Class;
[Bindable]
[Embed('assets/icons.swf#bulletCritical')]
private var BULLET_CRITICAL:Class;
[Bindable]
[Embed('assets/icons.swf#bulletWarning')]
private var BULLET_WARNING:Class;
Note that the Flash library symbol name is appended after the SWF with a “#” sign. I’ll update the post when I get a chance.
Can you explain why I would be getting “definition for symbol zip_92101 not found” error?
brian,
Are you using one of the snippets from above? If you can post some code (or a link to the code on your server — sometimes my comment form eats HTMLy syntax), I can take a look.
Peter
thanks for the information.
I have a query!
If I want to use flash movieclip in flex as button then it gives error.
for example:
var sample_btn:Button = new Button() sample_btn.icon = Embed('assets/icons.swf', symbol='bulletWarning')it gives error any suggestion please!
rconceiver,
I don’t believe you can use the Embed directive in ActionScript. You’d need to use the [Embed] metadata to embed your desired icon.
Then, once the asset is embedded, you can do something like the following:
[Bindable] [Embed("icons.swf#bullet_star")] public var bulletStarIcon:Class; private function init():void { var button:Button = new Button(); button.label = "Star"; button.setStyle("icon", bulletStarIcon); addChild(button); }I’ll try and post a new example later today showing the full code, but this should be enough to get you started.
Peter
OK, I posted the full example at “Setting a Button control’s icon to an asset from a SWF file in Flex”.
Peter
Thanks a lot Peter!
Problem solved with your solution! using the embed directive!
thanks once again…
Hi,
If I am using the Flexbuilder plugin in MyEclipse, can this method you mention here work with code completion in the mxml files?
I mean, if I set up the class and package like that, will the constants/swf library symbols appear in dropdown code complete popups while editing the mxml files?
thanks :)
nevermind… I forgot to put the import for the class there - now it shows up in code completion - DOH!
One other question though - how come I can’t stretch the vector symbol when used in this fashion? I mean, having a width and height attribute works if they are both the same value - then it scales the symbol - however, having a larger width (i.e. changing its aspect ratio) than height will not stretch the symbol at all??
IS Flex supports templates(framework) to develop Assessments?Could any one please tell me?
Is it possible to access the variables from the embedded swf?