Embedding application assets
Requirements
User level
All
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.
Tip: The alternative to embedding assets is to load them at run time. Assets loaded at run time have to be deployed with your application because they are not compiled into it. This has the advantage of keeping the file size of your Flex application smaller and speeding up its initial loading time.
You can embed images with the PNG, JPEG, and GIF file formats, SWF files, sound files with the MP3 file format, FXG 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
- SWF files
- SWF Library Assets
- Sound files
- FXG documents
- Fonts
Note: Each of the following examples includes embedded assets.
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"?>
<!-- EmbeddingImages.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="350" height="250">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
[Embed(source="assets/logo.png")]
[Bindable]
public var Logo:Class;
]]>
</fx:Script>
<mx:Image id="myLogo" source="{Logo}"/>
<mx:Image id="myLogo2" source="{Logo}"/>
</s:Application>
Result
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"?>
<!-- EmbeddingAnImage.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="200" height="240">
<mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>
</s:Application>
Result
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 Scale9 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.
Tip: An easy way to get the values for grid-line locations is to use guides along with the Rectangular Marquee tool and the Info pallette in Adobe Photoshop.
Tip: Rotating an instance of an embedded image that uses 9-slice scaling turns off 9-slice scaling for that image for any future size transformations.
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- EmbeddingImagesScale9.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400" height="480">
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<fx:Script>
<![CDATA[
[Embed(
source="assets/fancy_border.png",
scaleGridTop="55", scaleGridBottom="137",
scaleGridLeft="57", scaleGridRight="266"
)]
[Bindable]
public var FancyBorderImage:Class;
]]>
</fx: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"/>
</s:Application>
Result
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"?>
<!-- EmbeddingSwfFiles.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="290" height="290">
<s:layout>
<s:VerticalLayout paddingTop="20"
horizontalAlign="center"/>
</s:layout>
<fx:Script>
<![CDATA[
[Embed(source="assets/hourglass2.swf")]
[Bindable]
public var Hourglass:Class;
]]>
</fx:Script>
<mx:Image id="hourglass" source="{Hourglass}"/>
</s:Application>
Result
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"?>
<!-- EmbeddingSwfLibraryAssets.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="450" height="240">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" paddingTop="20"/>
</s:layout>
<fx:Script>
<![CDATA[
[Embed(source="assets/library2.swf", symbol="BadApple")]
[Bindable]
public var BadApple:Class;
[Embed(source="assets/library2.swf", symbol="Pumpkin")]
[Bindable]
public var Pumpkin:Class;
]]>
</fx:Script>
<mx:Image id="badApple" source="{BadApple}" width="150" height="151.8"/>
<mx:Image id="pumpkin" source="{Pumpkin}" width="150" height="131.7"/>
</s:Application>
Result
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"?>
<!-- EmbeddingSoundFiles.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400" height="120">
<s:layout>
<s:VerticalLayout paddingTop="20" gap="20" horizontalAlign="center"/>
</s:layout>
<fx: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();
}
]]>
</fx:Script>
<s:HGroup>
<s:Button label="play" click="playSound();"/>
<s:Button label="stop" click="stopSound();"/>
</s:HGroup>
<s:RichEditableText width="368" focusEnabled="false" editable="false">
<s:textFlow><s:TextFlow><s:p>
<s:a href="http://derekaudette.ottawaarts.com/music.php">
Pie-Yan-Knee Written and Performed by: Derek R. Audette (c) 2004
(Creative Commons Attribution License)
</s:a>
</s:p></s:TextFlow></s:textFlow>
</s:RichEditableText>
</s:Application>
Result
Using FXG documents
FXG is a declarative XML syntax for defining vector graphics in applications built with Flex. Designers can create vector images using tools such as Adobe Photoshop, Illustrator, Fireworks, and Catalyst and export them as an FXG document. You can then use that FXG document as a component in your applications.
You do not use the Embed command to reference FXG documents. Instead, you reference an FXG document as a component, specifying the tag to be the name of the FXG file.
Place the FXG document in a location where the compiler can find it. This example places the FXG document with the source files for the application. Declare a namespace for the component. For this example, the namespace is xmlns:comps="*". Add a tag in your application that declares the component inside a Spark container, for example, <s:Group>.
Note: For more information on working with FXG documents, refer to Using FXG in the Adobe Flex 4 Help.
Example FXG document
<?xml version="1.0" encoding="UTF-8"?>
<!-- star.fxg -->
<Graphic xmlns:="http://ns.adobe.com/fxg/2008" version="2">
<Path x="9.399" y="10.049" data="M 82.016 78.257
L 51.895 69.533
L 27.617 89.351
L 26.621 58.058
L 0.231 41.132
L 29.749 30.52
L 37.714 0.241
L 56.944 24.978
L 88.261 23.181
L 70.631 49.083 Z">
<fill>
<SolidColor color="#FFFFFF"/>
<fill>
<stroke>
<SolidColorStroke
caps="none"
color="#4769C4"
joints="miter"
miterLimit="4"
weight="20"/>
</stroke>
</Path>
</Graphic>
Example application
<?xml version="1.0" encoding="utf-8"?>
<!-- UsingFXGDocuments.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="*"
width="400" height="300">
<s:layout>
<s:VerticalLayout paddingTop="20"
horizontalAlign="center"/>
</s:layout>
<s:Group>
<comps:star height="100" width="100" x="50" y="50"/>
<comps:star rotationX="20" height="70" width="70" x="150" y="50" alpha=".75"/>
<comps:star rotationX="40" height="50" width="50" x="220" y="50" alpha=".5"/>
<comps:star rotationX="60" height="30" width="30" x="270" y="50" alpha=".3"/>
<comps:star rotationX="80" height="10" width="10" x="300" y="50" alpha=".1"/>
</s:Group>
</s:Application>
Result
Embedding fonts
You can 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.
Tip: You can add only certain characters from a font when embedding it. To save file size specify the unicode-range property of your @font-face declaration.
Note: For more information on working with fonts, see Fonts in the Adobe Flex 4 Help.
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- EmbeddingFonts.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="360" height="85">
<s:layout>
<s:HorizontalLayout paddingTop="20" horizontalAlign="center"/>
</s:layout>
<fx: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;
}
</fx:Style>
<s:Label styleName="MyTextStyle" text="Embedded fonts rock!"/>
</s:Application>
Result
Copacetix TrueType font courtesy of Copacetix.com. Licensed under the Creative Commons Attribution-ShareAlike 2.0 license.
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
