Flex Examples
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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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?
Im hoping someone can help me on this, I have been using the SWF files as asset libraries, these are dynamically loaded from an XML datasource that is passed to the app, now everone of them works fine…..apart from the thumbSkin for a vertical scroll bar? if i use images from a folder it works fine, but once I use the SWF the thumbSkin appears 5px or so to the right, or with a restricted width, any ideas on this? could it be a registration point? I checked that but it didnt seem to make any difference, any help would be greatly appreciated, and kudos on a great site!
Hi friends,
iam new to flex world, can anybody help in my projects,
can u give url’s of sample projects of flex,
This works perfectly for embedded assets as they are per Adobe’s recommended embedding methods. My question is this: Say I want to publish an assets SWF to be used much in the same manner, however I am not wanting to embed the SWF’s assets into my application. Rather I want to use a SWFLoader (or the BulkLoader API in my case) ot load the assets at run-time.
I can easily access the assets in the SWF by using getDefinitionByName(ClassName) as Class, however when loading these assets up into data objects to be consumed say by a list, I cannot get an itemRenderer with an mx:Image to load them.
Has anyone successfully done this?
Hi,
Is it possible to set the symbol name at runtime? what I really want is make a function that generate and return the class name when I pass the symbol name for it.
here is my code.
public static function EmbedAssets(AssetName:String='default'):Class { [Embed('assets/POILibrary.swf', symbol={AssetName})] var _tempEmb:Class; return _tempEmb; }In here i get 2 errors
Did I make any mistakes?
shabith ishan: no it is not possible. the link is created during compilation.
I am getting desperate here. You guys be careful before building a big project linking .SWFs. The linking of the SWF is not stable. Sometimes when I compile with mxmlc I get a working file, sometimes not. It seems to depend on the state of fcsh. If I reset it, it works, but I have no idea when it stops working. Has anyone found a solution to this problem?
My code is as follows:
**************SpritePanel.as****************
package {
import flash.display.MovieClip;
[Embed(source="/libraries/main_library.swf", symbol="Panel1")]
public class SpritePanel extends MovieClip {
public var spinningStar:SpinningStar;
public function SpritePanel() {
if (spinningStar == null)
throw new Error (“compile didnt link objects”);
else
trace (“compiled alright”);
}
}
}
**************SpinningStar.as****************
package {
import flash.display.MovieClip;
[Embed(source="/libraries/main_library.swf", symbol="SpinningStar")]
public class SpinningStar extends MovieClip {
public function SpinningStar() {
addEventListener(Event.ENTER_FRAME,rot);
}
private function rot(e:*):void {
rotation +=10;
}
}
}
yeah, in the CS3 Flash IDE, the SpinningStar is a child of Panel1 (of course)
it not working!!!!!!
Errors:
unable to resolve ‘button.swf’ for transcoding
Unable to transcode button.swf.
mike,
My example doesn’t use button.swf. But I’d start by making sure that the button.swf (or icons.swf) is in the same directory as your main .MXML file, because the error message is telling you that it cannot find the button.swf asset.
Peter
mike,
also make sure you set a correct source path. I got your error when I tried to embed a swf in mxml, which was itself in subdirectory inside my src folder.
For example when you have two files:
/src/assets/MySwf.swf
/src/views/MyView.mxml
and you want to embed MySwf in MyView, be sure your source path starts with /
source=”@Embed(‘/assets/MySwf.swf’, symbol=’s')”
I forgot to put / at the start (was: ‘assets/MySwf.swf’) and the I got this error. Without the slash Flex would look for /src/views/assets/MySwf.swf .
I just can’t do it…
My intentions are to put all my images in a single swf file, however it doesn’t work, comes with a transcoding compilation error…
when i compile a single symbol I get no error but it won’t solve my issue.
thanks..
Cássio,
What does the error say? And which version/build of the Flex SDK are you using?
Peter
Cassio, you need to make sure your embedded SWF is compiled with the same or lower version of FlexSDK as your Flex application.
You can use Hayesmaker’s method described here:
http://www.codersbible.com/snippet/show/21
Hello, I’m trying to use your code to use it on a backgroundImage of the balise mx:Application
usually that should works as we can read on http://livedocs.adobe.com/flex/201/langref/mx/core/MovieClipAsset.html
if I try that it’s just because I need to play an embedded swf on the background of my flex application
I tried to use the method with a swfloader (you can see on my print screen below how I used it).
It works without embedded but without it I need to refresh my page to put the extern swf in browser’s cache and the swf in baddly played the first time (loading problem)
then websites on websites… I arrived on this blog and tried the solution.
But doesn’t work.
Can you help me peter ?
thank you. if you need sources email me I guess you have it.
thank you very much.
but, that doesn’t work and I get this message error :
definition for symbol ‘bulletCheck’ not found gk/src/script index.as line 12 1253078517437 378
and
Unable to transcode anim.swf. gk/src/script index.as line 12 1253079095265 385
here you can see the code of the index.as :
http://img12.imageshack.us/img12/3631/copieecran.png
the code of index.mxml is (simplified) like (without xml symbol to not be eaten :
mx:Application
backgroundImage=”{BULLET_CHECK}”
so I think I have the same problem than cassio
Do you have any suggestion ?
nobody ? :-(
I’m desperated…
I realise that the problem is a year old but this may help other people with a similar error. You probably need to:
1) open your flash file with the symbol you want to embed
2) right click on the symbol name in the library and open the Properties menu
3) check the ‘Export for ActionScript’ checkbox
That’s it. Best luck,
M.
Great! worked perfect. Thanks for sharing.