CODEWITHSUNDEEP
apache-flexactionscript-3
Astraport
Astraport

Reputation: 1257

Embeding images in an Flex application

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?

Upvotes: 1

Views: 1711

Answers (2)

toddm
toddm

Reputation: 141

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!

Upvotes: 1

Jason Towne
Jason Towne

Reputation: 8050

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

Upvotes: 5

Related Questions