21 Replies Latest reply on Apr 17, 2008 11:37 AM by kglad

    Cutting up an image

    Rick_Cope

      Hi anyone,
      I'm creating a "jigsaw" from an existing jpg image and want to be able to get Flash to cut it up into say 24 (6*4) rectangles so the user can then drag the pieces into the correct places.
      I've managed to get the drag 'n drop sorted and can even get the pieces to re-sort into random places on the 'grid'. At the moment I'm using an image I have physically cut up into pieces usin Photoshop. It would be REALLY good to allow the user to select an image, decide on how may pieces to use, then have Flash cut it up for use.
      I've had a quick look at bitmapData class but cannot see quite how to get it to work from imported images.
      Any ideas?
      Thanks
      Rick
        • 1. Re: Cutting up an image
          stephan.k Level 1
          How about loading the same image into multiple movieClips and then adjust each image position within that movieClip so that the registration point sits in a different place in each movieClip, then crop each image with a mask... then place them accordingly...

          A little vague but something along those lines... ?
          • 2. Re: Cutting up an image
            kglad Adobe Community Professional & MVP
            it would be easier to use the draw() method of the bitmapdata class. you can use the matrix parameter to copy different portions of your image.
            • 3. Re: Cutting up an image
              Rick_Cope Level 1
              Once again, thank you for your help kglad. However, you are dealing with a new-comer to flash and I am still fumbling my way through its detail having been brought up on Visual Basic. In that application just one line of code would have done the whole thing, so the sophisticated sequences and commands used in Flash are a bit of a culture shock!
              If I outline exactly what I need help on maybe you could find a few moments to expand on my points...
              1. Load an image in a format which can be 'cut up' using the bitmap class functions
              2. Possibly allow the user to select the number of rows and columns to cut the image up into for the purposes of the 'jigsaw'. No transformation etc. needed just a straight cut out.
              3. Cut up the original image into panels which can then be converted into movie clips (maybe as an array of mc's?) for use in the jigsaw. (I may look at the idea of scaling the new mc's later)


              Your help on the array function was SUPERB and I've got that working on an 8*6 jigsaw well. This cut-up function would add the icing to the cake as users could then drop their own image into the application to create their own jigsaw.
              Hope you can help again
              Kind regards
              Rick
              • 4. Re: Cutting up an image
                kglad Adobe Community Professional & MVP
                :

                • 5. Re: Cutting up an image
                  Rick_Cope Level 1
                  Once again, kglad to the rescue! This is great and seems to do the job. Just one thing (soory to be so thick) but how do I now access the puzzleA array to manipulate the new images and place them where I want on the jigsaw frame. What 'counter' do I use so I can allocate x and y locations?
                  Also, is it possible to pass the images from the elements of this array to replace existing movie clip images in my current jigsaw?
                  • 6. Re: Cutting up an image
                    kglad Adobe Community Professional & MVP
                    use a function to display your puzzle pieces on stage. pass the array as a function argument.

                    you would not pass the images from the elements of the array to replace existing moveclip images the array elements are movieclips.

                    it's possible you could use your current movieclips but how you would do that depends upon how the image was related to the movieclip. in any case, i don't think you should do that. it will just make things more complex and serve no purpose. it's easier to remove all the previous movieclips and create new ones for each new image or each new puzzle piece sizing.
                    • 7. Re: Cutting up an image
                      AScracker Level 1
                      Hi Kglad,

                      how to make if i need to select any particular part of image to cut in runtime . After , that image i need to save that one as jpg in some location
                      is it possible can you give some more idea regarding this

                      ~~
                      SK
                      • 8. Re: Cutting up an image
                        kglad Adobe Community Professional & MVP
                        here's code to select (using the mouse to select) any portion of a bitmap. combined with the above code you can select any part of a bitmap and then cut it into rectangular sections.

                        and you can save a bitmap from flash to your server or email from flash to anyone using flash and some server-side scripting:

                        • 9. Re: Cutting up an image
                          AScracker Level 1
                          Great Kglad :)

                          but i am really do't know hw to save it in server, hw to pass that "myClip" bitmap image .whether we need to use flash remoting to pass that file or any other ways is there. could you suggest me idea to slove this..

                          ~~
                          Sk
                          • 10. Re: Cutting up an image
                            kglad Adobe Community Professional & MVP
                            you don't need flash remoting. any server-side executable will work.

                            i'd have to write the script to save the above array on a server. you might be able to find one that will work with the above array, and i know you can find a script that will work with other bitmap saving methods (see mario klingemann's bitmapexporter class).

                            but if you use the above, you should compress that array before sending it to be precessed by a script.

                            or, if you want to hire me to do this, let me know.
                            • 11. Re: Cutting up an image
                              Rick_Cope Level 1
                              Hi kglad
                              Things are moving slowly on! I have managed to use your splendid code to both create my jigsaw pieces and successfully shuffle them around. Yipeeee!
                              However, in my 'original' version I could easily drag and drop the movie clips... test if they were in the right place and return them to their original place if they were not. Now I'm using an array of newly created movie clips I need to access them from the timeline (as I cannot place code directly in them like I did before).
                              The code I'm using I've TRIED to adapt from the previous version but , alas, no joy. This is what I've tried...


                              I'm really struggling here kglad. Maybe I'm trying to run before I can walk in my use of Flash. Some of the stuff you've sent I can understand, the rest I just blindly follow. Ho hum. I suppose if you don't make mistakes you will never learn.
                              Any ideas on the above. Am I on the right lines?
                              Rick
                              • 12. Re: Cutting up an image
                                kglad Adobe Community Professional & MVP
                                if you change cutItUpF() to the following your pieces should drag and drop as you want, though you may be using a border around the pieces, in which case there will need to be some tweaking:

                                • 13. Re: Cutting up an image
                                  AScracker Level 1
                                  H
                                  I made the array which contain the pixel value (compress the array). but i got the result like this
                                  in that array some the value contain like 0000, and ff2b2d28. becoz every color it should contain six value
                                  but in that array contains four values(0000) or eight values (ff2b2d28)
                                  is it correct way of approach to send the data to php by send and load function

                                  ~~
                                  Sk


                                  • 14. Re: Cutting up an image
                                    kglad Adobe Community Professional & MVP
                                    no. you'll need to pad each color component so it has length 2.
                                    • 15. Re: Cutting up an image
                                      AScracker Level 1
                                      hi kglad,

                                      Am not very clear about the compressing technique could please elobrate where i need to implement...

                                      ~~
                                      SK
                                      • 16. Re: Cutting up an image
                                        Rick_Cope Level 1
                                        Good stuff kglad, however, two problems still exist. If I can crack those then I think I'm there.
                                        Firstly, in my original 'manual' version I cut up the image and created 48 movie clips, each of which I added AS to. I controlled the depth by using the DepthManager (mx.behaviors.DepthControl.bringToFront(this);) so when the user clicked on the movie clip it came in front of all the others for dragging. I cannot now get that function to work. The mc's stay in the depth position they were created in.
                                        Secondly, although I can drag the movie clips they cannot be released and continue to follow the mouse around the screen.
                                        Any ideas?
                                        Thanks
                                        Rick
                                        • 17. Re: Cutting up an image
                                          kglad Adobe Community Professional & MVP
                                          oops. add a stopDrag() to those onRelease methods. and add a this.swapDepths(this._parent.getNextHighestDepth()) to the onPress methods to bring those movieclips to the front.
                                          • 18. Re: Cutting up an image
                                            Rick_Cope Level 1
                                            Hi kglad
                                            Thanks for all your help so far. I feel I am getting somewhere now.
                                            However...
                                            a. the code for bringing the movie clip to the front doesn't work consistently. Some clips come in front of others on dragging, some don't
                                            b. When I drop a dragged clip I want it to do one of two things. IF it is over another clip I want them to swap positions. If it is not wholly over another clip I want it to return to its original position when the mouse was pressed to drag it
                                            Maybe if I include the code I'm trying to use it would help.
                                            The trouble is I think changes I am making may be having knock-on effects in other parts of the code. I'm trying to be careful.
                                            Kind regards
                                            Rick
                                            • 19. Re: Cutting up an image
                                              kglad Adobe Community Professional & MVP
                                              a. do you have any components in your swf?

                                              b. your _droptarget code is wrong. you're just checking if the _droptarget is the _droptarget which is always true.

                                              loop through puzzleA using a hitTest to see if the dropped piece should occupy a puzzle position and another piece should return to its start position.
                                              • 20. Re: Cutting up an image
                                                Rick_Cope Level 1
                                                Thanks for your reply kglad
                                                Yes, I do have components in other scenes in the swf... I'm using two NumericStepper components in the previous scene to allow the user to determine the number of rows and columns to divide the jigsaw into (and YES, it works!)
                                                Does this make a difference to the effectiveness of this proposed code? Does this explain why the 'bringToFront' call doesn't now work?
                                                On your second point the mystery is that in a previous version the same code re. _droptarget worked perfectly, although it was written for each movieclip rather than centrally when the clips were created. That shouldn't make any difference should it? The clips snapped into place (or back into place) faultlessly.
                                                I'll try the hitTest idea and see if I can do a work-around using that.
                                                If the worst comes to the worst is it possible to pass the cut-up images from the new movie clips in this well programmed sequence back to populate my previous but known working (but less neat) version?
                                                Regards
                                                Rick
                                                • 21. Re: Cutting up an image
                                                  kglad Adobe Community Professional & MVP
                                                  yes, using components causes problems with depths. you need to use the depth manager component to assign depths or manually control the depths. you can't use getNextHighestDepth().

                                                  you can just initialize a depth variable (say, dep) and use dep++ everytime you assign a depth whether in attachMovie(), createEmptyMovieClip() or swapDepths() or anywhere else.

                                                  and worse comes to worse, i'll just tell you the code to use.