Using HTML component Images within a tilelist

Question

I have a very complicated problem and I'm not sure it's even within my ability to achieve if at all but basically in my AIR application I currently have a tilelist populated by a data provider of images which are essentially thumbnail snapshots I've made of websites. When each of these images is clicked within the tilelist they take the user to that specific site. I now however want these images to be live i.e. they change as the site changes.
I've decided to use html components for all of these sites to get these images but I now want these images to be set up as a dataprovider for a tilelist. It's hard to explain so to show what I mean I've made the following code. Basically I want the 2 images/displays that are displayed within the 2 html components to be static i.e. the user can't interact with the sites through them but can simply click on them to go to the site and to be put within a dataprovider somehow that will act as the dataprovider for the imageDisplay tilelist Complicated I know but the guy I'm making the app for wants the images of sites to update themselves and this is the easiest way to do it I've heard :-
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas width="100%" height="100%">
<mx:HTML id="content1" location="http://www.adobe.com/" width="300" height="300"/>
<mx:HTML id="content2" location="http://www.google.com/" x="308" width="300" height="300"/>  
<mx:TileList x="0" y="308" width="772" height="300" id="imageDisplay"></mx:TileList>
</mx:Canvas>
</mx:WindowedApplication>

Answer 1

To show you what I mean better here is a partial bit of my code from my existing app in which I've just used static images in the tilelists. The real app is much more advanced but this is to just give you an idea. Users can drag site icons displayed in a tilelist into their own tilelist and then click the save button so these icons will still be in their tilelist when they restart the app. I used the shared object method for this to get it to save these details. As you can see in my code starting at around line 33 I've used an array collection for this. What I need is to somehow get these html live images into that array collection as opposed to the static jpgs I have at the moment.
<?xml version="1.0" encoding="utf-8"?><mx:WindowedApplication  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initprofile1NewsAndSportSO();">
 <mx:Script>
<![CDATA[
[Bindable][
Embed(source="assets/images/bbcnews_small.png")] 
public var image5:Class; 
Bindable][
Embed(source="assets/images/itv_small.png")] 
public var image7:Class; 
Bindable][
Embed(source="assets/images/skynews_small.png")] 
public var image10:Class; 
]]>
</mx:Script>
 <mx:Script>
