在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