1 Reply Latest reply on Feb 9, 2010 4:26 AM by jimmyoneshot

    Getting My HTML Thumbnail Gallery To Work Using Event.complete

    jimmyoneshot

      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>
      
      
      
      
        • 1. Re: Getting My HTML Thumbnail Gallery To Work Using Event.complete
          jimmyoneshot Level 1

          Can anyone give me any advice on this? I've tried numerous things but I'm totally stuck.

           

          What I basically need is when the 'myhtml' html components fully loads (i.e. it is 'complete') for the first time the 'abcnewshtml_complete' function activates then the location of the myhtml component changes to the google news website and upon 'complete' of the the my html component this time the 'googlenewshtml_complete' function activates then after that the location changes to the yahoo news website and the yahoonewshtml_complete function activates.

           

          Each of the html_complete functions take snapshots of each of the currently displayed sites within the html component. Is there any way I can get this to work properly at the moment it takes a snapshot of the first site and puts it in all 3 images then changes to the second site and puts it in all 3 images etc when it should only be in 1 image. I simply want it to fully load take a snapshot of abcnews and put it in the first image change to google news then take a snapshot of that and put it in the second image then change to yahho news and take a pic of that and put it in the third image.