10 Replies Latest reply on Aug 19, 2011 12:56 AM by Chorrillanop23

    Is there any way to save an image from a nested movieclip as a .png using PNGEncoder

    Cameron Tullberg

      Hello all,

       

      I am new to AIR and AS3 and I am developing a small AIR desktop application in Flash CS5 that saves a user generated image locally to their computer. 

      The image is generated from a series of user choices based on .png files that are loaded dynamically into a series of nested movieclips via XML.  The final image is constructed by a series of these "user choices".

       

      Sourcing alot of code examples from here and there, I have managed to build a "working" example of the application.  I am able to "draw" the parent movieclip to which all the other dynamic movieclips reside and can then encode it using PNGEncoder.  The problem is that the images loaded dynamically into the nested movieclips show as blank in the final .png generated by the user.

       

      Is there a way to "draw" and encode these nested movieclips or do I need to find another way?  I can provide my clumsy code if required but would like to know if this concept is viable before moving any further.....

       

      Thanks in advance....

        • 1. Re: Is there any way to save an image from a nested movieclip as a .png using PNGEncoder
          macromedical Level 1

          PngEncoder uses parentMovieclipBitmapData as input. So what happens if

          you skip the pngecoder, hide the original movieclip, and attach the

          bitmapdata this way:

          var bmp:Bitmap = new Bitmap(parentMovieclipBitmapData);

          addChild(bmp);

          just to test things out.

          still blanks ?

          • 2. Re: Is there any way to save an image from a nested movieclip as a .png using PNGEncoder
            Cameron Tullberg Level 1

            Thanks for the quick reply, but as I said I am new to this......  I have attached my code below......

             

            (where faceBG_mc is holding a series of nested movieclips that need to be "drawn" (Eg. in this case eyes_mc)

             

            /////**   Save faceBG_mc as .png  **/////

             

            import com.adobe.images.PNGEncoder;

             

            btn_Save.addEventListener(MouseEvent.CLICK, onSaveClickPNG);

             

            var fileRef:FileReference = new FileReference();

            var myBitmapData:BitmapData = new BitmapData (faceBG_mc.width,faceBG_mc.height, true, 0);

            myBitmapData.draw(faceBG_mc);

            var myPNG:ByteArray = PNGEncoder.encode(myBitmapData);

             

            function onSaveClickPNG(e:Event)

            {

            fileRef.save(myPNG, "myPNG.png");

            }

            ...... using this code I know the myPNG.png saves and works well except the eyes_mc shows up as blank even the the user has selected an image ans it is visible at the time the PNGEncoder is used......
            can you please help me with placing the code you suggested?
            Thanks in advance

            • 3. Re: Is there any way to save an image from a nested movieclip as a .png using PNGEncoder
              macromedical Level 1

              I think we need a larger example of how you load the png's.

              It is possible that there is tha the security domain prevents you from

              drawing the loaded png's into a bitmap.

              Though I can't judge on this becaause I don't know your setup and the

              location of your swf and png's.

              That is why I asked you to do this little test first:

               

              var fileRef:FileReference = new FileReference();

              var myBitmapData:BitmapData = new BitmapData (faceBG_mc.width,faceBG_mc.height, true, 0);

              myBitmapData.draw(faceBG_mc);

               

              var bmp:Bitmap = new Bitmap();

              bmp.bitmapData = myBitmapData;

              addChild(bmp);

               

              If you see the same result on stage ( blank clips for loaded png's ) then I'm nearly sure that it has to do with security.

              Try to put a crossdomain.xml in the root of the server that contains the png's and try again.

               

              Latcho

              • 4. Re: Is there any way to save an image from a nested movieclip as a .png using PNGEncoder
                Cameron Tullberg Level 1

                Thank you again.  I did what you suggested and it came up with a "blank" where the eyes_mc should have been as per the last posts.

                 

                I have attached a screen grab of my problem.  The right image shows what the user has created (note at this stage the eyes are the only dynamically generated feature from xml, the rest are dummy images)  The left shows the result of your instruction.

                 

                Does this mean it is a security issue from the .pngs loaded from the xml file?  (I have searched around for crossdomain.xml examples but don't know really what I am looking for when it comes to local folders)

                 

                Note this is a desktop application and all files are accessed from a local folder.

                 

                screen01.jpg

                 

                Not sure what other information you need in order to help me, but this is much appreciated!

                 

                Thanks in advance

                • 5. Re: Is there any way to save an image from a nested movieclip as a .png using PNGEncoder
                  macromedical Level 1

                  Are you working in air of in flash ?

                  Anyway, if it is flash and you use local images... I don't see the problem.

                  see demo:

                  http://greencollective.nl/temp/dump/test.zip

                  cheers Latcho

                  • 6. Re: Is there any way to save an image from a nested movieclip as a .png using PNGEncoder
                    Cameron Tullberg Level 1

                    Thanks for the files.......

                     

                    Yeah I'm doing it in Flash but importing the images via an xml document.  The problem isn't in being able to view the eyes (based on the selection of the user) its when I go to save the resulting image as a .png.  When I open up the saved .png the eyes are blank even though they are visible in the swf

                     

                    Even when the user clicks on the option to copy the image to the clipboard, it works as intended.

                     

                    My only guess is there is an issue with the way my xml is loading (but this appears to work fine) or when the file is converted and saved.....

                     

                    As I said I'm still learning but surely there must be a simple answer to this....

                     

                    I have included the xml code I am using and also the save code to see if anyone spots an issue..... (I hope I copied it all)

                     

                    // XML

                     

                    import flash.net.URLRequest;

                    import flash.net.URLLoader;

                     

                    var xmlRequest:URLRequest = new URLRequest("imageData.xml");

                    var xmlLoader:URLLoader = new URLLoader(xmlRequest);

                    var imgData:XML;

                    var imageLoader:Loader;

                     

                    var imgNum:Number = 0;

                    var numberOfChildren:Number;

                     

                    function packaged():void

                    {

                    rawImage = imgData.image[imgNum].imgURL;

                    numberOfChildren = imgData.*.length();

                    imageLoader = new Loader  ;

                    imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadedImage);

                    imageLoader.load(new URLRequest(rawImage));

                    faceBG_mc.Eyes.addChild(imageLoader);

                    }

                     

                    function loadedImage(event:Event):void

                    {

                    imageLoader.x = -186;

                    imageLoader.y = -94;

                    imageLoader.width = 373;

                    imageLoader.height = 186;

                    }

                     

                    //  Clipboard

                     

                    btn_Copy.addEventListener(MouseEvent.CLICK, onCopyClick);

                     

                    function onCopyClick(event:MouseEvent):void

                    {

                    var bd:BitmapData = renderBitmapData();

                    Clipboard.generalClipboard.setData(ClipboardFormats.BITMAP_FORMAT, bd);

                    }

                     

                    function renderBitmapData():BitmapData

                    {

                    var bd:BitmapData = new BitmapData(faceBG_mc.width,faceBG_mc.height);

                    bd.draw(faceBG_mc);

                    return bd;

                    }

                     

                    // Save faceBG_mc as .png 

                     

                    var fileRef:FileReference = new FileReference();

                    var myBitmapData:BitmapData = new BitmapData (faceBG_mc.width,faceBG_mc.height, true, 0);

                    myBitmapData.draw(faceBG_mc);

                    var myPNG:ByteArray = PNGEncoder.encode(myBitmapData);

                     

                    function onSaveClickPNG(e:Event)

                    {

                    fileRef.save(myPNG, "myPNG.png");

                    }

                     

                    So my problem is....

                     

                    The final image is copied to the clipboard with the eyes visible - yes

                    The eyes appear in the image in the swf as intended - yes

                     

                    When the image is saved as a .png and is meant to include the eyes, they are blank (see picture above)

                     

                    I hope this helps.....

                     

                    Thanks in advance

                    • 7. Re: Is there any way to save an image from a nested movieclip as a .png using PNGEncoder
                      macromedical Level 1

                      Yep issue:

                      You can only call the following lines after the 'loadedImage' event

                      handler was called:

                       

                      var myBitmapData:BitmapData = new BitmapData (faceBG_mc.width,faceBG_mc.height, true, 0);

                      myBitmapData.draw(faceBG_mc);

                      var myPNG:ByteArray = PNGEncoder.encode(myBitmapData);

                       

                      The lines above run directly because they are in the global scope and not in a function body,

                      and so make aBitmapDatasnapshot of your faceBG_mc even before your image loaded.

                      You then later use that bitmapdata to save it to png when a button is clicked...helas without eyes

                       

                      Utested FIX:

                       

                      //keep as global var

                      var fileRef:FileReference = new FileReference();

                       

                      //addfunction

                      function renderTransparant():BitmapData

                      {

                           var myTranspBitmapData:BitmapData = new BitmapData (faceBG_mc.width,faceBG_mc.height, true, 0);

                           myBitmapData.draw(faceBG_mc);

                           return myTranspBitmapData;

                      }

                       

                      //changed function

                      function onSaveClickPNG(e:Event)

                      {

                           var myPNG:ByteArray = PNGEncoder.encode( renderTransparant() );

                           fileRef.save(myPNG, "myPNG.png");

                      }

                       

                      Cheers,

                       

                      Latcho

                      • 8. Re: Is there any way to save an image from a nested movieclip as a .png using PNGEncoder
                        Cameron Tullberg Level 1

                        Yep now works as intended!

                         

                        Thanks very much for your help and support on this...... you've saved me a real headache!

                         

                        Fantastic work!

                         

                        Cheers!