0 Replies Latest reply on Feb 13, 2010 3:37 PM by jimmyoneshot

    Need Help With An Application Which Produces Live Images Within Tilelists

    jimmyoneshot Level 1

      At the moment I have an application which is meant to produce live thumbnail images of websites. Currently how it does this is a html component (myhtml) loads websites via it's location property changing from website to website and upon fully loading of each site a "snapshot" is taken of the html component and saved as a bitmap and applied as the source of an image corresponding to that particular site (abcnewsimage and bbcnewsimage). However I now need to insert these snapshots within the 'icon' properties of 2 array collections (myTilelistAArrayCollection and myTilelistBArrayCollection) which act as dataproviders to populate 2 tilelists (mtTilelistA and myTilelistB).

       

      Basically I need the same images to appear automatically within the tilelists the way they do in the 2 images as the snapshots are taken by applying the same bitmaps into the currently empty 'icon' properties of the 2 tilelists i.e. the icon of the ABC News Item of both array collections must be the same as the abcnewsimage and appear as it appears and the same for the BBC News Item icon being the same as the bbcnewsimage picture as that appears.

       

      It should look like the images are appearing in the tilelist at the same time as they are appearing in the regular images. What will I need to put into the icon properties to do this?

       

      I hope this makes sense and if anyone can help me out it would be much appreciated.

       

       

      <?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>