1. Home
2. Developer Connection
3. Flex Developer Center
4. Flex Quick Start

Flex Quick Starts: Getting started

Table of contents

• Coding with MXML and ActionScript
• Creating your first application
• Handling events
• Positioning and laying out Flex components
• Embedding application assets

Embedding application assets

You can embed various types of assets in your Adobe® Flex™ applications. Embedded assets are compiled into the SWF file of your Flex application. They are not loaded at run time and you do not have to deploy the original asset files with your application.

You can embed images with the PNG, JPEG, and GIF file formats, SWF files, sound files with the MP3 file format, SVG files, and fonts. The following topics describe how to embed these assets:

• Images (multiple instances)
• Image (single instance)
• Images that use the 9-slice scaling feature
• Images for use with CSS and skinning
• SWF files
• SWF Library Assets
• Sound files
• SVG files
• Fonts

Embedding images (multiple instances)

You can embed an image with the PNG, JPEG, or GIF file format in your Flex application and create one or more instances of it.

This example uses the [Embed] metadata tag to embed the image in your application and associate it with a bindable ActionScript class. It then binds the source property of the Image control to the Logo class. You can bind the Logo class to any component property that takes an image, such as the icon property of the Button control.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingImages/index.html"
    layout="horizontal" width="350" height="250"
>
    
    <mx:Script>
        <![CDATA[
            [Embed(source="assets/logo.png")]
            [Bindable]

            public var Logo:Class;            
        ]]>
    </mx:Script>

    <mx:Image id="myLogo" source="{Logo}"/>

    <mx:Image id="myLogo2" source="{Logo}"/>

</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

Embedding an image (single instance)

You can use an inline @Embed directive to embed an image in your Flex application that you want to display just once.

This example adds an Image component to an application and uses the @Embed directive in its source attribute. To use this same image in another Image control, you must also embed it in that component. If you want to display multiple instances of an embedded image, use the [Embed] metadata tag instead.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingAnImage/index.html"
    width="200" height="240"
>
    <mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>

</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

Images that use the 9-slice scaling feature

You can embed an image file into your Flex application and have it scale intelligently in a component-like manner. Using the 9-slice scaling feature, the four corners of your image do not scale at all, the horizontal border scales only in the horizontal direction, and the vertical border scales only in the vertical direction. This is useful, for example, for creating boxes with rounded corners or for component-style resizing where you want to keep the border sharp when the component is scaled.

This example uses the scaleGridTop, scaleGridBottom, scaleGridLeft and scaleGridRight grid-line location properties for the Embed metadata tag to create your 9-slice scaling grid.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingImagesScale9/index.html"
    layout="vertical" width="400" height="480"

>

    <mx:Script>
        <![CDATA[
            [Embed(
                source="assets/fancy_border.png", 
                scaleGridTop="55", scaleGridBottom="137", 
                scaleGridLeft="57", scaleGridRight="266"

            )]
            
            [Bindable]
            public var FancyBorderImage:Class;
        ]]>

    </mx:Script>

    <mx:Image source="{FancyBorderImage}" width="146" height="82"/>

    <mx:Image source="{FancyBorderImage}" width="266" height="150"/>
    <mx:Image source="{FancyBorderImage}" width="325" height="183"/>

</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

Embedding images using CSS for skinning

You can embed an image in your Flex application and use it to skin your components.

You can defines a CSS type selector to set the skin for all components of a given type. In this example, you create a type selector for the Button control. The type selector specifies the images to use as skin properties of your component by using Embed. You can also define a class selector to create a custom CSS class that you can apply as a style to specific components.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingImagesCSS/index.html"
    layout="horizontal" width="270" height="100"
    horizontalAlign="center" verticalAlign="middle" 

>

    <mx:Style>
        Button 
        {
            upSkin: Embed("assets/box_closed.png");

            overSkin: Embed("assets/box.png");
            downSkin: Embed("assets/box_new.png");

        }
    </mx:Style>
    
    <mx:Button/>
    
    <mx:Text text="Roll over and click the box!"/>

</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

Embedding SWF files

Embedding a SWF file is almost identical to embedding an image. The difference is that you can treat instances of embedded SWF files as instances of the MovieClip class. (They are actually subclasses of the MovieClipAsset class, which is a subclass of the MovieClip class.)

Note: You cannot access the properties or methods of embedded SWF files directly. You can, however, use LocalConnection to allow them to communicate.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
     viewSourceURL="src/EmbeddingSwfFiles/index.html"
    layout="horizontal" width="290" height="290"
    horizontalAlign="center" verticalAlign="middle"
 >

    <mx:Script>
    <![CDATA[
            [Embed(source="assets/hourglass.swf")]

            [Bindable]
            public var Hourglass:Class;            
        ]]>
    </mx:Script>

    <mx:Image id="hourglass" source="{Hourglass}"/>
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

Embedding SWF library assets

You can embed specific symbols from the library of an existing SWF in your application. Flash defines three types of symbols: Button, MovieClip, and Graphic. You can embed Button and MovieClip symbols in a Flex application, but you cannot embed a Graphic symbol because it cannot be exported for ActionScript.

