Flex: Embedding Application Resources

This article was reproduced from: http://blog.csdn.net/f20zz/article/details/2956819

You can embed various types of resources in your adobe®flex™ application. The embedded resource is compiled into the Flex application's SWF file. They are not loaded at run time, and you do not have to deploy the original resource files with your application.

tip: Another way to embed resources is to load them at run time. Resources that are loaded at run time must be deployed using your application because they are not compiled into your application. This has the advantage of keeping the Flex application's file size smaller and shortening its initial load time.

You can embed images with 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 resources: images (multiple instance) images (single instance) images used with scale-9 extruded image swf File SwF Library resource sound file SVG file font

embedding images (multiple instances)

You can embed an image in a Flex application that has a PNG, JPEG, or GIF file format and create one or more instances of it.

This example uses the [Embed] metadata label to embed an 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 a Logo class to any component property that takes an image, such as the Icon property of a 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= "height=" 250 "

>

<mx:Script>

<! [cdata[

[Embed (source="Assets/logo.png")]

[Bindable]

Publicvar Logo:class;

]]>

</mx:Script>

<mx:image id= "Mylogo" source= "{Logo}"/>

<mx:image id= "MyLogo2" source= "{Logo}"/>

</mx:Application>

Results

To view all the source code, right-click the Flex application and choose View Source from the context menu.

D:/flex Learning/embeddingimages/embeddingimages.mxml

Back to Top

embedding images (single instance)

You can use inline @Embed directives to embed images that you want to display only once in your Flex application.

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

Example

<?xml version= "1.0" encoding= "Utf-8"?>

<mx:application

xmlns:mx= "Http://www.adobe.com/2006/mxml"

Viewsourceurl= "Src/embeddinganimage/index.html"

Width= "" height= "240"

>

<mx:image id= "Mylogo" source= "@Embed (' assets/logo.png ')"/>

</mx:Application>

Results

To view all the source code, right-click the Flex application and choose View Source from the context menu.

D:/flex Learning/embeddinganimage/embeddinganimage.mxml

Back to Top

embedding images that use scale-9 scaling

You can embed an image file into your Flex application and scale it intelligently, in a similar way. By using the Scale-9 feature, the Four corners of your image are not scaled at all, the horizontal border is scaled only horizontally, and the vertical border is scaled only vertically. For example, this is useful for creating boxes that use rounded corners, or for component-style adjustments where you want to maintain a clear border when you scale the component.

This example uses the Scalegridtop, Scalegridbottom, Scalegridleft, and scalegridright gridline position properties of the Embed metadata label to create your scale-9 mesh.

Tip: an easy way to get the value of a gridline position is to use the guide with the rectangular Marquee tool and the Info palette in adobe®photoshop®.

tip: Rotating an instance of an embedded scale-9 image turns off the scale-9 of the image to make any size conversion in the future.

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= "height=" 480 "

>

<mx:Script>

<! [cdata[

[Embed (

source="Assets/fancy_border.png",

scalegridtop="scalegridbottom=", "137",

scalegridleft="scalegridright=", "266 "

)]

[Bindable]

Publicvar Fancyborderimage:class;

]]>

</mx:Script>

<mx:image source= "{fancyborderimage}" width= "146" height= ""/>

<mx:image source= "{fancyborderimage}" width= "266" height= "/>"

<mx:image source= "{fancyborderimage}" width= "325" height= "183"/>

</mx:Application>

Results

To view all the source code, right-click the Flex application and choose View Source from the context menu.

D:/flex Learning/embeddingimagesscale9/embeddingimagesscale9.mxml

Back to Top

embed images with CSS for skins

You can embed an image in a Flex application and use it to set the appearance of the component.

You can define a CSS type selector to set the appearance of all components that give the type. In this example, you create a type selector for the Button control. The type selector uses embed to specify these images as the appearance properties of your component. You can also define a class selector to create a custom CSS class that can be applied as a style to a particular component.

Tip: The class selector creates a named style class that can be used to set the style of a separate component by assigning the class selector to the component by using the StyleName property. The type selector sets the style for all components that give the type, as shown in the following example.

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= "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>

Results

To view all the source code, right-click the Flex application and choose View Source from the context menu.

D:/flex Learning/embeddingimagescss/embeddingimagescss.mxml

Back to Top

Embedding SWF Files

Embedded SWF files are almost identical to embedded images. The difference is that you can treat an instance of an embedded SWF file as an instance of the MovieClip class. (They are actually subclasses of the Movieclipasset class, and the Movieclipasset class is a subclass of the MovieClip class.) )

Note: You cannot directly access the properties or methods of the embedded SWF file. However, you can 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]

Publicvar Hourglass:class;

]]>

</mx:Script>

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

</mx:Application>

Results

To view all the source code, right-click the Flex application and choose View Source from the context menu.

D:/flex Learning/embeddingswffiles/embeddingswffiles.mxml

Back to Top

Embedding SWF Library Resources

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

This example uses the Source property of the [Embed] metadata label to specify the SWF file that contains your library and uses the symbol property of the [Embed] metadata label to specify the link ID of the symbol you want to embed in the library.

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= "height=" 240 "

horizontalalign= "center" verticalalign= "Bottom"

>

<mx:Script>

<! [cdata[

[Embed (source="assets/library.swf", symbol="BadApple")]

[Bindable]

Publicvar Badapple:class;

[Embed (source="assets/library.swf", symbol="Pumpkin")]

[Bindable]

Publicvar Pumpkin:class;

]]>

</mx:Script>

<mx:image id= "BadApple" source= "{badapple}" width= "