在Flex应用程序Embeding图片

问题描述

我用的是图像的工具提示。图像在服务器上。我使用的是code：

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;

但很多图片都是100多KB，然后在提示的形象出现一些延迟。是否有可能加载的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应用程序，包括图像，然后将它们嵌入在code是这样的：

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

如果你真的想用这一个工具提示，这里是如何做到这一点的好文章：的

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/

编辑：下面是如何preLOAD图像为ArrayCollection当你的应用程序启动一个快速和肮脏的例子。你想添加一些code，以确保所有图像使应用程序或进行其他操作之前被加载，但同样这应该让你开始。

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>

您可能想看看另一个很好的组成部分是由亚瑟·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应用程序Embeding图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！