Embedding assets from SWF files at Flex Examples

Jul

Embedding assets from SWF files

By Peter deHaan

Categories: Embed Tags: Embed, icon, symbol.

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.

20 Responses to “Embedding assets from SWF files”

Feed for this Entry View blog reactions

1 peterd Jul 26th, 2007 at 9:42 am

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.
2 brian Sep 20th, 2007 at 6:43 pm

Can you explain why I would be getting “definition for symbol zip_92101 not found” error?
3 peterd Sep 20th, 2007 at 8:46 pm

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
4 rconceiver Feb 29th, 2008 at 7:25 am
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!
5 peterd Feb 29th, 2008 at 1:11 pm
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
6 peterd Feb 29th, 2008 at 2:20 pm

OK, I posted the full example at “Setting a Button control’s icon to an asset from a SWF file in Flex”.

Peter
7 rconceiver Mar 2nd, 2008 at 10:50 pm

Thanks a lot Peter!

Problem solved with your solution! using the embed directive!

thanks once again…
8 cdude Apr 8th, 2008 at 7:18 pm

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 :)
9 cdude Apr 8th, 2008 at 7:42 pm

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??
10 priya May 7th, 2008 at 4:59 am

IS Flex supports templates(framework) to develop Assessments?Could any one please tell me?
11 bcedergren May 15th, 2008 at 9:41 am

Is it possible to access the variables from the embedded swf?
12 Phil Nov 18th, 2008 at 4:40 pm

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!
13 prasad Nov 25th, 2008 at 12:02 am

Hi friends,

iam new to flex world, can anybody help in my projects,

can u give url’s of sample projects of flex,
14 jwopitz Feb 27th, 2009 at 9:01 am

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?
15 shabith ishan Apr 11th, 2009 at 12:21 am
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

1084: Syntax error: expecting colon before rightbrace.
1084: Syntax error: expecting identifier before rightbrace.

Did I make any mistakes?
16 BubbleBoy May 6th, 2009 at 3:21 am

shabith ishan: no it is not possible. the link is created during compilation.
17 BubbleBoy May 6th, 2009 at 3:27 am

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;
}
}
}
18 BubbleBoy May 6th, 2009 at 3:28 am

yeah, in the CS3 Flash IDE, the SpinningStar is a child of Panel1 (of course)
19 mike Jun 29th, 2009 at 5:43 am

it not working!!!!!!
Errors:

unable to resolve ‘button.swf’ for transcoding
Unable to transcode button.swf.
20 Peter deHaan Jun 29th, 2009 at 9:22 am

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