This example uses the source property of the [Embed] metadata tag to specify the SWF file that contains your library, and the symbol property of the [Embed] metadata tag to specify the Linkage ID of the symbol in the library that you want to embed.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingSwfLibraryAssets/index.html"
    layout="horizontal" width="450" height="240"
    horizontalAlign="center" verticalAlign="bottom"     

>
  
    <mx:Script>
    <![CDATA[
            [Embed(source="assets/library.swf", symbol="BadApple")]

            [Bindable]
            public var BadApple:Class;
            
            [Embed(source="assets/library.swf", symbol="Pumpkin")]

            [Bindable]
            public var Pumpkin:Class;
                        
        ]]>
    </mx:Script>

    <mx:Image id="badApple" source="{BadApple}" width="150" height="151.8"/>

    <mx:Image id="pumpkin" source="{Pumpkin}" width="150" height="131.7"/>
    

</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

Embedding sound files

You can embed an MP3 file in your Flex application using the [Embed] metadata tag and play it back.

Note: Remember that embedded sound files become part of your application (the final SWF file) and MP3 files can be quite large, thereby making your application larger and negatively impacting your application's download speed.

This example creates a new instance of the MP3 file as a SoundAsset. It uses the play() method of the SoundAsset class to play the instance of the MP3 file, and stores the returned SoundChannel object so that you can later call the stop() method of the SoundChannel object to end playback.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" verticalAlign="center" viewSourceURL="srcEmbeddingSoundFiles/index.html">

    <mx:Script>
        <![CDATA[
            import mx.core.SoundAsset;
            import flash.media.*;

            [Embed(source="assets/pie-yan-knee.mp3")]

            [Bindable]
            public var Song:Class;

            public var mySong:SoundAsset = new Song() as SoundAsset;
            public var channel:SoundChannel;
            
            public function playSound():void 
            {

                // Make sure we don't get multiple songs playing at the same time
                stopSound();
                
                // Play the song on the channel
                channel = mySong.play();
            }
            
            public function stopSound():void 
            {

                // Stop the channel, but only if it exists
                if ( channel != null ) channel.stop();
            }

        ]]>
    </mx:Script>
    
    <mx:HBox>
        <mx:Button label="play" click="playSound();"/>

        <mx:Button label="stop" click="stopSound();"/>        
    </mx:HBox>
    
    <mx:Text width="348" textAlign="center" color="#ffffff">

        <mx:htmlText>
            <![CDATA[<a href="http://derekaudette.ottawaarts.com/music.php">Pie-Yan-Knee Written and Performed by: Derek R. Audette (c) 2004 (Creative Commons Attribution License)</a>]]>
        </mx:htmlText>
    </mx:Text> 
    
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

Embedding SVG files

You can embed SVG files into your Flex application.

Embedding an SVG file is almost identical to embedding an image. The difference is that you can treat instances of embedded SVG files as instances of the Sprite class. (They are actually instances of the SpriteAsset class, which is a subclass of the Sprite class.) Embedded SVG files also retain their vector properties and do not pixellate when scaled or transformed.

Note: You cannot import SVG files at run time; you can only embed them in your Flex application at compile time.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="horizontal" 
    viewSourceURL="srcEmbeddingSvgFiles/index.html"
    width="600" height="470"

>
    <mx:Script>
    <![CDATA[
            [Embed(source="assets/frog.svg")]

            [Bindable]
            public var SvgFrog:Class;            
        ]]>
    </mx:Script>

    <mx:Image id="smallFrog" source="{SvgFrog}" width="128" height="130"/>

    <mx:Image id="largeFrog" source="{SvgFrog}"/>
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

Embedding fonts

You want to embed a font in your Flex application and use it as the style for text-based components.

The following example creates a class selector that references the font-family name of the embedded font. It then creates a Text control and sets its style to the class selector.

In-Depth: For more information on working with fonts, see "Using Fonts" in the Flex 3 Developer's Guide.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="horizontal" 
    horizontalAlign="center" 
    verticalAlign="center" 
    viewSourceURL="src/EmbeddingFonts/index.html"

>

    <mx:Style>
        @font-face 
        {
            font-family: Copacetix;

            src: url("assets/copacetix.ttf");
            unicode-range:
                U+0020-U+0040, /* Punctuation, Numbers */

                U+0041-U+005A, /* Upper-Case A-Z */
                U+005B-U+0060, /* Punctuation and Symbols */
                U+0061-U+007A, /* Lower-Case a-z */
                U+007B-U+007E; /* Punctuation and Symbols */

        }

        .MyTextStyle 
        { 
            font-family: Copacetix; 
            font-size: 24pt;    
        }

    </mx:Style>

    <mx:Text styleName="MyTextStyle" text="Embedded fonts rock!" width="100%"/>
    

</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Copacetix TrueType font courtesy of Copacetix.com. Licensed under the Creative Commons Attribution-ShareAlike 2.0 license.

Back to top

For more information

For more information on embedding assets, see "Embedding Assets" in the Flex 3 Developer's Guide.

About the author