Apache flex 在Flex应用程序中嵌入图像

我使用工具提示中的图像。图像位于服务器上。我正在使用代码：

    var tip1:String;
    tip1 = "<img src='assets/images/yes.jpg' align='center' width='150' height='150' hspace='3' vspace='3'/>";
tip1 +=  'some text';        
yes.toolTip = tip1;

var-tip1：字符串；
tip1=“”；
tip1+=‘一些文本’；
是。工具提示=tip1；

---

但许多图像的大小都超过100KB，因此工具提示中的图像会延迟显示。是否可以在加载swf时嵌入所有图片，并在鼠标悬停时与文本一起立即显示？

当然可以。添加要包含在Flex应用程序中的图像，然后将其嵌入代码中，如下所示：

<fx:Script>
  <![CDATA[

    [Embed(source="assets/images/yes.jpg")]
    [Bindable]
    public var YesIcon:Class;

]]>
    </fx:Script>

<mx:Image source="{YesIcon}" />

如果您真的想在工具提示中使用此功能，下面是一篇关于如何实现此功能的好文章：

编辑： 下面是一个快速而肮脏的示例，演示如何在应用程序启动时将图像预加载到ArrayCollection中。您需要添加一些代码，以确保在启用应用程序或执行某些其他操作之前加载了所有图像，但这同样应该让您开始

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         creationComplete="creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            private var imageArray:ArrayCollection = new ArrayCollection();
            private var imageArrayIndex:int = 0;
            private var imagesToLoad:ArrayCollection = new ArrayCollection();

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                // Load your XML into the "imagesToLoad" ArrayCollection. 
                // This should contain your list of images we need to load.

                PreloadImages();
            }

            protected function PreloadImages():void
            {
                var request:URLRequest = new URLRequest(imageArray[imageArrayIndex]);
                var imageLoader:Loader = new Loader();
                var loaderContext:LoaderContext = new LoaderContext();

                loaderContext.checkPolicyFile = true;
                imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, PreloadImage_CompleteHandler);
                imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, PreloadImage_ErrorHandler);
                imageLoader.load(request,loaderContext);
            }

            // Called when the Loader we declared in PreloadImages() is done loading the image.
            protected function PreloadImage_CompleteHandler(event:Event):void
            {
                imageArray[imageArrayIndex] = new Bitmap(Bitmap(event.currentTarget.content).bitmapData);

                // Check to see if there's still images that need to be loaded.
                if (imageArrayIndex < imagesToLoad.length - 1)
                {
                    imageArrayIndex = imageArrayIndex + 1;
                    PreloadImages();
                }
            }

            // Called when the Loader we declared in PreloadImages() encountered an error trying to load the image.
            protected function PreloadImage_ErrorHandler(event:Event):void
            {

                Alert.show(imageArray[imageArrayIndex].toString() + " could not be loaded.\n\nPlease make sure the file exists.");

                // Check to see if there's still images that need to be loaded.
                if (imageArrayIndex < imageArray.length - 1)
                {
                    imageArrayIndex = imageArrayIndex + 1;
                    PreloadImages();
                }
            }

        ]]>
    </fx:Script>
</s:Group>

另一个您可能想查看的好组件是Arthur Debert创建的Flex BulkLoader。它也可以很好地满足您的需要

---

当然是这样。添加要包含在Flex应用程序中的图像，然后将其嵌入代码中，如下所示：

<fx:Script>
  <![CDATA[

    [Embed(source="assets/images/yes.jpg")]
    [Bindable]
    public var YesIcon:Class;

]]>
    </fx:Script>

<mx:Image source="{YesIcon}" />

如果您真的想在工具提示中使用此功能，下面是一篇关于如何实现此功能的好文章：

编辑： 下面是一个快速而肮脏的示例，演示如何在应用程序启动时将图像预加载到ArrayCollection中。您需要添加一些代码，以确保在启用应用程序或执行某些其他操作之前加载了所有图像，但这同样应该让您开始

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         creationComplete="creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            private var imageArray:ArrayCollection = new ArrayCollection();
            private var imageArrayIndex:int = 0;
            private var imagesToLoad:ArrayCollection = new ArrayCollection();

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                // Load your XML into the "imagesToLoad" ArrayCollection. 
                // This should contain your list of images we need to load.

                PreloadImages();
            }

            protected function PreloadImages():void
            {
                var request:URLRequest = new URLRequest(imageArray[imageArrayIndex]);
                var imageLoader:Loader = new Loader();
                var loaderContext:LoaderContext = new LoaderContext();

                loaderContext.checkPolicyFile = true;
                imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, PreloadImage_CompleteHandler);
                imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, PreloadImage_ErrorHandler);
                imageLoader.load(request,loaderContext);
            }

            // Called when the Loader we declared in PreloadImages() is done loading the image.
            protected function PreloadImage_CompleteHandler(event:Event):void
            {
                imageArray[imageArrayIndex] = new Bitmap(Bitmap(event.currentTarget.content).bitmapData);

                // Check to see if there's still images that need to be loaded.
                if (imageArrayIndex < imagesToLoad.length - 1)
                {
                    imageArrayIndex = imageArrayIndex + 1;
                    PreloadImages();
                }
            }

            // Called when the Loader we declared in PreloadImages() encountered an error trying to load the image.
            protected function PreloadImage_ErrorHandler(event:Event):void
            {

                Alert.show(imageArray[imageArrayIndex].toString() + " could not be loaded.\n\nPlease make sure the file exists.");

                // Check to see if there's still images that need to be loaded.
                if (imageArrayIndex < imageArray.length - 1)
                {
                    imageArrayIndex = imageArrayIndex + 1;
                    PreloadImages();
                }
            }

        ]]>
    </fx:Script>
