在Flex应用程序中嵌入图像

时间:2010-12-21 21:08:11

标签: flex actionscript-3

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

    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时嵌入所有图片,当鼠标悬停在文本上时立即出现?

2 个答案:

答案 0 :(得分:5)

当然是。添加要包含在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

答案 1 :(得分:1)

无法添加评论..但更改:

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完全不熟悉,这帮了很多忙。一个问题是..如何确保图像全部加载?我在用户交互后运行此代码,尝试加载一堆图像,一旦加载,我想要发生一些事情(以幻灯片形式显示它们)。但不确定确保它们全部装满的最佳方法。再次感谢!