11 Replies Latest reply on Jul 6, 2010 10:24 AM by Oli_Wales

    Image compression & Image Quality

    Oli_Wales Level 1

      Hi,

       

      I have a site that has a Swf Background where it fills the window completely, so the image isn't static. My only problem is, as it stretches obviously the quality degrades, and i would like it to be quite smooth however it's viewed, but also i need the file to be quite reasonable so it doesn't take ages to display. My Background fades in and out through 3-5 images (the reason the file is quite big, around 500kb+) and i have a progress bar while it loads.

       

      Does anyone have any ideas how i can keep the image quality quite good when it's enlarged without the file size being too big.

       

      I fear this might be impossible

        • 1. Re: Image compression & Image Quality
          skarthiks Level 2

          There are multiple ways:

           

          For improving the quality:

          1. You can use higher resolution images

          2. You can use vector images instead of bitmap images (bitmap images tend to show artifacts when stretched )

           

          For reducing the size of the swf :

          1. Do not add all the image into the swf (basically do not embed the images)

          2. Load the images from an external file (using Loader or URLLoader classes - AS3) - This way the loading of the SWF does not take time at all and also the resolution of the images that you use could be kept larger. The resolution can be larger, because the swf loads the images one by one and not all at once.

          You could be looping around the images that have been download completely until the next  image downloads.

           

          Hope this helps.

          • 2. Re: Image compression & Image Quality
            Oli_Wales Level 1

            Great thanks,

             

            Do you know how i can load multiple images into the swf, i'm currently using the following script on frame 1, which loads the first image and voilà!  but what i done was to duplicate this on Frame 2 to load the second image and so on (as i don't want them to all load at once, i'm thinking this might increase the download time) but suddenly it no longer works.

             

             

            var imageLoader:Loader;

            function loadImage(url:String):void {

             

            imageLoader = new Loader();
            imageLoader.load(new URLRequest(url));
            imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imageLoading);
            imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);

             

            }
            loadImage("Bk01.jpg");

            function imageLoaded(e:Event):void {

             

            imageArea.addChild(imageLoader);

             

            }

            function imageLoading(e:ProgressEvent):void {

             

            }

             

             

             

            Much appreciated!

            • 3. Re: Image compression & Image Quality
              skarthiks Level 2

              you would probably have to remove the already loaded child and then add the the newly loaded image as child.

               

              If(imageArea.numChildren > 0)

              {

                   imageArea.removeAll();

                  ImageArea.addChild(imageLoader);

              }

               

              Please check if this works.

              and if it doesnt then let me know if atleast the first image got loaded.

              • 4. Re: Image compression & Image Quality
                Oli_Wales Level 1

                Cheers

                 

                Didnt work, but to be honest i'm not sure if i'm putting this code in the right place! On my second frame i placed the

                initial script i posted then amended it with your script, but with no joy

                • 5. Re: Image compression & Image Quality
                  jimfid45 Level 1

                  Where you say, "My only problem is, as it stretches obviously the quality degrades, and i  would like it to be quite smooth however it's viewed, but also i need  the file to be quite reasonable so it doesn't take ages to display."

                   

                  I am not sure where you say stretches.  If you have a jpg that is 800 x 600 pixels. You cannot make it larger without introducing distorsion. This is about bitmap

                  graphics.  It is not degradation of quality per se.

                  • 6. Re: Image compression & Image Quality
                    skarthiks Level 2

                    I can see that you are doing the code in AS3 right?

                     

                    Also, you need not paste the whole code again in frame 2

                     

                    change the below in the first frame.

                     

                    function imageLoaded(e:Event):void {

                     

                    imageArea.addChild(imageLoader);

                     

                    }

                     

                    to

                     

                    function imageLoaded(e:Event):void {

                     

                    imageArea.removeAll();

                    imageArea.addChild(imageLoader);

                     

                    }

                     

                    In the second frame just call

                     

                    loadImage("SECOND_IMAGE.jpg");

                    stop();

                    • 7. Re: Image compression & Image Quality
                      Oli_Wales Level 1

                      Yes AS3,

                       

                      Ok tried that, but i'm getting this error

                       

                      Error #1006: removeAll is not a function.
                          at Images_fla::Images_1/imageLoaded()

                      • 8. Re: Image compression & Image Quality
                        skarthiks Level 2

                        Okay Can you make the function

                         

                        function imageLoaded(e:Event):void {

                         

                        while(imageArea.numChildren > 0)

                        {

                             imageArea.removeChildAt(0);

                        }

                         

                        imageArea.addChild(imageLoader);

                         

                        }

                         

                        my bad removeAll is not a function of imageArea.

                        • 9. Re: Image compression & Image Quality
                          Oli_Wales Level 1

                          Ok the first image loads! But the second doesn't. I mean you asked me to put the other bit of code on frame 2 but all this does is loads the second image where the first image should be and then stops, so i put the code below on frame where the image 2 is meant to be, and still nothing besides some error codes

                           

                          loadImage("Bk02.jpg");
                          stop();

                          • 10. Re: Image compression & Image Quality
                            skarthiks Level 2

                            Okay to load multiple images, have multiple imageArea and load each image into one of the imageArea.

                            Also, what are the error codes that you are seeing ?

                            • 11. Re: Image compression & Image Quality
                              Oli_Wales Level 1

                              Sorry i'm really lost now. The error codes were:

                               

                              Error #1009: Cannot access a property or method of a null object reference.
                                  at Images_fla::Images_1/imageLoaded()

                               

                              I found a bit of code that apparently does the trick.

                               

                              function loadImage(path:String):Loader{
                              var request:URLRequest = new URLRequest(path);
                              var loader:Loader = new Loader();
                              loader.load(request);
                              return loader;
                              };
                              var image1 = loadImage("somefile.jpg");
                              this.addChild(image1);
                              var image2 = loadImage("anotherfile.jpg");
                              someMC.addChild(image2);

                               

                              The first iimage loads up, but again the second does not, i just can't another image to load into a movieclip on another frame

                               

                              I put the instance of my movie clip in like this imageArea02.addchild (image2); but doesnt work (but apparently it should)

                               

                              Thanks for your patience