Embeding images in an Flex application

Question

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;

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?

Jason Towne · Accepted Answer · 2010-12-23T15:14:52.757

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/

EDIT: 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>

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

Hi! Thanx. Very usefull article. But I use about 50-70 pics. I have a source code is loaded from XML. Must I create a variable for each image? — Astraport, Dec 22 '10 at 05:54
If it's always the same 50-70 images then yes, I would create a variable for each image so they get embedded in your app. If the images could change each time the app is run, I would loop through the xml and load each image into an Array of Bitmap objects when the application starts up. The images wouldn't be embedded, but you could use Bitmap objects in the Array as the source for your images and it should get rid of the delay. — Jason Towne, Dec 22 '10 at 18:07
Thank you. True, I do not quite understand how to implement such load each image in the background. — Astraport, Dec 23 '10 at 11:39
I've edited my answer with a quick example of how to preload images into an ArrayCollection. Hopefully this helps you. :) — Jason Towne, Dec 23 '10 at 16:18
Thank you very much. You really helped me a lot. Unfortunately, I have error in line var request:URLRequest = new URLRequest(imageArray[imageArrayIndex]); (RangeError: supplied index is out of bounds). Maybe is because the ArrayCollection imageArray is new and do not have a zero index element? — Astraport, Dec 24 '10 at 08:55
That could be. You should probably have a check to make sure your ArrayCollection contains data before you start using it. — Jason Towne, Dec 27 '10 at 16:50

score 1 · Answer 2 · edited Mar 01 '12 at 16:10

1

can't add a comment.. but change:

imageArray[imageArrayIndex] = new Bitmap(Bitmap(event.currentTarget.content).bitmapData);

to:

imageArray.addItem(new Bitmap(Bitmap(event.currentTarget.content).bitmapData));

also noticed:

var request:URLRequest = new URLRequest(imageArray[imageArrayIndex].src_big);

should be:

var request:URLRequest = new URLRequest(imagesToLoad[imageArrayIndex].src_big);

Jason thanks for this! I am totally new to actionscript/Flex and this helped out a lot. One question is.. How can i make sure the images are all loaded? I am running this code after user interaction, attempting to load a bunch of images, once all loaded i want something to happen (display them in a slideshow). But not sure of the best way to ensure they are all loaded. thanks again!

edited Mar 01 '12 at 16:10

Jason Towne

8,014
5
54
69

answered Jan 26 '11 at 23:09

toddm

141
1
4
11

Hi toddm, I just saw your post here. What I would do is dispatch an event when the images are done loading. Add an `else` statement to the `PreloadImage_CompleteHandler(event:Event)` method where you check to see if there are still images to be loaded. If you're all done loading images (which means you would hit the `else` statement) dispatch an event that lets your application know the images are ready. Another part of your application would listen for that event and display the slideshow component as needed. I hope this helps! – Jason Towne Mar 01 '12 at 16:14

Embeding images in an Flex application

2 Answers2

Linked