[flexcoders] Getting My HTML Thumbnail Gallery To Work Using Event.complete

[James]

At the moment I have an app which I can only describe as something that 
generates thumbnails of html pages (or at least it is meant to). The way this 
is achieved is by using a html component. Upon event complete of this component 
I have a function which creates a snapshot of the html component and makes it 
the source of an image there fore making that image a thumbnail of that 
particular site.

 
I then want it to do the same for further sites but obviously using multiple 
hmtl components would be out of the question as it would greatly increase 
loading times (I've tried and it slows the application down majorly) so what 
I'm trying to do is set the 'complete' property of the 1 html component I've 
got so that when the first site is loaded i.e. event complete of the html 
component has been reached a snapshot of that site will be created and made as 
the source of my first thumbnail and then the location of the html component 
will change to the next site, a snapshot of that site will then be made upon 
event complete of the component and will be made the source of my second 
thumbnail and so on and so forth.

 
I'm struggling to get this to work effectively but I think I'm going along the 
right lines. Here's my code so far. Can anyone please tell me how I can edit it 
so that this effect is achieved in a row the way I have described:-

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"; 
layout="vertical" verticalAlign="middle" backgroundColor="white" width="1024" 
height="768">
 
    <mx:Script>
        <![CDATA[
            import mx.graphics.ImageSnapshot;
 
            private function 
takeabcnewsSnapshot(abcnewssource:IBitmapDrawable):void {
                var abcnewsimageBitmapData:BitmapData = 
ImageSnapshot.captureBitmapData(abcnewssource);
                abcnewsimage.source = new Bitmap(abcnewsimageBitmapData);
            }

            private function 
takegooglenewsSnapshot(googlenewssource:IBitmapDrawable):void {            
                var googlenewsimageBitmapData:BitmapData = 
ImageSnapshot.captureBitmapData(googlenewssource);
                googlenewsimage.source = new Bitmap(googlenewsimageBitmapData);
            }

            private function 
takeyahoonewsSnapshot(yahoonewssource:IBitmapDrawable):void {            
                var yahoonewsimageBitmapData:BitmapData = 
ImageSnapshot.captureBitmapData(yahoonewssource);
                yahoonewsimage.source = new Bitmap(yahoonewsimageBitmapData);
            }
 
            private function abcnewshtml_complete(evt:Event):void {
                takeabcnewsSnapshot(myhtml);
            }

            private function googlenewshtml_complete(evt:Event):void {
                takegooglenewsSnapshot(myhtml);
            }
            
            private function yahoonewshtml_complete(evt:Event):void {
                takeyahoonewsSnapshot(myhtml);
            }

        ]]>
    </mx:Script>
    <mx:Image id="abcnewsimage" width="100" height="100"/>
    <mx:Image id="googlenewsimage" width="100" height="100"/>
    <mx:Image id="yahoonewsimage" width="100" height="100"/>
 
    <mx:HTML id="myhtml"
            location="http://abcnews.com/";
            complete="abcnewshtml_complete(event); 
myhtml.location='http://news.yahoo.com/'; yahoonewshtml_complete(event); 
myhtml.location='http://news.google.com/'; googlenewshtml_complete(event)"
            width="100%"
            height="454" />
 
</mx:WindowedApplication>