<![CDATA[
 private function profile1NewsAndSportAddButtonClickHandler():void{ 
for each(var a:uint in profile1NewsAndSportAddLinksTilelist.selectedIndices){ 
if(profile1NewsAndSportLinkChoice.dataProvider != null){ 
if(!ArrayCollection(profile1NewsAndSportLinkChoice.dataProvider).contains(ArrayCollection(pr ofile1NewsAndSportAddLinksTilelist.dataProvider).getItemAt(a))){ArrayCollection(profile1NewsAndSportLinkChoice.dataProvider).addItem(ArrayCollection(profi le1NewsAndSportAddLinksTilelist.dataProvider).getItemAt(a));
ArrayCollection(profile1NewsAndSportAddLinksTilelist.dataProvider).removeItemAt (a);
else{profile1NewsAndSportLinkChoice.dataProvider.addItem(ArrayCollection(profile1NewsAndSportAd dLinksTilelist.dataProvider).getItemAt(a));
ArrayCollection(profile1NewsAndSportAddLinksTilelist.dataProvider).removeItemAt(a);
private function profile1NewsAndSportRemoveButtonClickHandler():void{ 
for each(var a:uint in profile1NewsAndSportLinkChoice.selectedIndices){ArrayCollection(profile1NewsAndSportAddLinksTilelist.dataProvider).addItem(ArrayCollection (profile1NewsAndSportLinkChoice.dataProvider).getItemAt(a));
ArrayCollection(profile1NewsAndSportLinkChoice.dataProvider).removeItemAt(a);
]]>
</mx:Script>
 <mx:Script>
<![CDATA[
 import mx.collections.*; 
import flash.net.SharedObject; 
public var profile1NewsAndSportSO:SharedObject; 
private var profile1NewsAndSportaddLinksFullAC:ArrayCollection = new ArrayCollection([{link:
"www.bbcnews.com", label:"BBC News", icon:"image7", largeImage:"assets/images/bbcnews_small.png", title:"BBC News", description:"BBC News description will go here"},{link:
"www.itv.com/", label:"ITV", icon:"image5", largeImage:"assets/images/itv_small.png", title:"ITV", description:"ITV Description will go here"},{link:
"www.skynews.com", label:"Sky News", icon:"image10", largeImage:"assets/images/skynews_small.png", title:"Sky News", description:"Sky News Description will go here"}]);
private var profile1NewsAndSportaddLinksAC:ArrayCollection = new ArrayCollection([{link:
"www.bbcnews.com", label:"BBC News"},{link:
"www.itv.com/", label:"ITV"},{link:
"www.skynews.com", label:"Sky News"}]);
private function profile1NewsAndSportReset():void{resetprofile1NewsAndSportAC();
profile1NewsAndSportAddLinksTilelist.dataProvider
= profile1NewsAndSportaddLinksAC;
profile1NewsAndSportLinkChoice.dataProvider =
new ArrayCollection([]);}
private function resetprofile1NewsAndSportAC():void{profile1NewsAndSportaddLinksAC.removeAll();
for each(var obj:Object in profile1NewsAndSportaddLinksFullAC){profile1NewsAndSportaddLinksAC.addItem(obj);
private function initprofile1NewsAndSportSO():void{profile1NewsAndSportLinkChoice.dataProvider =
new ArrayCollection();profile1NewsAndSportAddLinksTilelist.dataProvider =
new ArrayCollection();profile1NewsAndSportSO = SharedObject.getLocal(
"profile1NewsAndSport"); 
if(profile1NewsAndSportSO.size > 0){ 
if(profile1NewsAndSportSO.data.profile1NewsAndSportaddList){ 
if(profile1NewsAndSportSO.data.profile1NewsAndSportaddList != "empty"){ 
var profile1NewsAndSportaddList:Array = profile1NewsAndSportSO.data.profile1NewsAndSportaddList.split(","); 
var profile1NewsAndSporttempAC1:ArrayCollection = new ArrayCollection(); 
for each(var str:String in profile1NewsAndSportaddList){ 
for each(var obj1:Object in profile1NewsAndSportaddLinksAC){ 
if(str == obj1.label){profile1NewsAndSporttempAC1.addItem(obj1);
continue;}
if(profile1NewsAndSporttempAC1.length > 0){profile1NewsAndSportAddLinksTilelist.dataProvider = profile1NewsAndSporttempAC1;
if(profile1NewsAndSportSO.data.profile1NewsAndSportchoiceList){ 
var profile1NewsAndSportchoiceList:Array = profile1NewsAndSportSO.data.profile1NewsAndSportchoiceList.split(","); 
var profile1NewsAndSporttempAC2:ArrayCollection = new ArrayCollection(); 
for each(var str2:String in profile1NewsAndSportchoiceList){ 
for each(var obj2:Object in profile1NewsAndSportaddLinksAC){ 
if(str2 == obj2.label){profile1NewsAndSporttempAC2.addItem(obj2);
continue;}
if(profile1NewsAndSporttempAC2.length > 0){profile1NewsAndSportLinkChoice.dataProvider = profile1NewsAndSporttempAC2;
else{profile1NewsAndSportReset();
private function saveprofile1NewsAndSport(event:MouseEvent):void{ 
var profile1NewsAndSportaddList:String = ""; 
if(profile1NewsAndSportAddLinksTilelist.dataProvider){ 
if(ArrayCollection(profile1NewsAndSportAddLinksTilelist.dataProvider).length > 0){ 
for each(var obj1:Object inprofile1NewsAndSportAddLinksTilelist.dataProvider){
profile1NewsAndSportaddList += obj1.label +
else{profile1NewsAndSportaddList =
"empty";}
profile1NewsAndSportSO.data.profile1NewsAndSportaddList = profile1NewsAndSportaddList;
var profile1NewsAndSportchoiceList:String = ""; 
for each(var obj2:Object inprofile1NewsAndSportLinkChoice.dataProvider){
profile1NewsAndSportchoiceList += obj2.label +
profile1NewsAndSportSO.data.profile1NewsAndSportchoiceList = profile1NewsAndSportchoiceList;
profile1NewsAndSportSO.flush();
]]>
</mx:Script>
 <mx:Button click="profile1NewsAndSportReset()" id="reset" label="
Reset" y="5" height="25" x="5"/>
 <mx:TileList id="profile1NewsAndSportLinkChoice" fontWeight="bold" dragEnabled="
true" dragMoveEnabled="true" dropEnabled="true" height="129" width="
650" top="10" left="519" columnCount="5" rowHeight="145" columnWidth="
125" backgroundColor="#000000" color="#FFFFFF"creationComplete="profile1NewsAndSportLinkChoice.selectedIndex=0"
/>
 <mx:TileList id="profile1NewsAndSportAddLinksTilelist" fontWeight="bold" dragEnabled="
true" dragMoveEnabled="true" dropEnabled="true" height="129" width="
385" top="10" left="126" columnCount="3" rowHeight="145" columnWidth="125" backgroundColor="
#000000" color="#FFFFFF"creationComplete="profile1NewsAndSportAddLinksTilelist.selectedIndex=0"
/>
 <mx:Button click="saveprofile1NewsAndSport(event)" id="save" label="Save Changes" x="
5" y="38" width="113" height="25.5"/>
 <mx:Button x="126" y="147" label="Add" id="profile1NewsAndSportAddSelectedLinkButton" click="profile1NewsAndSportAddButtonClickHandler()"/>
 <mx:Button x="519" y="147" label="Remove" id="profile1NewsAndSportRemoveSelectedLinkButton" click="profile1NewsAndSportRemoveButtonClickHandler()"/>
 </mx:WindowedApplication>