Flex3 快速入门（5）:嵌入应用程序资源

 

 可以在 Adobe® Flex™ 应用程序中嵌入各种类型的资源。 嵌入的资源被编译到 Flex 应用程序的 SWF 文件中。 它们不是在运行时加载的, 您并非必须使用您的应用程序部署原始资源文件。

提示: 嵌入资源的另一种方法是在运行时加载它们。 在运行时加载的资源必须使用您的应用程序进行部署, 因为它们没有被编译到您的应用程序中。 这具有保持 Flex 应用程序的文件大小更小和缩短其初始加载时间的优点。

可以嵌入具有 PNG、JPEG 和 GIF 文件格式的图像, SWF 文件, 具有 MP3 文件格式的声音文件, SVG 文件和字体。 下列主题描述如何嵌入这些资源:

图像 (多个实例)
图像 (单一实例)
使用 scale-9 拉伸的图像
用于与 CSS 和外观一起使用的图像
SWF 文件
SWF 库资源
声音文件
SVG 文件
字体

嵌入图像 (多个实例) 可以在 Flex 应用程序中嵌入具有 PNG、JPEG 或 GIF 文件格式的图像并创建它的一个或多个实例。

此示例使用 [Embed] 元数据标签在您的应用程序中嵌入图像并将它与可绑定的 ActionScript 类相关联。 接着它将 Image 控件的 source 属性绑定到 Logo 类。 可以将 Logo 类绑定到采用某个图像的任何组件属性, 比如 Button 控件的 icon 属性。

示例

<?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>

结果

下载源代码

 嵌入图像 (单一实例)

可以使用线上 @Embed 指令在 Flex 应用程序中嵌入只希望显示一次的图像。

此示例将一个图像组件添加到一个应用程序中并使用其 source 属性中的 @Embed 指令。 若要在另一个 Image 控件中使用这一相同的图像, 则还必须将它嵌入到该组件中。 如果希望显示嵌入的图像的多个实例, 请使用 [Embed]元数据标签。

示例

<?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>

 

下载源代码

嵌入使用 scale-9 伸缩的图像

您可以将某个图像文件嵌入到您的 Flex 应用程序并以类似组件的方式智能地缩放它。 通过使用 scale-9 功能, 您的图像的四个角根本没有缩放, 水平边框仅在水平方向上缩放, 而垂直边框仅在垂直方向上缩放。 例如, 这对于以下情况很有用: 创建使用圆角的框, 或在您希望在缩放组件时保持边框清晰的位置进行组件样式调整。

此示例使用 Embed 元数据标签的 scaleGridTop、 scaleGridBottom、 scaleGridLeft 和 scaleGridRight 网格线位置属性来创建您的 scale-9 网格。

提示: 获得网格线位置的值的一种比较容易的方法是将指南与 Adobe® Photoshop® 中的 Rectangular Marquee 工具和 Info 选项板一起使用。

提示: 旋转嵌入的 scale-9 图像的实例会关闭该图像的 scale-9 以在将来进行任意大小转换。

示例
<?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>

结果

下载源码

 使用 CSS 为外观嵌入图像

您可以在 Flex 应用程序中嵌入图像并将它用于设置组件的外观。

您可以定义一个 CSS 类型选择器为给出类型的所有组件设置外观。 在此示例中, 您为 Button 控件创建了一个类型选择器。 类型选择器通过使用 Embed指定这些图像用作您的组件的外观属性。 您还可以定义一个类选择器来创建可作为样式应用到特定组件的自定义 CSS 类。

提示: 类选择器创建可用来设置单独的组件的样式的已命名样式类, 方法是通过使用 styleName 属性将类选择器分配给该组件。 类型选择器为给出类型的所有组件设置样式, 如下面的示例所示。

示例

<?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>

 

结果

 下载源代码

嵌入 SWF 文件

嵌入 SWF 文件与嵌入图像几乎是相同的。 差别在于您可以将嵌入的 SWF 文件的实例当作 MovieClip 类的实例处理。 (它们实际上是 MovieClipAsset 类的子类, MovieClipAsset 类是 MovieClip 类的子类。)

注意: 您无法直接访问嵌入的 SWF 文件的属性或方法。 但是, 您可以使用 LocalConnection 以允许它们进行通信。

示例

<?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>

 

结果

 

嵌入 SWF 库资源

您可以在应用程序中嵌入来自现有 SWF 库中的特定符号。 Flash 定义三种类型的符号: Button、MovieClip 和 Graphic。 您可以在 Flex 应用程序中嵌入 Button 和 MovieClip 符号, 但您不能嵌入 Graphic 符号, 因为无法为 ActionScript 导出 Graphic 符号。

此示例使用 [Embed] 元数据标签的 source 属性来指定包含您的库的 SWF 文件, 并使用 [Embed] 元数据标签的 symbol 属性来指定您要在该库中嵌入的符号的链接 ID。

示例

<?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>

 

结果

下载源代码

嵌入声音文件

您可以在 Flex 应用程序中通过使用 [Embed] 元数据标签嵌入 MP3 文件并播放它。

注意: 记住嵌入的声音文件会成为您的应用程序 (最终的 SWF 文件) 的一部分, 而 MP3 文件会很大, 从而会使您的应用程序变得很大并会对应用程序的下载速度产生负面影响。

此实例将该 MP3 的一个新实例创建为一个 SoundAsset。它使用 SoundAsset 类的 play() 方法来播放 MP3 文件的实例, 并存储返回的 SoundChannel 对象, 从而您可以稍后调用 SoundChannel 对象的 stop() 方法以结束播放。

示例

<?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 © 2004 (Creative Commons Attribution License)</a>]]>
        </mx:htmlText>
    </mx:Text>
   
</mx:Application>

结果

下载源代码

 

嵌入 SVG 文件

可以将 SCG 文件嵌入到 Flex 应用程序中。

嵌入 SVG 文件与嵌入图像几乎是相同的。 差别在于您可以将嵌入的 SVG 文件的实例当作 Sprite 类的实例处理。 (它们实际上是 SpriteAsset 类的实例, SpriteAsset 类是 Sprite 类的子类。) 嵌入的 SVG 文件还保留它们的矢量属性, 且在被缩放或转换时不会显示像素。

注意: 不能在运行时导入 SVG 文件；仅可以在编译时在 Flex 应用程序中嵌入它们。

示例

<?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>

 

结果

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码 ”。

提示: SVG 青娃图形是 Architetto Francesco Rollandin 创建的, 他慷慨地将它发布到 Open Clip Art Library 的公共区域中。 您可以在网站找到其他可免费使用和试验的 SVG 文件。
返回顶部

嵌入字体

您希望在 Flex 应用程序中嵌入一种字体并将它用作基于文本的组件的样式。

下面的示例创建引用嵌入的字体的 font-family 名称的一个类选择器。 接着它会创建一个 Text 控件并将其样式设置为该类选择器。

提示: 您在嵌入字体以节省文件大小时仅可以从字体添加某些字符, 方法是指定您的 @font-face 声明的 unicode-range 属性。

详细信息: 有关使用字体的详细信息, 请参阅 Flex 2 开发人员指南*中的“使用字体”。

示例

<?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>