Встраивание изображений в приложение 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 КБ, тогда изображение в подсказке появляется с некоторой задержкой.Можно ли встраивать все картинки при загрузке 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>

Еще один хороший компонент, который вам может понадобитьсяпроверить это 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, и это очень помогло.Один вопрос ... Как я могу убедиться, что все изображения загружены?Я запускаю этот код после взаимодействия с пользователем, пытаюсь загрузить кучу изображений, после того, как все загружено, я хочу, чтобы что-то произошло (отобразить их в слайд-шоу).Но не уверен, что лучший способ гарантировать, что они все загружены.еще раз спасибо!