Flex4加载外部资源解说Image组件

Image 控件允许您在运行时导入 JPEG、PNG、GIF 和 SWF 文件。您还可以使用 @Embed(source='filename') 在编译时嵌入上述任意一类型文件以及 SVG 文件。
注意：Flex 还提供了 SWFLoader 控件用于加载 Flex 应用程序。通常使用 Image 控件来加载静态图形文件和 SWF 文件，而 SWFLoader 用于加载 Flex 应用程序。Image 控件还可用于自定义项呈示器和项目编辑器。

注意：Flex 还包括 BitmapImage 类。该类用于将图像嵌入到外观和 FXG 组件。它不是通用的图像加载类。例如，您无法在运行时使用 BitmapImage 类加载图像。

嵌入的图像将立即加载，因为它们已经是 Flex SWF 文件的一部分。但是，这些图像会增加应用程序的大小，还会减慢应用程序的初始化过程。嵌入的图像还要求您在图像文件发生更改时立即重新编译应用程序。

如果不希望嵌入资源，也可以在运行时加载资源。您可以在运行 SWF 文件的本地文件系统中加载资源，也可以访问远程资源（通常是借助网络使用 HTTP 请求）。这些图像是独立于您的 Flex 应用程序的，因此，只要修改后的图像名称保持不变，修改图像就不会引发重新编译的操作。引用的图像不会延长应用程序的首次加载时间。但是，如果使用了这些图像并将其加载到 Flash Player 或 AIR，则可能会出现延迟。

SWF 文件只能访问一种外部资源（本地资源或网络资源），而不能同时访问两种资源。您可以在编译应用程序时使用 use-network 标志来确定 SWF 文件允许的访问类型。当 use-network 标志设置为 false 时，您可以访问本地文件系统中的资源，但不可以访问网络资源。默认值为 true，允许您访问网络资源，但不可以访问本地文件系统中的资源。

若要在运行时加载图像，则应了解 Flash Player 或 AIR 的安全限制。例如，在 Flash Player 中，您可以使用 URL 加载任一域中的图像，但默认安全设置不允许您的代码访问图像的位图数据，除非此图像与应用程序来自同一个域。要访问其它服务器上的图像中的位图数据，则必须使用 crossdomain.xml 文件。

PNG 和 GIF 格式还支持使用 alpha 通道创建透明图像。

如果使用 Image 控件作为 List 控件的嵌入式项呈示器，则可以使用 rowHeight 属性显式设置 List 控件的行高；也可以将 List 控件的 variableRowHeight 属性设置为 true，从而准确调整行的大小。

如果出现与 Images 对象有关的内存问题，您可以在应用程序中使用 Image 对象时，尝试将 source 属性显式设置为 null。

样例代码

<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">
        <s:layout>
                <s:VerticalLayout gap="2" paddingTop="10" />
        </s:layout>
        <fx:Script>
                <![CDATA[
                        import mx.controls.Alert;
                        import mx.core.FlexLoader;
                        private function addImg():void{
                                var img:Image = new Image();
                                img.source="assets/boots.jpg";
                                img.width=200;
                                img.height=200;
                                img.id="imgID";
                                img.addEventListener(MouseEvent.CLICK,clickHandle);
                                hGroup.addElement(img);
                       
                        }
                       
                        private function clickHandle(evt:MouseEvent):void{
                                var img:FlexLoader = evt.target as FlexLoader;
                                var bitMap:Bitmap = img.content as Bitmap;
                                bitMap.smoothing=true;
                               
                                var loaderInfo:LoaderInfo =  img.loaderInfo;
                                
                                
                               
                                //Alert.show((Image(evt.target).id).toString());
                        }
                       
                       
                ]]>
        </fx:Script>
        <fx:Declarations>
                <!-- 将非可视元素（例如服务、值对象）放在此处 -->
        </fx:Declarations>
        <s:HGroup id="hGroup">
                <mx:Image source="assets/backpack.jpg" width="173" height="161"/>
                <mx:Image source="assets/backpack.jpg" width="173" height="161" x="193" y="1"/>
                <mx:Image source="@Embed(source='assets/backpack.jpg')" width="173" height="161"/>
        </s:HGroup>
        <s:Button click="addImg()" label="add"/>
</s:Application>