Need Help With An Application Which Produces Live Images Within Tilelists

Question

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>

Answer 1

Cheers Flex harUI. From what I can see superimage is mainly used to keep images at better quality. What I'm concerned with is having the images set within the 'icon' properties of the 2 tilelists AS they are set within their specific images. I've tried databinding by doing this for example:-
{id:
"ABC New Item", label:"ABCNews", icon:"{abcnewsimage.source}"},
I hoped that would cause the icon field of the array collection to be populated by the source of the abcnewsimage so that as the abcnewsimage is populated by the snapshot that is taken of the abcnews website the icon field of the abc news item in the array collection would be too so that furthermore the tilelists would then be populated by these images. Basically as each snapshot appears in it's specfic image it needs to be loaded into the icon property of the array collection too. In the end the icons should look as if they are appearing within both the tilelists the same way as they are appearing within the images if that makes sense. The images should be loading within the tilelist one at a time as they are in the regular image components.