</s:Group>

另一个您可能想查看的好组件是Arthur Debert创建的Flex BulkLoader。它也可以很好地满足您的需要

---

无法添加评论。。但变化：

imageArray[imageArrayIndex] = new Bitmap(Bitmap(event.currentTarget.content).bitmapData);

致：

还注意到：

var request:URLRequest = new URLRequest(imageArray[imageArrayIndex].src_big);

应该是：

var request:URLRequest = new URLRequest(imagesToLoad[imageArrayIndex].src_big);

---

杰森，谢谢你！我对actionscript/Flex完全陌生，这对我帮助很大。一个问题是。。如何确保图像都已加载？我在用户交互后运行这段代码，试图加载一堆图像，一旦全部加载，我希望发生一些事情（在幻灯片中显示它们）。但不确定确保它们全部加载的最佳方法。再次感谢

无法添加评论。。但变化：

imageArray[imageArrayIndex] = new Bitmap(Bitmap(event.currentTarget.content).bitmapData);

致：

还注意到：

var request:URLRequest = new URLRequest(imageArray[imageArrayIndex].src_big);

应该是：

var request:URLRequest = new URLRequest(imagesToLoad[imageArrayIndex].src_big);

---

杰森，谢谢你！我对actionscript/Flex完全陌生，这对我帮助很大。一个问题是。。如何确保图像都已加载？我在用户交互后运行这段代码，试图加载一堆图像，一旦全部加载，我希望发生一些事情（在幻灯片中显示它们）。但不确定确保它们全部加载的最佳方法。再次感谢

嗨！塔克斯。非常有用的文章。但我用了大约50-70张照片。我有一个源代码是从XML加载的。我必须为每个图像创建一个变量吗？如果总是相同的50-70个图像，那么是的，我会为每个图像创建一个变量，以便它们嵌入到你的应用程序中。如果每次运行应用程序时图像都会发生变化，我会循环使用xml，并在应用程序启动时将每个图像加载到位图对象数组中。图像不会被嵌入，但是你可以使用数组中的位图对象作为图像的源，这样应该可以避免延迟。谢谢。没错，我不太明白如何在后台加载每个图像。我用一个如何将图像预加载到ArrayCollection的快速示例编辑了我的答案。希望这对您有所帮助。：）非常感谢你。你真的帮了我很多。不幸的是，我在var request行中有错误：URLRequest=newurlrequest（imageArray[imageArrayIndex]）；（RangeError：提供的索引超出范围）。可能是因为ArrayCollection imageArray是新的，没有零索引元素？您好！塔克斯。非常有用的文章。但我用了大约50-70张照片。我有一个源代码是从XML加载的。我必须为每个图像创建一个变量吗？如果总是相同的50-70个图像，那么是的，我会为每个图像创建一个变量，以便它们嵌入到你的应用程序中。如果每次运行应用程序时图像都会发生变化，我会循环使用xml，并在应用程序启动时将每个图像加载到位图对象数组中。图像不会被嵌入，但是你可以使用数组中的位图对象作为图像的源，这样应该可以避免延迟。谢谢。没错，我不太明白如何在后台加载每个图像。我用一个如何将图像预加载到ArrayCollection的快速示例编辑了我的答案。希望这对您有所帮助。：）非常感谢你。你真的帮了我很多。不幸的是，我在var request行中有错误：URLRequest=newurlrequest（imageArray[imageArrayIndex]）；（RangeError：提供的索引超出范围）。可能是因为ArrayCollection imageArray是新的，没有零索引元素？嗨，toddm，我刚刚看到你的帖子。我要做的是在图像加载完成后发送一个事件。在

preload image\u CompleteHandler（event:event）

方法中添加

else

语句，检查是否还有图像要加载。如果您已经加载完图像（这意味着您将点击

else

语句），则发送一个事件，让您的应用程序知道图像已经准备好。应用程序的另一部分将侦听该事件，并根据需要显示幻灯片组件。我希望这有帮助！嗨，托德，我刚看到你的帖子。我要做的是在图像加载完成后发送一个事件。在

preload image\u CompleteHandler（event:event）

方法中添加

else

语句，检查是否还有图像要加载。如果您都加载完图像（这意味着您将点击

else

statem