在 Flex 应用程序中嵌入图像

Question

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

    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;

但是很多图片超过 100 kb，那么工具提示中的图片会出现一些延迟。是否可以在加载 swf 的过程中嵌入所有图片，在鼠标悬停时与文本一起出现？

Answer 1

确实如此。添加您想要包含在 Flex 应用程序中的图像，然后将它们嵌入到您的代码中，如下所示：

<fx:Script>
  <![CDATA[

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

]]>
    </fx:Script>

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

如果你真的想在工具提示中使用它，这里有一篇关于如何做到这一点的好文章：http://blog.flexmp.com/2008/09/10/flex-custom-tooltip-speech-bubble/

编辑： 这是一个快速而肮脏的示例，说明如何在应用程序启动时将图像预加载到 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。它也可以很好地满足您的需求。

https://github.com/arthur-debert/BulkLoader

Answer 2

不能添加评论..但是改变：

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

到：

imageArray.addItem(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 完全陌生，这对我有很大帮助。一个问题是.. 我怎样才能确保所有图像都已加载？我在用户交互后运行此代码，尝试加载一堆图像，一旦全部加载，我希望发生一些事情（在幻灯片中显示它们）。但不确定确保它们全部加载的最佳方法。再次感谢！