在 Flex 应用程序中嵌入图像

问题描述

我使用工具提示中的图像.图片在服务器上.我正在使用代码:

I use the images in the tooltips. Images are on the server. I'm using the code:

    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;

但是很多图片都超过了100kb，那么工具提示中的图片会出现一些延迟.加载swf时可以嵌入所有图片，鼠标悬停时和文字一起出现吗?

But many of images are more than 100 kb, then the image in the tooltip appear with some delay. Is it possible to embed all the pictures during loading swf, to appear at once with the text when the mouse over?

推荐答案

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

It certainly is. Add the images you want to include in your Flex app, then embed them in your code like this:

<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/

If you really want to use this in a toolTip, here's a good article on how to do that: http://blog.flexmp.com/2008/09/10/flex-custom-tooltip-speech-bubble/

这是一个快速而肮脏的示例，说明如何在应用程序启动时将图像预加载到 ArrayCollection 中.您需要添加一些代码以确保在启用应用程序或执行某些其他操作之前加载所有图像，但这应该再次让您开始.

Here's a quick and dirty example of how to preload your images into an ArrayCollection when your application starts. You'll want to add some code to make sure all of your images are loaded before enabling the application or performing some other action, but again this should get you started.

<?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.它也可以很好地满足您的需求.

Another good component you may want to check out is the Flex BulkLoader created by Arthur Debert. It may also work well for your needs.

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

这篇关于在 Flex 应用程序中嵌入图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！