7 Replies Latest reply on May 25, 2009 10:39 AM by kglad

    Antialiasing of images in rotated dynamically loaded HTML

    Ziggizag Level 1

      Hi guys,

       

      Flash CS3, Action Script 3

       

      I have some nasty issue. I need to display dynamically loaded HTML document with images but my designer wants the document to be presented in angular (slopy) manner rather than simply vertically placed on stage. HTML document is loaded inside a .htmlText property of a textField.

       

      While the texts itself renders perfectly with embedded fonts and "AntiAlias for readability" I have a huge problem with images inside  HTML. For whatever reason they look nasty aliased - complete disaster:

       

      Clipboard01.jpg

       

      Is there any way to get better quality in this case? Any ideas?

      Rgs,

      Ziggi

        • 1. Re: Antialiasing of images in rotated dynamically loaded HTML
          kglad Adobe Community Professional & MVP

          1.  paste the code you using to load the htmlText and

           

          2.  paste the htmlText

          • 2. Re: Antialiasing of images in rotated dynamically loaded HTML
            Ziggizag Level 1

            Code to load external files and parse them into Flash environment:

             

            var loadType:String;
            loadType = "styl";
            loadFile("styles/style.css");

             

            function loadFile(url):void{
                var request:URLRequest=new URLRequest();
                request.url=url;
                var loader:URLLoader=new URLLoader();
                addListeners(loader);
                try{
                    loader.load(request);
                }catch(e:Error){
                    tekst.text = "File loading error!";
                    removeListeners();
                }
            }

             

            function addListeners(d:IEventDispatcher):void{
                d.addEventListener(Event.COMPLETE, onComplete);
                d.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandlingFunction)
            }
                   
            function onComplete(e:Event):void{
                var loader:URLLoader=URLLoader(e.target);
                if(loadType=="styl"){
                    var css:StyleSheet = new StyleSheet();
                    css.parseCSS(loader.data);
                    tekst.styleSheet = css;
                    loadType = "body";
                    loadFile("texts/html.txt");
                }else if(loadType=="body"){
                    tekst.htmlText = loader.data;
                }
                removeListeners();
            }

             

            function ioErrorHandlingFunction(e:IOErrorEvent):void{
                tekst.text = "File loading error!";
                removeListeners();
            }

             

            function removeListeners():void{
                removeEventListener(Event.COMPLETE, onComplete);
                removeEventListener(IOErrorEvent.IO_ERROR, ioErrorHandlingFunction);
            }

             

            HTML file:

             

            <H1>Blah blah blah blah</H1>
            <H2>Blah blah blah blah</H2>
            <textformat leading="122"><img src="images/pool.jpg" width="220" height="163" vspace="-20" hspace="40"></textformat>
            <p>Blah blah blah blah</p>

             

            CSS file:


            H1{
            font-size:16;
            color: #CD0303;
            leading:-20;
            }
            H2{
            font-size:14;
            color: #000000;
            leading:-4;
            }
            p{
            font-size:11;
            color: #000000;
            }

            • 3. Re: Antialiasing of images in rotated dynamically loaded HTML
              kglad Adobe Community Professional & MVP

              change your onComplete() function and add an imageLoadCompleteF() to your a.s.:

               

               

              function onComplete(e:Event):void{
                  var loader:URLLoader=URLLoader(e.target);
                  if(loadType=="styl"){
                      var css:StyleSheet = new StyleSheet();
                      css.parseCSS(loader.data);
                      tekst.styleSheet = css;
                      loadType = "body";
                      loadFile("html.txt");
                  }else if(loadType=="body"){
                      tekst.htmlText = loader.data;
                        var ldr:Loader = Loader(tekst.getImageReference("image"));
                        ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoadCompleteF);
                  }
                  removeListeners();
              }
              function imageLoadCompleteF(e:Event){
                   Bitmap(Loader(tekst.getImageReference("image")).content).smoothing = true;
              }
              

              and add an id attribute to your img tag:

              <img height="163" hspace="40" id="image" src="image1.jpg" vspace="0" width="220" />

              • 4. Re: Antialiasing of images in rotated dynamically loaded HTML
                Ziggizag Level 1

                Well,

                 

                I appreciate - this is indeed working. Please notice some minor faults in your scripts (probably this text editor messed the script):

                 

                it should read:

                 

                ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoadCompleteF);

                 

                and

                 

                Bitmap(Loader(tekst.getImageReference("image")).content).smoothing = true;

                 

                So, it is clear now the images dynamically loaded can be smoothed but - as the content is dynamic and there may be more than one image of uncertain id - how to get all the id references to images in loaded html file - can you be so kind and answer this question too?

                 

                Best regards,

                Ziggi

                • 5. Re: Antialiasing of images in rotated dynamically loaded HTML
                  kglad Adobe Community Professional & MVP

                  you can find the id by parsing the htmlText using the flash string methods.

                  • 6. Re: Antialiasing of images in rotated dynamically loaded HTML
                    Ziggizag Level 1

                    Thank you!

                     

                    You were indeed very helpful - I may go on now