9 Replies Latest reply on Feb 16, 2010 11:29 AM by jimmyoneshot

    Binding the Source of an Image to the Icon Property of an Array Collection

    jimmyoneshot Level 1

      Is it possible to do this as I can't seem to get it working? For example the image is called myImage and I need the icon of my array collections to change as the myImage source changes. I've tried this but it doesn't work:-

       

      {id:

      "First Item", label:"First Item", icon:"{myImage.source}"},

       

      Can anyone help me out on this? Thanks for any suggestions.

        • 1. Re: Binding the Source of an Image to the Icon Property of an Array Collection
          archemedia Level 4

          You can't bind object properties within an arraycollection.

           

          What do you want to achieve?

           

          Dany

          1 person found this helpful
          • 2. Re: Binding the Source of an Image to the Icon Property of an Array Collection
            jimmyoneshot Level 1

            Hi Dany. What I basically need to achieve is having live images of websites displayed dynamically within 2 tilelists which are populated by arraycollections. In my existing full app my tilelists icons are populated by static jpegs, which are thumbnails of websites I've made, defined within an array collections icon property. They need to be placed within an array collection because the content of each tilelist is saved by using the shared object method so that next time users access the application the items they have previously dragged from tilelist to tilelist are shown.

             

            What I'm working on now is just a test app which I want to implement into my full app. I want the images to be live (meaning new images of sites are made each time the app is started) rather than static. At the moment I have a html component and once the location of this component is fully loaded a function I've made is activated which takes a snapshot of the website and saves it as a bitmap and then sets this bitmap as the source of an image component. The image components are only currently in this app to test if this function is working i.e. the snapshots of the websites do appear within them, which they are. I then tried to bind the source of these images to the icon properties in the array collections so that they would also appear the way they dynamically appear within the images. As I say it needs to be done using array collections because in my final app I've used the shared object method to save the array collections i.e. save the changes users make to the tilelists.

             

            I suppose the best way to show you what I mean is to show you my new app where I'm trying to get this to work. Cheers for your help so far :-

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:WindowedApplication
            
             xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="middle" backgroundColor="white" width="1024" height="768">
            
            
            <mx:Script>
            <![CDATA[
            
            import mx.graphics.ImageSnapshot;
            
            import mx.collections.*;
            
            
            private function takeSnapshot(event:Event) :void{
            
            var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(myhtml) ;
            
            switch(myhtml.location){
            
            
            case http://abcnews.go.com/:abcnewsimage.source = 
            
            new Bitmap(imageBitmapData);myhtml.location = 
            
            http://news.bbc.co.uk/;
            
            break;
            
            case http://news.bbc.co.uk/:bbcnewsimage.source = 
            
            new Bitmap(imageBitmapData);
            
            break;}
            }
            
            
            
            private var myTilelistAArrayCollection:ArrayCollection = new ArrayCollection([{id:
            
            ABC New Item, label:ABCNews, icon:},{id:
            
            BBC News Item, label:BBC News, icon:}]);
            
            
            
            private var myTilelistBArrayCollection:ArrayCollection = new ArrayCollection([{id:
            
            ABC News Item, label:ABCNews, icon:},{id:
            
            BBC News Item, label:BBC News, icon:}]); 
            
            ]]>
            
            
            </mx:Script>
            
            
            <mx:HBox x="10" y="10">
            
            <mx:Image id="abcnewsimage" width="100" height="100" scaleContent="true"/>
            
            <mx:Image id="bbcnewsimage" width="100" height="100" scaleContent="true"/>
            
            </mx:HBox>
            
            
            <mx:HTML id="myhtml" location="http://abcnews.com/" complete="takeSnapshot(event)" width="250" height="250" horizontalScrollPolicy="off" verticalScrollPolicy="off" x="10" y="118"/>
            
            
            <mx:TileList x="268" y="118" width="294" height="250" id="myTilelistA" dataProvider="{myTilelistAArrayCollection}" rowHeight="100" columnWidth="100"/>
            
            
            <mx:TileList x="570" y="118" width="294" height="250" id="myTilelistB" dataProvider="{myTilelistBArrayCollection}" rowHeight="100" columnWidth="100"/>
            
            </mx:WindowedApplication>
            
            
            
            
            • 3. Re: Binding the Source of an Image to the Icon Property of an Array Collection
              archemedia Level 4

              ok, but when you take a snapshot, you'll have to save it first and then store the location of your saved bitmaps in the arraycollection. Or do you want to put the actual bitmap data into the arrayCollections??

               

              Dany

              1 person found this helpful
              • 4. Re: Binding the Source of an Image to the Icon Property of an Array Collection
                jimmyoneshot Level 1

                Yes that's right the bitmaps need to go into the array collections icon properties. I'm struggling to do that in my code though The image components themselves aren't even relavent and won't be visible in the final app. I was trying to use them as a workaround to me not being able to put bitmaps straight into the icon properties so I wanted to apply the bitmaps to the source of the images THEN bind the source of these images to the relevant icon properties. I hope that makes sense.

                 

                So is it possible for me to apply those bitmaps straight to the icon properties somehow? I need the bitmap of the abc news site to be applied to the icon property of the abc news item in both array collections and the bitmap of the bbcnews site to be applied to the icon of the bbc news item in both array collections.

                • 5. Re: Binding the Source of an Image to the Icon Property of an Array Collection
                  jimmyoneshot Level 1

                  Hmmm. The more I look at this problem the harder it seems. At first I thought it was just my lack of coding knowledge but it seems really hard to use anything other than embedded images, defined as classes the usual way, in a tilelist.

                   

                  I've found some examples of using icons that are applied to buttons at runtime but what I need is for the snapshot/bitmap of the html component that is created each time to be applied into the icon properties of the array collections so that these then appear within the tilelist once each snapshot has been taken.

                  • 6. Re: Binding the Source of an Image to the Icon Property of an Array Collection
                    archemedia Level 4

                    I did some testing and found out a few things:

                     

                    When you work with air, you can save you snapshot to disk and store the filename in the arraycollection. Then, later, it will find the image again.

                    Is it your goal to just use abc and bbc or are there other sites you want to add later?

                     

                    Dany

                    • 7. Re: Binding the Source of an Image to the Icon Property of an Array Collection
                      jimmyoneshot Level 1

                      Hi Dan. Yes there are a lot of sites I want to add actually but I just wanted to get these 2 working and then I could get the same code implemented for the rest. I'm actually looking into saving these bitmaps as jpgs now using the jpegencoder so that I can embed an image and set this image within the icon properties of the array collection the usual way and then hopefully I can save the bitmaps of my snapshots as jpegs to overwrite these images after the snapshot has been made so it SHOULD update within the tilelist.

                       

                      Is this what you meant and is this possible or is there a better way? I'm finding it hard getting this into my existing code.

                       

                      Thanks again for your help so far.

                      • 8. Re: Binding the Source of an Image to the Icon Property of an Array Collection
                        archemedia Level 4

                        Try this out. It's julst a start. This will save your image to disk. Yes, you can overwrite existing images.

                        You want to save the images locally I suppose?

                         

                         

                        Dany

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:WindowedApplication
                        xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="middle" 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
                            {
                                //capture the image
                                var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(myhtml) ;
                                //create a bitmap
                                var s:Object = new Bitmap(imageBitmapData);
                               
                                //encode to JPEG
                                var jpgEncoder:JPEGEncoder = new JPEGEncoder( 60 );
                                var ba:ByteArray = jpgEncoder.encode( imageBitmapData );

                         

                                //choose a filename, you can make this dynamically according to the event
                               
                                var filename:String = "myImage";
                                //resolve the pathname to a file object
                                var file:File = File.applicationDirectory.resolvePath( filename );

                         

                                // get native path
                                var wr:File = new File( file.nativePath );
                               
                                //create a filestream
                                var stream:FileStream = new FileStream();
                               
                                //  open/create the file, set the filemode to write in order to save.
                                stream.open( wr, FileMode.WRITE);
                               
                                // write your byteArray into the file.
                                stream.writeBytes ( ba, 0, ba.length );
                               
                                // close the file.
                                stream.close();

                         


                                switch(myhtml.location)
                                {
                                    case "http://abcnews.go.com/":
                                        abcnewsimage.source = filename;
                                       
                                        break;
                               
                                    case "http://news.bbc.co.uk/":
                                        bbcnewsimage.source = filename;
                                        break;
                                }
                               
                               
                            }
                           
                           
                           
                            private var myTilelistAArrayCollection:ArrayCollection = new ArrayCollection(
                                [{id: "ABC News Item", label:"ABC News", icon:""},
                                 {id: "BBC News Item", label:"BBC News", icon:""}]);
                           
                            private var myTilelistBArrayCollection:ArrayCollection = new ArrayCollection([
                                {id: "ABC News Item", label:"ABC News", icon:""},
                                {id: "BBC News Item", label:"BBC News", icon:""}]);
                           
                            ]]>
                           
                           
                            </mx:Script>
                           
                           
                            <mx:HBox x="10" y="10">
                                <mx:Image id="abcnewsimage" width="100" height="100" scaleContent="true"/>
                                <mx:Image id="bbcnewsimage" width="100" height="100" scaleContent="true"/>
                            </mx:HBox>
                           
                           
                            <mx:HTML id="myhtml" location="http://abcnews.com/" complete="takeSnapshot(event)" width="250" height="250" horizontalScrollPolicy="off" verticalScrollPolicy="off" x="10" y="118"/>
                           
                            <mx:TileList x="268" y="118" width="294" height="250" id="myTilelistA" dataProvider="{myTilelistAArrayCollection}" rowHeight="100" columnWidth="100"/>
                            <mx:TileList x="570" y="118" width="294" height="250" id="myTilelistB" dataProvider="{myTilelistBArrayCollection}" rowHeight="100" columnWidth="100"/>

                        • 9. Re: Binding the Source of an Image to the Icon Property of an Array Collection
                          jimmyoneshot Level 1

                          Hi Dany. That's quite brilliant. I'm sure that'd work fine. I'm struggling to get those new images to display within the tilelists though i.e. appear dynamically within the tilelist as they overwrite the existing images. I'm sure I'm doing something wrong. I've embedded the locations of the images and the paths to their locations (assets/images/???) to show you what I mean. It needs to overwrite the existing abcnewspicture file and then display the new image in the tilelist for the abc news site and then do the same for the bbc news one. If I can get the abc news one displaying in both tilelists I'm sure I could go from there. I'm sorry I'm an idiot :-

                           

                           

                           

                          <?xml version="1.0" encoding="utf-8"?>

                          <mx:WindowedApplication

                          xmlns:mx="

                          http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="middle" 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

                          {

                           

                          //capture the image

                           

                          var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(myhtml) ;

                           

                          //create a bitmap

                           

                          var s:Object = new Bitmap(imageBitmapData);

                           

                           

                          //encode to JPEG

                           

                          var jpgEncoder:JPEGEncoder = new JPEGEncoder( 60 );

                           

                          var ba:ByteArray = jpgEncoder.encode(imageBitmapData);

                           

                           

                          //choose a filename, you can make this dynamically according to the event

                           

                           

                          var filename:String = "abcnewspicture";

                           

                          //resolve the pathname to a file object

                           

                          var file:File = File.applicationDirectory.resolvePath("assets/images/abcnews_small.png");

                           

                           

                          // get native path

                           

                          var wr:File = new File(file.nativePath);

                           

                           

                          //create a filestream

                           

                          var stream:FileStream = new FileStream();

                           

                           

                          // open/create the file, set the filemode to write in order to save.

                          stream.open( wr, FileMode.WRITE);

                           

                           

                          // write your byteArray into the file.

                          stream.writeBytes ( ba, 0, ba.length );

                           

                           

                          // close the file.

                          stream.close();

                           

                           

                           

                          switch(myhtml.location)

                          {

                           

                          case "http://abcnews.go.com/":

                          abcnewsimage.source = filename;

                          myhtml.location =

                          "http://news.bbc.co.uk/";

                           

                          break;

                           

                           

                          case "http://news.bbc.co.uk/":

                          bbcnewsimage.source = filename;

                           

                          break;

                          }

                           

                           

                          }

                           

                          [

                          Bindable]

                          [

                          Embed(source="assets/images/abcnews_small.png")]

                           

                          public var abcnewspicture:Class;

                           

                          [

                          Bindable]

                          [

                          Embed(source="assets/images/bbcnews_small.png")]

                           

                          public var bbcnewspicture:Class;

                           

                           

                          private var myTilelistAArrayCollection:ArrayCollection = new ArrayCollection(

                          [{id:

                          "ABC News Item", label:"ABC News", icon:"abcnewspicture"},

                          {id:

                          "BBC News Item", label:"BBC News", icon:"bbcnewspicture"}]);

                           

                           

                          private var myTilelistBArrayCollection:ArrayCollection = new ArrayCollection([

                          {id:

                          "ABC News Item", label:"ABC News", icon:"abcnewspicture"},

                          {id:

                          "BBC News Item", label:"BBC News", icon:"bbcnewspicture"}]);

                           

                          ]]>

                           

                           

                           

                          </mx:Script>

                           

                           

                           

                          <mx:HBox x="10" y="10">

                           

                          <mx:Image id="abcnewsimage" width="100" height="100" scaleContent="true"/>

                           

                          <mx:Image id="bbcnewsimage" width="100" height="100" scaleContent="true"/>

                           

                          </mx:HBox>

                           

                           

                           

                          <mx:HTML id="myhtml" location="http://abcnews.com/" complete="takeSnapshot(event)" width="250" height="250" horizontalScrollPolicy="off" verticalScrollPolicy="off" x="10" y="118"/>

                           

                           

                          <mx:TileList x="268" y="118" width="294" height="250" id="myTilelistA" dataProvider="{myTilelistAArrayCollection}" rowHeight="100" columnWidth="100"/>

                           

                          <mx:TileList x="570" y="118" width="294" height="250" id="myTilelistB" dataProvider="{myTilelistBArrayCollection}" rowHeight="100" columnWidth="100"/>

                           

                          </mx:WindowedApplication>