5 Replies Latest reply on Feb 22, 2010 9:45 AM by jimmyoneshot

    Applying Images To The Icon Property of Array Collections Without Embedding Them

    jimmyoneshot Level 1

      For the last few weeks I have been attempting to create an application which does the following things:-

      -          Loads websites subsequently into a html component.

      -          When each website is fully loaded into the html component a snapshot is taken of it via a function I’ve created.

      -          This bitmap data of each snapshot is saved via a jpeg encoder as a jpg file in my bin-debug/assets/images folder. If the created snapshot already exists there by the same name it is overwritten.

      -          I have a tilelist in the application which is populated by an array collection and some embedded images which serve as the ‘icons’ for each object in this array collection.

      What I want now is for the jpgs that are created via the snapshot function to overwrite these embedded images which are stored within the bin-debug/assets/images folder so that they appear live i.e. they replace the existing images (unless none have been created yet) within the tilelist making it a live gallery of thumbnails of the websites which the html component is cycling between.

      I know that this is not possible as you cannot overwrite embedded images live as they are compiled as part of the swf so I will obviously need to get the jpeg images into the icon slots somehow but it is this that I am struggling with. Is there any way of getting images into the icon property of objects within an array collection without embedding them in the application?

      I’m doing this as an air application by the way. Thanks for any suggestions.

        • 1. Re: Applying Images To The Icon Property of Array Collections Without Embedding Them
          Flex harUI Adobe Employee

          If you use mx:Image to display the image, you can hand it an embedded image

          or the url to an image to load off the server, or even the bytearray of an

          image file.

          1 person found this helpful
          • 2. Re: Applying Images To The Icon Property of Array Collections Without Embedding Them
            jimmyoneshot Level 1

            Can that also be done within tilelists/array collections though? I need to use tilelist components for this populated by an array collection because in my final app the tilelists need to be saveable and this is done using shared object to save the status of the array collections. I know how to do this but I need to find out a way of getting those snapshots into the icon properties of each object in the array collection so that they update live within the tilelist as they are done.

             

            Is this possible using array collections/tilelists?

             

            Cheers for your help so far.

            • 3. Re: Applying Images To The Icon Property of Array Collections Without Embedding Them
              Flex harUI Adobe Employee

              Yes, you can build a custom renderer that uses mx:Image and use it in

              TileList.

              1 person found this helpful
              • 4. Re: Applying Images To The Icon Property of Array Collections Without Embedding Them
                jimmyoneshot Level 1

                Thanks again Flex harUI. I've used an item renderer and that does seem to be the right idea but I simply can't get the images to change live into the newly created ones and can't figure out why it's not working at all as everything seems to be in perfect working order in my code. I've used the setItemAt function so that when each jpg is created the item in which it is contained within the array collection is reset to contain this newly created jpg. I know this works as I've added the word test to the new labels with get set to the items i.e. ABC News will change to ABC News Test and BBC News becomes BBC News Test and this happens live within the tilelist but it's just the images that aren't changing to the new images live that's my problem. I know the images are being overwritten as they should as once I close the application and restart it the new images are there but I'm struggling to understand why it's not happening live as it should.

                 

                Can you take a look and see what I mean:-

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:WindowedApplication
                
                 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="white" width="1024" height="768">
                
                
                <mx:Script>
                <![CDATA[
                
                
                import mx.graphics.codec.JPEGEncoder;
                
                import mx.graphics.ImageSnapshot;
                
                import mx.collections.*;
                
                
                private function takeSnapshot(event:Event) :void{
                
                
                switch(myhtml.location){
                
                
                case "http://abcnews.go.com/":
                
                var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(myhtml) ;
                
                var s:Object = new Bitmap(imageBitmapData);
                
                var jpgEncoder:JPEGEncoder = new JPEGEncoder( 60 );
                
                var ba:ByteArray = jpgEncoder.encode(imageBitmapData);
                
                var filename:String = "mynewpic";
                
                var file:File = File.applicationDirectory.resolvePath("../bin-debug/assets/images/abcnews_small.jpg");
                
                var wr:File = new File(file.nativePath);
                
                var stream:FileStream = new FileStream();stream.open( wr, FileMode.WRITE);
                stream.writeBytes ( ba, 0, ba.length );
                stream.close();
                myTilelistAArrayCollection.setItemAt({id:
                
                "ABC News Item", label:"ABC News Test", icon:"assets/images/abcnews_small.jpg"}, 0); myhtml.location = 
                
                "http://news.bbc.co.uk/";
                
                break;
                
                
                case "http://news.bbc.co.uk/":
                
                var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(myhtml) ;
                
                var s:Object = new Bitmap(imageBitmapData);
                
                var jpgEncoder:JPEGEncoder = new JPEGEncoder( 60 );
                
                var ba:ByteArray = jpgEncoder.encode(imageBitmapData);
                
                var filename:String = "mynewpic";
                
                var file:File = File.applicationDirectory.resolvePath("../bin-debug/assets/images/bbcnews_small.jpg");
                
                var wr:File = new File(file.nativePath);
                
                var stream:FileStream = new FileStream();stream.open( wr, FileMode.WRITE);
                stream.writeBytes ( ba, 0, ba.length );
                stream.close();
                myTilelistAArrayCollection.setItemAt({id:
                
                "BBC News Item", label:"BBC News Test", icon:"assets/images/bbcnews_small.jpg"}, 1); 
                
                break;}}
                
                
                
                private var myTilelistAArrayCollection:ArrayCollection = new ArrayCollection([{id:
                
                "ABC News Item", label:"ABC News", icon:"assets/images/abcnews_small.jpg"},{id:
                
                "BBC News Item", label:"BBC News", icon:"assets/images/bbcnews_small.jpg"}]);
                ]]>
                
                
                </mx:Script>
                
                
                <mx:HTML id="myhtml" location="http://abcnews.com/" complete="takeSnapshot(event)" width="650" height="650" horizontalScrollPolicy="off" verticalScrollPolicy="off" x="275" y="10"/>
                
                
                <mx:TileList id="myTilelistA" itemRenderer="itemRenderers.imageRenderer" dataProvider="{myTilelistAArrayCollection}" x="10" y="10" width="252" height="135" rowHeight="135" columnWidth="125" color="#FFFFFF" backgroundColor="#000000"/>
                
                </mx:WindowedApplication>
                
                
                
                


                And here's my item Renderer (imageRenderer):-

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas
                
                 xmlns:mx="http://www.adobe.com/2006/mxml" height="135" width="125">
                
                <mx:Image source="{data.icon}" width="100" height="100" horizontalCenter="0" top="5"/>
                
                <mx:Label text="{data.label}" width="100%" bottom="5" textAlign="center" fontWeight="bold" color="#FFFFFF"/></mx:Canvas>
                
                
                • 5. Re: Applying Images To The Icon Property of Array Collections Without Embedding Them
                  jimmyoneshot Level 1

                  Actually nevermind I've now managed to fix it by adding in a second version of the jpegs and applying the new jpegs to them as well as the originals. It seemed that using the setItemAt function didn't change the images to the new ones that had just overwritten the old ones and needed to be switched to a new image for this to work if that makes sense.

                   

                  Flex harUI I clicked helpful answer on your last comment but it was indeed the correct answer as the itemRenderer was what solved my images problem so could you please post another comment here when you get a chance so I can mark it as a Correct Answer.

                   

                  Thanks for all the help.