jump to navigation

Understanding Embedding Assets in Flex3 August 27, 2010

Posted by Tournas Dimitrios in Flex.

If we do not know wich assets will be included by default in a Flex application, it makes sense to load them  dynamically at runtime (referenced through a XML file). However , for small , known assets  , like a logo , small sound mp3 files and icons you may choose to embed them , wich means that they will be compiled into the SWF . This will ensure that no runtime lag occurs when they are displayed .You can embed the following types of files in a Flex application.

File Type File Format MIME Type Description and Examples
Images GIF image/gif Embedding JPEG, GIF, and PNG images
.JPG, .JPEG image/jpeg
PNG image/png
SVG image/svg


Embedding SVG images
Flash SWF application/x-shockwave-flash Embedding SWF files
Symbols stored in a SWF file
Audio MP3 audio/mpeg Embedding sounds
Font TTF (TrueType) application/x-font-truetype TBD
FON (System font) application/x-font
All other types application/octet-stream Embedding all other file types

Embedded assets are integrated into the Flex application at compile time . This article will discuss  three approaches for embedding assets :

  • Inline in an MXML tag using the @Embed directive

First example, many controls support icons or skins that you can embed in the application. The Button control lets you specify label text, as well as an optional icon image, as the following example shows:

<?xml version="1.0"?>
<!-- embed\ButtonIcon.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Button label="Icon Button" icon="@Embed(source='logo.gif')"/>

Second example ,rather than directly referencing an image for runtime including uses the @Embed directive with the relative path to the image

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- Loading image at runtime -->
<mx:Image source="assets/image1.jpg" />

<!-- Embedding the image -->
<mx:Image  source="@Embed(source='image1.jpg')"/>

Third example , embedding symbols from swf file created with Flash IDE

<?xml version="1.0"?>
<!-- embed\EmbedSWFSymbol.mxml -->
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <mx:VBox id="vBox0" width="300" height="300" >
        <mx:Image id="image0"
            source="@Embed(source='circleSquare.swf', symbol='greenSquare')"
  • In ActionScript using the [Embed()] metadata tag

Like the in-line @Embed directive you can define a source attribute and set it equal to the asset you want to embed . Caution !!!! the Image path is relative to the main application file , even if we reference the image through a custom component .

In Actionscript 3 , all embedded assets are represented by a unique embedded asset Class that is an instance of the Actionscript Class named Class

<?xml version="1.0"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script >
import mx.core.BitmapAsset
[Bindable] private var myPic:Class;

<mx:HBox >
<mx:Image source={'myPic'} />
<mx:Image source={'myPic'} />
<mx:Image source={'myPic'} />

</mx:VBox >

Directly binding to the Bindable Class of the embedded Image  is an Implementation of convenience . Under the hood , Flex is actually creating an instance of your embedded Image Class , just as You would any Actioncript Class. When You create the instances , You should data type them to the appropriate Flex Class for that embedded resource :

For JPG , GIF , PNG files use >>> mx.core.BitmapAsset

For SWF files use >>> mx.core.MovieClipAsset

The following example depends on statically named variables but you can use your programming logic to dynamicaly create assets at runtime

<?xml version="1.0"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script >
import mx.core.BitmapAsset
 private var myPic:Class;

[Bindable] private var pic1:BitmapAsset = new myPic();
[Bindable] private var pic2:BitmapAsset = new myPic();
[Bindable] private var pic3:BitmapAsset = new myPic();

<mx:HBox >
<mx:Image source={'pic1'} />
<mx:Image source={'pic2'} />
<mx:Image source={'pic3'} />

</mx:VBox >
  • In Css using the Embed() directive

Many style properties of Flex components support imported assets. Most frequently, you use these style properties to set the skins for a component. Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements. These elements can be made up of images, SWF files, or class files that contain drawing API methods.

For more information on skinning and on embedding assets by using style sheets, see Creating Skins.

For style properties, you can embed an asset as part of a style sheet definition by using the Embed() directive. One common use for style properties is to set a component’s skins. For example, you can set skins for a Button control by using the overSkin, upSkin, and downSkin

style properties, as the following example shows:

<?xml version="1.0"?>
<!-- embed\ButtonIconCSS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

        .myCustomButton {

    <mx:Button label="Icon Button Style Def" styleName="myCustomButton"/>

The following code demostrates how to embed Fonts via CSS

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Style >
	fontFamily: "Baroque Script";
	fontWeight: normal;
	fontStyle: normal;
	src: local("Baroque Script");

<mx:Label fontFamily="Baroque Script" text="Hello dimitrios"
	fontSize="25"  x="200" y="200"  color="red"/>


The following code demostrates how to embed sound in Flex

< ? xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

            import mx.controls.Alert;

            private var ding_mp3:Class;

            private var alert:Alert;

            private function showAlert():void {
                alert = Alert.show("Are you sure you want to delete the internet?", "Confirm delete...", Alert.YES | Alert.NO);

    SoundEffect id="soundEffect" source="{ding_mp3}" />

    <mx:Button label="Delete Internet?" click="showAlert(); " mouseDownEffect="{soundEffect}" />



No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s