Flex3 Quick Start: Embed application resources

From: http://www.airia.cn/FLEX_Directory/embedding_assets/

Flex3 Quick Start: Embed application resources [Source: adobe.com]
[Author: Adobe DEVNET]
[Date: 08-07-31]
[Browsing: 1328
Times]

Various types of resources can be embedded in Adobe Flex applications. Embedded resources are compiled into the SWF file of the Flex application. They are not loaded at runtime, and you do not have to deploy the original resource files using your application.

Tip: another way to embed resources is to load them at runtime. Resources loaded at runtime must be deployed using your applications because they are not compiled into your applications. This has the advantage of keeping the file size of the Flex application smaller and shortening its initial loading time.

You can embed images, SWF files, audio files, SVG files, and fonts in PNG, JPEG, and GIF file formats. The following topics describe how to embed these resources:

Images (multiple instances)
Images (Single Instance)
Scale-9 Image
Images used with CSS and appearance
SWF File
SWF library resources
Sound file
SVG file
Font

Embedded images (multiple instances) can be embedded into the flex application with images in PNG, JPEG, or GIF format and one or more of its instances are created.

This example uses the [embed] metadata tag to embed an image in your application and associate it with the Bindable ActionScript class. Then it changes
The source attribute of the image control is bound to the logo class. You can bind the logo class to any component attribute that uses an image, such as button.
The icon property of the 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

Download source code

Embedded Image (Single Instance)

You can use the online @ embed command to embed an image that only needs to be displayed once in the flex application.

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

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>

 

Download source code

Embedded images scaled using scale-9

You can embed an image file into your flex application and intelligently scale it with similar components. By using the scale-9 function,
The four corners of your image are not scaled at all, the horizontal border is scaled only in the horizontal direction, and the vertical border is scaled only in the vertical direction. For example, this is useful in the following scenarios:
Create a box with rounded corners or adjust the widget style when you want to keep the border clear when scaling the widget.

This example uses the scalegridtop, scalegridbottom, scalegridleft, and scalegridright gridline position attributes of the embed metadata label to create your scale-9 grid.

Tip: an easy way to get the value of the gridline position is to use the Guide with the rectangular marquee tool in Adobe Photoshop and the info palette.

Tip:
If you rotate an embedded scale-9 image, the scale-9 of the image is disabled for future conversion of any size.

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

Download source code

Embed an image with CSS

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 of the given 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 attributes of your component. You can also define a class selector to create custom CSS classes that can be applied as styles to specific components.

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 attribute. The Type selector is used to set the style of all components of 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 = "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

 Download source code

Embed SWF files

The embedded SWF file is almost the same as the embedded image. The difference is that you can treat the embedded SWF file instance as an instance of the movieclip class. (They are actually subclasses of the movisponasset class, And the movisponasset class is a subclass of the movieclip class .)

Note: you cannot directly access the attributes or methods of the embedded SWF file. However, you can use localconnection to allow communication.

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

 

Embed SWF library resources

You can embed a specific symbol from an existing SWF library in an 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,
The graphic symbol cannot be exported for the event.

In this example, the source attribute of the [embed] metadata tag is used to specify the SWF file containing your library, use the [embed] metadata tag's symbol attribute 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 = "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

Download source code

Embed sound files

You can use the [embed] metadata tag in the flex application to embed an MP3 file and play it back.

Note: Remember that the embedded audio file will become part of your application (the final SWF file), while the MP3 file will be large, this will increase your application and negatively affect the download speed of the application.

This instance creates a new MP3 instance as a soundasset. It uses the play () method of the soundasset class to play MP3.
File instance, and store the returned soundchannel object, so that you can call the stop ()
Method 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 shortmed by: Derek R. audette 2004 (Creative Commons Attribution license) </a>]>
</MX: htmltext>
</MX: Text>

</MX: Application>

Result

Download source code

 

Embed SVG files

You can embed SCG files into a flex application.

The embedded SVG file is almost the same as the embedded image. The difference is that you can process an embedded SVG file instance as a Sprite class instance. (They are actually
An instance of the spriteasset class. The spriteasset class is a subclass of the sprite class .) Embedded SVG files also retain their vector attributes,
Pixels are not displayed when the image is scaled or converted.

Note: SVG files cannot be imported at runtime; they can only be embedded in the flex application at compilation.

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

To view all source code, right-click the flex application and select"View Source Code

".

Tip: the SVG qingwa image was created by terraetto Francesco rollandin, which was generously released to the public area of the open clip art library. You can find other SVG files available for free and trial on the website.
Back to Top

Embedded font

You want to embed a font in the flex application and use it as a text-based component style.

The following example creates a class selector that references the font-Family Name of the embedded font. Then it creates a text control and sets its style to this class selector.

Tip: You can only add certain characters from the font when embedding the font to save the file size by specifying the Unicode-range attribute declared by @ font-face.

For more information, see "Use font" In Flex 2 Developer 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

To view all source code, right-click the flex application and select"View Source Code

".