[转]flex中使用嵌入图像

嵌入图像 (多个实例)
可以在 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>