4 Replies Latest reply on Aug 7, 2010 4:03 PM by bobbyworld@gmail.com

    How to scale down the content of a html component

    jimmyoneshot Level 1

      I have a 100 x 100 html component that has the location of a site as it's location so obviously an image of this site appears within the component. How can I scale this down so that the image is also 100 x 100? Scalex and scaley only scale the component itself not it's contents/image.

       

      Obviously it's easy to do this with a regular image component as you just resize the image itself manually but this obviously can't be done with websites. Here is the component:-

       

       

       

      <mx:HTML
      
       location="http://www.yahoo.com/" height="100" width="100"/>
      
      
      
      
        • 1. Re: How to scale down the content of a html component
          Jason Szeto Level 3

          I'm assuming that you are trying to create thumbnails of different websites. Thus you don't need any interactivity. The HTML control can't scale its content and you probably don't want users clicking in it.

           

          I've created a Flex 4 example that takes a snapshot of the web page and displays it in an Image tag. You'll probably want to optimize this a bit. BitmapData can be memory intensive, so in the draw command you might want to scale the image down by passing in a matrix. When you are done with the BitmapData, remember to call dispose() to free it up for garbage collection.

           

          Jason

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark"
                                 xmlns:mx="library://ns.adobe.com/flex/mx">
              <fx:Script>
                  <![CDATA[
                      import flash.display.Bitmap;
                      import flash.display.BitmapData;
                      import flash.events.MouseEvent;

           

                      protected function button1_clickHandler(event:MouseEvent):void
                      {
                          // TODO Auto-generated method stub
                          content.location = location.text;
                      }

           


                      protected function button2_clickHandler(event:MouseEvent):void
                      {
                          var bd:BitmapData = new BitmapData(800, 600, false);
                          bd.draw(content);
                         
                          var bm:Bitmap = new Bitmap(bd);
                          snapshotHolder.source = bm;
                      }

           

                  ]]>
              </fx:Script>
              <fx:Declarations>
                  <!-- Place non-visual elements (e.g., services, value objects) here -->
              </fx:Declarations>
             
              <s:layout>
                  <s:VerticalLayout/>
              </s:layout>
             
              <s:HGroup width="100%">
                  <s:TextInput id="location" width="80%"/>
                  <s:Button label="Go" click="button1_clickHandler(event)"/>
              </s:HGroup>
             
              <s:Button label="Create Snapshot" click="button2_clickHandler(event)"/>
              <mx:Image id="snapshotHolder" width="100" height="100" scaleContent="true"/>
             
              <mx:HTML width="800" height="600" id="content"/>
             
             
          </s:WindowedApplication>

          1 person found this helpful
          • 2. Re: How to scale down the content of a html component
            jimmyoneshot Level 1

            Thanks Jason.

             

            The problem for me is that I don't have flex 4 only flex 3 and I've never used flex 4 at all. When I get the solution for this I need to implement it into an existing flex 3 air application I've made. Is there any way of me producing this example in a flex 3 app?

             

            Cheers for your help so far.

            • 3. Re: How to scale down the content of a html component
              jimmyoneshot Level 1

              Oh and by the way what you mentioned in your first sentence "thumbnails of websites" is exactly what I'm after. It's just that as you say I need the images to be non interactive too.

              • 4. Re: How to scale down the content of a html component
                bobbyworld@gmail.com Level 1

                The thing with the HTML Component is you need to specify the width and height size not in percentages for the bitmapdata to have all the HTML Content of the webpage.

                 

                Bobby